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

Forty - DocumentationThis 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.

FilesThe 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: InstallGo 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

https://caribdis.net/

https://html5up.net/

https://html5up.net/forty

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

Upload the Forty_Opciones_del_tema.json file.



Click on Import Divi Theme Options.

Step 3: Import Theme Customizer SettingsGo to Divi > Theme Customizer and open the Customizer. Then click on the Portability icon.

Upload the Forty_Ajustes_del_personalizador.json file.



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.



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



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 LibraryYou 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.



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.



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 MenuOnce 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



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 OptionsThis 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.



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

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



Tips To Edit The ModulesBasically, 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 theButton 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.



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.



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.







Editing/Deleting the “MENÚ” labelYou 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.



https://caribdis.net/forty-tema-hijo-de-divi-documentacion/

Documents

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