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 divi-100-small-business-layout-pack-by-olga-summerhayes.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 one of the individual 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.
Subscribe To Download For Free
Download The Layout Pack
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.
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!
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.