Sometimes, when you use multiple apps on your website, they will confuse one another when they are loaded and cause one or more app features not to populate or to populate in an undesirable way. To prevent any overlap between your apps or errors from occurring, you may want to consider using an “empty div” to “anchor” your LimeSpot app features.
In this article:
Why use an Empty Div?
Step-by-Step Guide
Conclusion
Why use an Empty Div?
As website content changes, particularly with the addition of promotional blocks or banners, the position of the LimeSpot Recommendation Box may shift. By allocating a dedicated space for the Recommendation Box using an empty `div,` the position will remain constant regardless of other content changes.
Step-by-Step Guide
Step 1: Identify the Desired Location
Determine where you want the LimeSpot Recommendation Box to appear on your webpage. Common placements include below the header, between content sections, or near the footer.
Step 2: Open the Website's HTML File
Locate and open the HTML file where you want the LimeSpot Recommendation Box to be displayed. Typically, this is an index.html or a similar file, depending on your website's structure.
Step 3: Add an Empty Div
Insert an empty `div` element in the HTML file at the location identified in Step 1. Assign it a unique ID so that it can be specifically targeted. For example:
```html
<div id="limespot-recommendation-box"></div>
```
Step 4: Add CSS Styling (Optional)
Optionally, you can add CSS styling to the `div` to control its size, position, margin, padding, etc. This can be done within a CSS file or inline within the HTML. For example:
```css
#limespot-recommendation-box {
height: 300px;
width: 100%;
margin: 20px 0;
}
```
Step 5: Configure LimeSpot
Log in to your LimeSpot admin panel and configure your Recommendation Box to target the `div` you just created. Use the unique ID assigned to the `div` as the target.
To do this:
Open the webpage in LimeSpot's Designer
Click on the recommendation box you want to lock into place
Choose "Placement"
Place your unique div in [where?]
Step 6: Test Your Website
After saving changes to your HTML file and LimeSpot configuration, check your website to make sure the LimeSpot Recommendation Box appears in the desired location and does not shift when new promotional blocks are added.
Conclusion
By using an empty `div` element, you can create a dedicated space for the LimeSpot Recommendation Box, ensuring its position remains consistent. This prevents shifting and maintains a more organized and professional appearance for your website.