Bouquet is a Divi Layout designed for florists, though there are other suitable business applications. I have chosen a colour palette inspired by the hero image and as always these can be easily changed to match your brand. I have used premium images from depositphotos.com and shutterstock.com. I have included a list of the images used in this layout should you wish to use them for your own site. The download includes placeholder images with the recommended image sizes to make it easy for you to set up.

 

This Layout uses WooCommerce and the shop module, with some styling to match the layout. Use the layout as a starting point for a larger site. Clone modules and reuse them on new pages to maintain a consistent look across your website.

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. Changing the Customiser Settings
  3. Changing the Theme Option Settings
  4. Add the Shop Content
  5. Adding CSS
  6. 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:

  • bouquet-page-layout.json
  • bouquet-customiser-setting.json
  • bouquet-products-layout.xml
  • 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 bouquet-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 > Bouquet 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 Bouquet Layout and save.

Changing the Customiser Settings

To make the layout look the same as the demo, you can import the bouquet-customizer-settings.

 

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

 

I have also outlined the changes to the customiser settings for your reference and so that you can easily adapt the layout to suit your needs. To begin, navigate to the Customiser Settings to make changes under General Settings, Header & Navigation and Footer settings

General Settings

Navigate to General Settings > Layout Settings > Theme Accent Color > change the color to #5a2f42

 

Still under General Settings, navigate to Layout Settings > Typography > Body Link Colour > change the colour to #5a2f42.  Then change the Body Text Colour and the Header Text colour to #666666. Finally, change the Header Font to Oswald and the Body Font to Lato

 

Header & Navigation

Next, navigate to Header & Navigation > Header Format and change Header Style to Centred

Then navigate to Header & Navigation > Primary Menu Bar and make the following changes:

Text Colour to #666666

Active Link Colour to #5a2f42

Background Colour to #ffffff

Dropdown Menu Background Colour to #ffffff

Dropdown Menu Line Colour to #5a2f42

Dropdown Menu Text Colour to#666666

 

Still under Header & Navigation, navigate to Secondary Menu Bar and make the following changes:
Backgound Colour to #5a2f42
Text Colour to #ffffff
Dropdown Menu Background Colour to #5a2f42
Dropdown Menu Text Colour to #ffffff

Next, under Header & Navigation, navigate to Fixed Navigation Settings and make the following changes:
Primary Menu Backgournd Colour to #fffff 
Secondary Menu Background Colour #a1949b
Primary Menu Link Colour #5a2f42
Secondary Menu Link Colour #ffffff
Active Primary Menu Link Colour #5a2f42

Finally, navigate to Mobile Styles > Mobile Menu and Change the Text Colour to #666666 and the Background Colour to #ffffff

 

Navigate to Buttons > Button Style and make the following changes:
Text Colour to #5a2f42
Background Colour to rgba (255, 255, 255, 0)
Border Colour to #5a2f42
Set Border Radius to 0
Add Button Icon to No

Navigate to Buttons > Button Hover Style and make the following changes:
Text Colour to #8b6479
Background Colour to rgba (255, 255, 255, 0)
Border Colour to rgba (255, 255, 255, 0)
Set Border Radius to 0

Footer

Navigate to Footer > Bottom Bar > Background Colour and change to #8b6479. Then change Text Colour and Social Icon to #ffffff

 

Save changes

Shop

To add the shop content, locate the bouquet-products-layouts.xml in the Bouquet Layout Pack. Navigate to your WordPress Dashboard > Tools > Import. If the WordPress Importer plugin is not installed, you will be presented with the option to Install Now. Select this and once installed, select Run Importer. 

 

On the Import WordPress, select Choose File > bouquet-products-layouts.xml > Upload File and Import. Next, Assign Authors. Finally, under Import Attachments, select Download and import file attachments and Submit. 

 

Now the products are loaded, except for the images, which can be done manually. First locate the placeholder-image-800x800.png in the Bouquet Layout Pack and upload it to your WordPress library. Then navigate to the Products under WooCommerce in the Dashboard Menu and add the images.

Theme Option Settings

Now navigate to Divi > Divi Options > disable the Fxed Navigation and then enable the Back To the Top Button and Smooth Scrolling.

 

To add the following CSS to the Custom CSS box:

/*—–Bouquet CSS—–*/

/*—–Font styles——*/
h2 {
font-family: ‘Meddon’, cursive;
}

/*—–Menu Styles—–*/
/*Remove box shadow from header*/
#main-header {
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}

#main-header.et-fixed-header {
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}

.et_mobile_menu {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

/*—–Text Box Styles—–*/
.jc-text-box.et_pb_text.et_pb_module {
padding: 100px 50px;
}

/*——Style the Optin Form——*/
/*—–Hides the surname field—–*/
.et_pb_newsletter_form p:nth-child(3) {
display: none;
}

/*—–Add icons before contact info——*/
p.jc-phone:before {
font-family: ‘ETModules’;
content: “\e090 “;
color: #5a2f42;
}
p.jc-email:before {
font-family: ‘ETModules’;
content: “\e076”;
color: #5a2f42;
}
p.jc-address:before {
font-family: ‘ETModules’;
content: “\e074”;
color: #5a2f42;
}
p.jc-hours:before {
font-family: ‘ETModules’;
content: “\e06b “;
color: #5a2f42;
}

/*—–WooCommerce Sale Label—–*/
.woocommerce span.onsale, .woocommerce-page span.onsale, .woocommerce ul.products li.product .onsale, .woocommerce-page ul.products li.product .onsale {
background: #5a2f42 !important ;
border-radius: 0 !important ;
}
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
background-color: #ffffff !important;
}

/*—–Smaller Screens—–*/
@media only screen and (max-width: 1265px) and (min-width: 981px){
.jc-text-box.et_pb_text.et_pb_module {
padding: 20px !important;
}
a.et_pb_promo_button.et_pb_button {
font-size: 20px !important;
}
.jc-contact-header.et_pb_text.et_pb_module {
width: 250px;
}
}
@media only screen and (max-width: 980px) {
.jc-text-box.et_pb_text.et_pb_module {
padding: 20px !important;
}
.jc-text-box h1, h2 {
text-align: center;
}
}

Now navigate to the purple menu and select Integrations > Enable header code and then add the following to embed the Google font Meddon into your site:

<link href=”https://fonts.googleapis.com/css?family=Meddon” rel=”stylesheet”>

Select Save Changes.

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 #shop. In the Navigation Label > type Shop. Repeat this for Services 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.