How to Add Left and Right Content for the Epik Theme Widgets

If you take a look at the Epik demo you’ll notice in many places we have content on the left and right side.

There are a couple ways you can add content to the left and right.

The first way you can do this is by using the standard “alignleft” and “alignright” css class. These are usually already inside most Genesis Child themes by default. Here is an example of it in action –

<div class="alignleft">This content will show up on the left side.</div> Everything in between the opening <div> and closing </div> is your content.

Here is how to use the alignright for the right side.

<div class="alignright">This content will show up on the right side.</div>

On the demo we are using a couple classes that we created called “feature-left” and “feature-right“. They both work in similar ways as the alignleft and alignright classes, but we’ve added a bit more css so it will be more responsive when viewed on mobile devices.

Here is the exact code for the above image –

(hit reload if the github code doesn’t show)

The “feature-margin” class can be added if you want more space at the top. You’ll notice the feature-left content has more space at the top, and this is because the feature-margin class was added. You can add this to either side and it will work. By default, the top margin is 80px. This can be adjusted in your css if needed.

All of this is done by adding a Text widget to a widget area, and then adding your code inside of it.