Divi 5 makes it easy to build contact sections that look polished, professional, and able for exact inquiries. In this free pack, you will find 7 Styled Contact Sections, each designed to lend a hand visitors reach out in short using clear layouts, strong typography, and stylish form styling. Drop one onto any internet web page, transfer the details, and you are ready to transport. No additional setup required.
Preview
Proper right here’s a to hand information a coarse take a look in any respect 7 Styled Contact Sections built-in throughout the pack. The download is further down the publish.
Download 7 Contact Sections For Divi 5
Get all 7 sections without cost. Import them into your Divi Library and add them to any internet web page throughout the Visual Builder.
@media highest visual display unit and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:quicker than { border-top-color: #ffffff !essential; border-left-color: transparent !essential; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !essential; border-left-color: transparent !essential; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { shade: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:quicker than { background: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !essential } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 strong { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p strong, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form input, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !essential;}
Download For Unfastened
Join the Divi Newsletter and we will e-mail you a reproduction of the ultimate Divi Landing Internet web page Construction Pack, plus tons of various superb and free Divi assets, pointers and pointers. Follow along and you will be a Divi grab in no time. If you’re already subscribed simply kind in your e-mail take care of beneath and click on on download to get admission to the layout pack.
It’s good to have successfully subscribed. Please check your e-mail take care of to make sure your subscription and get get admission to to free weekly Divi layout packs!
What’s Integrated (8 Exports)
After you bought and unzip the record, you’ll find 7 Styled Contact Section exports, plus 1 record containing all designs.
Styled Contact Section 1 to 7 (7) → Seven styled contact phase layouts that incorporates fashionable form styling, clear contact knowledge blocks, and flexible layouts for quick internet web page development.
Styled Contact Sections (All) → Imports all designs for your Divi Library at once.
How To Use The Contact Sections
Keep your download folder to hand. We’ll import, then add a work to a internet web page.
1. Import Sections Into The Divi Library
Transfer to Divi → Divi Library. Click on on Import & Export at the height of your visual display unit.
Throughout the Import & Export Layouts modal, switch to the Import tab, then click on on Make a choice Report and make a choice your JSON.
Make a choice any Styled Contact Section JSON you wish to have to use, then click on on Import Divi Builder Layouts.
2. Add A Contact Section To Any Internet web page
Open a internet web page throughout the Visual Builder and add a brand spanking new Section.
Throughout the Insert Section modal, click on on Add From Library and make a choice a Contact Section layout.
In the end, click on on Use This Section.
3. Trade The Content material subject material
As quickly because the Section is on the internet web page, converting the placeholder content material subject material takes just a few clicks. Change the heading and supporting text to check your offer, location, or service area.
To interchange contact details (phone, e-mail, take care of, hours), click on on in an instant into the text modules and alternate the placeholder knowledge. If your layout includes a Contact Form Module, open the module settings and change the form fields, just right fortune message, and e-mail settings throughout the Content material subject material tab.
To change images, open the Image settings by way of navigating to the Content material subject material tab of that module. Click on on Image → Upload or make a choice an image from your Media Library.
For Background Images or Gradients, move to Section settings → Content material subject material tab → Background and drop in your private image or modify the Gradient Stops.
4. Adjust Sorts (Now not necessary)
You’ll be capable to merely have compatibility the ones sections for your logo by way of updating fonts, colors, spacing, and background treatments.
To change typography, open any Text or Heading Module and move to the Design tab. Amplify the Text or Heading dropdown menu to change the Heading Stage, Font, Font Style, Text Alignment, or Text Color.
To style the Contact Form Module, open the module settings and use the Design tab to keep an eye on field spacing, borders, point of interest sorts, and button styling so the form suits your logo.
Use Divi’s Construction settings to keep an eye on Flex properties, very similar to alignment and spacing, particularly when refining the layout of multi-column contact layouts on smaller displays.
Add subtle effects, very similar to hover states on buttons or subtle disclose animations, to stick the Section feeling polished without distracting from the form.
Tips For Environment friendly Contact Sections
Contact sections art work best possible when they actually really feel simple. Benefit from the ones speedy wins to take care of a clear, faithful, and easy layout.
Lead With A Clear Invitation
Use an immediate headline and a concise line of context so visitors know what to expect next. Make it obvious whether or not or now not the form is for quotes, bookings, give a boost to, or commonplace questions.
Offer A couple of Techniques To Achieve You
No longer everyone needs to fill out a type. Include a phone amount, e-mail, or take care of when it’s sensible, and keep those details scannable by way of maintaining spacing and using clear labels.
Keep Paperwork Fast
Ask only for what you wish to have. Fewer fields maximum incessantly indicate further submissions. If you wish to have further part, believe using a dropdown to trail inquiries as an alternative of together with multiple text inputs.
Plan For Mobile
Be sure that the form fields are easy to tap and that the text isn’t cramped. If your layout uses multiple columns, check the stacking order however reads naturally on smaller displays.
Make The CTA Glaring
Your post button should stand out and use clear language, very similar to “Send Message” or “Request A Quote.” For those who occur to come back with a second CTA (very similar to “Identify Now”), take care of a clear hierarchy with difference and spacing.
Get began Building In Divi 5 In recent times
The ones 7 Contact Sections come up with a handy guide a rough option to assemble fashionable contact areas for service pages, landing pages, and full contact pages. Trade the details, modify the styling, and you will have a cultured layout that fits your internet web site in minutes with Divi 5‘s Visual Builder.
The publish 7 Touch Sections For Divi 5 (Loose Obtain) appeared first on Chic Subject matters Weblog.
Contents
- 1 Preview
- 2 Download 7 Contact Sections For Divi 5
- 3 Download For Unfastened
- 4 It’s good to have successfully subscribed. Please check your e-mail take care of to make sure your subscription and get get admission to to free weekly Divi layout packs!
- 5 What’s Integrated (8 Exports)
- 6 How To Use The Contact Sections
- 7 Tips For Environment friendly Contact Sections
- 8 Get began Building In Divi 5 In recent times
- 9 Dove’s Newest Marketing campaign Takes On A Standard TikTok Clear out
- 10 Learn how to Create a Lead Magnet That In truth Converts (Step by way of Step)
- 11 Divi Product Highlight: Furniture Shop Divi WooCommerce Theme
0 Comments