Cloud 1 2025

Design Template Documentation

Here we find documentation and descriptions of functions/design/CSS present in our design template.

When a new client wants a website, the idea is that we can start from this template where all the design, plugins, and other tools are already prepared and installed. When the design is finished/is to be launched, it's important to remove any CSS that is not being used so that it doesn't slow down the website's loading time.

CSS/HTML crash course

All websites are, in essence, built in HTML (HyperText Markup Language). This is the HTML that forms the structure/skeleton of a website. This skeleton then gets its design with the help of CSS (Cascading Style Sheets).

HTML elements are built from "tags". There is usually a start tag and an end tag:

Rubric
<h2>Welcome to us</h2>

Body text
<p>Here we have a paragraph that contains some text</p>

"Boxes that build up the frame and surround different elements
<div>
<p>Paragraph that is in a div</p>
</div>

In CSS, you can create classes with different styles that you can then apply to HTML elements so that the element will get the style from the class. For example:

Below we can see a p-tag (body text) that has the class .text

<p class="text">This is an important text!</p>

CSS

.text {
color: red;
font-size: 17px;
}

In class .text we create designs that are applied to all elements with the class .text. In this case, the text will turn red. red and be 17px font-size: 17px; Store.

An HTML element can have any number of classes.
The div element below has the classes .cards-wrapper, .w-50, and .card-1.

<div class="cards-wrapper w-50 card-1">
<p class="text">This is an important text!</p>
</div>

CSS

display: flex; activates Flexbox which makes it easy to adjust and position elements in a container/div.
flex-wrap: wrap; Make all elements always have the same height.
.cards-wrapper {
display: flex;
flex-wrap: wrap;
}

.w-50 is short for "width 50%"" which means that all columns/cards preceding this class will be 50%. Later, we can also see .w-33, w.25 or representatives of other latitudes.
.w50 {
width: calc((100% / 2) - 20px);
}

.card-1 is a class that represents an individual design. In the code below, we give the h3 tag a text size of 21px. All h3 words within a div with this class will get the same text size.
.card-1 h3 {
font-size: 21px;
}

When naming a class, it's a good idea to think about how it can be reused. as much as possible. In the example above, we can see that the names often describe what they do and that they are not tied to a specific content like services/employees/contact, etc.

It's so I don't have to name a class .cards-services which is also used during contact.

<div class="cards-wrapper w-50 card-1">
<p class="text">This is an important text!</p>
</div>

When an element has multiple classes, you can also "pair" the classes in CSS like this:

.cards-wrapper.w-50 .et_pb_column {
width: calc((100% / 2) - 20px);
margin: 10px;
}

As we can see, it says .cards-wrapper.w-50 which essentially means that w.50 doesn't work without .cards-wrapper. Cards-wrapper allows the elements to be positioned och .w-50 tells how they should be positioned

For the element .et_pb_column which has a space after .w-50 means that this element is inside the elements with the class .w-50. It doesn't need to be the next direct element, but it's still inside.

Below you can see what it looks like in Divi:

Column 1
<div class="et_pb_column_1_2 et_pb_column et_pb_column_39 et_pb_css_mix_blend_mode_passthrough">

Text module
<div class="et_pb_module et_pb_text et_pb_text_49 et_pb_text_align_left et_pb_bg_layout_light">
<div class="et_pb_text_inner">

paragraph tag
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa.</p>
</div>
</div>

Column 2
<div class="et_pb_column_1_2 et_pb_column et_pb_column_39 et_pb_css_mix_blend_mode_passthrough">

Text module
<div class="et_pb_module et_pb_text et_pb_text_51 et_pb_text_align_left et_pb_bg_layout_light">
<div class="et_pb_text_inner">

CSS + Divi =

All classes that affect layout should be placed in the green section. If it is placed on the blue section, it will affect the position of all elements located within it. For example, the `cards-wrapper w-50` class, which sets the columns to 50%, should be placed on a green section with two columns inside it. This means we only need to apply the class in one place, rather than to each individual column.

