Start Building

Once you have a clear idea about the blocks you will use, it’s time to get them together. Follow the next 4 steps to build your pages:

1. Create a new page

2. Use The Divi Builder

3. Click on Add from Library

4. Insert Blocks to your page

l~|icon_pencil-edit~|elegant-themes~|outline

Customize each block

After adding your blocks to your page/post, now you can go to the Theme Customizer and Visual Editor to start replacing images, text, and colors.

You can do the customization in the Divi Builder or in the Divi Visual Builder.

What Custom CSS Classes are we using?

Some of the blocks have specifics classes. If you want to know what classes are related to what module, follow these next steps:

1. Go to Module Settings

2. Go to the Advanced Tab

Here are the classes for Hero Blocks, these need to be placed in the SECTIONS SETTINGS (by default, they are):

hero_section1

hero_section2

hero_section3

Here are the classes for the Blurbs Blocks, these need to be placed in the SECTIONS SETTINGS (by default, they are):

blurbs1

blurbs2

Here are the classes for the Interactive Image Blocks, these need to be placed in the SECTIONS SETTINGS (by default, they are):

interactive_images1

interactive_images2

interactive_images3

Here are the classes for the Logos Blocks, these need to be placed in the SECTIONS SETTINGS (by default, they are):

logo1

logo2

logo3

Here are the classes for the Accordion Blocks, these need to be placed in the SECTIONS SETTINGS (by default, they are):

accordion1

accordion2

accordion3

Here are the classes for Tabs Blocks, these need to be placed in the SECTIONS SETTINGS (by default, they are):

tabs1

tabs2

tabs3

Here are the classes for the Blog Blocks, you need to have them in ROWS SETTINGS:

post_slider_content

post_grid_bottom

Here are the classes for the Team Blocks, these need to be placed in the SECTIONS SETTINGS (by default, they are):

team_one

team_two

team_three

Here are the classes for the Testimonials Blocks, these need to be placed in the SECTIONS SETTINGS (by default, they are):

testimonial_bottom

Here are the classes for the Pricing Blocks, needed for the Pricing Block MODULES, these need to be placed in the SECTIONS SETTINGS (by default, they are):

custom_pricing1

custom_pricing2

custom_pricing3

Here are the classes for the Portfolio Blocks, these need to be placed in the SECTIONS SETTINGS (by default, they are):

portfolio_one

portfolio_two

portfolio_three

Here are the classes for Elements Blocks, these need to be placed in the SECTIONS SETTINGS (by default, they are):

numbers_section

countdown_section

graphics_section

Here are the classes for the Social Media Blocks, these need to be placed in the SECTIONS SETTINGS (by default, they are):

social_buttons_bottom

social_right

social_bottom

Here are the classes for Map Blocks, these need to be placed in the SECTIONS SETTINGS (by default, they are):

map_left

map_right

map_center

Here are the classes for the Contact Blocks, these need to be placed in the SECTIONS SETTINGS (by default, they are):

contact_form_right

contact_form_left

contact_form_center

Here are the classes for the Process Blocks, these need to be placed in the SECTIONS SETTINGS (by default, they are):

number_counter_top

number_counter_middle

number_counter_bottom

How to create/add the Mega Menu?

Normally any Divi Theme will come with a default menu that looks similar to this one:

But with the simple addition of a CSS class you can have your menu look like this one:

Go to Menu.

Add the class “mega-menu” to your Menu Item but make sure it’s a Custom Link.

Add your sub-pages under the Main Page with this CSS class.

How to change fonts and colors from the theme?

To change fonts and colors, you need to go to the Divi Section on the left side and go to Theme Customizer -> General Settings.

In Layout Settings you can change the Theme Accent Color. This setting will change the colors on some backgrounds and icons colors as well.

In the Typography section you can customize Headings and Paragraphs and you can change the body link color.

In the Buttons section, choose one of sections you want to customize. If you want to customize the default state, customize from the Buttons Style section; if you want to customize the hover state, you have to customize it from Buttons Hover Style section. Here you can change colors to all buttons that are defined as default.

In the Theme Customizer there are some others sections, where you can define colors and other styles. We recommend to go through them all and customize each of them like you want to. After you finish with the Theme Customizer, there are a few elements that have colors or other attributes defined inline, you need to go through each page and change each element you want to suit your chosen color scheme, as long as you intend to keep those elements.

Lastly, there are a few CSS rules that might need to be looked at as well, we recommend to go in Apparence -> Editor. This is the place where you can edit CSS and change some element colors and styles. If we are speaking about colors, we used #f2b632 – yellow as a default color, we recommend to search for it through CSS and replace it with the color you want.

How to customize a Layout?

If you want to add one of our layouts as they are, you have to create a new page and go to Load Layout, then go to Your Saved Layouts tab and choose one of them.

After you choose one of them, the page will be populated with sections and with modules. You can edit each of these sections and customize them through the Divi Visual Builder. In this section we will show you how to change the different parts of a layout.

Changing Icons

1. Edit the page and find the icon you want te to change. For blurbs with icons, we recommend to use SVG icons. You can use SVG files uploaded as regular images. The theme has an integrated function that transform those SVG files in real SVG icons. With that function they act like icons, you can change their color in their active or hover state. In style.css we added some rules that change colors on those icons.

2. After you click on settings, you will see a popup for the blurb settings. If you scroll down, you will see the Image & Icon section. Click there and you can change to switch between an icon or image. If you choose to use an image, you have to add it in the media gallery and then add it; if you want to use an icon, you have to choose one from the table below.

Changing Images

1. Edit the page with the layout you want to change and find the image you want to change.

2. After you click on settings, you will see a popup for image settings. In the Image Settings section, in the Image URL field, you have to upload an image or pick one from the Media Gallery.

Changing Backgrounds

1. Edit the page with the layout you want to change and find the section you want to change the background for.

2. After you click on section settings, you will see a popup for Section Settings. You will see a Background section. You can choose there from 4 types of backgrounds: Color Background, Gradient Background, Image Background and Video Background. Then choose the colors or resources you want.

Changing Buttons

1. Edit the page with the layout you want to change and find the section where the button you want to change is.

2. After you click on button settings, you will see a popup for Button Settings. When opened popup there are 2 sections: Text, from where you can change the text from the button and Link from where you can change the link for the button, where it will take you on click.

3. In the same popup, you will see the Design Tab. We already defined a style for buttons, in General Settings. You can use this section to customize each individual button, however you want. There you will be few sections, for example: Alignment, which help you to give a position to your button in the page, another section is Text, from where you can change the typography style and from the Button section you can customize this button, after you activate the setting titled “Use Custom Style for Button”.

What Sizes of Pictures work best?

For full-width backgrounds we recommend a minimum of 1920 px width. For retina responsive, we recommend to export them at X 2 (times 2).