How it works

Install your Child Theme

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

Step 1

Install WordPress

Step 2

Install the Divi Theme 

Step 3

Install Kayden – the Child Theme

Step 4

Install the .XML files provided

To use Blocks

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

  1. Edit Curent Homepage activating visual builder
  2. Delete the current sections
  3. Click on blue dot 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

Use Layouts

We offer Homepage Layouts that you can easely activate them to be as main page, following next steps:

  1. Choose which Layout fits best to you
  2. Go to WordPress Dashboard
  3. Go to Settings > Reading
  4. Change Homepage to the page you want
  5. Go to Page and edit the new homepage
  6. Enjoy Customizing It!

Find more about Customizing Blocks

How to use blocks?

There are multiple ways to use blocks. What we’re going to show you is a way that makes sure the blocks work at their best. Because Divi uses a lot of JavaScript and custom css some modules may look wierd in Visual Builder, so don’t freak out, it might be just in there.

l
Build Your Wireframe
Maybe you already have a wireframe, or you can start writing on a paper sections you want to build on your website.
Pick Perfect Suited Blocks

In order to make your searching easier we provide a full experience of each of the blocks in the Blocks Page or you can use the PDF we offer called All Blocks – Kayden.pdf

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 and you will get exactly what you worked for:

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 Theme Customizer and Visual Editor to start replacing images, text, and colors.

You can do the customization in Divi Builder or in Visual Divi Builder. Both Builders are working very well and elements are fully compatible.

What Custom CSS Classes are we using?

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

1. Go to the Sections, Row or Module Settings

2. Go to Advanced Tab

Here are the classes for Accordion Blocks, you need to add them in the Accordion MODULE SETTINGS:

  • accordion1
  • accordion2

except for this one which you need to have in the SECTION SETTINGS:

  • accordion3

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

  • blog1
  • blog2
  • blog3

Here are the classes for Blurbs Blocks, you need to have them in the ROW SETTINGS:

  • blurb1
  • blurb2
  • blurb3

Here are the classes for Contact Blocks, you need to have them in the Contact Form MODULE SETTINGS:

  • contact1
  • contact2
  • contact3

Here are the classes for CTA Blocks, you need to have them in the SECTION SETTINGS:

  • cta1

except for this one which you need to have in the ROW SETTINGS:

  • cta2

Here are the classes for Elements Blocks, you need to add them in the ROW SETTINGS:

  • counter1
  • counter2
  • counter3

except for these which you need to have in the SECTION SETTINGS:

  • countdown1
  • circle1
Here are the classes for Gallery Blocks, you need to add them in the Gallery MODULE SETTINGS:

  • gallery1
  • gallery2

except for this one which you need to have in the SECTION SETTINGS:

  • gallery3

Here are the classes for Hero Blocks, you need to have them in the SECTION SETTINGS:

  • hero_section1
  • hero_section2
  • hero_section3

Here are the classes for Interactive Image Blocks, you need to add them in the ROW SETTINGS:

  • interactive_images1
  • interactive_images2
  • interactive_images3

Here are the classes for Logos Blocks, you need to have them in the ROW SETTINGS:

  • logos1
  • logos2
  • logos3

Here are the classes for Map Blocks, you need to have them in the Map MODULE SETTINGS:

  • map2
  • map3

Here are the classes for Portfolio Blocks, you need to have them in the Portfolio MODULE SETTINGS:

  • portfolio1
  • portfolio2
  • portfolio3

Here are the classes for Pricing Blocks, to have in the Pricing MODULE SETTINGS:

  • pricing1
  • pricing2
  • pricing3

Here are the classes for Process Blocks, you need to have them in the ROW SETTINGS:

  • process1
  • process2
  • process3

Here are the classes for Social Media Blocks, you need to have them in the Social Media Follow MODULE SETTINGS:

  • social_media1
  • social_media2
  • social_media3

Here are the classes for Subscribe Opt-In Blocks, you need to have them in the Email Opt-In MODULE SETTINGS:

  • subscribe1
  • subscribe2
  • subscribe3

Here are the classes for Tabs Blocks, you need to have them in the Tabs MODULE SETTINGS:

  • tabs1
  • tabs3

except for this one which you need to have in the SECTION SETTINGS:

  • tabs2

Here are the classes for Team Blocks, you need to have them in the ROW SETTINGS:

  • team1
  • team2
  • team3

Here are the classes for Testimonials Blocks, you need to have them in the ROW SETTINGS:

  • testimonials2
  • testimonials3

except for this one which you need to have in the SLIDER MODULE SETTINGS:

  • testimonials1

Here are the classes for Videos Blocks, you need to have them in the Image Module SETTINGS together with the video_popup class:

  • video1
  • video2
  • video3

How to create a Mega Menu?

By default any Divi Theme will come with a default menu that looks similar to this one.

But with a simple class you can activate the Mega Menu and it can transform into this:

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 css class.

How to change fonts and colors from the theme?

To change fonts and colors, you need to go to Divi on left side in the WordPress Dashboard 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 icon 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 section Buttons Style; if you want to customize the hover state, you have to customize it from Buttons Hover Style. Here you can change the colors of all buttons that are defined as default.

In the Theme Customizer are some other sections as well, where you can define colors and other styles. We recommend you go through them all and customize it the way you want. After you finish with the Theme Customizer, there will be 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.

Lastly, there are a few CSS rules that might need to be looked at as well, we recommend you go in the WordPress Dashboard -> Divi -> Custom CSS and add any custom CSS in there.

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, 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 some parts of a layout.

Changing Icons

1. Enable Visual Builder on the page and find the icon you want to change. For icons, we recommend you use SVG icons. You can upload your SVG files in the Media Library and theme have integrated a function that transform those SVG in real SVG elements on the live site. This is done with the use of the svg_icon class that needs to be applied to all elements that contain and SVG file that you want to access through CSS on the front-end. After this you can change the svg’s properties using CSS.

2. After you click on settings, you will see there a popup for blurb settings. If you scroll down, you will see the Image & Icon section, click there an you can switch between using an icon or an image. If you choose to use an image, you have to add it in the Media Gallery and select it there or if you want to use icon, you have to choose an icon from the Elegant Themes Icons that come with Divi.

Changing Image

1. Enable Visual Builder and find the Image you want to change.

2. After you click on settings, you will see a popup for image settings. Click on the Image in that section, and you’ll be prompted to upload or to choose an image from the Media Gallery.

Changing Background

1. Enable Visual Builder and find section you want to change it background.

2. After you click on section settings, you will see a popup for section settings. There you can find the Background section. You can choose from there 4 types of background. Choose one of them, Color Background, Gradient Background, Image Background or Video Background, and choose a color or the resources you want. Under that you’ll have some other options you can customize.

Changing Buttons

1. Enable Visual Builder and find section where is the button you want to change.

2. After you click on button settings, you will see there a popup. There you’ll see 2 sections, Text, from where you can change text from button and Link from where you can change link for button, where it will go when you click.

3. In the same popup, you will see the Design Tab. We’ve already defined a style for the button, in general settings, you can use this section to customize only one button, if you want that. If you choose to customize the button you’ll be greeted with a few options, for example: Alignment, which helps you control the position of the button on the page, another section is Text, which helps you can change the typography style and from Button section you can customize the rest of the styles for the button.

What Sizes are the photos we use?

For full-width background we recommend minimum 1920px width. If you use icons in png format and want them to look good on retina displays we recommend you export them at double their size and show them at half their width.

For images that are in a 1/1 column, we recommend 1080px width.
For images that are in a 1/2 column, we recommend 510px width.
For images that are in a 1/2 column, we recommend 510px width.
For images that are in a 1/3 column, we recommend 310px width.
For images that are in a 1/3 column, we recommend 310px width.
For images that are in a 1/3 column, we recommend 310px width.
For images that are in a 1/4 column, we recommend 225px width.
For images that are in a 1/4 column, we recommend 225px width.
For images that are in a 1/4 column, we recommend 225px width.
For images that are in a 1/4 column, we recommend 225px width.