Elementor Pro – Tutorial: Qué es y qué nos ofrece

elementor pro tutorial

Antes de leer este artÍculo te recomendamos que, si puedes aprender a usar el constructor que ya lleva WordPress incorporado (el antes llamado Gutenberg), muchísimo mejor. Si todavía se te hace un poco cuesta arriba, sigue leyendo.

En uno de nuestros artículos anteriores, hemos visto qué es Elementor, sus características principales y lo que nos ofrece su versión gratuita.

Ahora nos centraremos en Elementor Pro, su versión de pago.

Aunque la versión gratuita de Elementor nos ofrece posibilidades interesantes, son solo una pequeña parte de lo que realmente podríamos hacer.

En este artículo veremos cuáles son las principales diferencias entre la versión gratuita de Elementor y su versión de pago. También veremos qué posibilidades adicionales tenemos con esta última.

Licencias de Elementor Pro

Para poder usar Elementor Pro, necesitamos activar una de sus licencias de pago.

El coste de las licencias es de 49 para 1 sitio, 99 para 3 sitios o 199 dólares para 1000 sitios.
Nos darán acceso a los elementos y plantillas Pro, así como al maquetador de temas y opciones especiales para WooCommerce.

Licencias de pago de Elementor Pro
Licencias de pago de Elementor Pro

Con la licencia de 1000 sitios tendremos acceso también a Experts. Se trata de un directorio de profesionales de Elementor en el que podemos añadir nuestro portfolio de trabajos y donde otra gente nos puede contactar.

Elementos de Elementor Pro

Podremos acceder a nuevos elementos catalogados como Pro y que nos permiten hacer páginas más versátiles. Vamos a ver cuáles son:

Elementos Pro 1/6
Elementos Pro 1/6
  • Posts: Nos permite añadir publicaciones de cualquier tipo, tanto entradas y páginas como tipos de publicación personalizados que hayamos creado o que haya añadido un plugin como por ejemplo los productos de WooCommerce.
  • Gallery: Una galería de imágenes que podremos mostrar en cuadrícula, estilo masonry o en columnas justificadas y ordenar a mano o aleatoriamente. Podemos también añadir enlaces en las imágenes y una capa de color que cubra las imágenes con cierta trasparencia.
  • Login: Nos permite añadir un formulario de acceso a la web, pudiendo configurar su apariencia y diferentes opciones, como por ejemplo los elementos a añadir y si queremos que se hagan redirecciones tras acceder o salir.
  • Nav menu: Nos permite añadir un menú de navegación.
  • Portfolio: Similar al anterior, pero en este caso enfocado a mostrar solo imagen y título, en un formato tipo portfolio, pudiendo seleccionar la cantidad de columnas y el formato.
  • Form: Podemos añadir un formulario con diferentes opciones, entre ellas podemos añadir acciones tras el envío, como por ejemplo enlazar a MailChimp, Active Campaign u otra herramienta de correos electrónicos y/o redireccionar a una página concreta.
  • Slides: Con este elemento podremos añadir un carrusel de diapositivas, configurar su apariencia e indicarle si queremos que se cambie de una a otra de forma automática o no y la velocidad en caso positivo.
  • Animated Headline: Un encabezado al que podemos añadir animaciones. Nota: Las animaciones cargan la página, por lo que es mejor no abusar de ellas.
