Get the Free Small Business Divi Layout Pack by Olga Summerhayes

How to Change WordPress Multisite to Sub-Directories or Sub-Domains Without Errors
September 3, 2016
Post Status: GoDaddy has acquired ManageWP
September 3, 2016
Show all

Welcome to Day 95 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!

One of my favorite features in the Divi theme is layouts. Being able to import/export a whole page or just a single module makes a web designer’s job so much easier. In today’s post I am happy to share a layout I created that can be used for a small brick-and-mortar business.

A main purpose of a small business website is to provide general information about the business, showing their services, the location and contact details. The call to action is also very important. When people access your website the call to action will “guide” them to where your client needs them. For business without an online shop the main call to action will be to have customers contact them or to visit their premises.

In this layout, I have included 4 custom pages that can be used for most small business, giving them a good foundation for their online presence. You can easily expand the layouts by cloning rows or sections; giving you more services or additional testimonials for example.


Downloading & Using the Free Small Business Divi Layout Pack by Olga Summerhayes


To use the Free Small Business Divi Layout Pack by Olga Summerhayes on your own Divi website you will first need to download it using the button below. Next, locate the file 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 one of the individual portfolio layouts you would like. 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 Small Business Layout(s) on any builder powered page by going to Load From Library > Add From Library.

There is however, one additional thing you will need to do if you want to get your version to look exactly like mine. The background images in the hero sections of this layout pack have a textured overlay. The css code for this overlay is already added in the section. To activate it, all you need to do is the following:

Step 1: Locate the image file texture.png in your unzipped layout pack’s folder. Upload this file to your Media Library and then copy the image URL.

Step 2: Open the page with the hero section you’d like to add the textured overlay to. In the page builder open the Section Module Settings of that section and go to the Custom CSS tab. Scroll down to the field “After”. You will see the css code for the overlay already in there. All you have to do now is replace the URL I have in there with your texture image URL.


Download The Layout Pack

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

The Small Business Divi Layout Pack by Olga Summerhayes

This Small Business layout pack includes 4 pages: Home, Services, About and Contact. I have used the Construction industry as an example. You can modify this layout pack to suit different types of business simply by replacing images and text. To make this layout reflect your business branding you will need to replace the yellow coloured fonts and icons with your own brand colours and fonts etc.


Divi Small Business Home Page


Divi Small Business About Page


Divi Small Business Services Page


Divi Small Business Contact Page

To see the demo of this layout pack, click here.

Tomorrow: Learn Five Fun New Ways to Style Divi’s Blurb Module

In tomorrow’s post Josh Hall will be showing you five fun new ways to style Divi’s blurb module. This is a versatile module that you can use in a wide variety of instances. With this post you’ll be equipped to keep things interesting each time you do. See you there!

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 100 Day 95

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(; 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;}hr{border-style: solid; margin: 0 0 40px 0; border: 1px solid #EAEBEB;}

The post Get the Free Small Business Divi Layout Pack by Olga Summerhayes appeared first on Elegant Themes Blog.

View @ ElegantThemes

Skip to toolbar