Tutorial Elementor Pro: Cómo trabajar con los widgets – Parte 1

Elementor Pro Widgets

Si estás pensando en crear tu página web  y no quieres complicarte la vida con plantillas difíciles de gestionar, Elementor Pro es la solución recomendada por una numerosa comunidad de diseñadores web profesionales.

En esta entrada  vamos a diseccionar algunos de los widgets  de Elementor Pro, este poderoso maquetador visual, pero ante todo voy a explicarte las principales diferencias entre la versión gratuita y la de pago y qué son los widgets.

Sin más dilación, ¡empecemos!

Elementor Pro: diferencias entre la versión gratuita y la de pago

Ante todo quiero decirte que debes tener instalada la versión gratuita que puedes descargar del repositorio de WordPress.

Te dejo esta entrada para descubrir el potencial de Elementor  en su versión gratuita.

Básicamente las diferencias entre la versión gratuita y de pago de Elementor son cuatro:

Personalización integral

Con Elementor Pro puedes trabajar todas las secciones del tema, es decir el encabezado, el pie de página, además del diseño de las páginas de archivo y publicaciones individuales.

Te lo puedo asegurar que ningún otro tema o plugin ofrece la posibilidad de personalizar todas estas opciones, comparado con cualquier otro builder como Visual Composer, más pesado y  menos muuucho menos intuitivo :-/

Diseño visual

Puedes ahorrarte varios plugins de terceros, por ejemplo, para crear formularios de contacto de una página web, indispensables para captar clientes potenciales. El widget Forms de Elementor Pro revoluciona el proceso de maquetación de los formularios que podrás enlazarlos a cualquier plataforma de email marketing con unos pocos clics.

¡Los chicos de Elementor están siempre agregando nuevas funcionalidades a la versión de pago! Acaban de introducir la posibilidad de maquetar formularios  Popups con Elementor .

Plantillas y bloques profesionales

Elementor Pro te ofrece una gran variedad de plantillas y bloques que puedes personalizar fácilmente para crear sitios web atractivos y modernos: carruseles, titulares animados, como el que ves en la home, tablas de precios, testimonios y muchos otros elementos gráficos.

En esta primera entrada dedicada a aprender Elementor Pro, analicemos paso a paso los principales widgets.

Pero, ante todo…

Qué es un Widget en Elementor

Elementor llama los distintos elementos de diseño Widgets que van incorporando en sus versiones. Actualmente van por la 2.5.6

¿Cómo se usan los widgets de Elementor?

Simplemente arrastrandolos y soltándolos a la zona de diseño en la que nos interesa ubicarlos y al pasar por encima del widget lo podemos editar, duplicar y eliminar, como lo puedes ver aquí

¡Una gozada, súper sencillo! ¿O no?

Sigamos analizando los widgets de Elementor más destacados.

 

Widget Formulario

Con este widget de Elementor añadirás fácilmente un formulario de contacto a tu web:

 

Elementor Pro Widget secciones Formulario

En Contenido, puedes configurar las siguientes opciones:

Form Fields: añade los distintos campos del formulario, configurar si quieres motar la etiqueta, el tamaño, el tipo de campo, si es de texto, número, chechbox, de aceptación necesario para los textos legales, etc., además del ancho de la columna en porcentaje.

Submit Button: configura el texto, tamaño y alineación del botón de enviar

Actions After Submit: indicas las acciones después de enviar el formulario, a elegir entre enviar un correo a uno o varias direcciones, redirigir al usuario a una página, enlazar el formulario a una newsletter, etc.

Opciones adicionales: puedes establecer un ID al formulario, realizar un mensaje personalizado, como por ejemplo un mensaje de error.

 

 

 

 

 

Widget para Post

Muestra una lista de las entradas del blog que puedes personalizar a tu gusto e insertar en cualquier página, como verás en este ejemplo:

Widget Post Elementor Pro

Elementor Pro secciones Widget Post

Contenido

Veamos las principales opciones que nos ofrece este widget de Elementor Pro.

En la sección Disposición, es posible configurar las siguientes opciones:

Diseño: en el puedes seleccionar un formato Clásico o Cards, es decir Tarjetas, como el que  has visto arriba en el que aparece el avatar del autor.

Columnas:  puedes poner 1, 2, 5 en función de cómo te apetezca disponer las entradas y seleccionarlas conforme a la versión escritorio, tablet o móvil.

Post Image:  en la opción posición de la imagen puedes establecer las opciones: Arriba / Izquierda / Derecha / Ninguna

Mansory:  puedes activar o desactivar un tipo de maquetación que se va adaptando según el tamaño del contenido.

Título: puedes mostrar o bien ocultar el título del artículo

Etiqueta HTML del título: elegir que etiqueta asignarle al título de la entrada, de h1 a h6 o div, span o p.

Extracto: mostrar o ocultarel extracto del post y establecer también la longitud

Metadatos: puedes seleccionar los metadatos que se mostrarán y elegir entre autor, fecha, comentarios.

Leer más: mostrar o ocultar el botón de «Leer más»

En Paginación,  puedes seleccionar cómo paginar los resultados entre Ninguno, Números, Anterior / Siguiente o Números + Anterior / Siguiente

