Elementor Page Builder: Tutorial sobre el maquetador visual definitivo

No busques más porque hoy te traigo Elementor Page builder, un Tutorial sobre el maquetador visual definitivo, Elementor Pro. 

¿Te interesa?

Cuando descubras Elementor verás que diseñar tu web será coser y cantar, yo como diseñador web WordPress lo utilizo siempre que puedo con mis clientes y proyectos propios.

Y es que Elementor Pro es la bomba, cuando la gente ve lo fácil y rápido que es crear una página web con WordPress usando un Page Builder como este, alucina.

Si simplemente elijes las opciones de la plantilla y usas el editor Gutenberg (incluido en WordPress) no vas a ser capaz hacer ni de lejos un diseño como te permite Elementor, y lo mejor,de forma tan sencilla que hasta un niño puede hacerlo.

Yo antes ya usaba un maquetador y creía que tenía el mejor, hasta que descubrí Elementor Pro

 

¿Qué es Elementor?

Elementor es un constructor web, es decir, una herramienta que se fusiona con WordPress para crear páginas webs de forma muy sencilla y rápida. Sólo tienes que arrastrar y soltar elementos y conseguirás webs con un diseño espectacular.

Elementor y concretamente Elementor Pro te permite hacer ese diseño tan increíble que has visto en otras webs ya que las cantidad de opciones de diseño es realmente sorprendente.

Y lo mejor de todo, hasta un niño puede crear una web gracias a Elementor

Existen muchos page builder, pero no tan buenos como Elementor.

 

Por qué Elementor Page Builder es el maquetador visual definitivo

Si no te valen las razones que te acabo de dar, continua,  porque podría estar hablando durante horas.

Si quieres convencerte tienes que ver este Tutorial donde te explico todas las funcionalidades y por qué Elementor Page Buildery sobre todo Elementor Pro es el mejor del mercado para crear una web con WordPress, te dejo este video.

 

 

Es cierto que existen muchos y muy bueno editores visuales:  Divi,  Thrive Architect (antiguo Thrive content builder), Beaver builder, Live composer, page builder etc… la diferencia con todos ellos está en el detalle a favor de Elementor, es  la facilicidad de uso que este ofrece y opciones de diseño que son espectaculares.

Todo ha ido evolucionando desde que Visual Composer apareciera como uno de los principales maquetadores  y que hoy día se ha quedado a años luz del constructor web que estamos viendo.

 

Elementor Page builder lo ha sabido hacer muy bien y a diferencia de otros maquetadores en los que la versión gratuita solo ofrecen opciones muy básicas sin dejarte ver prácticamente lo que pueden dar de sí.

 

Elementor ha tirado la casa por la ventana y su versión gratuita es muy buena y te deja abierta la puerta a una opción Premium con muchísimas opciones más y que sin duda merece la pena para conseguir un diseño web espectacular.

La principal baza con la que cuenta Elementor para WordPress es que la versión gratuita es mejor que muchos constructores web de pago. Cunado te hable de él y lo probé me encanto y como te digo siempre he tenido ganas de comprar la versión pro que como luego verás merece la pena y mucho.

 

 

Yo siempre recomiendo versiones de pago como pudiste leer en las mejores plantillas de wordpress premium y gratuitas

¿Por qué? Lo he dicho muchas veces, el que sea gratis normalmente genera descofianza por miedo a que los desarrolladores dejen de dar soporte, en el caso de Elementor no es así como se suponía en su momento y como así está demostrando porque ofrece su versión gratis como escaparate para ofrecer todo su potencial con elementor pro.

 

Por qué elegir este page builder para WordPress y no otro

Si los comparas con todos editores visuales para WordPress de los que te he hablado antes, en la versión gratis supera a muchos pero en la versión Premium, literalmente les pasa por encima.

Vamos a ver por qué elementor page builder es el mejor constructor web del mercado.

Elementor Page builder no deja de mejorar, cada semana incorpora nuevas funcionalidades que iré contándote e  incorporando al post. Sencillamente genial

 

Los principales motivos por los que destaca Elementor page builder son:

• Elementor esta pensado íntegramente en el usuario, se trata de un plugin drag and drop para usar WordPress muy manejable.

• Cualquier persona puede manejar elementor ya que sus funciones son muy sencillas y las opciones de personalización ilimitadas.

• Su front end, rapidez y posibilidades de ver al momento los cambios no lo he visto en otros editores visuales.

• Compatibilidad: La compabilidad siempre que la plantilla esté bien diseñada es y parece ser casi absoluta. Si unimos elementor a una buena plantilla los resultados son inmejorables.

 

Elementor hace las siguientes recomendaciones entre las que se incluye la plantilla Generate Press.

Su compatibilidad con Generate Press que es la plantilla que uso era otro de los motivos por lo que he optado por el además Elementor lo recomienda.

Puedes leer el Tutorial GeneratePress para que veas el gran tema que es.

 

Todavía no te has convencido, ¿Sabes que Elementor Page Builder cuenta con más de 1 millón de instalaciones activas hasta el momento?

 

Los datos hablan por sí solos , Elementor cuenta con más de 1M de instalaciones y valoraciones de 5 estrellas

 

Características del plugin Elementor

Si te fijas en las descargas  hasta el momento han sido brutales y va a más.

Si te mueves un poco por la rama del diseño y marketing digital Elementor en el CMS wordpress se está convirtiendo en la mayor herramienta de maquetación web en la actualidad, todo el mundo habla de él.

 

Las valoraciones son impresionantes:

 

 

• Más de 5 Millones de instalaciones activas.

• Actualizaciones todas las semanas.

• 5 estrellas de valoración.

• Facíl de usar: de todos lo editores visuales con los que he trabajado, este es el más sencillo, con un interfaz muy usable, en seguida te haces a él. He usado maquetadores que después de meses tardaba en encontrar las opciones de foma rápida, con elementor vas directo

• Es ligero: es muy fluido en el manejo.  Divi no está mal, Visual composer es tedioso, Elementor es otra historia, es super rápido, no se atasca y esto cuando estas diseñando es una ventaja.

