Vintage is a feminine Divi layout designed for general business use. It consists of a soft pink colour palette that can easily be changed to suit your brand. The images are premium images, purchased from depositphotos.com. I have included a list of the reference numbers if you wish to purchase them for your own site. The download includes placeholder images with the recommended image sizes to make it easy for you to set up.

It is easy to add a shop, blog or any other pages and because Divi is so flexible you can clone, copy or hide modules. Duplicating them to a new page will allow you to maintain a consistent look across your website.

Updated 22 November 2017

So how do you get started?

The steps to set up the layout to make it look like the demo include the following:

  1. Installing the Layout
  2. Adding the Customiser Settings
  3. Menu Setup

 

Installing the Layout

First, you need to download the vintage-layout-pack.zip file. Locate the file in your downloads folder, unzip the layout pack and find the following files:

  • vintage-page-layout.json
  • vintage-customiser-setting.json
  • placeholder-images.zip
  • style.css

Then navigate to your WordPress dashboard and locate Divi > Divi Library and select Import & Export at the top of the page. When the portability pop-up appears, select Import > Choose File > select vintage-page-layout.json and Import Divi Builder Layouts.

Then, to ensure the installation goes smoothly, go to Setting > Permalinks > select Post Name and save changes.

Next, create a new page: make sure Use The Divi Builder is selected and then in the purple menu, select Load From Library > Add From Library > Vintage Page Layout > select Load and then Publish the page.

Then, to make sure the layout appears as your home page, navigate to Settings > Reading > select static page and the page containing the Vintage Layout and save.

 

Adding the Customiser Settings

To make the layout look the same as the demo, you can import the vintage-customiser-settings.json.

Open the Theme Customiser settings and select ­↑↓. When the portability pop-up appears, select Import > Choose File > select vintage-customiser-settings.json file and Import Divi Customiser Settings.

Please note the background image may not import with the customiser settings. If this happens you can manually import the placeholder image (included in the place-holder-image.zip) or add your own. Go to Theme Customiser > General Settings > Background and under Background Image and Select Image. Once in the Media library add your image and save the customiser setting.

Menu Setup

Navigate to Appearance > Menus > select a menu name and Create Menu. Then select the Home page and Add to menu.

Next, select Custom Links, in the URL > type #team. In the Navigation Label > type Team. Repeat this for Subscribe and Contact.

Under Menu Settings > Display Location > select Primary Menu. Then select Save Menu.

And that’s done!

I hope this layout is a useful addition to your web design resources.