Create a floating contact section with scrolling effect on Divi

floation contact section

Every website needs a contact section, but that doesn’t mean you have to go for a standard design. With Divi’s scroll effects, you can create a floating contact section that will stand out. Improve your user interaction with a vertical scrolling contact section layout that will invite visitors to interact with your contact form. In this article, we’ll show you how to create a full-width floating contact section that you can add to any page. You can even add it to the top of a site-wide footer with the Divi Theme Builder.

Create a floating contact section element structure

In this design, we’re going to be using a background image which is a representation on Google Map of the location you want to highlight. You can do this with Photoshop or any other image editor.

Add a new section

Now is the time to start creating the floating contact section with the Divi Builder! The first thing we’ll do is open a new or existing page and add a new section.

In the content tab, add the background of the map that you created in Photoshop.

  • Background image: your modified map


Next, customize the section spacing settings in the design tab.

  • Top and bottom margin: 50vh
  • Bottom padding: 0vw


Then set the overflows to visible.

  • Horizontal and vertical overflow: visible


Finally, set the Z index of the section to 10.

  • Z index: 10

Add a new row

Column structure

Now is the time to add a few things. First, add a row with 2 columns.


Open the row settings and adjust the sizing as follows.

  • Width
    • Office: 90%
    • Tablet and phone: 80%
  • Max width: 90%


Click on the advanced tab and then adjust the overflows.

  • Horizontal and vertical overflow: visible


Complete the row settings by modifying the position settings.

  • Position: Relative
  • Offset Origin: Top Left
  • Vertical Offset
    • Desktop: -8vw

Column 1 Settings


Before adding modules, we’ll need to style the individual columns. Add a background color to column 1.

  • Solid Color: # 25274d


Adjust the spacing settings next.

  • Left and Right Padding
    • Desktop: 3vw
    • Tablet and Phone: 6vw


Then, add some rounded corners to the border settings.

  • Rounded Corners: 10px all four corners

Scroll Effects

Last but not least, use some vertical motion in the scroll effects settings. This will help us create a floating effect.

  • Set Vertical Motion / Tablet and Phone
    • Starting Offset: 4
    • Mid Offset: 0 (at 40% and 60%)
    • End offset: -3
  • Trigger motion effect: middle of element

Column 2 settings


Now let’s move on to the parameters of the second column. Adjust the position parameters accordingly.

  • Position: Relative
  • Origin of the shift: top left
  • Vertical offset
    • Desktop: 25vw

Scroll Effects

We also add vertical movement to this column.

  • Scroll transform effects: vertical movement
  • Define vertical / desktop movement
    • Start offset: 2
    • Average offset: 0 (to 50%)
    • End offset: -2
  • Motion Effect Trigger: Element Top

Add a text module to column 1


It’s time to add modules, starting with a text module in column 1. Add any H2 content you want.

Title Text

Go to the design tab and style the H2 text as follows.

  • Title level: H2
  • Font: Palanquin Dark
  • Font weight: bold
  • Font Style: TT
  • Color: yellow # ffd868
  • Cut
    • Desktop: 5vw
    • Tablet: 10vw
    • Phone: 12vw
  • Letter spacing: 4px

Add a contact form module to column 1


Under the text module, add a contact form. These are the fields we use:

  • name
  • E-mail
  • Matter
  • Message

Spam Protection

Before styling the contact form module. activate spam protection and connect your ReCaptcha account.

The fields

Switch to the design tab and style the fields as follows.

  • Background Color: Dark Blue # 25274d
  • Text color: light gray # d1d1d1
  • Focus Background Color: Dark Blue # 25274d
  • Focus Text Color: Light Gray # d1d1d1
  • Font: Palanquin Style: TT
  • Text size
    • Desktop: 0.9vw
    • Tablet: 2vw
    • Phone: 3vw
  • Letter spacing: 1px


Next, style the button.

  • Custom styles: Yes
  • Text size: 20px
  • Text color: dark blue # 25274d
  • Background Color: Yellow # ffd868
  • Border Radius: 7px
  • Icon Color: Dark Blue # 25274d
  • Top margin: 5px


We then modify the sizing parameters.

  • Width: 100%
  • Max width: 100%


We will also add top padding.

  • Top padding: 4vw


Complete the module settings by customizing the border settings.

  • Entries with rounded corners: 6px at all four corners
  • Entries Border styles: all four sides
  • Entrance border-width: 2px
  • Entries Border color: yellow # ffd868

Add social media tracking module to column 2


Go to column 2 and add a social media module. Use all the social networks you need.


Before styling, add links to the corresponding networks.

Context of the article

Now open the first social network and change the background color.

  • Color: Dark Blue # 25274d

Element icon

In the design tab of the same element, change the icon settings as follows.

Item spacing

Then add a small margin to separate the icons from each other.

  • Right margin: 1vw

Copy and paste item styles

To style the remaining social networks, go back to the main content window and copy the element styles from the first icon. Then paste the element styles on the remaining social networks.


Switch to the main design tab and make sure the module is left aligned.

  • Module alignment: left


Then adjust the sizing of the module.

  • Width: 100%


Also, clear all default padding.

  • Top, bottom, left and right padding: 0vw


Finally, add rounded corners in the border settings. This will adjust the borders of all icons at once.

  • Rounded corners
    • Top left and right: 7 pixels
    • Bottom left and right: 0px

Read more: How to easily navigate between layers on Divi

Add text module to column 2


Under the social media module, add another text module. Add the content of your choice. We added two addresses, a phone number, and an email. Use bold on the title of each item in all capital letters.

  • Headquarters:
  • Point of sale :
  • Phone:
  • Email:


Change the background color of the module.

  • Color: Dark Blue # 25274d


Switch to the design tab and style the text.

  • Font: Palanquin
  • Color: yellow # ffd868
  • Size: 18px


Also add custom spacing values.

  • Top margin
    • Desktop: -60px
    • Tablet and phone: -50 pixels
  • Top, bottom, left, and right padding
    • Office: 3vw
    • Tablet: 6vw
    • Phone: 8vw


And complete the module by adding rounded corners in the border settings. That’s it!

  • Rounded corners: 10 pixels top right, bottom left, and bottom right.

To finish

Using the new Divi scrolling effects turns any standard layout into a nice design. By creating your background, you have more control over the appearance of the finished design.


For website maintenance service contact us.

Leave a Reply