Elementor es un page builder, constructor o maquetador. Elementor es un constructor de tipo visual o frontend.

Un page builder o constructor, permite dar vistosidad a las páginas realizadas con WordPress a través de: crear estructuras y distribuciones que no permite el editor por defecto de WordPress, añadir elementos especiales de diseño como iconos, imágenes, títulos, carruseles de imágenes, mapas Google, separadores, barras de progreso, acordeones, etc. Todo ello sin tener que conocer ni tener que tocar nada de código.

Elementor es un plugin que se añade a WordPress para implementar sus funcionalidades de maquetación.

Elementor es un maquetador visual Freemium. Es decir, tiene una versión gratuita y una versión premium (de pago).

El panel de administración del Constructor está traducido al español.

 

QUIERO ELEMENTOR

 

 

Mega Guía Elementor

 

 

1.- Qué incluye la versión gratuita y la versión de pago de Elementor

 

La versión gratuita de Elementor incluye todas las funciones estructurales del page builder. Es decir, incluye todas las opciones de construcción con secciones y distribución de columnas.

La diferencia con la versión gratuita del page builder radica en los elementos que incluye.

Los elementos o widgets son los bloques finales de que dispone el constructor. Cada elemento tiene una forma y funcionalidad diferente. De esta manera hay elementos para crear un separador, un icono, un mapa de Google, etc.

Yo personalmente prefiero llamarlos elementos y no widgets para no crear confusión con los widgets de wordpress.

Pues bien, la diferencia entre la versión gratuita y la versión premium de Elementor es que la versión gratuita NO incluye todos los elementos del constructor. Por el contrario, la versión de pago SI incluye todos los elementos de que dispone el maquetador visual.

 

 

2.- Precios de la versión de pago de Elementor

 

El page builder Elementor ofrece 3 planes de precios diferentes en función del número de licencias que queramos contratar, y no en función de la duración del plan.

Es decir, que habrá diferentes planes según el número de sitios web en los que queramos utilizar el constructor. Por el contrario, todos los planes tienen la misma duración de 1 año.

 

Vamos a ver los diferentes planes de contratación:

 

planes y precios maquetador visual elementor

Diferentes planes y precios del page builder ELEMENTOR

 

 

2.1.- Plan Elementor PRO for 1 site (para un sitio web)

 

El plan Elementor for 1 site tiene una duración de 1 año, solo tiene una licencia. Es decir, solo vale para utilizarlo en una única página web.

El plan incluye todos los elementos del constructor.

Este plan tiene un precio de 49 $

 

QUIERO ELEMENTOR PRO

 

2.2.- Plan Elementor PRO for 3 sites (para 3 sitios web)

 

El plan Elementor for 3 sites tiene una duración de 1 año e incluye 3 licencias. Es decir, vale para utilizarlo en 3 páginas web diferentes.

El plan incluye todos los elementos del constructor.

Este plan tiene un precio de 99 $

 

 

2.3.- Plan Elementor PRO for Unlimited Sites (para nº ilimitado de sitios web)

 

El plan Elementor for Unlimited sites tiene una duración de 1, al igual que el resto de los planes. Pero este incluye ilimitadas licencias. Es decir, podremos utilizar el plugin en todos los sitios web que queramos.

El plan incluye todos los elementos del constructor.

Este plan tiene un precio de 199 $

 

Se puede pagar con Tarjeta o Paypal

QUIERO ELEMENTOR PRO

 

 

3.- Características generales del page builder Elementor

 

Vamos a ver ahora las características más destacadas de este page builder.

 

 

3.1.- Elementor es un page builder visual

 

Esto quiere decir, que conforme vayamos realizando modificaciones NO tendremos que hacer vistas previas para ver los resultados. Los cambios los iremos viendo en tiempo real.

Esto es una gran ventaja cuando estamos personalizando estilos y diseños de textos, iconos, etc. Ya que los ajustes se realizan mucho más rápido que con un constructor tipo backend o no visual.

 

 

