2. To add a Header banner consider adding a hero section, which allows to add a Hero banner to the header of a Static Page: How To Add A Hero Section On Static Pages
Adding Banners to a Specific Static Page:
To display different custom banners on a Header banner, Below Header banner and Footer Banner, it is necessary to create custom widgets that will display in those specific locations.
In order to check on which page the banners will display and to select which banners, custom logic to each of those widgets will be required. Please bear in mind that this is a more advanced set up and that the help of a developer might be necessary.
If banners have already been placed on Banner Ad Design section, and want to hide these on this specific page follow the instructions on this article: Hiding Banner Ads On a Specific Static Page
Method 1: Turn a Custom Image into Banner Ad:
Add a Banner Below The H1 and H2 Section:
Since it is only possible to add a Banner in the Header section using the Banner Ad Design tool, we recommend adding an image to the top of the page, this will display the banner below the H1 and H2, but on top of the rest of the page content.
1. Upload the image to be displayed as a banner. The recommended size for this banner is 970 x 90 pixels:
2. Insert the image before the text:
Click HERE to learn more about how to add an image on a web page.
3. Click on the image to resize it to be 970px wide:
4. Center the image:
5. Click on the image to add a link:
The same logic will apply to the footer. However the banner image needs to be added at the bottom of the page content. Simply scroll all the way down and add an image at the bottom of the page. Then follow the steps 3, 4 & 5 explained above.
This is what the page will look like:
Method 2: Use a Custom Widget
Banner Ads are composed of an image and a link. This is a simplified code to display a banner:
<a href=“enter-the-full-url-link”> <img src=“enter-the-full-image-filename”> </a>
The href section is where the link needs to be added, in this case, the banner will be linked to https://www.brilliantdirectories.com. That looks like this:
<a href=“https://www.brilliantdirectories.com”>
<img src=“enter-the-full-image-filename”>
</a>
In order to add the image, first upload the file to the Media Manager. Here is a helpful article to learn more: Content » Media Manager Upload Image.
Once the image has been uploaded, right-click on it and select Copy URL. We recommend to copy only the relative path, which is the link information after the .com This will avoid conflicts if the site's domain gets changed:
Add the relative path to the code structure, which in this example would look like this:
<a href=“https://www.brilliantdirectories.com”>
<img src=“images/bd-banner.png”>
</a>
With this code, create a custom widget. For this example, a custom widget called Banner Ad for a specific page was added.
Copy the shortcode to add this widget to the Static Page. The image can be used as a below H1 H2 , footer or sidebar banner.
Add a Custom Sidebar Banner:
Create a custom sidebar, and simply add the new widget to this sidebar in the Toolbox » Sidebar Manager
Add a Footer Banner using the Footer Code Section:
Adding the widget to the Footer section will allow to keep this banner using the full width of the page in case it's add it in a sidebar.
This is what a page would look like with the 3 banners in place:
It's possible to add the banner code directly to the Advanced tab >> Footer Content or create a custom widget and then add that widget:
Adding just the widget or the code without any attribute or CSS class will display the banner left-aligned by default.
To center align this banner, put it inside a div like this:
<div align="center">
[widget=Footer Banner for specific page]
</div>
FINAL NOTE: Remember to use the recommended image sizes for each of these banners:
- Header and Footer: Recommended Max. Width 970 Pixels
- Sidebar: Recommended Max. Width 360 Pixels