Elementos Pro 2/6
Elementos Pro 2/6
Elementos Pro 3/6
Elementos Pro 3/6
  • Price List: Un listado de elementos a los que podemos añadir un precio, una descripción, un enlace y opcionalmente una imagen.
  • Flip Box: Con este elemento podremos añadir una tarjeta con determinada información y fondo, que al posar el ratón por encima, se de la vuelta y muestre otra tarjeta con otro contenido y fondo.
  • Media Carousel: Carrousel de contenido multimedia en el que podremos poner a modo de pase de diapositivas vídeos o imágenes con un enlace. Podemos también configurar cuántas dispositivas se verán al mismo tiempo y el efecto de transición.
  • Reviews: Valoraciones de clientes en formato de pase de diapositivas, que también nos permite configurar si se pasará de una a otra automáticamente o no y el formato con el que queremos que aparezcan.

  • Price Table: Con este elemento podremos añadir una tabla para mostrar un producto con su título, subtítulo, precio, características marcadas con un icono, un botón, un elemento de texto debajo del botón y si queremos podemos añadir una banda con color para indicar que es el elemento más popular o recomendado dentro de los producto que mostremos.
  • Call to Action: Una llamada a la acción con una imagen, título, descripción y un botón con enlace.
  • Testimonial carousel: Gracias a este elemento podremos añadir un carrusel de testimonios e indicar si queremos que se pase de uno a otro automáticamente a modo de pase de diapositivas.
  • Table of Contents: Una tabla con el índice de contenidos. En este elemento aparecerán todos los encabezados (títulos y subtítulos) de la página. Al principio de este artículo puedes ver un ejemplo de tabla de contenidos
Elementos Pro 4/6
Elementos Pro 4/6
Elementos Pro 5/6
Elementos Pro 5/6
  • Contdown: Una cuenta atrás hasta una fecha o que siempre comienza en un número concreto independientemente de la fecha en la que estemos. Interesante para ofrecer ofertas de tiempo limitado y crear urgencia.
  • Blockquote: Citas con diferentes formatos: Caja, comillas, con borde izquierdo o en formato limpio (sin un formato concreto). Nos permite también activar un botón para compartir la cita en Twitter con enlace a la página en la que aparezca.
  • Facebook Comments: Con este elemento podremos añadir una caja para que los usuarios puedan dejar comentarios con su cuenta Facebook en lugar de usar el sistema por defecto de WordPress.
  • Facebook Page: Nos permite mostrar el contenido de una página de Facebook y configurar qué elementos aparecerán.
  • Lottie: Un elemento muy curioso que nos permite subir animaciones en formato Json y añadirlas en nuestra web. Este tipo de animaciones son parecidas a un Gif y pueden descargarse de sitios como Lottie Files por ejemplo.
  • Share Buttons: Botones para compartir nuestra página en diferentes redes sociales, entre las que podemos encontrar las más comunes como por ejemplo Facebook, Twitter, LinkedIn, Pinterest y otras herramientas como Telegram o WhatsApp.
  • Facebook Button: Permite añadir un botón para dar me gusta o recomendar la página actual en Facebook.
  • Facebook Embed: Nos permite integrar un post, vídeo o comentario de Facebook en nuestra página y elegir entre añadirlo completo o añadir un resumen del mismo.
  • Template: Nos permite añadir una plantilla que hayamos creado desde el menú Plantillas de la administración de WordPress, que también nos servirán para la opción Theme Builder de la que hablaremos más adelante.

Elementos Pro 6/6
Elementos Pro 6/6

Plantillas Pro

Además de las plantillas gratuitas de Elementor, si usamos Elementor Pro tendremos acceso a las plantillas marcadas como PRO. Estas plantillas pueden ser interesantes para partir de una base prediseñada y ahorrar tiempo.

Por un lado tenemos las plantillas de bloque, que añaden secciones concretas. Por ejemplo: un CTA, una sección de preguntas frecuentes, un bloque con cuenta atrás, mapa o algún otro elemento, etc.

Plantillas de bloque
Plantillas de bloque

Y por otro lado tenemos las plantillas de página, que nos permiten añadir una plantilla de página completa. Están pensadas para temáticas concretas, aunque podemos hacer cambios para adaptarlas a nuestro gusto.

Plantillas de Página
Plantillas de Página

Elementos para WooCommerce de Elementor Pro

Además de los elementos Pro, podremos acceder a bloques específicos para WooCommerce si tenemos activo este plugin para gestionar nuestra tienda online.