3.2.- Elementor es un plugin

 

Elementor es un plugin y no una plantilla. Es decir, con Elementor no podrás personalizar el diseño del header de la web, apariencia del menú o el footer. Estos elementos son cosa de la plantilla.

También hay plantillas que incluyen algún constructor. Como es el caso de la plantilla Divi, que incluye el Divi builder. Pero este no es el caso de Elementor.

Con Elementor podrás maquetar y personalizar el contenido de cada una de las páginas de tu WordPress en las que quieras emplearlo, en vez del editor por defecto de WordPress.

 

 

3.3.- Elementor y el Control total de las secciones

 

Las secciones son los contenedores principales y más grandes de un page builder. En el interior de las secciones se incluirán columnas y elementos dentro de éstas últimas.

En una página puede haber varias secciones.

Con el page builder Elementor se ha realizado un notable esfuerzo por tener un control total sobre las características de las secciones.

No solo se puedan poner colores, imágenes, degradados y vídeos como fondos de sección, que es algo más habitual. Sino que se tenga un control de las dimensiones de las secciones, de la separación entre columnas y de la disposición de los elementos dentro de las secciones.

 

 

 

3.4.- Distribución de anchuras de columnas personalizadas con Elementor

 

Elementor, es de los pocos constructores que permite personalizar de manera independiente la anchura de cada una de las diferentes columnas incluidas dentro de una sección.

Además, esa personalización de anchura de las columnas se realiza de forma dinámica.

 

 

 

3.5.- Opciones de posición de columnas en sección y elementos en columnas

 

El maquetador visual Elementor permite varias opciones de colocación de las columnas en las secciones, y de los elementos en las columnas.

De esta manera nos podemos ahorrar el tener que meter separadores como se suele hacer con otros constructores.

 

 

 

3.6.- Personalizar margin y padding

 

El Page builder dispone de opciones de personalización de margin (márgenes exteriores) y de opciones de padding (márgenes interiores)

Con estas opciones se puede personalizar aún más la posición de los diferentes elementos estructurales en la página.

 

 

3.7.- Opciones específicas para dispositivos móviles y modo visualización móvil

 

El constructor Elementor dispone de opciones específicas de configuración para dispositivos móviles.

Es decir, existen opciones que se pueden personalizar de manera independiente para diferentes tipos de dispositivos.

Cuando veas un pequeño icono circular en forma de monitor significa que dicha opción se puede personalizar para Escritorio, Tablet y móvil. Solo tienes que hacer clic en el icono en forma de monitor y se te mostrarán la opción para Tablet y móvil.

 

personalizar diseño plugin elementor moviles y tablet

Elementor tiene opciones de personalización independientes para diferentes dispositivos escritorio y móviles

 

Además, en la parte inferior tienes la opción para visualizar los cambios que vas realizando tanto en escritorio, como Tablet o móvil.

 

 

3.8.- Diseños predefinidos para tener un punto de partida

 

Elementor incluye un montón de diseños predefinidos que puedes reutilizar y modificar en tus proyectos. Algunos de los diseños son gratuitos y otros solo son accesibles si disponemos de la versión premium.

Aquí puedes ver más de 100 diseños predefinidos con sus demos: Diseños Elementor

VER DISEÑOS ELEMENTOR

 

diseños para usar elementor

Diseños reutilizables de Elementor

 

 

3.9.- Guardar, reutilizar, exportar e importar diseños

 

Elementor te permite guardar secciones y páginas completas y luego reutilizar dichos recursos en otras páginas de la misma web.

Además, Elementor no solo se queda ahí. Sino que también permite exportar diseños de páginas y luego importarlos en otros sitios web diferentes (que también utilicen Elementor)

 

 

4.- Estructura del maquetador visual Elementor

 

Los elementos estructurales de maquetación de que dispone Elementor son los siguientes:

 