En la sección Estilo, se personalizan estos elementos:

Disposición

Espacio entre columnas: determina el espacio exacto entre las columnas

Espacio entre columnas:  estableces el espacio exacto entre las filas

Alineación:  puedes alinear el contenido en el widget elegiendo entre izquierda, centro o derecha

Card (se visualiza si eliges el formato Tarjetas)

Color de fondo: personaliza el color de fondo de la tarjeta

Color del borde: elige el color del borde de la tarjeta

Radio del borde:  personaliza la redondez de las esquinas de la tarjeta

Padding horizontal y vertical:  establece el relleno respectivamente horizontal y vertical de la tarjeta

Sombra de cuadro: puedes si aplicar una sombra predefinida en la tarjeta. En la imagen de arriba está aplicada.

Además de muchas otras personalizaciones más.

Widget Carrusel de Testimonios

Es un widget que mola muchísimo porque te permite agregar un carrusel deslizante de testimonios de clientes en una gran variedad de diseños, personalizables hasta en el más mínimo detalle.

 

En Contenido puedes introducir el texto del testimonio:


Diapostivas

Artículos: muestra una lista de todos elementos que puedes arrastrar y soltar para cambiar el orden.  También puedes duplicar o eliminar haciendo clic en el icono  Duplicar o Eliminar

Imagen: elige la foto de la biblioteca de medios

Nombre: escribe el nombre del cliente

Título:  introduce el cargo del cliente

Diseño: puedes seleccionar entre por defecto o burbuja

Disposición: elige entre Imagen en línea, apilada, arriba, izquierda o derecha

Slides per view: selecciona el número de diapositivas que quieres mostrar de una vez, de 1 a 10

Diapositivas a desplazar: selecciona cuántas diapositivas se desplazarán en cada pase.
Es posible elegir entre por defecto, de 1 a 10

 

Opciones adicionales

Puedes elegir si ocultar o mostrar las flechas, la duración de la transición, velocidad, entre otras.

 

 

Widget Portfolio

Si quieres aprender Elementor Pro, con el widget Portfolio podrás mostrar páginas, artículos y custom post types de manera muy visual y atractiva.

Elementor Pro Widget Portfolio

Contenido

Columnas: establece el número de columnas visualizable en el widget

Posts per Page:  elige el número de entradas a visualizar

Tamaño de la imagen: entre miniatura, media, grande, completo

Mansonry: si quieres activar o desactivar la visualización, tipo Pinterest.

Item Ratio: modificas el tamaño de la imagen

Show title: si quieres activar o desactivar el título de la entrada que se visualizará al pasar encima el ratón

Etiqueta HTML de título: por defecto, h3 pero puedes elegir entre cualquier tipo de h

Consulta

Origen: elige la fuente desde la cual mostrar el contenido. Puedes elegir entre Páginas, Entradas, Selección Manual, Consulta Actual

En la sección Estilo, puedes establecer el espacio entre columnas y de filas, radio del borde de las imágenes visualizadas.

Widget Tabla de Precios

Si necesitas añadir los precios de tus productos, con el widget Tabla de precios de Elementor Pro tienes un montón de opciones personalizables.Widget Tabla de Precios Elementor Pro

En la sección Contenido, puedes configurar el nombre del producto en el apartado Header, además de un subtítulo

Pricing

Currency symbol: elige el símbolo correspondiente a la moneda que usas (euro, dólares, etc.)

Precio: escribe el precio del servicio

Currency format: selecciona el separador (punto o coma)

Sale: puedes activar o desactivar rebajas introduciendo el precio original. Se visualizará el descuento

 

En Features puedes listar los beneficios o las características del producto, mientras que en Footer, el título del botón de la llamada a la acción. En el ejemplo «Lo quiero» y el enlace a la página correspondiente.

En la sección Ribbon, si quieres mostrar una cinta en la parte superior con un texto que quieras destacar.

 

Espero que este primer  tutorial dedicado a descrubrir Elementor Pro te haya servido.

Si tienes agluna duda o inquietud, puedes dejar tu comentario abajo o escribirme aquí

Por supuesto si te ha sido de ayuda, ¡comparte el tutorial en tus redes sociales! ♥ 🙂

2.2 (43.95%) 162 vote[s]
Silvina D.

Silvina D.

Enamorada de WordPress, del emprendemiento online y el senderismo, mi propósito es ayudarte a diseñar una página web que te permita mostrar lo que te hace especial y conectar con el cliente que más resuena con tus valores para que puedas diseñar el negocio de tus sueños.

¿Necesitas algo en concreto?

Deja un comentario

Responsable » Silvina Dell'Isola Urdiales.
Finalidad » Moderación de los comentarios en el blog.
Legitimación » Tu consentimiento.
Destinatarios » Los datos que me facilitas estarán ubicados en los servidores de WebEmpresa. Para más información sobre la política de privacidad del servicio de hosting, visitar Aviso Legal de Webempresa.
Derechos » Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos escribiéndome hola@silvinadellisola.com así como el derecho de presentar una reclamación ante una autoridad de control.