PAGE BUILDER : ELEMENTOR

(TALLER 3)

#TRIBUCAMP2018 @RAIOLANETWORKS
ÍNDICE

1. ¿Qué es un maquetador web?.

1.1 Ventajas y desventajas.
1.2 Maquetadores web para WP: Gratuitos.
1.3 Maquetadores web para WP: De pago.
2. ¿Qué es Elementor?.
3. Cómo descargar e instalar Elementor.
4. Interfaz de Elementor.
4.1 Configuración inicial.
4.2 Herramientas de diseño: Componentes básicos.
4.2.1 Secciones
4.2.2 Columnas
4.2.3 Widgets
5. Mis primeros pasos con Elementor: caso práctico

#TRIBUCAMP2018 @RAIOLANETWORKS
1. ¿QUÉ ES UN MAQUETADOR WEB?

Un maquetador web (también llamado “constructor” o

“page builder”) es una herramienta que permite construir
una web de manera rápida y fácil (a través de un sistema
drag&drop) mejorando la visualización de los contenidos y
ampliando funcionalidades del theme instalado.

Fig 1: Page Builder - Elementor

#TRIBUCAMP2018 @RAIOLANETWORKS
1. 1 VENTAJAS Y DESVENTAJAS

VENTAJAS DESVENTAJAS

1. No necesitas saber ni 1. Generan código

de programación ni de ineficiente.
CSS. 2. Shortcodes.
2. Fácil de usar 3. Relentizan tu web.
3. Ahorras tiempo.
4. Ahorras dinero.

#TRIBUCAMP2018 @RAIOLANETWORKS
1.2 GRATUITOS

Pagebuilder by SiteOrigin: Live Composer Site Builder: Elementor:

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

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

#TRIBUCAMP2018 @RAIOLANETWORKS
1.3 PREMIUM (DE PAGO)

Visual Composer Fusion Builder de Avada Elementor PRO Divi Builder

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-builder- thrivethemes.com/architect/ wpbeaverbuilder.com
drag-drop-page-builder/663958

#TRIBUCAMP2018 @RAIOLANETWORKS
2. ¿QUÉ ES ELEMENTOR? ( I )

Elementor es un maquetador web visual o “visual page

builder” para WordPress creado por Pojo.me. Permite
crear las páginas o entradas en WordPress de una manera
visual y en directo.

Página web: https://elementor.com

Disponible en varios idiomas: Entre ellos el español

Versión FREE y versión PRO (Premium)

#TRIBUCAMP2018 @RAIOLANETWORKS
2. ¿QUÉ ES ELEMENTOR? ( II )

Ventajas de Elementor con respecto a otros plugins:

• Diseñamos en vivo y en directo, tanto para desktop, tablet

como móvil.
• Facilidad de uso.
• Es rápido (su peso es menor que el de otros
maquetadores).
• Compatible con muchas plantillas.*
• Puedes crear plantillas y reutilizarlas.

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

#TRIBUCAMP2018 @RAIOLANETWORKS
2.1 CÓMO DESCARGAR E INSTALAR ELEMENTOR

Podemos descargar la versión gratuita de Elementor

desde:
• Página web: https://elementor.com
Vamos a : Dashboard WordPress > Plugins > Añadir nuevo > Subir plugin > seleccionamos el archivo y pulsamos en instalar

• Desde el repositorio de plugins de WordPress

Vamos a : Dashboard WordPress > Plugins > Añadir nuevo > buscamos Elementor y lo instalamos.

#TRIBUCAMP2018 @RAIOLANETWORKS
2.2 INTERFAZ : CONFIGURACIÓN INICIAL

Mi biblioteca: Gestión de plantillas.

Ajustes: Gestión de ajustes generales

del plugin.

Herramientas: Control de versiones,

sincronización, modo mantenimiento...

Información del sistema: Recopila la

información sobre el sistema.

#TRIBUCAMP2018 @RAIOLANETWORKS
4.2 HERRAMIENTAS DE DISEÑO : COMPONENTES BÁSICOS

La herramienta de diseño está formada por los siguientes

componentes:

Panel de opciones generales Panel de herramientas

Secciones Columnas Widgets

#TRIBUCAMP2018 @RAIOLANETWORKS
4.2.1 SECCIONES

Una sección es un contenedor principal donde podemos

añadir elementos (widgets) y columnas. Dentro de estas
secciones se pueden realizar los siguientes ajustes:

• Disposición: Alto, ancho, ancho entre columnas...

• Estilo: Colores, tipografías, fondos...
• Avanzado: Márgenes, rellenos, clases CSS...

#TRIBUCAMP2018 @RAIOLANETWORKS
4.2.1 COLUMNAS

Las columnas son bloques que se crean dentro de las secciones y ayudan a
estructurar y almacenar los elementos de la web: texto, imágenes, vídeos...
Aunque lo separamos de los widgets por que es un componente esencial
del maquetador web, realmente pertenece a ese grupo de elementos. Las
columnas también incluyen ajustes específicos de disposición, estilos y
avanzados.

#TRIBUCAMP2018 @RAIOLANETWORKS
4.2.3 WIDGETS

Son los elementos de la web: textos, imágenes, iconos,

vídeos, botones, mapas...

#TRIBUCAMP2018 @RAIOLANETWORKS
5. MIS PRIMEROS PASOS CON ELEMENTOR : CASO PRÁCTICO

Podemos descargar los archivos

del caso práctico en:

raiolanetworks.es/tribucamp

#TRIBUCAMP2018 @RAIOLANETWORKS
5. MIS PRIMEROS PASOS CON ELEMENTOR : CASO PRÁCTICO

La sección es de ancho completo y contiene una columna

con el contenido centrado.
6be58a
e0083e
ffcc46
fcfcfc
434264
f7f7f7

Título: Vidaloka normal, 65px Subtítulo: Roboto 100, 23px

Botón: Hind Vadodara, 18px

#TRIBUCAMP2018 @RAIOLANETWORKS
¡MUCHAS GRACIAS!

#TRIBUCAMP2018 @RAIOLANETWORKS