How it works

Install your Child Theme

In order to make sure you get the best expe­ri­ence possi­ble with Clarify, we reco­mend 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 wire­frames, or you want to just jump-in to buil­ding your site, follow these steps::

  1. Edit Curent Home­page acti­vat­ing 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 Custo­mi­zing it!

Find more about Custo­mi­zing Blocks

See All Blocks

Use Layouts

You can easily acti­vate one of our pre-made home­page Layouts to be your home­page, following these next steps:

  1. Choose which Layout fits best to you
  2. Go to the Word­Press Dashboard
  3. Go to Settings > Reading
  4. Change the Home­page to the page you want
  5. Go to that page to edit it
  6. Enjoy Custo­mi­zing It!
See All Layouts

How to add blocks?

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

l
Build Your Wireframe

Maybe you already have wire­frames; 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 sear­ching easier we provide a the full list of each block types in the Blocks Page or you can use the PDF contai­ning all our blocks to make your selec­tion easier.
Start Buil­ding

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

1. Create a new page
2. Use The Divi Buil­der
3. Click on Add from Library
4. Insert Blocks to your page
l
Custo­mize each block
After adding your blocks to your page/post, now you can go to the Theme Custo­mi­zer and Visual Editor to start repla­cing images, text, and colors.

You can do the custo­miz­a­tion in the Divi Buil­der or in the Divi Visual Builder.

What Custom CSS Clas­ses are we using?

Some of the blocks have speci­fics clas­ses. If you want to know what clas­ses are rela­ted to what module, follow these next steps:

1. Go to Module Settings

2. Go to the Advan­ced Tab

Here are the clas­ses 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 clas­ses for the Blurbs Blocks, these need to be placed in the SECTIONS SETTINGS (by default, they are):

  • blurbs1
  • blurbs2

Here are the clas­ses for the Inter­ac­tive Image Blocks, these need to be placed in the SECTIONS SETTINGS (by default, they are):

  • interactive_images1
  • interactive_images2
  • interactive_images3

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

  • logo1
  • logo2
  • logo3

Here are the clas­ses for the Accor­dion Blocks, these need to be placed in the SECTIONS SETTINGS (by default, they are):

  • accordion1
  • accordion2
  • accordion3

 

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

  • tabs1
  • tabs2
  • tabs3

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

post_slider_content

  • post_grid_bottom

Here are the clas­ses 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 clas­ses for the Testi­mo­ni­als Blocks, these need to be placed in the SECTIONS SETTINGS (by default, they are):

  •  testimonial_bottom

Here are the clas­ses 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 clas­ses for the Port­fo­lio Blocks, these need to be placed in the SECTIONS SETTINGS (by default, they are):

  • portfolio_one
  • portfolio_two
  • portfolio_three

Here are the clas­ses 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 clas­ses 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 clas­ses 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 clas­ses 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 clas­ses 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 simi­lar to this one:

But with the simple addi­tion 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 Custo­mi­zer -> Gene­ral Settings.

In Layout Settings you can change the Theme Accent Color. This setting will change the colors on some back­grounds and icons colors as well.
In the Typo­gra­phy section you can custo­mize Headings and Para­graphs and you can change the body link color.
In the Buttons section, choose one of sections you want to custo­mize. If you want to custo­mize the default state, custo­mize from the Buttons Style section; if you want to custo­mize the hover state, you have to custo­mize it from Buttons Hover Style section. Here you can change colors to all buttons that are defi­ned as default.

In the Theme Custo­mi­zer there are some others sections, where you can define colors and other styles. We recom­mend to go through them all and custo­mize each of them like you want to. After you finish with the Theme Custo­mi­zer, there are a few elements that have colors or other attri­bu­tes defi­ned 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 recom­mend to go in Appa­rence -> Editor. This is the place where you can edit CSS and change some element colors and styles. If we are spea­king about colors, we used #f2b632  — yellow as a default color, we recom­mend to search for it through CSS and replace it with the color you want.

How to custo­mize 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 popu­la­ted with sections and with modu­les. You can edit each of these sections and custo­mize them through the Divi Visual Buil­der. In this section we will show you how to change the diffe­rent parts of a layout.

Chan­ging Icons

1. Edit the page and find the icon you want te to change. For blurbs with icons, we recom­mend to use SVG icons. You can use SVG files uploa­ded as regu­lar images. The theme has an inte­gra­ted func­tion that trans­form those SVG files in real SVG icons. With that func­tion 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.

Chan­ging 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.

Chan­ging Back­grounds

1. Edit the page with the layout you want to change and find the section you want to change the back­ground for.

2. After you click on section settings, you will see a popup for Section Settings. You will see a Back­ground section. You can choose there from 4 types of back­grounds: Color Back­ground, Gradi­ent Back­ground, Image Back­ground and Video Back­ground. Then choose the colors or resour­ces you want.

Chan­ging 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 defi­ned a style for buttons, in Gene­ral Settings. You can use this section to custo­mize each indi­vi­dual button, howe­ver you want. There you will be few sections, for example: Align­ment, which help you to give a posi­tion to your button in the  page, anot­her section is Text, from where you can change the typo­gra­phy style and from the Button section you can custo­mize this button, after you acti­vate the setting titled  “Use Custom Style for Button”.

What Sizes of Pictures work best?

For full-width back­grounds we recom­mend a mini­mum of 1920 px width. For retina respon­sive, we recom­mend to export them at X 2 (times 2).
For images that are in a 1/1 column, we recom­mend 1080 px width.
For images that are in a 1/2 column, we recom­mend 510 px width.
For images that are in a 1/2 column, we recom­mend 510 px width.
For images that are in a 1/3 column, we recom­mend 310 px width.
For images that are in a 1/3 column, we recom­mend 310 px width.
For images that are in a 1/3 column, we recom­mend 310 px width.
For images that are in a 1/4 column, we recom­mend 225 px width.
For images that are in a 1/4 column, we recom­mend 225 px width.
For images that are in a 1/4 column, we recom­mend 225 px width.
For images that are in a 1/4 column, we recom­mend 225 px width.