Step 1: Create a custom website theme
In order to add web ads to your site's sidebar, you'll need to first create a custom website theme.
Step 2: Edit your _columns_2.html file
In order to add ads to the sidebar of your website, you'll need to edit the _columns_2.html file of your site's theme. This is the file that controls the contents and style of your site's sidebar for visitors who are not logged in.
Within that file, you'll need the code that creates the sidebar. The exact code and line number will vary depending on your theme. Once you have identified where in the code you'd like your ads to appear, you can add the code to generate them there.
When you've finished making changes, you can click "Save draft" to save a draft version of your new template. This will allow you to preview your changes before making them public.
Step 3: Update your _supporter_nav.html file
When your supporters are logged in to your nation, your sidebar will display a "supporter nav." This typically contains a menu allowing them to interact with your site in a personalized way, along with a number of more standard sidebar items. Its contents are controlled by your site's _supporter_nav.html file.
Within that file, you'll want to add the code to generate your ads — just as you did in your _columns_2.html file. Again, note that the _supporter_nav.html file will vary depending on your theme.
When you've finished editing, you can again save your changes as a draft. This will allow you to preview them before making them visible to the public.
Step 4: You're done
Once you've edited those two templates to include your ads and published the changes, you should be good to go!
Additional Notes
- To ensure that your ads to not inadvertently break your site's layout, ensure that they are not wider than the sidebar column in which you are placing them.
- For more information about customizing your website's theme, please read our theme documentation.
- If you need to revert your theme back to its default state (i.e., you'd like to undo changes that you've made), click the "Restore default" button at the bottom-right of the text editor.
- If you have any questions, please feel free to contact your organizer at [email protected].
Showing 12 reactions
Sign in with
Hines Digital
Certified Architect
Certified Expert
Hines Digital
Certified Architect
Certified Expert
Hines Digital
Certified Architect
Certified Expert
Hines Digital
Certified Architect
Certified Expert
{ assign ad_slugs = “pageslug1~pageslug2~pageslug3~pageslug4” | split: “~” }
{ if ad_slugs contains page.slug }
<a href=“”http://www.sponsorurl.com">http://www.sponsorurl.com" title=“Sponsor Name” target=“_blank”>
<img src=“”http://www.domain.com/sponsor_image.jpg">http://www.domain.com/sponsor_image.jpg" alt=“Sponsor Name”></a>
{ endif }
{ assign ad_slugs = "" }
Hines Digital
Certified Architect
Certified Expert
Hines Digital
Certified Architect
Certified Expert