Widgets para WooCommerce 1/2
Widgets para WooCommerce 1/2
  • Products: Con este bloque podemos añadir productos indicando cuántas columnas y filas han de aparecer, si queremos o no paginación y podemos elegir entre mostrar los últimos productos, solo los que tengan descuento, los que estén destacados , hacer una selección manualmente o mostrarlos todos.
  • Custom Add to cart: Un botón de añadir al carrito personalizado para un producto, mostrando o no la cantidad y en el que podemos añadir un icono.
  • Product Categories: Con este elemento podemos mostrar las categorías de producto de nuestra tienda. También podemos mostrar todas, una selección, las que tengan un mismo padre, subcategorías o una selección manual de categorías.
  • WooCommerce Breadcrumbs: Migas de pan para páginas relacionadas con WooCommerce.
  • WooCommerce Pages: Para integrar el contenido de una de las páginas de WooCommerce en nuestra página. Podemos elegir entre: Carrito, una página de producto (podemos seleccionar cuál), finalizar compra, seguimiento de pedido y mi cuenta.
  • Menu Cart: Este elemento está pensado para añadir en un menú y contiene el icono de carrito junto con el número de productos y el monto total que suponen los productos añadidos al mismo. Podemos seleccionar el icono entre un carrito, una bolsa o una cesta de la compra.
Widgets para WooCommerce 2/2
Widgets para WooCommerce 2/2

Maquetador de temas de Elementor Pro

Una de las características más interesantes de Elementor Pro es sin duda su maquetador de temas.

También es conocido como Theme Builder y nos permite maquetar todos los elementosde nuestro theme.

Podemos partir de hello by Elementor pro ejemplo, que es un tema limpio que solo añade estilos básicos para Elementor.

Maquetador de temas de Elementor Pro
Maquetador de temas de Elementor Pro

Entre las plantillas que podemos modificar se encuentran las siguientes:

  • Cabecera.
  • Pié de página.
  • Entrada individual.
  • Página individual.
  • Página de archivo.
  • Resultados de búsqueda.
  • Página de producto.
  • Archivo de productos
  • Página de error 404.

Plantillas condicionales

Podemos indicarle que las plantillas que creemos solo se ejecuten si se cumplen una serie de condiciones.

Le podemos indicar que se vean en todo el sitio, solo en las páginas de archivo, en páginas individuales o las de WooCommerce.

Podemos indicarle varias condiciones tanto para incluir opciones como para excluirlas. Podríamos por ejemplo mostrar una cabecera o pié de página en toda la web menos en las páginas de WooCommerce, donde mostremos otra diferente.

Plantillas condicionales
Plantillas condicionales

Cabecera

La cabecera de nuestra página, que es el primer elemento que se suele ver.

Podemos colocar el logo, el menú y opcionalmente otros elementos como un menú secundario, el teléfono, el email o un campo de búsqueda por ejemplo.

Hay plantillas predefinidas que podemos elegir de base:

Plantillas de cabecera
Plantillas de cabecera

Pié de página

La mayoría de sitios tienen como último elemento el pié de página. Aquí se pueden añadir por ejemplo el menú con los avisos legales, política de privacidad y de cookies, el copyright y opcionalmente otros elementos.

Plantillas de pié de página
Plantillas de pié de página

Plantilla de entrada

También podemos definir una plantilla para las entradas de nuestro blog, utilizando elementos dinámicos y definiendo qué estructura tendrán.

Plantillas de entrada
Plantillas de entrada

Para este caso tenemos condiciones específicas. Según la categoría, subcategoría, o autor, entradas con una etiqueta concreta o en entradas específicas o en todas las entradas.

Plantillas de página

Aquí podemos seleccionar cuál será la estructura de nuestras páginas o de páginas que cumplan unas condiciones concretas.

Plantillas de página
Plantillas de página

Podemos indicarle que solo se aplique esta plantilla a:

  • Las páginas de un autor en concreto
  • A cualquier página hija
  • Páginas hijas de una página específica
  • Solo a la home.

Páginas de archivo

