Forty - Documentation

This Divi Child Theme is built upon the visual base of the Forty template, by
HTML UP. It recreates some of its original effects on CSS, but it uses the code
from Divi, and the four custom layouts were created with the Divi Builder.

It is recommended to use this child theme in a fresh WordPress install.

Files
The downloaded Forty-Divi-Child.[caribdis.net].zip file includes:

 1 Archivos de importación folder

 1 Tema folder
 1 LICENSE.txt file
 1 shortcut to online documentation in Spanish
 1 PDF file with documentation in English

Archivos de importación folder includes:

 1 Theme Options JSON file (Opciones_del_tema.json)

 1 Theme Customizer JSON file (Personalizador_de_tema.json)
 1 Library JSON file with 4 layouts and a global footer (Biblioteca.json)

Tema folder includes:

 divi-forty.zip file to upload in WordPress admin

 CHANGELOG.txt file with updates history

First you have to unzip the Forty-Divi-Child.[caribdis.net].zip file in

your computer.

Using Forty Theme

Step 1: Install
Go to Appearance > Themes > Add New > Upload Theme and upload the divi-
forty.zip file (previously extracted from Forty-Divi-Child.
[caribdis.net].zip). Activate.

Forty - Divi Child Theme - Documentation . caribdis.net

Step 2: Import Theme Options
Go to Divi > Theme Options > Import & Export (the arrows icon on the top right
corner).

Upload the Forty_Opciones_del_tema.json file.

Forty - Divi Child Theme - Documentation . caribdis.net

Click on Import Divi Theme Options.

Step 3: Import Theme Customizer Settings

Go to Divi > Theme Customizer and open the Customizer. Then click on the
Portability icon.

Upload the Forty_Ajustes_del_personalizador.json file.

Forty - Divi Child Theme - Documentation . caribdis.net

Click on Import Divi Customizer Settings.

Just in case that the Full Width Menu option doesn’t apply, select the Make Full
Width checkbox in the Header & Navigation > Primary Menu Bar panel.

Forty - Divi Child Theme - Documentation . caribdis.net

Step 4: Import Divi Library Layouts
Go to Divi > Divi Library. Click on the Import & Export button and upload the
Forty_Biblioteca.json file.

Forty - Divi Child Theme - Documentation . caribdis.net

Click on Import Divi Builder Layouts.

Layouts included are:

 Página de inicio (Front Page)

 Página de aterrizaje (Landing Page)
 Página genérica (Generic Page)
 Página del blog (Blog Page)

A global element Pie de página (Footer) is also included.

With the previous steps you are ready to use the Divi Library Layouts in any
page.

Load Layouts From Library

You will have to create a page first. Click on Pages > Add New. After typing the
name for the new page, enable the Divi Builder and click on Load From Library.

Forty - Divi Child Theme - Documentation . caribdis.net

In the Load Layout window, click Add From Library and then click the Load
button of your chosen layout.

Repeat the same procedure to load the rest of the layouts.

If you’re using the Visual Builder, click on the button.

Forty - Divi Child Theme - Documentation . caribdis.net

Click on the Add From Library tab and select Forty - Página de inicio to load the
front page layout.

Repeat the same procedure to load the rest of the layouts.

Configure The Menu

Once you have the page structure, you’ll be ready to create your custom menu.
The procedure is similar to creating a menu for any theme. Go to Appearance >
Menus > create a new menu or select a previously created menu.

Forty includes two custom buttons for the menu, which you can configure by
adding a CSS class to the menu item. To activate the CSS Classes option for

Forty - Divi Child Theme - Documentation . caribdis.net

every menu item, click on the Screen Options tab on the top right corner of the
page, and select the CSS Classes checkbox.

For Button 1 (solid background) the CSS class is special.

For Button 2 (transparent background with border) the CSS class is fit.

Forty - Divi Child Theme - Documentation . caribdis.net

Forty Options
This child theme includes a panel in the Theme Customizer which will allow
you to configure the main content background color (for example, the
standard blog pages and archive pages, which are white by default), and the
hover link color.

Forty - Divi Child Theme - Documentation . caribdis.net

The default colors match the original template’s but you’re free to change them
to your convenience.

All the colors of the elements within the pages are customizable in every
Module Settings.

Forty - Divi Child Theme - Documentation . caribdis.net

Tips To Edit The Modules
Basically, all the texts are editable, as well as the colors, fonts, sizes, and the
rest of the options included in every Divi Builder module. Note that the front
page blocks are Call To Action modules, and you must use the same text for the
Button Text and the Content (in case that you want the whole block to be a link).

Please, note that the Button Text will be visible if you’re editing inside the Visual
Builder, but not on the front-end.

Forty - Divi Child Theme - Documentation . caribdis.net

The CTA modules have a fixed height, as they were designed to content short
titles/subtitles. In case you need longer texts, the height values are editable in
the Advanced tab > Custom CSS > Main Element. Remember to edit both
modules within the row and apply the same values.

Forty - Divi Child Theme - Documentation . caribdis.net

Block’s images are background images for each column.

To edit them, go to Row Settings > Content > Background > Column 1 Background
and Column 2 Background and choose your desired images.

Forty - Divi Child Theme - Documentation . caribdis.net

Forty - Divi Child Theme - Documentation . caribdis.net
Forty - Divi Child Theme - Documentation . caribdis.net
Editing/Deleting the “MENÚ” label
You might want to use the word MENU instead of the one with the accented
letter. Or maybe not displaying it at all. Note this is a CSS ::before
pseudoelement, and you can edit or remove the class #et-top-
navigation:before in style.css.

If you have any question, feel free to post it in English on the comments
section of the online documentation page.

Forty - Divi Child Theme - Documentation . caribdis.net