On the other hand, classes that only affect the design of a single element should be added to the black section. This includes, for example, the design of buttons.

The goal is to avoid having to add the class in unnecessarily many places at all times.. If you have three columns with a button design, you might think it's more worthwhile to add the class once to the green section instead of adding it individually to all columns.

In CSS, classes have a period in front of them, but when you add a class in Divi, you add it without the period.

Here's how to add a class in Divi.
Go to Settings > Advanced. The class you add to "CSS Class"."

Above, you can see that there's a field for CSS Class and one for CSS ID.
The difference between these is that you can only have an ID on one element, while a class can be on as many elements as you want. Since we try to reuse as much code as possible, we always work with classes.
However, the ID can be used when linking to a specific section. In that case, you assign a unique ID to the section—for example, "services"—and then link to #services

Start from the design template

When you've created a copy of the design template to start a new website, there are a few things that are good to start with: fonts, color, and shape.

Change color and shape to new customer

1. You change the font directly in Divi, just like usual.
Appearance > Customize > General Settings > Typography

2. You change the color in two places. In Divi, you change the global color that is already there.
Blue = primary
Green = secondary.
You also need to change the top of the CSS file. The code that now looks like this below is for different variables. You could say that, just like in Divi, this makes The colors are becoming global. The colors will always be fetched from here. Instead of writing rgb (color: rgb(255 153 0);) or HEX (color: #ff9900;) which means you have to enter the colors individually and risk the colors not being consistent, you enter instead variable color: rgb(var(--primary-color));. Då hämtas färgen från --primary-color: 0, 138, 207; istället.

The colors of the variables are written in RGB, so you just change the color to the one you want among the numbers.
See below:

:root {
/* Colors */
--primary-color: 0, 138, 207;
--secondary-color: 186, 211, 108;

--gray-light-color: 245, 245, 245;
--black-color: 0, 0, 0;
--white-color: 255, 255, 255;

/* Typography */
--base-size: 16px;
}

3. Form. When it comes to form, I'm primarily referring to the shape of the buttons. Should they be rounded or angular? Choose what best suits the company's graphic profile. You change this in the CSS file in what is called "border-radius". Here you write how many px you want the border to be rounded.

/* Buttons, design */
.et_pb_contact_submit,
.btn a,
.btn .et_pb_text_inner a {
min-width: 140px;
padding: 13px 30px !important;
font-weight: 600;
text-align: center;
text-decoration: none;
transition: all .4s ease;
display: inline-block;
text-decoration: none;
letter-spacing: 1px;
font-size: 15px !important;
border-radius: 40px;
}

Common classes

Some of the most common classes we use are button design, image + text, and sections with 2-4 cards.

Buttons

When designing a button, you essentially use two classes:

.btn - Basic design and structure applicable to all buttons
.btn-primary-filled Individual color for the button

Classes .btn represents the structure & basic design of the button itself. Font, text size, margins, etc. Everything except the color, you could say.
The next class will add the remaining design, the color. The color will be taken from the global color in the variables we talked about earlier.

The classes are added to a text block that contains a link.

.btn-primary-filled
Filled button with primary color

.btn-primary-border
Transparent background with text and border in the primary color

The same design is available for:
.btn-secondary-filled
.btn-secondary-border,
.btn-white-filled,
.btn-white-border

The names above speak for themselves.

.btn-wrapper
Add a margin above the button if it's too close to the text above.

Change button text color

If you want to change the text color of a button, you do it in the code below.
You can use any of the previous variables or a completely separate color.

/* btn-primary-filled */
.btn-primary-filled .et_pb_text_inner a,
.btn-primary-border .et_pb_text_inner a:hover {
background-color: rgba(var(--primary-color));
border: 2px solid rgb(var(--primary-color));
color: rgb(var(--white-color));
}

The primary button with a border.
.btn-primary-border .et_pb_text_inner a,
.btn-primary-filled .et_pb_text_inner a:hover {
background-color: transparent;
border: 2px solid rgb(var(--primary-color)) !important;
color: rgb(var(--primary-color));
}

/* btn-secondary-filled */
.btn-secondary-filled .et_pb_text_inner a,
.btn-secondary-border .et_pb_text_inner a:hover {
background-color: rgb(var(--secondary-color));
border: 2px solid rgb(var(--secondary-color));
color: rgb(var(--white-color));
}

/* btn-secondary-border */
.btn-secondary-border .et_pb_text_inner a,
.btn-secondary-filled .et_pb_text_inner a:hover {
background-color: transparent;
border: 2px solid rgb(var(--secondary-color));
color: rgb(var(--secondary-color));
}

Overlay

If you want a dark overlay, there are two classes you can use:

.overlay-dark
.overlay-light

These can be on any element

Columns of different widths

When creating a section with multiple columns, it's good practice to always add classes that adjust the width and margins. This ensures that all sections with columns have consistent margins and responsiveness.

.cards-wrapper - Base code to be able to add width
.width: 50% - Sets the width; in this case, the columns will be 50%

.cards-wrapper is always used while .w-50 is replaced with the width you want. For example:

.width: 30% - 3 columns, 33% width
.w-25 - 4 columns, 25% wide

So if you want a section with 3 columns, do you add the spaces cards-wrapper w-33 on the green section.

Columns to brief

Height + color of columns

If you are going to change the background colors of the columns, it is always good to set the same height for all columns.

When changing the background color, do it via the green section.

Top section

On all top sections, you can easily set the height and background image/video yourself.
What needs to be set is text size, font, and possibly the maximum width of the body text.

Top-section-1

The content is positioned with CSS to be at the bottom left.
To resize h1:

.top-section-1 h1 {
font-size: 50px !important;
line-height: 1.1;
font-weight: 700;
}

To place content centered to the left:

.top-section-1 {
display: flex;
flex-wrap: wrap;
align-content: flex-end; change to align-content: center;
}

To change the max-width of the body text

.top-section-1 p {
max-width: 550px;
}

Top Section 2

The content is centered using CSS.
To resize h1:

.top-section-2 h1 {
font-size: 80px !important;
line-height: 1.1;
font-weight: 700;
}

To change the max-width of the body text

.top-section-2 p {
max-width: 800px;
margin: 0 auto;
}

Split-section

Simple section with two columns, image in one and text in the other. The image acts as a background image but is inserted as a regular image so that an alt tag can be provided, which is good for SEO. The only things that need correcting here are certain margins and possibly a background color.

Standard Classes for Split Section

Fundamentally, 2 classes are used on a split section:

.split-section - all design for a split-section
.split-content-align-center - center the text to the image

Several classes that are useful and often paired with split-section:

.reverse - If the image is in the first column (left), this class must always be included. It ensures that the text always appears first when the columns are set to 100%.

Correct the margins on the text column (default is padding: 50px)
.pr-0 padding-right: 0px
.pl-0 - padding-left: 0px
.pt-0 padding-top: 0px
.pb-0 - padding-bottom: 0px

If the text is in the right column, the default should be to apply the class pr-0 so that the text extends all the way out into the green section. Otherwise, it will be off-center. The same applies when the text is on the left, then you should have PL-0

pt-0 och pb-0 Can be used when you feel there is too much text and you need to remove the bottom and top margins so the image doesn't become too tall.

One could say that standard classes before a split section are:
Image left:
split-section split-content-align-center reverse pr-0

Image right:
split-section split-content-align-center pl-0

Split with background color

For a split section with a background color, you only need to give the green section a background color. The background color should only be active on desktop, so make sure to adjust its responsiveness.
You don't need to correct any margins on a split with a background colorpr-0, pl-0)

Split-alt

Remove unnecessary code and other material when the website is to be launched

When you're finished with your design and the website is about to be launched, it's important to remove all subpages related to the design template. This includes the design template's homepage, the documentation page, and even the code for the menu located on the documentation page.

This code can be found in Admin Panel > Custom CSS and JS

Remove all files related to the documentation menu.

Pictures

Also remove unnecessary images that are only used in the design template. Logos, descriptive images, possibly images with px on them but these can be kept if you want to use them later on.