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
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
- 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
- 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.