Los archivos son páginas en las que se muestran todas las publicaciones de un tipo concreto. Por ejemplo el archivo de entradas de blog, el archivo de categorías, el de etiquetas o el de un tipo de publicación personalizado.

Plantillas de archivo
Plantillas de archivo

Entre las condiciones para archivos tenemos:

  • Archivo por fecha.
  • Resultados de búsqueda.
  • Archivo de entradas.
  • Autor concreto.
  • Categorías o subcategorías.
  • Subcategorías de una categoría concreta.
  • Según las etiqueta.

Resultados de búsqueda

Por si queremos diferencia la página de resultados de búsqueda del resto de archivos.

Utilizan las mismas plantillas que los archivos, pero se puede seleccionar otra diferente.

Página de producto

Plantillas para la página de producto individual de nuestra tienda online hecha con WooCommerce.

Podemos cambiar de sitio los elementos de esta página, cambiar la estructura y añadir o quitar elementos.

Plantillas de producto individual
Plantillas de producto individual

Podemos aplicar una plantilla a categorías o subcategorías concretas, a productos con una etiqueta específica o que sean del autor que especifiquemos como condición.

Archivo de productos

También podemos definir la plantilla que tendrán los archivos de los productos de nuestra tienda online con WooCommerce.

Plantillas de archivo de productos
Plantillas de archivo de productos

Las condiciones para este caso son: Página de tienda, resultados de búsqueda de productos, según la categoría de producto y según la etiqueta de producto.

Página 404: Página no encontrada

Por último podemos definir qué se mostrará en caso de que no se encuentre una página porque no existe. Esta página recibe el nombre de página 404 por el error que se produce al no encontrar una página concreta.

Plantillas para la página de error 404
Plantillas para la página de error 404

Crear Popups con Elementor Pro

Dentro del apartado Plantillas, también podemos crear Popups que se muestren según unas condiciones concretas.

Plantillas de Popup
Plantillas de Popup

Podemos por ejemplo añadir un Popup con un formulario de suscripción. Podemos conectar este formulario con una herramienta de email marketing como por ejemplo: MailChimp, ActiveCampaign, GetResponse o MailerLite entre otros.

Ejemplo de Popup
Ejemplo de Popup

En el caso de los Popups, además de las condiciones, tenemos la opción de añadir Triggers (accionadores) y reglas avanzadas.

Triggers para Popups
Triggers para Popups

Entre los triggers o acciones gatillo tenemos disponibles los siguientes:

  • Al cargar la página.
  • Cuándo se hace scroll hacía arriba o hacía abajo un porcentaje de la página.
  • Haciendo scroll a un elemento en concreto.
  • Al hacer click en la página. Podemos indicar la cantidad de clicks.
  • Después de un tiempo de inactividad.
  • Al intentar salir de la página.

En cuánto a las reglas avanzadas, podemos indicar que el Popup se muestre:

  • Después de un número concreto de visitas a la página o sesiones.
  • Que se muestre una cantidad de veces concreta.
  • Mostrarlo al llegar desde una url específica o si se accede desde buscadores, desde enlaces externos o internos.
  • Que no se muestre a usuarios logueados.
  • Que aparezca solo en unos dispositivos en concreto: Escritorio, tablet o móvil, en todos o en dos de ellos.
Reglas avanzadas para Popus
Reglas avanzadas para Popus

Conclusiones

Como hemos visto a lo largo de este artículo, Elementor Pro nos permite hacer un montón de cosas adicionales que no podemos hacer en la versión gratuita.

Por lo tanto, gracias a Elementor Pro, podemos dar ese punto visual y diferente a nuestra web, tienda o Landing Pages.

Por último , es importante tener en cuenta que algunos elementos como los carruseles o las animaciones cargan bastante la página y hay que usarlos con moderación. Pueden ser interesantes para Landing Pages muy visuales por ejemplo.

¿Prefieres delegar la parte de diseño en manos de expertos, para ahorrar tiempo y dolores de cabeza? Puedes solicitarnos presupuesto en el apartado de Diseño Web de nuestra web 😉

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *