[ad_1]
As I mentioned a few days ago with my post on how to add a floating action button to your site using the Divi Code Module, I’ve been creating more pens on Codepen.io for use with Divi–both with Code Module for single posts or pages as well as Divi’s theme options for site-wide implementation. Today I am happy to share another one, based on a design element of Elegant Themes’ own website: the slide-in top bar ad.
Now of course there are lots of plugins out there that can do this same thing but I like to avoid plugin bloat if possible if something can be done with a simple snippet instead. So with that said, let’s get into it!
Concept & Inspiration
The concept and inspiration for this came from the slide-in top bar we used right here on Elegant Themes following the launch of Divi 3.0 to draw more attention to our new Divi Theme page. It worked wonderfully for us and so I thought I’d share a version with the entire community that doesn’t require a plugin–just a simple code snippet!
Refresher: How the Code Generator Works
As in my previous most recent post, today we will be using a codepen generator I created for the Divi Community. What this code generator does is compile the code from a given codepen and export a single block of code that will run properly inside the Divi Code Module.
The mechanics of using it couldn’t be easier. All you have to do it copy the codepen url you’ve created (or that someone else has created for use within Divi) and paste it into the space at the field at the top of the generator. Then click the blue “Generate” button.
This will populate the text box below with a block of code for use inside the Divi Code Module. You will also notice that the blue button now says “Copy Code”. Click it again to copy the compiled code into your clipboard for easy pasting into your desired Divi Code Module.
How to Create a Slide-in Top Bar Ad with the Divi Code Module
Subscribe To Our Youtube Channel
To add the codepen above to your Divi website on a single post or page, do the following:
First, navigate to the pen on codepen.io. Make sure you are logged in there. If you do not have an account, go ahead and create a free account (it only takes a few seconds).
When you are logged in and on the page for the above pen press “command + s” to save it. This will automatically create a duplicate of the pen under your account. This is the pen you will edit and then compile.
Now, locate the following line of html and replace the text with your message.
<div class="at-banner__text">Hey friend, check out my <b>new and improved</b> blog!</div>
Next, locate this line of html and change the link and text with your own.
<a class="at-banner__button" href="https://andytran.me">VIEW BLOG</a> </div>
When your changes are finished, save the pen again. Then, copy the pen’s url and paste it into the code generator as shown above. Finally, copy that code to you clipboard so you can paste it into your Divi website.
Now navigate to the post or page you’d like this banner to be on. Add a code module into the first standard section of your page.
Paste the code block into the content section of that code module and save and exit it.
Then, update your page and take a look at the frontend of your website. It should now hove a banner ad at the top that slides-in when the page loads.
By using the code module in this way you will be able to add a banner to a single page or post at a time. This is useful if you want to only have the banner appear on certain pages or with different messages on different pages.
If you want to have the same banner appear on all pages of your website, follow the instructions in the section below.
How to Add the Slide-in Top Bar Ad Site-wide
If you’d like your banner to appear on all of your pages at the same time, navigate in your WordPress admin to Divi > Theme Options > Integration. Scroll down to the text box labeled “Add code to the of your blog”. Paste your compiled code there and save changes. Your banner will now appear on all of your Divi website’s pages when they load.
Make Sure You Come Back For More!
Well that’s all for this particular tutorial. I hope you’re enjoying these tips on how to get more out of the Divi Code Module. My hope is that these posts and my code generator will begin to foster sharing of code snippets and scripts among the Divi Community similar to what we’ve seen with layouts and child themes.
I’d also like to repeat something I said in my previous post about using other pens with the codepen code generator I created:
“If you’re interested in creating a pen that works with Divi and can be easily added into the code module using the generator, simple create your pens keeping in mind potential CSS conflicts that could be caused with Divi’s styles. For example, in the pen above I used the `at-` prefix to prevent any conflicts that might arise.”
So just keep that in mind as you use the generator for yourself or create pens on codepen to share with other Divi users.
Until next time, feel free to leave me some requests in the comments below!
Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!
[ad_2]
Source link