i.- Secciones: las secciones son los contenedores principales del constructor. Son los contenedores más grandes, y en una página se pueden incluir más de uno.

Las secciones se utilizan habitualmente para dividir una página en varias partes diferentes, haciendo cambios en el color de fondo.

En la imagen de más abajo, la sección sería el contenedor principal en el cual se incluyen las cuatro columnas.

ii.- Columnas: las columnas marcan la distribución dentro de cada sección. En la imagen de más abajo tenemos una sección compuesta por 4 columnas.

Dentro de las columnas se ubicarán los elementos.

iii.- Elementos o widgets: son los bloques finales del page builder. Cada elemento tiene una funcionalidad diferente.

Como antes he comentado, prefiero llamarlos elementos y no widgets para no crear confusión con los widgets de WordPress.

Hay elementos para añadir iconos, formularios de contacto, textos, botones, etc.

En el ejemplo de más abajo tienes 3 elementos tipo “Texto”.

 

Elementor estructura

Secciones, columnas y elementos son los bloques estructurales del page builder Elementor

 

 

5.- Elementos del Constructor Elementor.

 

Vamos a ver ahora los diferentes elementos de que dispone este maquetador visual.

Los elementos son los bloques finales que utiliza este page builder. Cada elemento tiene una finalidad diferente.

Como antes te he comentado, existen elementos que incluye la versión gratuita del page builder y otros elementos que solo incluye la versión premium

Vamos a ver por separado unos y otros.

 

 

5.1.- Elementos del page builder Elementor versión Gratuita

 

 

5.1.1.- Elemento Encabezado (Heading)

 

El elemento Encabezado del page builder Elementor está pensado para añadir títulos a las páginas. Podremos especificar que tipo de título HTML queremos. Es decir, podremos elegir entre H1,H2,H3,H4,H5 y H6

Podremos añadir un enlace al título, tipo de fuente, tamaño, estilo, decoración, transformación, espaciado entre letras, etc.

También podremos añadir una sombra personalizada al título de texto y una animación de entrada.

 

 

5.1.2.- Elemento Imagen (Image):

 

Este elemento del maquetador visual Elementor te permite añadir una imagen.

Podrás elegir un tamaño predeterminado o ajustar dicho tamaño en tiempo real de manera independiente para cada dispositivo.

Podrás personalizar bordes (incluso radio) y añadir una sombra personalizada. También, podrás personalizar la opacidad de la imagen de manera dinámica, e incluso añadirle un movimiento al poner el ratón sobre la imagen.

 

 

5.1.3.- Elemento Editor de Texto (Text Editor):

 

Este elemento incluye el editor por defecto de WordPress. La misión de este elemento es poder añadir a la página bloques de texto.

Podremos personalizar color y tipografía a utilizar en el elemento.

 

 

5.1.4.- Elemento Vídeo (Vídeo):

 

Este elemento nos permite incrustar fácilmente un vídeo de YouTube o Vimeo en la página que estemos creando.

Podremos personalizar aspectos como que el vídeo se reproduzca de manera automática (auto-reproducir), mostrar u ocultar vídeos sugeridos, mostrar u ocultar controles del reproductor, mostrar u ocultar título y acciones del reproductor, e incluso silenciar el vídeo.

Podrás elegir también entre los formatos: 3:2, 16:9, 4:3

 

 

5.1.5.- Elemento Botón (Button):

 

Elemento que no puede faltar en un page builder y que nos permitirá añadir botones personalizados a la página.

Dispone de todas las opciones necesarias para personalizar el diseño de los botones como tamaño, colores texto y fondo, borde, radio curvatura esquinas, etc.

Además, dispone de opciones de personalización del diseño del botón en estado “hover”. Es decir, cuando se pone el ratón sobre el botón. En este estado podremos personalizar color del texto, color de fondo, borde y animación.

 

efecto al poner ratón sobre el botón con el constructor elementor para wordpress

Configurar efecto Hover en elemento botón del page builder Elementor

 

 

