How it works

Install your Child Theme

In order to make sure you get the best experience possible with Clarify, we recomend you to follow these 4 simple steps.
Z

Step 1

Install
WordPress

Step 2

Install
the Divi Theme
Z

Step 3

Install Clarify – the Child Theme
Z

Step 4

Import the Clarify Demo Content.

Use Blocks

If you already have wireframes, or you want to just jump-in to building your site, follow these steps::

  1. Edit Curent Homepage activating the visual builder
  2. Delete curent sections
  3. Click on blue + sign to add an object
  4. Go to “add from library”
  5. Search for the block you like
  6. Add it to your page
  7. Enjoy Customizing it!

Find more about Customizing Blocks

See All Blocks

Use Layouts

You can easily activate one of our pre-made homepage Layouts to be your homepage, following these next steps:

  1. Choose which Layout fits best to you
  2. Go to the WordPress Dashboard
  3. Go to Settings > Reading
  4. Change the Homepage to the page you want
  5. Go to that page to edit it
  6. Enjoy Customizing It!
See All Layouts

How to add blocks?

There are multiple ways to use blocks. What we are going show you is a way to be sure blocks work best. Customize your blocks, save them, and they will look great.

l
Build Your Wireframe

Maybe you already have wireframes; if not, you can start writing on a paper what sections you want to build on your website.

Pick Perfectly Suited Blocks
In order to make your searching easier we provide a the full list of each block types in the Blocks Page or you can use the PDF containing all our blocks to make your selection easier.
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
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).
For images that are in a 1/1 column, we recommend 1080 px width.
For images that are in a 1/2 column, we recommend 510 px width.
For images that are in a 1/2 column, we recommend 510 px width.
For images that are in a 1/3 column, we recommend 310 px width.
For images that are in a 1/3 column, we recommend 310 px width.
For images that are in a 1/3 column, we recommend 310 px width.
For images that are in a 1/4 column, we recommend 225 px width.
For images that are in a 1/4 column, we recommend 225 px width.
For images that are in a 1/4 column, we recommend 225 px width.
For images that are in a 1/4 column, we recommend 225 px width.