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.

floation contact section

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

Spacing

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

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

Visibility

Then set the overflows to visible.

  • Horizontal and vertical overflow: visible

Position

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.

Sizing

Open the row settings and adjust the sizing as follows.

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

Visibility

Click on the advanced tab and then adjust the overflows.

  • Horizontal and vertical overflow: visible

Position

Complete the row settings by modifying the position settings.

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

Column 1 Settings

Background

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

  • Solid Color: # 25274d

Spacing

Adjust the spacing settings next.

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

Border

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.

  • Scroll Transform Effects: Vertical Motion
  • Set Vertical Motion / Desktop
    • Starting Offset: 4
    • Mid Offset: 0 (at 50%)
    • Ending Offset: -4
  • 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

Position

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
  • Set vertical movement / tablet and phone
    • Start offset: 0
    • Average offset: 0 (to 50%)
    • End offset: -2
  • Motion Effect Trigger: Element Top

Add a text module to column 1

Contents

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

Contents

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.

  • Use spam protection service: Yes
  • Service provider: ReCaptcha
  • Select an 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

Button

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

Sizing

We then modify the sizing parameters.

  • Width: 100%
  • Max width: 100%

Spacing

We will also add top padding.

  • Top padding: 4vw

Frontier

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

Contents

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

Link

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.

  • Color: yellow # ffd868
  • Icon font size
    • Desktop and tablet: 31 px
    • Phone: 26 px

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.

Alignment

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

  • Module alignment: left

Sizing

Then adjust the sizing of the module.

  • Width: 100%

Spacing

Also, clear all default padding.

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

Frontier

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

Contents

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:

context

Change the background color of the module.

  • Color: Dark Blue # 25274d

Text

Switch to the design tab and style the text.

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

Spacing

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

Frontier

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 comment

echo "";