5.1.6.- Elemento Separador (Divider):

 

Este elemento te servirá para separar diferentes elementos con una línea personalizada en cuanto a forma, tamaño y colores.

Habitualmente este elemento se utiliza situándolo debajo de algunos tipos de títulos.

 

 

5.1.7.- Elemento Espaciador (Spacer):

 

Este elemento sirve para añadir un determinado espacio en blanco. La altura de este espacio la podremos personalizar estableciendo los píxeles de dicho espacio.

Además, este espacio lo podremos personalizar de manera independiente en dispositivos de escritorio, Tablet y móvil.

 

 

5.1.8.- Elemento Google Maps:

 

Este elemento nos permite incrustar un Mapa de Google con localizador de posición. En la configuración del elemento introduciremos la dirección de la localización.

Podremos personalizar el nivel de aproximación o Zoom del mapa, la altura de la ventana de visualización del mapa y la opción de permitir o no el Scroll sobre el Mapa.

 

 

5.1.9.- Elemento Icono (Icon):

 

Con este elemento podremos insertar un icono de la fuente Awesome aislado o incluido en un círculo (por defecto, apilados y encuadrado).

Podremos añadir un enlace al icono, personalizar sus colores, tamaño, rotación, etc.

Podremos añadir al icono efectos hover (al poner el ratón sobre el mismo) de animación y cambio de color.

 

 

5.1.10.- Elemento Cuadro de imagen (Image Box)

 

Es una composición formada por una imagen, un título y un texto (en ese orden).

Realmente podemos crear esta composición con 3 elementos. El elemento imagen, más el elemento título, más el elemento editor de texto.

Pero bueno, si lo quieres hacer más rápido lo puedes hacer con esta composición por defecto. Pero también debes tener en cuenta, que la personalización de la composición siempre será mucho menor que si la creamos nosotros con 3 elementos independientes.

 

comosiciones del page builder elementor

Elemento Cuadro de imagen page builder Elementor

 

 

5.1.11.- Elemento Caja de icono (Icon Box):

 

Composición como el elemento anterior con la diferencia de que ahora tenemos un icono en vez de una imagen encabezando la composición.

Lo dicho para el anterior elemento sirve completamente para este también.

 

 

5.1.12.- Elemento Galería de Imágenes (Image Gallery):

 

Este elemento permite añadir una galería de imágenes a la página. Al hacer clic sobre una de ellas se mostrará en una capa overlay que dispondrá de flechas para visualizar las contiguas.

Podremos personalizar el tamaño de las imágenes de la galería, el número de columnas para distribuir las imágenes (desde 1 hasta 10 columnas).

También podremos personalizar dinámicamente el espaciado o margen existente entre las diferentes imágenes de la galería. Además, también tenemos opción para mostrar u ocultar la leyenda asociada a cada imagen.

 

 

5.1.13.- Carrusel de imágenes (Image Carousel)

 

Muy interesante este elemento, que nos permitirá añadir un carrusel de imágenes. Esto nos puede servir para mostrar el típico carrusel de logos de empresas o fabricantes.

 

Plugin para Woocommerce que muestra carrusel de marcas o fabricantes: Carrusel marcas Woocommerce

 

El nivel de personalización del carrusel es muy alto. Podremos personalizar tamaño, número de imágenes que aparecen en la primera visualización (desde 1 hasta 10 imágenes), el número de imágenes que pasan al desplazar el carrusel (desde 1 hasta 10).

El elemento Carrusel de imágenes también tiene un montón de opciones relacionadas con la reproducción y movimiento del carrusel. Así como de la personalización de los diferentes elementos de navegación (puntos y flechas)

Nota: los elementos de navegación se utilizan para para pasar el carrusel.

También tenemos la opción de mostrar la leyenda y/o la descripción asociada a cada imagen.

 

añadir un carrusel de imágenes con page builder elementor para wordpress

Carrusel de imágenes con Elementor

 

 