• Es de código abierto: esto permite que evoluciona más rápido al permitir que cualquier programador pueda aportar, corregir errores.

• De la misma manera que wordpress cuenta con tantos plugins en su repositor el que sea abierto facilita más el crecimiento de este constructor web.

• Usar código CSS en elementor es innecesario si no quieres, a no ser que seas diseñador web y quieras algo muy concreto, no te va a hacer falta utilizar nada de código, simplemente arrastra suelta y usa la imaginación.

• Usa pocos shortcodes, esto es un problema en otros editores si decides cambiar porque al desinstalar el plugin de maquetación anterior dejar restos repartidos por la web y has de eliminarlos manualmente, con elementor si en un futuro decides prescindir de el no provoca esta «suciedad».

• Velocidad: Los tiempos de carga con Elementor han mejorado. Elementor ha dado un paso más y no tendrás que esperar a que carguen los módulos, refrescar cachés, etc. Como todo  maquetador generar mucho Javascript (normal para todas las opciones que incluye)Elementor emuy rápido y se puede optimizar muy bien la velocidad de carga.

• De cara al seo esto funciona muy bien ya que no usa estilos inline en el código.

• Elementor trabaja sobre el contenedor no modificando ni forzando aspectos de la plantilla al tocar header, footer…

• No sólo esta preparado para ser responsive si no que además podrás editar la vista del móvil o Tablet, independientemente del escritorio, incluso podrás desactivar ciertos elementos en la versión móvil. Todo esto va a permitir una mejor usabilidad en la versión móvil sin tener que prescindir de diseño en otros dispositivos.

• Multi-idioma: elementor está traducido al castellano íntegramente, esto es otro punto a favor, el que wordpress integre elementor en español ayuda. Además es compatile con los plugins de traducción WPML y Polylang.

• ¿Necesitas ayuda? La página de elementor dispone de un blog donde poder leer las novedades, además cuenta con un canal propio de  youtube con videos explicativos.

1. Acceso al blog
2. Canal de Youtube de Elementor page builder

Igual que pasaba como la plantilla Generate Press, no tienen ahora mismo rival y si quieres conseguir un diseño de 10 para tu web o para la de tus clientes es necesario que uses Elementor ya mismo.

 

Precio de Elementor Pro

Para usar la versión gratuita de elementor para tu WordPress, sólo tienes que descargar desde el repositor de wordpress el plugin.

Descargar elementor 

1. Una vez descargado este builder, sólo tienes que subirlo desde plugin-añadir nuevo. Luego lo activas y listo.
2. Una vez hecho esto , ya podrás usar o probar las funciones «básicas» para adquirir después elementor page builder pro.

Creo y es una táctica que ha sabido usar elementor muy bien, es encandilar al usuario, seguro que cuando pruebes la version gratuita te quedarás con ganas de más y querrás comprar elementor poro

En mi caso no hizo mucho convencimiento, no dude, yo uso la versión premium y se trata de una inversión que merece la pena.

 

Aquí puedes ver la comparativa de Elementor Pro Vs free

 

Cuando pruebes la versión gratuita de Elementor no podrás evitar comprar la versión pro

 

 

〉〉 Planes de Elementor pro

Existen varios plantes según tus necesidades, una cosa muy buena que tienen es que puedes comprar un plan básico y si decides ampliar solo pagarás la diferencia de precio.

Todos los planes de Elementor Page builder pro tiene 30 días de garantía y una año de soporte y actualizacines.

Opción 1: Elementor pro + Hosting

 

Elementor ofrece hosting + Preinstalación de WordPress todo junto a un precio de 99 $/año, lo que está muy bien porque ya te da todo hecho y te despreocupas de tener que buscar un hosting o plantilla, ya que te trae por defecto Hello Elementor

Opción 2: Elementor pro + Hosting

 

Escoge uno de los siguientes planes:

• Plan Esencial Menos de 49 €/año

Si sólo lo quieres emplear para un proyecto no te hace falta más

• Experto: Menos de 199 €/año

Si quieres Elementor para 25 proyectos este es tu plan

• Studio Plan: Menos de 499 €/año

Si quieres Elementor para 100 proyectos este es tu plan

• Agency Plan: Menos de 999 €/año

Si quieres Elementor para 1000 proyectos este es tu plan

 

〉〉 Comprar Elementor Pro

Si te has decidido a comprar Elementor pro para WordPress puedes hacerlo por aquí.

 

 

Te cuento como tienes que configurar todo paso a paso:

Una vez eliges plan, sólo tienes que rellenar los campos con nombre, apellidos, usuario, contraseña etc..

Después podrás pagar por paypal y listo, recibirás un email dándote la bienvenida y una vez accedas a elementor con tu usuario y contraseña, accederás a su panel a través de la opción Account

 

 

En el panel podrás descargar el plugin con la versión premiums (widgets) a tu escritorio para subirlo a tu wordpress como haces habitualmente

Una vez instalado en tu wordpress sólo tienes que acceder a la opción de Elementor y en el apartado license pegar el código de licencia y ¡listo!

 

Elementor aparte del apartado licencia cuenta con:

• Ajustes: elige si quieres usar elementor para entradas y/o páginas, excluir perfiles o desactivar paletas de colores.

• Mi biblioteca: en este apartado se guardarán las plantillas y secciones guardadas una vez las tengas diseñadas con vistas a usarlas en otras partes de la web y en otros proyectos arrastrando y soltando o insertando shortcodes.

• Herramientas: Opciones técnicas en las que podrás por ejemplo volver a la versión anterior de Elementor, usar la versión beta , modo mantenimiento etc…

• Información del sistema: muestra información general del sistema donde esté instalado este maquetador

Ya esta, Bienvenido a Elementor al 100% ¡Ya puedes disfrutar de Elementor con todas sus opciones!

 

 

Elementor Page builder no para de actualizarse, en este Tutorial iré ampliando cada nueva funcinalidad que vayan sacando

 

Tutorial Elementor page builder y Elementor Pro

Para usar elementor en tu WordPress es muy fácil, sólo tienes que crear o editar la página que quieras y hacer clic en el botón  «Editar con elementor», una vez dentro ya tienes a mano todas las opciones del editor.

