Welcome to Day 70 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-100-Pricing-Tables-Layout-Pack-mockup

In this blog post we’ve got yet another fantastic Divi Layout Kit to give away. This time, we’re giving away a pricing table layout kit created almost exclusively with text modules. The idea being to show what is possible when you decide to get creative with how you use different modules to achieve your end goal–regardless of whether or not they were designed specifically for that purpose in the first place. And, of course, to share some great looking pricing tables. Check it out!

Downloading & Using The Pricing Tables Layout Kit

To use the Free Divi Pricing Tables Layout Kit on your own Divi website you will first need to download it using the button below. Next, locate the file divi-100-pricing-tables-layout-kit.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 the All.json file or any of the individual layouts you want. Then 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 your new Divi Resume Pages Layout Pack on any builder powered page by going to Load From Library > Add From Library. You can also load the individual sections by using the Load From Library option in the in-line section controls.

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.

Pricing Table Layouts

Before creating these pricing tables I did a good bit of research on the UI of high performing pricing tables used by big brands. Once I felt like I had a good idea of what is working out there, I decided to challenge myself to create these tables in a slightly unconventional way. By using Text modules I was able to simplify my approach and in some cases style each individual element more easily. Of course these are not meant to replace our existing pricing table modules, but to be used if and when you might prefer this approach on a given project.

Pricing Table Layout 01

For this layout I chose to draw attention to the pricing tables by giving them each a bold background, depending on pricing and copy to guide the potential buyers choice.

Divi-100-Pricing-Tables-Layout-Pack-01

pricing table layout 01

Pricing Table Layout 02

In this layout I’ve removed the background colors of the first layout and assigned them to the title text. This places the emphasis on the prices themselves as the biggest, boldest element of each table.

Divi-100-Pricing-Tables-Layout-Pack-02

pricing table layout 02

Pricing Table Layout 03

In this pricing table layout I’ve “highlighted” our center option by giving it a white background and the others none. This will, ideally, encourage potential customers to choose that option.

Divi-100-Pricing-Tables-Layout-Pack-03

pricing table layout 03

Pricing Table Layout 04

In this layout we’ve got a nice subtle variation on the first two designs that maintains the overall palette in a different way.

Divi-100-Pricing-Tables-Layout-Pack-04

pricing table layout 04

Tomorrow: How to Get Your Free Divi T-Shirt

After the massive success of the last WordCamp/Divi Meetup we said we would be thinking of more ways to encourage and empower the Divi Community to gather, share, learn, and grow in person. Tomorrow I will be sharing with you some of the first steps we’re taking in that direction and how you can get involved.

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-2-6-logo

Divi 100 Day 70

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 Free Divi Downloads: Creative Pricing Tables Layout Kit appeared first on Elegant Themes Blog.

View @ ElegantThemes

Leave a Reply