5.1.14.- Elemento Listado de iconos (Icon List):

 

El elemento Listado de iconos del maquetador visual Elementor, nos permitirá añadir una lista de títulos con un icono situado a la izquierda de cada título.

Algo muy utilizado para listar características, servicios de empresas, etc. El grado de personalización de este elemento es muy grade.

Podremos poner diferentes iconos asociado a cada título. Podremos personalizar el espacio de interlineado entre cada título.

Podremos personalizar el tamaño de los iconos, color normal y hover. También podremos personalizar el color del texto de título (normal y en posición hover), el espacio entre los iconos y el texto (sangría), tipografía, etc.

También podremos incluir un separador lineal entre cada título.

 

listados de iconos con elementor page builder

Mostrar una lista de iconos con Elementor

 

 

5.1.15.- Elemento Contador (Counter)

 

Este elemento Contador de Elementor, permite incluir el típico contador animado que va desde un número inicial hasta otro número final, que podremos personalizar en la personalización del elemento.

Podremos colocar un prefijo y/o sufijo al número, que podremos utilizar para poner el signo “€” u otro. Además, podremos personalizar la duración de la animación, y poner un título debajo.

También, podremos personalizar el color y tipografía del número y el texto.

 

 

5.1.16.- Elemento Barra de Progreso (Progress Bar)

 

El elemento Barra de progreso del maquetador Elementor permite añadir una barra animada con un determinado porcentaje de relleno.

Podremos personalizar el porcentaje de relleno de la barra, personalizar el color de esta, la opción de mostrar u ocultar el porcentaje y poner un texto encima. Además, podremos personalizar el color de la barra (relleno y fondo) y texto.

 

 

5.1.17.- Elemento Recomendación (Testimonial)

 

Típico elemento para mostrar recomendaciones o testimonios de otras personas en nuestra página web.

Además, Elementor muestra un tipo de recomendación diferente a las habituales. En las recomendaciones sitúa el texto de recomendación en la parte superior y en la parte inferior la imagen, Nombre y puesto de trabajo.

Podremos personalizar el diseño de los diferentes elementos: texto recomendación, imagen, nombre y puesto de trabajo. También, podremos añadir un enlace a la imagen y nombre de la persona que hace la recomendación.

 

 

5.1.18.- Elemento Pestañas (Tabs)

 

Este elemento del page builder Elementor permite añadir contenido visualizado a través de pestañas. Podremos mostrar las pestañas horizontal o verticalmente. Además, podremos personalizar los bordes, título y contenido de las pestañas.

Debido a que la visualización en móvil no es muy buena, el uso de este elemento es bastante bajo y ha sido sustituido por el elemento tipo acordeón.

 

 

5.1.19.- Elemento Acordeón (Accordion)

 

Un acordeón esta formado por una serie de bloques o títulos desplegables, que muestran un contenido cuando se despliegan (texto o imágenes), con la peculiaridad de que solo puede haber un bloque desplegado. Muy utilizado para crear Preguntas frecuentes o FAQS en las webs.

Podremos personalizar el tipo de título HTML de cada bloque de texto o título.

También podremos personalizar el icono que se mostrará en el título, tanto en la posición cerrada como en la posición abierta del bloque. Además, podremos personalizar el ancho de borde, el diseño de los títulos y fondo, diseño del contenido de texto y fondo, así como de los iconos de los títulos.

 

Elemento Acordeón del page builder Elementor

Elemento Acordeón del builder Elementor

 

 

5.1.20.- Elemento Alternar / Altarnador (Toggle)

 

Con la misma apariencia que el elemento acordeón. Es decir, bloques o títulos desplegables que muestran un contenido de texto o imágenes cuando se despliegan.

La diferencia que hay entre un alternador y un acordeón, es que el alternador si permite que haya varios bloques desplegados al mismo tiempo, mientras que el acordeón solo permite que haya un bloque desplegado.

