Some of my most popular tutorials have been the series on Sectional Borders and separators.

My friend Leisa Cooper over at www.stanleywebsites.com is a fellow designer and Divi enthusiast who recently approached me about this little tweak in Divi. Since she wasn’t the first one to ask about it, I thought it was about time I share my tips on this one for all to enjoy.

This little tip will walk you through how I like to float an image between sections anywhere on your Divi pages.

 

016

Click Here To View Live Demo

 

Lets Get Started

 

First thing you need to do is create a section for the floating image. It should be placed in between the two sections you want to blend. In this first part lets add it just below the first section which I am using as a header section.

1. In your page builder go to Add Section

002

 

2. Open the Section Module Settings and give it the following CSS Class: logo-spacer-section.

   Be sure to change the top and bottom padding to 0 in the section settings and in the row settings!

 003

 

3. Now after you save the settings, insert a single column and then insert a Text Module.

 004

 

4. The Text Module settings open, go ahead and change the text orientation to center and insert your image/logo in the content area via the Add Media button.

 005

Don’t worry about the size of the image at this point. We will control that using CSS. The the image should have a transparent background.

 

5. Now you will give this Text Module the following CSS ID: logo-under-header

 006

The CSS for this specific ID is one is going to make the image slighter larger than the ones being used throughout the rest of the site because it is right under the header.

 

6. Now make a copy of this entire section so that we can use this in other places throughout the page

007

 

7. Open up the settings of the text module in the duplicate section and change the label to whatever you want and then change the CSS ID to: logo-spacer

008

The CSS for this specific ID is one is going to make the image slighter smaller than the one being used below the header.

 

8. Now drag this new section down the page between another two sections. Preferably between two sections with contrasting background colors.

009

Hint: You can drag sections around by grabbing the blue border of the section with your mouse and dragging it up or down

Hint 2: The background color of this section should match the background color of the section below it.

 

 9. Now you can make as many duplicates of this second section as necessary depending on the number of times you want to use it on your page.

 

 

The Magic of CSS

Now lets start to dazzle things up a bit with some CSS.

If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not, go to Appearance>Divi Theme Options>ePanel>Custom CSS (which is located at the bottom of the ePanel)

Add this CSS.


/*------------------------------------------------*/
/*-------[Float and Image Between Sections]-------*/
/*------------------------------------------------*/

/* remove all padding in section */
	.logo-spacer-section { padding:0px; margin:0 0 -40px 0;}
	.logo-spacer-section .et_pb_row, .logo-spacer-section .et_pb_section  { padding: 0px;}

/* logo under header */
	#logo-under-header {padding: 0px; margin: 0px;}
	#logo-under-header img {margin-top:-105px; width: 150px; z-index: 1; position: relative;}

/* logo under standard sections */
	#logo-spacer {padding: 0px; margin: 0px;}
	#logo-spacer img {margin-top: -55px; width: 100px; z-index: 1; position: relative;}

 

And that’s it.  Remember now you can just duplicate that second section and move the copies around between different sections through out the page. And below is a tip to help you easily add these sections to other pages throughout your website. Have fun!

 

You Can See My Live Example Here

 


 

Tip:

Here is a tip to easily add these sections to other pages.

1. Save this page you have been working on as a layout and Update page

011

2. Add a new page, activate Page Builder and Load the Layout you just saved.

012

 

3. Delete all the sections except for the two that you just created.

013

 

4. Save this page as a Layout

014

 

5. Leave this page without saving and delete the draft. Now when you are working on other pages, you can add these sections as a layout. Just remember to uncheck “Replace the existing content with loaded layout” so that you don’t lose any existing work on those pages.

015

 

 


Well that’s all for now. I hope you find this article useful.


DISCLOSURE: I may be an affiliate for some of the products that I recommend. If you purchase those items through my links I will earn a commission which helps cover the cost of the free resources we provide. If you ever have any questions about my affiliations, please do not hesitate to ask..

Pin It on Pinterest

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!