Welcome to Day 42 of our Divi 100 Marathon. Keep tuning in for 100 days in a row of awesome Divi resources as we count down to the amazing release of Divi 3.0 on the final day of the series!


divi-contact-page-layout-pack-01

Today we’ve got a great freebie for you in the shape of our new Divi Contact Page Layout Pack. Contact pages are easy to get lazy on. Everyone has them and yet not everyone gives them the design love and attention they deserve. This layout pack will help you jumpstart an above average contact page on any Divi website.

Downloading & Using The Free Divi Contact Page Layout Pack

To use the Free Divi Contact Page Layout Pack on your own Divi website you will first need to download it using the button below. Next, locate the file divi-100-contact-page-layout-pack.zip in your downloads folder and unzip it. Then, navigate in your WordPress admin to Divi > Divi Library and click the “Import & Export” button at the top of the page.

When the portability modal pops up go to the import tab. Click the “choose file” button and select either the All.json file in your recently unzipped folder or any one of the individual Contact Page Layouts. Once your desired json file has been selected click the blue “Import Divi Builder Layout” button and wait for the import to complete.

Once the import has finished you will now have the ability to load these contact page layouts on any builder powered page or post by going to Load From Library > Add From Library.

Download The Layout Pack

All photos courtesy of the generous authors on Unsplash.com via the Unsplash License. Layout Packs are released under the GPL, which means you can use them for free for both personal and commercial projects! By using ElegantThemes.com and our products you agree to our Terms of Service.

5 Stylish Contact Pages

In this layout pack we’ve got five fantastic contact page layouts perfect for any website. All you need is a bit of imagination and your unique content to make them all your own.

Contact Page 01

Our first contact page layout is along the lines of what many would consider a “classic” contact page design. It’s got all the usual elements–all the way down to a map and of course the contact form itself.

divi-contact-page-layout-pack-01

divi-contact-page-layout-pack-01_01

Contact Page 02

As you’ll see throughout these designs, not all contact pages call for contact forms. In fact, sometimes, a simple email address or phone number is preferable. If that’s the case for you then you might like to start you contact page design with this layout.

divi-contact-page-layout-pack-02

divi-contact-page-layout-pack-02_02

Contact Page 03

In this design we take the previous design and simplify as much as possible, eliminating the whole middle section and re-arranging the content accordingly.

divi-contact-page-layout-pack-03

divi-contact-page-layout-pack-03_03

Contact Page 04

In this design we bring back the classic design elements of contact pages from the first design and re-arrange them for variety.

divi-contact-page-layout-pack-04

divi-contact-page-layout-pack-04_04

Contact Page 05

Finally we have our fifth design which is the simplest iteration of the bunch. Simple, but effective.

divi-contact-page-layout-pack-05

divi-contact-page-layout-pack-05_05

Tomorrow: WordCamp Orange County Recap

If you’ve been following along with our social feeds or the various Divi facebook groups then you’ll know that over the weekend a fairly large group of us met up at WordCamp Orange County and had a complete blast. Tomorrow we’ll be sharing an event recap with lots of behind the scenes detail on everything we got up to.

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

.divi_cta{background-color: #8f43ee; color: #fff; font-size: 20px; font-weight: bold; padding: 20px; text-align: center; display: block; text-decoration: none; border-radius: 4px;}.divi_cta:hover{text-decoration:none;background-color:#7d37d6;}.divi_cta_red{background-color:#db1c1c;}.divi_cta_red:hover{background-color:#c51a1a;}

divi-2-6-logo

Divi 100 Day 41

The Countdown To Divi 3.0

This post is part of our Divi 100 marathon. Follow along as we post free Divi resources for 100 days in a row! This 100-day countdown will end with the game-changing release of Divi 3.0, including our brand new visual editor built from the ground up using React. Divi 3.0 will change the way you build websites with the Divi Builder forever!
Let the countdown begin.

jQuery(document).ready(function(){jQuery(“#DIV_TO_PLACE_COUNTDOWN”).jCountdown({timeText:”2016/9/7 7:00:00″,timeZone:-8,style:”slide”,color:”black”,width:0,textGroupSpace:15,textSpace:0,reflection:false,reflectionOpacity:10,reflectionBlur:0,dayTextNumber:1,displayDay:true,displayHour:true,displayMinute:true,displaySecond:true,displayLabel:true});});Learn More About Divi 3.0

.section-header{width: 520px; padding: 50px 40px 20px; margin: 100px 0; text-align: center; color: #fff !important; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #6c2eb9; background-image: url(http://cdn.elegantthemes.com/blog/wp-content/uploads/2016/04/divi-100.jpg); background-repeat: no-repeat;}.section-header h2{margin-top: 0 !important; color: #fff;}.section-header strong{color:#fff;}.section-header img{margin-bottom: 10px;}.section-header:after{position: absolute; bottom: -16px; left: 50%; margin-left: -16px; width: 32px; height: 32px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); content:”; background: #6c2eb9;}.divi-demo-link{border-bottom: 4px solid #00d5b5; margin-top: 15px; border-radius: 4px; transition: all.5s ease-in-out; display: block; width: 100%; padding: 10px 0; text-transform: uppercase; font-weight: bold; text-align: center; color: #1C695D; background-color: #00efcb;}.divi-demo-link:hover{text-decoration: none; background-color: #2CFFDF;}.divi-download-link{text-align: center; font-size: 18px; border-radius: 4px; padding: 20px; color: #fff; display: block; margin: 10px 0 10px; background-color: #7e3bd0; transition: background .5s; text-decoration: none; font-weight: bold;}.divi-download-link:hover{background-color: #C04BDE; text-decoration: none;}hr{border-style: solid; margin: 0 0 40px 0; border: 1px solid #EAEBEB;}

The post Download The Free Divi Contact Pages Layout Pack appeared first on Elegant Themes Blog.

View @ ElegantThemes

Leave a Reply