Translated from Spanish to English - www.onlinedoctranslator.

com

PAGE BUILDER : ELEMENT

(WORKSHOP 3)

#TRIBUCAMP2018 @RAIOLANETWORKS
INDEX

1. What is a web designer?

1.1 Advantages and disadvantages.

1.2 Web designers for WP: Free.

1.3 Web designers for WP: Paid.
2. What is Elementor?.
3. How to download and install Elementor.
4. Elementor interface.
4.1 Initial configuration.
4.2 Design tools: Basic components.
4.2.1 Sections
4.2.2 Columns
4.2.3 Widgets
5. My first steps with Elementor: case study

#TRIBUCAMP2018 @RAIOLANETWORKS
1. WHAT IS A WEB DEVELOPER?

A web designer(also called “constructor” or “page builder”)is a

tool that allows you to build a website quickly and easily(
through a drag&drop system) improving the visualization of the
contents and expanding the functionalities of the installed
theme.

Fig 1: Page Builder - Elementor

#TRIBUCAMP2018 @RAIOLANETWORKS
1. 1 ADVANTAGES AND DISADVANTAGES

ADVANTAGES DISADVANTAGES

1. You don't need to know 1. They generate code

programming or CSS. inefficient.

2. Shortcodes.
2. Easy to use 3. They slow down your website.

3. You savetime.

4. You savemoney.

#TRIBUCAMP2018 @RAIOLANETWORKS
1.2 FREE

Pagebuilder by SiteOrigin: Live Composer Site Builder: Elementor:

https://siteorigin.com/page-builder/ https://livecomposerplugin.com/ https://elementor.com/

Unyson by ThemeFusion:
https://en.wordpress.org/plugins/unyson/

#TRIBUCAMP2018 @RAIOLANETWORKS
1.3 PREMIUM (PAID)

Visual Composer Fusion Builder by Avada Elementor PRO DiviBuilder

visualcomposer.io avada.theme-fusion.com/fusion-builder-2/ elementor.com elegantthemes.com/plugins/divi-builder/

Themify Builder: Awesome Builder Thrive Architect Beaver Builder

themify.me/builder codecanyon.net/item/awesome- thrivethemes.com/architect/ wpbeaverbuilder.com
builderdrag-drop-page-builder/663958

#TRIBUCAMP2018 @RAIOLANETWORKS
2. WHAT IS ELEMENT? ( YO )

Elementor is a visual web builderor “visual page builder”for

WordPress created by Pojo.me. It allows you to create pages or
entries in WordPress in a visual and direct way.

Web page:https://elementor.com

Available in several languages:Among them the Spanish

FREE versionandPRO version(Premium)

#TRIBUCAMP2018 @RAIOLANETWORKS
2. WHAT IS ELEMENT? ( II )

Advantages of Elementor over other plugins:

• We design inlive and live, both for desktop, tablet and mobile.

• Easy to use.
• Isfast(its weight is less than that of other layout
artists).
• Compatible with many templates.*
• Cancreate templatesand reuse them.

*https://docs.elementor.com/article/78-themes

#TRIBUCAMP2018 @RAIOLANETWORKS
2.1 HOW TO DOWNLOAD AND INSTALL ELEMENTOR

We can download the free version of Elementor from:

• Web page:https://elementor.com
We go to: Dashboard WordPress > Plugins > Add new > Upload plugin > select the file and click on install

• From theplugin repositoryfrom WordPress

We go to: Dashboard WordPress > Plugins > Add new > look for Elementor and install it.

#TRIBUCAMP2018 @RAIOLANETWORKS
2.2 INTERFACE : INITIAL CONFIGURATION

My library:Template management.

Settings:Management of general plugin

settings.

Tools:Version control, synchronization,

maintenance mode...

System information:Collect
information about the system.

#TRIBUCAMP2018 @RAIOLANETWORKS
4.2 DESIGN TOOLS: BASIC COMPONENTS

The design toolIt is made up of the following components:

General options panel tools pane

sections columns Widgets

#TRIBUCAMP2018 @RAIOLANETWORKS
4.2.1 SECTIONS

A section is amain containerwherewe can add elements(

widget)and columns. Within these sections you can make the
following settings:

• Provision: Height, width, width between columns...

• Style: Colors, fonts, backgrounds...
• Advanced: Margins, padding, CSS classes...

#TRIBUCAMP2018 @RAIOLANETWORKS
4.2.1 COLUMNS

The columns are blocks that are created inside the sections and help to
structure and store the elements of the web: text, images, videos... Although we
separate it from the widgets because it is an essential component of the web
designer, it really belongs to that group of elements.Columns also include specific
settingslayout, styles and advanced.

#TRIBUCAMP2018 @RAIOLANETWORKS
4.2.3 WIDGETS

They are the elements of the web: texts, images, icons,

videos, buttons, maps...

#TRIBUCAMP2018 @RAIOLANETWORKS
5. MY FIRST STEPS WITH ELEMENTOR: CASE STUDY

We can download the case study

files at:

raiolanetworks.es/tribucamp

#TRIBUCAMP2018 @RAIOLANETWORKS
5. MY FIRST STEPS WITH ELEMENTOR: CASE STUDY

Thesection is full widthAnd containsa column with the

content centered.
6be58a
e0083e
ffcc46
fcfcfc
434264
f7f7f7

Qualification:Vidaloka normal, Caption:Roboto 100, 23px

65px Button:Hind Vadodara, 18px

#TRIBUCAMP2018 @RAIOLANETWORKS
THANK YOU SO MUCH!

#TRIBUCAMP2018 @RAIOLANETWORKS