Las opciones de personalización son las mismas que las que presenta el acordeón.

 

 

5.1.21.- Elemento Iconos Sociales (Social Icons)

 

Este elemento permite mostrar los iconos de redes sociales en los que estamos presentes. El elemento dispone de todas las redes sociales más conocidas.

Podremos añadir todos los iconos de redes sociales que queramos, con el correspondiente enlace hacia nuestra página en cada una de las redes sociales.

Podemos mostrar los iconos en forma cuadrada, redonda o cuadrada con bordes curvados. Además, podremos personalizar el tamaño de los iconos y la separación existente entre estos.

También podremos elegir un efecto de movimiento hover.

 

 

5.1.22.- Elemento Alerta (Alert)

 

Este elemento permite mostrar carteles de aviso en la web. Podremos personalizar todo en cuanto a colores y diseño.

Incluso podremos decidir si se muestra un aspa o no para cerrar el cartel. También podremos personalizar el diseño y anchura de la banda lateral o borde izquierdo del cartel

 

elemento alerta de Elementor

Elemento del maquetador Elementor para mostrar ventanas de avisos

 

 

5.1.23.- Elemento SoundCloud

 

Puedes incrustar audios desde SoundCloud fácilmente a través de este elemento. Además, podrás personalizar muchas opciones como:

Formato del reproductor, auto-reproducir, botón comprar, botón me gusta, botón descarga, botón compartir, comentarios, número de reproducciones y nombre de usuario.

 

 

5.1.24.- Elemento Shortcode

 

Este elemento del page builder Elementor sirve para añadir una ventana de código en la que introducir un Shortcode. También nos podría valer utilizar el elemento editor de texto en la pestaña HTML del editor.

 

 

5.1.25.- Elemento HTML

 

Este elemento permite añadir una ventana de código en la que podemos añadir el código HTML que queramos.

Como en el caso anterior, también podríamos utilizar para este menester el elemento editor de texto con la pestaña HTML abierta.

 

 

5.1.26.- Elemento Ancla de menú (Menu anchor)

 

Este elemento sirve para crear la típica web en una sola página, con los correspondientes saltos en la navegación.

Seguro que habéis visto alguna web en la cual, al hacer clic en los elementos del menú, éstos te llevan a diferentes partes o secciones de una misma página.

Se consigue un desplazamiento suave y de calidad.

 

 

5.1.27.- Elemento Sidebar

 

Este elemento permite añadir un sidebar o barra lateral. Podremos seleccionar que barra lateral queremos mostrar de las disponibles (barras laterales y bloques del footer).

 

 

5.1.28.- Elementos tipo Widget de WordPress

 

Dentro de esta categoría se engloban todos los widgets que vienen por defecto en WordPress. Es decir, el page builder Elementor nos permitirá añadir cualquiera de los widgets disponibles en wordpress a nuestra página web.

 

 

5.2.- Elementos del page builder Elementor versión de Pago

 

PROXIMAMENTE…..

 

Soy un bloguer al que le encanta el diseño web, me apasiona WordPress y la formación. Me encantaría que este blog (horizonweb.es) te sirviera de ayuda, seas un profesional en el sector o no. Me encantaría poder ayudarte a desarrollar tu proyecto online, ya sea una web de empresa o autónomo, un blog, una plataforma de cursos online o cualquier otro tipo de proyecto.

Compártelo ya!!

RECIBE GRATIS CURSO WORDPRESS/DIVI Y MÁS:

 1.- CURSO WORDPRESS Y DIVI (22 vídeos)

2.- GUÍA PARA CREAR UNA PÁGINA WEB PROFESIONAL

3.- VÍDEO TRAINING, MIS PLUGINS IMPRESCINDIBLES WORDPRESS

4.- GUÍA TALLER SEO PARA WORDPRESS

Consentimiento

Vé a tu buzón de correo y confirma la suscripción. Si no encuentras el correo de confirmación mira en la carpeta de SPAM.