Elementor page builder para WordPress cuenta con plantillas ya creadas, también puedes guardar tus diseños y aprovecharlos para otras zonas u otros sitios web mediante shortcodes o usando la opción del panel de control «mi biblioteca»

 

El funcionamiento es muy fácil si has trabajado con otros maquetadores, simplemente arrastra y suelta los elementos que te encuentras a la parte izquierda de forma rápida y sencilla.

En la parte central tienes el botón de agregar nueva sección donde poder insertar los widgets dentro de las columnas que elijas o usar el botón de añadir plantilla predefinidas con las que podrás crear tus diseños con una base ya creada.

Para jugar con los elementos de la izquierda, sólo tienes que arrastrar hacía esa zona central y despues manejar todas sus opciones desde el lateral.

 

Elementor tiene dos menús:

• Menú A:

La parte izquierda (icono de tres lineas) muestra un menú general en el que tendrás opciones a paletas de colores, cambiar las tipografía definidas por defecto en la plantilla, ajustes de página, historial de revisiones con el que volver para atrás si te equivocas y ajustes generales.

• Menú B:

La parte de la derecha (widgets) clasifica el panel de control de Elementor con el que podrás editar cada página.

Vamos a ver esta parte (Menú B) una por una:

Lo primero que vamos a ver son las opciones que ofrece una Sección cuando la agregas (en ella luego irán incluyéndose el resto de opciones del menú B con sus respectivas opciones particulares.

 

⇒ Empezamos con las Opciones básicas que incluye Elementor, estos widgets que vas a ver son los que vienen por defecto en la versión gratis:

〉〉 Sección

Sección es la parte principal encargada del diseño en Elementor ya que son los apartados donde se irán insertando el resto de widgets.

Cada sección la podrás duplicar, añadir una nueva o guardar como plantilla y usarla en otra parte de la web

 

Para ver sus opciones una vez creada sólo tienes que hacer clic en las tres lineas de la parte superior.

Se desplegarán las diferentes opciones en la parte izquierda en la que podrás:

Disposición:

• Establecer el ancho del contenido: caja o ancho completo.

• Establecer espacios entre columnas

• Delimitar el alto de las mismas donde con un desplazador podrás marcar la altura deseada

• Posición del contenido: alto medio o bajo

• Html: opción donde podrás escoger que etiquetas quieres para una determina sección creada y establecer una estructura lógica de la web.

• Estructuras: Donde podrás elegir más redimensiones de columnas preestablecidas

 

Estilo:

• Fondo: En él podras establécer una imagen, insertat un color…

• Capa de fondo: donde generar una opacidad para la imagen

• Borde: Eeige tipo de borde, ancho del mismo, que muestre un sombreado con distintos grosores.

• Forma del divisor: Esta opción da un efecto visual a nivel de dibujo en la columna creada (efecto olas, piramides…)

• Tipografía: podrás cambiar la tipografía independiente de las que tengas marcadas por defecto en tu plantilla. Elemento cuenta con más de 800 fuente tipos de letra de google fonts

 

Avanzado:

• Margenes y rellenos: ajusta la  sección a tu antojo usando los padding y ajustando los px como quieras. Puedes reajustar en automático todas a la vez o según quieras más a la derecha, izquierda etc…

• Z-index(opción que acaban de incorporar en la cual puedes establecer elementos superpuestos, es útil para destacar una caja de precios por ejemplo.

• Animaciones: Puedes establecer todo tipo de efectos en movimiento para cada sección.

• Id CSS: Podrás establecer un identificador par asociar a una clase CSS.

• Clases CSS: Cada sección podrá ir modificada con código css si quieres. Aunque no hace falta porque elementor te permite personalizar todo, siempre puedes acudir a el si quieres algo concreto.

• Apartado Responsive: Una de los puntos fuertes de Elementor page builder en el que podrás mejorar la versión móvil cambiando el orden, tamaños de la secciones o directamente evitando que se muestre lo que no quieres.

• Custom CSS te permite ver las modificaciones que hagas en CSS sin modificar nada con intención de ver como queda o implementar los cambios que realices, además cuenta con una interesante función de autocompletado que te da diferente alternativas (está muy bien)

La manera de manejar las secciones es muy comoda y si bien en las primeras actualizaciones era algo tosco y no permitía insertarlas in situ, ahora es muy manejable pudiendo usarlas en cada campo rápidamente.

Las últimas actualizaciones del 2018, Elementor permite realizar distintas opciones con el botón derecho del ratón como copiar, duplicar, reestablecer estilos o borrar elementor, sin duda una mejora que agilizará el tiempo de diseño de nuestra web.

 

〉〉 Columnas

Cada apartado que vas a ir viendo tienen las mismo campos que hemos estudiado en el apartado «Sección» (disposición, estilo y avanzado) Algunos son comunes y otros modificaciones especificas; vamos a explicar cada widget en modo general para no extenderme demasiado y no repetir lo mismo.

---

---

El campo columnas es muy personalizable, vas a crear todo a tu gusto.

Cómo puedes ver en el gif de arriba, Elementor no solo te permite jugar con el ancho de las mismas(en otros web builder esto no se pude) sino que además, puedes con un clic desplazar el ancho según tu necesidad ganando en rapidez al no tener que acudir al panel para ajustar los paddings o incluir tantas columnas quieras.

Independientemente de hacerlo manual, también puedes modificar:

• Los espaciados desde el apartado disposición.

• Dar estilos con bordes y tipografías como ya vimos para la secciones

• Usar el modo avanzado para establecer margenes animaciones o css.

 

〉〉 Seccion interior

Te permite incluir varias columnas dentro de una sección o columna

 

〉〉 Encabezado de texto

Los encabezados son muy útiles para crear (títulos h1,h2,h3…).

La principales características que ofrece son:

• Poner un enlace a cada encacezado (en la última actualización han insertado la opción muy útil de poner ese enlace como nofollow)

• Permite independientemente del tamaño asignado por la plantilla ajustar otro tamañ distinto a cada encabezado(h) ajustar otro tamaño distinto.

• Da posibilidades de ajustar estilos con colores, o tipografías(puedes asignar sombras y efectos a las letras)

• Modo avanzado: mismas opciones que ya hemos visto antes.

 

〉〉 Imagen

Tan simple como arrastrar una imagen a una sección o columna y asignar unas medidas.

Intenta que las medidas que escojas no superen las preestablecidas en tu worpress:

---

Te puede interesar:

• Como optimizar las imágenes en Wordpress
  

  ---

Opciones:

• Enlace en imagen: inserta un enlace de tal forma que un usuario al hacer clic en la imagen vaya una página de destino o se muestre la imagen en lightbox.

• Leyenda: escribe una nota descriptiva que aparecerá al pie de la foto

• Estilos: asigna un tamaño mediante la barra de ajustes y una opacidad

• Animación: al pasar el ratón por encima se genera un efecto muy visual

• Asigna bordes, sombras y ajusta el ratio para redondear las fotografias.

• Modo avanzado: con las mismas características que ya hemos visto

 

〉〉 Editor de Texto

Se trata de un editor con las mismas características y funciones que tiene el de Wordpress.

Es necesario cuando quieres generar textos más largos.

Podrás asignar colores y usar el modo avanzado para personalizarlo todavía un poco más con fondos, CSS, modo responsive etc…

 

〉〉 Vídeos

Opción muy interesante ya que da la posibilidad de insertar la url de  vídeos de Vimeo o Youtube y estarán funcionando en la columna o sección que elijas.

Características de los videos en elementor:

• Elección de format: (16:9, 3:2, 4:3)

• Auto-reproducir el vídeo.

• Mostrar vídeos sugeridos al finalizar la reproducción o no

• Mostrar u ocultar los controles del reproductor.

• Indicar que muestre u oculte el título y acciones del reproductor.

• Elige el tamaño del botón de play.

• Puedes elegir una imagen de portada para el video: una opción muy útil, rápida y sencilla ya que sólo tienes que subir la imagen.

• Retoca margenes o CSS si quieres a través de la opción avanzada.

 

 

〉〉 Botones

---

---

 

Los botones son otro punto fuerte de Elementor page builder ya que permite:

• Elegir entre varios colores según sea síntoma de información, éxito, advertencia o peligro(••••)

• Establecer un texto dentro de él.

• Asignar enlace (nueva ventana o nofollow)

• Asignar un tamaño o un icono de fontawesome.

• Jugar con los estilos en botones es muy atrativo ya que podrás elegir colores de fondo con marco, efecto hover, ratios, sombras, tipografías…

• Modo avanzado: En el que muestra las opciones de siempre, con ajustes de paddings, css, o animaciones

 

〉〉 Separador

Simplemente arrastrando este widget a la zona deseada marca un separador para evitar que esté todo junto estableciendo una linea separatoria que podrás estrechar, agrandar, cambiar de color, subir o bajar a tu gusto sirviendo también para usar como subrayado de un encabezado.

 

〉〉 Espaciador

Establece un espaciado con este widgets de forma rápida y comoda ya que establece un alto de padding directamente solo con un clic.

Es una opción muy simple que tiene pocas alternativas más salvo usar un efecto de movimiento.

 

〉〉 Google Maps

Otros maquetadores no te dan esta opción tan sencilla, te obligan a insertar el iframe o incluso darse de alta con un Api

Con elementor sólo tienes que insertar la dirección y ya tendrás tu mapa geolocalizado.

Introduces una dirección, indicas el zoom que quieres que se muestre, el alto del mapa y si quieres que el usuario pueda hacer scroll o no y listo.

Configúralo como quieras fácilmente y tendrás tu google maps en la parte de la web que quieras.

 

〉〉 Icono

Puedes elegir entre más de 400 iconos de FontAwesome.

Puedes personalizarlo con:

• Formas: circular o cuadrada

• Establecer un enlace cuando se hace clic en él

• Alineación

• Color, tamaño o rotación

• Rellenos

• Efecto hover

• Fondo marco, si deben enlazar a alguna url, la alineación, el tamaño, rótalos, o aplícales una animación cuando pases el ratón por encima.

• Todas las opciones del modo avanzado puedes usarlos para los iconos para conseguir el diseño que desees.

 

¡HASTA AQUI TODO LO QUE OFRECE LA VERSION GRATUITA!. ¿Cómo te has quedado? Pues prepárate para versión Pro.

 

Widgets de Elementor page builder pro

Empezamos con lo que incluye la versión pro, se te van a abrir los ojos cuando veas todas sus posibilidades.

〉〉 Post

Primera opción interesante de la versión de Elementor Pro.

Este apartado muestra de forma muy visual los últimos post publicados, mostrar páginas o puedes crear tu propio panel que mostrar.

 

 

El widget Post, cuenta con mil opciones de personalización :

Contenido:

• Diseño clásico o mediante cards

• Elige el número de columnas y escoge el número de post que quieres que se muestren.

• Indica en qué posición quieres que aparezcan los títulos de los artículos

• Escoge entre vista normal o masonry (desordenada)

• Tamaño de la imagen en la que también podrás usar el ratio y el tamaño para que la imagen se muestre completa o se corte.

• Podrás indicar que se muestre el título o no, que el texto este visible u oculto, el símbolo de separación de los textos, que encabezado quieres que sea (h1,h2, h3…)

• Puedes seleccionar que enseñe los contenidos por autor/es, por categorías, ordenar por fechas, títulos, usar paginación

 

Estilo:

• Ajusta las columnas a tu manera ajustando los contenidos, moviendo las columnas, todo personalizable 100%

• Establece un diseño para las cards, colores, anchos, rellenos,sombras, efecto hover,

• Elige posición y tamaño o ratio para el badge (categoría) si has elegido que se muestre previamente)

• Elige una tipografía a tu gusto

• Elige que muestre el Avatar (foto del autor)

 

Avanzado:

Igual que el resto de widgets tienes la opción de establecer márgenes, modificar el responsive, usar fondos, bordes, CSSetc…

Sin lugar a dudas este widgets es fundamental en el diseño, Elementor pro lo trae incluido sin necesidad de tener que acudir a un plugin para mostrar esta función.

---

Te interesa.

• Los 30 mejores plugins para WordPress

---

〉〉 Portfolio

Típico sistema de imágenes para portfolio, es un sistema de fotografías atractiva

Características:

• Elige que muestre el número de columnas y post por página

• Ajusta las imágenes según el tamaño

• Elige encabezado

• Elección de mostrar título o no

• Mostrar taxonomías: Muestra unos botones para que elijas por categorías, extractos o etiquetas o puedes usar filtros para seleccionarlas

• Selecciona tamaño, colores tipografía

Es un widget muy útil pero echo en falta más efectos visuales al seleccionar las imágenes. A ver si lo mejoran.

 

〉〉 Gallery

Addons de Galeria para incluir imágenes de Galería con opciones muy visuales para usar Grid, mansonry…

 

〉〉 Formularios

Seguro que has necesitado alguna vez utilizar formularios de contacto más complejos que los que trae tu tema por defecto y has tenido que utilizar contact form 7

Aquí te dejo un tutorial completo sobre como contact form 7, pero con elementor pro no te va a hacer falta y va a ser un plugin menos que utilizar, otro más, no escatiman en nada los chicos de Elementor.

La velocidad cuando instalas ciertos plugin,se ve mermada en wordpress, si unimos la opción de formularios con el del slider, con Elemento ya son dos plugin menos que vas a tener que soportar y esto se agradece

 

Vamos a ver que se puede hacer con los formularios que trae implementados Elementor page builder

• Elige los campos que necesites en un clic: nombre, email, mensaje, número, checkbox, reCaptcha, calendario con fecha y hora, además de la útil opción de usar honeypot, un sistema de seguridad que incluye un campo oculto para evitar ser hackeado

• Cambia el tamaño, columnas o iconos de cada campo.

• Cambia textos, colores, mensajes, tipografías

• Todas las opciones que normalmente hemos visto en cuestión de estilo y avanzado se pueden usar aquí

Las opciones que trae elementor a nivel de formularios no tiene nada que ver con otros maquetadores que se limitan a poder insertar los campos básicos y con muchas limitaciones de edición, o usabas contact form 7 o te ajustabas a lo que tenías.

Sin duda Elementor aquí ha vuelto a dar con la clave.

Además permite integrarse fácilmente con las mejores plataformas de email marketing

 

〉〉 Login

Si necesitas crear acceso a la web con contraseñas para usuarios o alumnos es muy fácil con elementor.

Puedes customizar las opciones como quieras y señalar que te indique que recuerde la contraseña si se te olvida, asignar un link para la página de destino, colores, anchuras; en definitiva una opción muy útil y sencilla que trae integrada el editor web.

 

〉〉 Slides

No soy partidario de usar sliders aunque he tenido en ocasiones que usar Revolutión slider. La verdad es que se han usado mucho pero quizá ya no son tan demandados como antes.

Además dificultan la velocidad de carga pero el que Elementor pro lo traiga integrado es una ventaja ya que consume muchos menos

Sin lugar a duda es otro punto fuerte de Elementor pro que ha tenido en cuanta esta opción para quien quiera usar slider porque las posibilidades de diseño son inmensas y más que suficientes para crear sliders muy vistosos.

 

Características:

• Selecciona cuantos sliders quieras, en cada uno de ellos tienes las opciones personalizables para insertar textos o enlaces.

• Elige la altura de la caja del slider

• Determina si quieres pausar la imagen, autoreproducir, la velocidad, bucle,animación.

• Colores, tamaño del botón, estilos, tipografías, efecto hover, efecto kern burns(acercamiento)

• Flechas, puntos para deslizar

• Uso de la sección de avanzado

La verdad es que es muy completo la opción de slider ya que puedes crear tanto cajas dentro del texto donde poder usarlo o bien crear encabezados.

 

〉〉 Menú de navegación

¿Has pensado alguna vez en crear tus propios menús de navegación?, ahora es posible con Elementor Page Builder, este constructor web ahora te permite crear todo con el, si el header y footer eras funciones de la plantilla, ahora ya no tienes que limitarse a sus opciones.

Incluye:

• Menús laterales o en hamburguesa

• Efectos en cada elemento del menú (subrayados, cuadrados, doble linea)

• Colores en menú y submenús

• Espacios, paddings etc…

 

Además si quieres usar un menú de navegación propio principal creado con elementor page buider para tu web es muy fácil ya que podrás sustituir el creado con el definido por defecto por tu plantilla.

En el caso del tema Generate press es muy fácil ya que sólo necesitas desactivar de cada página el menú de navegación y adaptar después el diseñado con Elementor.

Puedes ver el video con las nuevas funciones de este nuevo widget donde te explico como se hace.

.

–>>AQUÍ TIENES OTRO VIDEO DONDE EXPLICO EL WIDGET DE ANIMACIONES

 

〉〉 Encabezado de animación

Seguro que has visto alguna vez letras que van apareciendo solas dando la sensación de escritura, efectos en palabras, colores o subrayados; todo esto es lo que hace esta magnifica opción.

Te dejo un video para que veas lo que hace este nuevo widget:

.

–>> VIDEO SOBRE EL WIDGET DE BOTONES DE FACEBOOK

 

Elementor no deja de sorprender y esta nueva opción no ha dejado indiferentes a sus seguidores, otro punto más para ellos.

 

〉〉 Lista de precios

Una opción muy sencilla y básica que simplemente da la opción de insertar una lista de precios que podrás personalizar a nivel de uso y estilos como quieras insertando títulos, textos, imágenes, enlaces, colores pudiendo crear una lista muy atractiva de servios o para tu ecommerce por ejemplo.

 

〉〉 Tabla de precios

Estable una tabla de precios comparativa mediante un widget muy visual.

 

• Podrás personalizar los colores por zonas: encabezados, cuerpo, footer o botón

• Asigna precios en la moneda que quieras, escoge la posición y el tipo de descuento

• Establece ribbon(etiqueta destacable)

• Usa los colores que quieras para cada zona o botones

• Enlaces, ajustes de posición o efectos son otros de las muchas opciones que ofrece esta interesante alternativa de precios.

 

 

〉〉 Flip box

Éste apartado de elementor pro es muy atractivo y llamativo porque se basa en unas cajas con efectos en los que puedes insertar textos por delante y por detrás dando el efecto visual que quieras.

 

Caracteristicas de flip box

• Diseña la portada y contraportada usando texto, colores y elige el efecto que quieres que hagan las cajas

• Selecciona iconos con el tamaño, forma y color que te guste

• Asigna un color para cada caja independientemente y asigna fondos a la mismas.

• Usa enlaces para la pagina destino cuando se haga clic el botón

• Opción de efecto 3D, dando la sensación de que las letras se separan del cuerpo

• Ajusta textos y define el ancho o largo de las columnas

• Selecciona todos los ajustes extras en el modo avanzado

Otra opción muy entretenida por parte de Elementor que otros constructores web no incluyen.

 

〉〉 Call to action

Esta nueva funcionalidad de Elementor es muy visual ya que permite incluir distintas elementos de llamadas a la acción llamativas

Las posibilidades de edición son infinitas:

• Efectos mouseover donde cada fotografía muestra distintos efectos al pasar por encima de la imagen.

• Posibilidad de usar un ribbon en cada esquina muy útil para incluir ofertas.

• Vista clásica o cover.

• Posibilidades de distintos alineados.

• Múltiples efectos hover

 

〉〉 Media Carrusel

Elementor ha vuelto a incluir un widget muy potente con el que conseguir no solo llamadas a la acción, sino también un apartado donde poder insertar galerías de imágenes espectaculares con miles de opciones para dar un aspecto mucho más visual a tus diseños.

 

〉〉 Testimonial carrusel

Los testimonios son muy importantes para generar confianza en el usuario, con este widget, Elementor pretende ofrecer distintas posibilidades para incluir recomendaciones de otros profesionales o clientes que han quedado contentos con tu servicio o asesoramiento.

 

〉〉 Reviews

Los testimonios dan fiabilidad y confianza a una web. Elementor tiene una funcionalidad para ello.

 

〉〉 Tabla de contenidos

Te permite incluir una tabla con el índice del contenido que vas a leer.

 

〉〉 Cuenta atrás

Opción simple pero muy interesante ya que muestra una contador donde indica los días, horas minutos o segundo que quedan para cierto evento

Esto lo puedes insertar en cualquier parte de tu web y es muy útil para avisar de un curso, un lanzamiento o una determinada oferta.

Totalmente personalizable a nivel de colores y posiblidad de incluir o excluir elementos que no te interesan

 

〉〉 Botones sociales

Iconos donde haciendo clic en ellos se puede compartir un determinado artículo o página.

Cuenta con distinas opciones de formas, colores,hover, tamaños para darle un toque visual o efecto basado en los colores originales o darle un enfoque propio y personalizarlo con distintas opciones.

 

〉〉 Blockquote

Otra manera de incluir testimonios o frases dentro del texto con diversas formas de mostrar los distintos comentarios o recomendaciones.

Puedes incluir botones, enlaces sociales, distintos nombres de diseños o mostrar el nombre del autor.

 

〉〉 Botones de Facebook

.

->>VIDEO SOBRE COMO INSERTAR ICONOS DE REDES SOCIALES EN CABECERA

 

Elementor Pro ha incluido otra nueva funcionalidad que permite a través de 4 widgets las siguientes opciones

• Facebook button: permite insertar iconos personalizados de facebook (likes, compartidos o la opción de seguir)

• Embeber facebook: coloca en la parte de la web que quieras, post, comentarios o videos de una página determinada de facebook.

• Comentarios: útil función para insertar directamente a través de la caja creada comentarios en esta red social y mostrar los comentarios…

• Página de facebook: aunque esta opción se puede utilizar con un plugin o insertando el iframe, elementor premium lo pone muy fácil en un par de clics, pudiendo personalizar tu caja de tu perfil social a tu gusto e insertarla donde quieras.

 

Ojo, a pesar de que Elementor cuide los detalles optimización, los botones, contadores y fotos en redes sociales consumen recursos, no abuses de los extras..  

 

〉〉 Plantillas

Mediante esta opción podrás usar con un simple arrastrar y soltar (drag and drop) a la zona que desees la plantilla o sección que tengas o hayas guardado previamente .

Es muy útil que guardes aquellas secciones que vas a necesitar para más partes de tu web, de esta manera ahorrarás tiempo y trabajo.

Las personalización de los iconos sociales esta muy bien conseguido por parte de elementor, el que puedas jugar con colores, formas y efectos visuales le dan un extra de calidad.

Actualmente puedes guardar plantilla para cada parte de la web, incluidos diseños para el header o el footer.

También han incluido otra fantástica opción de caberas o footer prediseñados para que solo tengas que modificar y de esta manera ahorrar tiempo.

Además si necesitas importar plantillas de elementor prediseñadas puedes hacerlo. Este enorme constructor web incluye no solo templates gratuitos y de pago integrados, si no que siempre puedes obtener más buscando en Google. Al ser un maquetador tan demandado,está permitiendo que mucha gente desarrolle plantillas gratuitas y de pago.

¿AUN QUIERES MÁS? Pues aquí tienes muchas más opciones…

 

Opciones Generales de Elementor

Si te ha gustado algunas de las opciones que incluyen la versión premium, todavía te queda mucho por descubrir, lee lee…

〉〉 Cuadro de imagen

Esta opción simplifica un poco el diseño independiente de varios widgets ya que se trata de una caja donde se combina una imagen con encabezado y texto.

Puedes insertar un enlaces en la imagen, colores, adaptar el tamaño, establecer un encabezado  (h1,h2…) asi como usar una animación y las siempre opciones avanzadas que ofrece elementor page builde.

 

〉〉 Caja de icono

Exactamente igual que el apartado anterior en esta ocasión la caja combina icono, encabezado y texto pudiendo usar opciones para el icono, hover, animaciones etc…

 

〉〉 Valoración de estrellas

Te permite meter estrellitas con valoraciones en la sección o columna que quieras

 

〉〉 Carrusel de imágenes,testimonios y media

 

◊ El carrusel de imágenes es útil si quieres añadir logotipos de empresas con las que colaboras o de medios en los que has aparecido. Puedes añadir cuantas imágenes como quieras

• Ajusta los tamaños que necesites

• Muestra las imágenes a mostrar o desplazar

• Opción de estirar imágenes

• Mostrar navegación a través de puntos o flechas

• Inserta un enlace o leyenda

• Pausa al pasar el ratón por encima del carrusel

• Selecciona opción de autoreproducir

• Muestra la velocidad del iniciado, bucle, velocidad de la animación o dirección de desplazamiento.

• Selecciona tamaños, colores y opciones avanzadas

 

◊ El carrusel de testimonios te permite insertar testimonios de personas incluyendo su nombre y su foto.

Se puede personalizar por tamaños, posición y ajustar la velocidad o punteros del slide.

 

◊ El carousel media es una nueva funcionalidad que incluye de manera muy atractiva imagenes de distintas maneras:

• Modo carrusel, modo slideshow(imagenes en miniatura) o coverflow(fotos inclinadas)
• Elige todas las imagenes que necesites.
• Número de páginas por mostrar.
• Ancho, alto y tamaños de las imagenes.
• Textos o iconos en efecto hover

Es curioso como Elementor evita que tengas que usar plugins para muchas personalización al traerlas todas incluidas en su Versión Premium, una maravilla de maquetador.

 

Con Elementor Pro vas a ahorrar muchos plugins muy visuales ya que los trae incluidos

 

〉〉 Galería básica

Opción para insertar tantas imágenes como quieras, puedes establecer ratios, colores, tamaños y enlaces y adaptar las imágenes según tus necesidades.

 

〉〉 Listado de iconos

El listado de iconos es muy practico para poner listas con icono de forma rápida o aplicar en página de contacto por ejemplo donde indicar teléfono, dirección etc…

 

〉〉 Contador

Widget que te permite definir el número de inicio, el número de fin, la duración de la animación, establece números, colores con el diseño y opciones que caracteriza a este editor de diseño.

 

〉〉 Barra de progreso

A través de este widget,  puedes mostrar a través de barras el progreso tus estadísticas, avances o habilidades profesionales a través de vistosos elementos

Puedes cambiar colores, escribir textos, variar porcentajes

 

〉〉 Recomendación (blockquote)

Se trata de un widget para mostrar testimonios de personas que han contratado tus servicios o recomiendan tu web o negocio, cuenta con la opción de añadir el nombre e imagen de la empresa o la persona que te recomienda.

De la misma manera puede usarse como caja para compartir.

¿Conoces clic to tweet? Se trata de un plugin con el compartir textos en twitter y este nuevo widgets hace lo mismo.

Esta nueva función ha sido añadida y permite personalizar el texto, tamaño, forma o el color del botón del icono de twitter.

Si quieres puedes usarlo en cualquier parte de tu web.

En tus artículos, lo ideal es no utilizar ese plugin si no quieres, la manera de insertar dichas cajas personalizadas es guardando la sección creada e insertando el shortcode que genera dentro de cada post.

 

〉〉 Pestañas

Es la tipica sección con pestañas que al pinchar en ellas se muestra el texto.

Sencilla opción pero a su vez práctica y con opciones de personalización.

 

〉〉 Acordeón

El acordeón se usa mucho para poner preguntas y respuestas cuando ofreces un servicio  o quieres plantear dudas que el usuario o cliente suele tener.

Haciendo clic en cada pregunta se abre la respuesta.

Todos los acordeones son muy personalizables con colorses, tamaños, fondos etc…

 

〉〉 Conmutador

Similar al anterior, con o sin desplegable por defecto

 

〉〉 Iconos sociales

Simplemente te da la posiblidad de incluir botones para los perfiles sociales.

Es muy util ya que permite:

• Que los insertes donde tu quieras y podrás configurarlos según los colores oficiales o personalizarlos a tu antojo tanto en color como tamaño o forma.

• Tienes absolutamente todas los iconos de redes sociales y posibilidad de enlazar a tu cuenta fácilmente.

• Elige la separación entre uno y otro e indica efectos hover al posicionar encima de cada uno o que muestre un efecto de movimiento

Es una sección muy configurable y util para generar un shortcode y poder usarlo en la parte de la web que queramos como luego veremos.

Puedes ver este video donde explico como insertar iconos de perfiles sociales en la cabecera de WordPress usando un shortcode que genera Elementor,

.

 

〉〉 Alertas

 

Simple opción pero puede resultar práctica para mostrar errores o avisos temporales en la web

Se puede elegir distintas alertas asociandolas a un color según información, éxito, advertencia, peligro (••••)

Utiliza tamaños, colores personalizados e incluye los textos que desees.

 

〉〉 SoundCloud

Al igual que podías añadir vídeos de Vimeo y Youtube, en este apartado puedes añadir audios desde SoundCloud. Selecciona si el audio se reproduce de manera automática o no, personaliza los colores de los controles y configura si se muestran o no los siguientes elementos:

• Botón Comprar.

• Botón Me Gusta.

• Opción de descarga.

• Compartir.

• Comentarios.

• Número de reproducciones.

• Nombre de usuario.

 

〉〉 Shortcodes

Los shortcodes son muy prácticos cuando creas una web. Poder usar ciertos elementos en las páginas o secciones que quieras,se consigue a través de ellos.

El funcionamiento es muy sencillo, sólo copia en la caja de shortcode el código que genera un determinado plugin o la plantilla guardada previamente por elementor y el resultado se mostrará en el lugar indicado.

 

〉〉 HTML

Igual que los shortcodes, poder insertar códigos html en las cajas preestablescidas para ello es otra gran ventaja que se consigue a través de este elemento.

 

〉〉 Ancla de menú

Elemento que sirve para páginas One page, es decir si quieres que al hacer clic en una determinada parte de tu web o un determinado botón te desplace haciendo un scroll automático, es posible mediante el ancla de menú.

Esto se puede lograr manualmente mediante código pero elementor te lo da en una opción y es muy interesante.

Si quieres ver un ejemplo de lo que te digo, sólo tienes que hacer clic en cualquiera de los apartados del indice de esté artículo situado en la parte de arriba.

Para poder hacer uso del ancla de menú, solo tienes que insertar el widget ancla de menú donde quieras y asignar un id en la sección correspondiente a ese widget, lo puedes llamar ancla1 y en un botón por ejemplo indicar dentro del apartado donde se insertan los enlaces el nombre ancla1 con una almohadilla debajo, es decir, #ancla1

De la manera que has visto al hacer clic en el botón, la pantalla hará scroll hacia el widgets de ancla.

Pues eso es lo que hace este widget. Te permite meter el enlace en un botón, en un texto, en el menú de WordPress o en cualquier parte de tu web que te deje insertar un enlace.

Funciona muy bien y el efecto de scroll es suave y agradable.

 

〉〉 Barra lateral

Una funcionalidad interesante que te permite elegir que widgets de sidebar que tienes en tu web quieres que aparezca en un deteminado lugar . Puede ser útil dependiendo del proyecto.

 

〉〉 Leer más

Para usar como archive

 

Widgets de WordPress para Elementor Page builder

〉〉  Opciones del sitio

Si bien, a la hora de editar post en WordPress es recomendable no utilizar un page builder ya que daría más trabajo si quieres algún día cambiar de editor, si quieres dar un aspecto mucho mejor a tus artículos con algunas de estás opciones podrás hacer lo que se te ocurra.

Con estos Widgets podrás editar las entradas del blog y maquetar como si de páginas se tratase usando las opciones para artículos como, título del post, resumen, imagen destacada, buscador, caja de autor, comentarios, páginas de navegación, logo etc…

 

〉〉 Opciones del sitio

Opciones personalizadas para el blog. Caja de autor, tabla de contenidos, imagen destacada, navegación etc…

 

〉〉 WordPress

Elementor te permite añadir los widgets que trae WordPress por defecto de todos los plugins que tienes instalados y además te permite configurarlos  y adaptarlos a cualquier parte de tu Web pudiendo usar todas sus prestaciones y dándole un aspecto totalmente personalizado.

Un punto importante sobre Elementor es que incluye numerosos opciones de widgets para Ecommerce.

Para ello, si necesitas una tienda online sólo tienes que instalar el plugin Woocommerce y automáticamente Elementor incluirá todos los widgets de Woocommerce para que diseñes una webs totalmente personalizable a tu gusto.

Igualmente incluye 4 widgets adicionales con los que podrás crear una tienda online muy profesional uniendo el diseño obtenido con Generate Press(también lleva en su versión premium opciones de Woocommerce) y todas las opciones que trae por defecto este fantástico plugin para negocios de venta por internet.

 

〉〉 Parte inferior

Elementor tiene en la parte de abajo varias opciones más además de la función de ocultar la barra lateral para ver como está quedando el diseño.

 

• Flecha de previsualización (>)

Entre la columna de los elementos(widgets) y la página de trabajo, existe una flecha que te permite haciendo clic en ella ver el resultado del diseño que estás creando de manera directa.

Esto a diferencia de otros maquetadores no puede estar mejor ya que puedes verlo de forma muy rápida y efectiva sin tener que salir del editor.

• Opción de la X:

Ahora la opción de salir se encuentra en el menú superior izquierdo

Para salir y ver la página o directamente ir al escritorio.

• Ajustes: Indica en que estado quieres que se muestre la maquetación, borrador, pendiente de revisión, privada etc…

Ahora tienes la posibilidad de actualizar o guardar como borrador los cambios que estés realizando, de esta manera es mucho más comodo ya que podrás actualizar la página una vez que estés seguro de que está terminada.

Guarda cada cambio que vayas realizando antes de salir a través de aqui.

Puedes ir modicando cada elemento sin necesidad de ir guardando y hacer la acción de guardado antes de salir.

• Modo adaptable

Opción muy practica para ver los resultados del diseño en versión escritorio, tablet o móvil en un simple clic.

Este icono de opción se usa mucho para ver como va quedando el diseño responsive y poder trabajar sobre el para mejorar la personalizacion.

• Historial: Te permite volver hacia atrás si te has equivocado o quieres recuperar antiguas ediciones.

• Actualizar: te permite guardar como borrador o como plantilla la edición que has creado

 

 

¿Por qué debes comprar Elementor?

• Porque es el maquetador más completo que he visto.

• Cada días aumentan las descargas de este editor visual

• Cuenta con un blog y canal de youtube donde te explican todos los cambios y novedades

• Es muy sencillo de manejar, olvídate de códigos

• Es rápido a la hora de trabajar con él

• Es personalizable al máximo para generar una estructura lógica de la web (muy bueno para el Seo)

• Tiene actuaciones constantes

• Cuenta con un código limpio

• Acelera la carga de la Web y blog

• Evitas tener que instalar ciertos plugins

• Si lo unes a un buen tema WordPress como Generate Press tienes una herramienta de diseño fácil, manejable, duradera y de máxima calidad.

 

Generate Press+Elementor

Esta web que ves está diseñada con Generate press y con Elementor

Tanto si eres diseñador como si estás empezando y estás dando vueltas a que tema y constructor elegir, sin lugar a dudas me quedo con ellos.

Algunas plantillas todavía tienen dificultades en adaptibilidad a ancho completo, si usas la plantilla Generate Press no hay problema ya que es compatible 100% pero si tienes otro tema que no las incluye elementor también ha pensado en ello y pone a tu disposición un plugin como elementor page templater  

Todo es muy fácil con Generate Press y Elementor porque los creadores han querido que sea así, han buscado sencillez, usabilidad, rapidez, personalización  y lo han conseguido.

 

Conclusión

Hasta aquí el tutorial sobre el mejor maquetador del mercado en la actualidad.

Elementor page builder roza la perfección y una vez que lo uses es muy probable que no quieras usar otro. Elementor Pro, la versión de pago es la bomba.

 

 

¿Qué opinas? ¿Crees que es el mejor constructor web en el 2021? ¿Cómo los ves? ¿ Cuál usas tú? ¿Tienes dudas sobre su funcionamiento o todavía no sabes si comprarlo? Déjame un comentario y te ayudo.

¡Compártelo y déjame un comentario!