Elementor Page Builder: tutorial y review + Video del mejor page builder WordPress en español

No busques más porque te traigo el mejor constructor web en la actualidad, se trata de Elementor Page builder

Pero, ¿no me dijiste José que Forge era muy bueno?

Así es, lo era y por desgracia a no ser que la cosa cambie, está quedando no sólo obsoleto,  sino que además ha dejado de ofrecer servicio.

Si no llega a ser por el lamentable soporte técnico  que por unas razones desconocidas han dejado de ofrecer, no habría descubierto en su profundidad Elementor page builder, este maquetador visual que tanto esta dando que hablar

Para mi elementor no es un desconocido, ya te hablé de él hace unos meses cuando te recomendaba los mejores maquetadores para wordpress, en aquella ocasión probé la opción gratuita y el potencial era tremendo.

Dicen que la necesidad es la madre de la invención, debe ser verdad porque gracias a ello, aun perdiendo dinero con la “broma” de Forge, he descubierto una maravilla de editor visual que es con la que esta diseñada esta web y no puedo estar más satisfecho.

Creo firmemente que si no se duermen en los laureles como parece que no va a ser el caso ya que están actualizando cada semana, no va a tener rival en absoluto porque las opciones, prestaciones y funcionalidades son impresionantes.

 

Yo antes creía que tenía el mejor maquetador hasta que descubrí Elementor Page BuilderHaz click para twittear

 

En este post podrás leer

que es Elementor y por qué es el mejor editor visual para WordPress  Qué es Elementor y por qué es el mejor editor visual para WordPress  

Si no te valen las razones que te acabo de dar, continuo porque podrá estar hablando horas.

Como ya sabes necesitas un maquetador para crear el diseño de tu web para hacerte la vida más fácil. Existen muchos y muy bueno editores visuales Forge (lo era),  Divi,  thrive content builder, Beaver builder, live composer page builder etc… la diferencia con todos ellos está en el detalle, y la facilicidad de uso.

Todo ha ido evolucionando desde que visual composer apareciera como uno de los principales maquetadores, hasta la novedad de el diseño front end(en vivo) donde todo era mucho más cómodo.

Elemento 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.

 

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.

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

¿Sobre que temática quieres que te hable?

Suscríbete y elige un GRUPO

Recibe los últimos artículos, trucos, tips de Seo, Marketing o Diseño Web

 

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 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.
  • 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 Generate Press para que veas el gran tema que es.

¿Quieres un diseño perfecto? Usa Elementor+Generate PressHaz click para twittear

 

  • Facíl de usar: de todos lo editores 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. Forge era rápido, 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 prescinder de el no provoca esta “suciedad”.
  • Velocidad: forge era rápido, tenia un buen trabajo técnico pero 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

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

 

Tener mucho estilos inline dificulta la  indexación a los robots y provoca que no indexe  de manera completa tu código html.

 

  • 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.

Te interesa leer:

  • Como usar las AMP en WordPress

  • 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

Ahora que has leído por qué elegir Elementor, más abajo vas a ver un TUTORIAL y un VIDEO completo paso a paso explicando todas sus funciones para que sepas manejarlo tu mismo pero antes quiero que veas sus características.

Los datos hablan, Elementor cuenta con más de 100.000 descargas y valoraciones de 5 estrellas Haz click para twittear

 

Características del plugin Elementor 

Si te fijas en las descargas desde que apareció hace justamente un año han sido brutales y va a más. Si te mueves un poco por la rama del diseño y marketing digital Elementor 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:

caracteristicas del plugin elementor

  • Más de 100.000 instalaciones activas
  • Actualizaciones todas las semaas
  • 5 estrellas de valoración.

Igual que pasaba como la plantilla Generate Press, no tienen ahora mismo rival.

 

descargar elementor page builderCómo descargar elementor gratuito

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 

Una vez descargado este builder, sólo tienes que subirlo desde plugin-añadir nuevo. Luego lo activas y listo.

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.

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 proHaz click para twittear

 

Instalación de Elementor pro

Para instalar el plugin elementor haz clic aquí

Accederás a esta ventana donde tienes que seleccionar GET PRO

 

instalación de elementor pro

 

Una vez has hecho clic en get pro, podrás ver todas las funcionalidades generales que trae elementor y al final del todo podrás elegir el plan que necesites

 Planes de Elementor pro

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

Escoge uno de los siguientes planes:

  • Plan personal: Menos de 49 €.

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

  • Bussines: Menos de 99 €.

Si tienes varias webs te puede interesar ya que tienes un ahorro importante.

  • Unlimited: Menos de 199 €.

Si tienes más proyectos o vas a crearlos o eres diseñador web te interesa esta opción ya que tendrás licencias ilimitadas.

 

Si comparo los precios con Forge en licencias ilimitadas es algo más caro elementor pero aparte de la calidad superior a Forge como he comprobado,dudo mucho que Elementor con tantas actualizaciones no ofrezcan un soporte más que decente. A día de hoy el servicio de elementor da una contestación en 24 horas podría ser más rápidos baja mi punto de vista como por ejemplo Generate press que tarda sólo unas horas (no hay servicio igual)

 

 Comprar Elementor Pro

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

 

comprar elementor pro

 

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!

 

comprar elementor page builder
(Haz clic en la imagen para ampliar)

 

Si directamente quieres comprar Elementor pro te dejo el enlace, pero antes te recomiendo que leas el TUTORIAL y veas el VIDEO donde entenderás como funciona la versión premium de Elementor paso a paso.

Comprar Elementor Pro

 

tutorial elementor page builder proTutorial Elementor page builder

Elementor incluye nuevas funcionalidades cada poco tiempo, en este video podrás ver que falta algún widget, no te preocupes que más abajo voy incluyendo cada actualización que se produzca en el apartado que corresponda 😉

 

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:

tutorial elementor page builder

  • 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.

 

 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.

 

 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.

columnas


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.

Si bien Forge page builder era bastante personalizable en este sentido no incluía tanta personalización y mucho menos de manera tan fácil.

 

 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:

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.

Un punto fuerte de Elementor que también incluía Forge pero nada que ver con Elementor porque este te permite mil opciones de configuración.

 

 Botones


botones elementor


 

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)
  • 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

 

 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.

 

Si hasta aquí hemos visto opciones muy interesantes para la opción gratuita, vamos a tratar los widgets que trae la versión de Elementor page builder pro

 

Te han gustado las opciones gratuitas de Elementor, no te pierdas todo lo que trae la versión PROHaz click para twittear

elementor proWidgets de Elementor page builder pro

 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.

 

opcion post de elementor

 

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 lo trae incluido sin necesidad de tener que acudir a un plugin para mostrar esta función.


Te interesa.


 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.

 

 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 lo traiga integrado es una ventaja ya que consume mcuhos menos

Sin lugar a duda es otro punto fuerte de Elementor 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.

apartado slides elementor

 

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.

Forge también incluía sliders pero Elementor va cuatro pasos por delante al tratar este widgets  al mismo nivel de un plugin de calidad de WorPress

 

Sabes que Elementor tiene incluido unos formularios al más puro estilo de Contact Form 7Haz click para twittear

 Menú de navegación

Otra nueva funcionalidad de Elementor pro con la que podrás adaptar todos los menús que quieras en cada página.

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.

 

 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 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

Si quieres saber como acelerar la carga de tu sitio web lee el articulo cómo conseguir que una web cargue más rápido  

 

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…
  • 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.

 

 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.

 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:

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.

tabla de precios

 

  • 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.

Forge contaba con una tabla de precios muy similar aunque menos personalizable por zonas.

 

 Flip box

Éste apartado de elementor 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.

flip box

 

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.

 

 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.

 

 Botones de Facebook

 

Elementor 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 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..  

 

Si quieres ver leer el artículo: “Cómo aumentar la velocidad de tu web” para sacarle el máximo rendimiento.

 

 

 Template

Mediante esta opción podrás usar con un simple arrastrar y soltar (drag and drop) a la zona que desees la plantilla o seccion 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.

 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…

 

 Galería de imágenes

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

 

 Carrusel de imágenes,testimonios y media

carrusel de imagenes de elementor en wordpress

 

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 incluidosHaz click para twittear

 

 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 acordeon 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…

 

 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

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

 

 Otros widgets

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.

En este video puedes ver como Elementor es muy compatible con Woocommerce y las facilidades de creación que ofrece.

otros widgets de elementor Otras opciones de Elementor Page builder

Elementor tiene en la parte de abajo varias opciones más.

 

otras opciones de elemento

 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:

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

Si no has guardado los cambios la herramienta te avisará.

 

 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.

 Ayuda

Mediante ayuda puedes ver un video de Elementor u optar por ver una página de domumentación con distintas explicaciones dudas y soluciones de este maquetador gráfico.

 

 Plantilla

Cuenta con dos opciones

  • Biblioteca de plantillas: Si quieres tomar como base una plantilla de las que ofrece Elementor page builder, aquí puedes usarla, sólo haz clic en la que te guste y modifica los elementos a tu gusto.

Dentro de este apartado puedes elegir las predefinidas o tus plantillas elementor o secciones previamente creadas y que tienes guardadas.

plantillas del editor visual elementor

 

Elementor saca nuevas plantillas cada poco tiempo que también resultan de ayuda a la hora de empezar a diseñar, ya sea para utilizarlas como base, o para ver cómo han hecho cierto diseño o composición son muy prácticas.

  • Guardar plantlla: Imagina que has creado una plantilla que crees que vas  a usar en otro proyecto similar, guarda la plantilla para usarla.

 

 Guardar

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.

 

 por que adquirir elementor page builder¿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+elementorGenerate Press+Elementor

Esta web que ves está diseñada con Generate press y con Elementor, ya cuando estaba con Forge tenía la curiosidad de ver su compatibilidad y lo cierto es que tener estas dos herramientas hacen que todo sea muy sencillo.

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.

Nunca digo, de está agua no beberé pòrque he tenido un desengaño con Forge page builder pero creo que no voy a equivocarme y pienso Generate Press ya ha conseguido por prestaciones y servicio técnico una reputación admirable y que Elementor como constructor visual ha venido para quedarse por mucho tiempo.

conclusionConclusión

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

Elementor roza la perfección y una vez que lo uses es muy probable que no quieras usar otro.

Comprar Elementor Pro

 

¿Qué opinas?¿Crees que es el mejor constructor web en el 2017? ¿Como 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 dame tu puntuación!

Elementor Page Builder: tutorial y review + Video del mejor page builder WordPress en español
5 (100%) 13 votes

Soy Diseñador Web en Badajoz y Consultor de Marketing Digital | Trabajo como freelance haciendo diseño web para clientes que desean hacer crecer su negocio a través de Internet | Además, enseño en mi Blog cómo crear páginas web absolutamente de cero
Me puedes encontrar en las redes sociales.

39 comentarios en “Elementor Page Builder: tutorial y review + Video del mejor page builder WordPress en español

  1. Magnifico artículo.
    Yo llevo utilizando este plugins hace ya bastante tiempo y la verdad que lo que más me gusta de él es que es totalmente intuitivo y muy fácil usarlo.

    Además permite exportar tus propios diseños a otras web (acudiendo a la biblioteca), lo que permite acelerar tu modo de trabajar en caso de tener que hacer una web similar (lóigicamente nunca debe ser idéntica que sino es demasiado cutre).

    Además, en su fecha ya hice una comparación de velocidad de este plugins con otros que utilizaba del mismo estilo y ganaba 2 segundos de velocidad de carga.

    Un saludo,
    Enrique Ruiz Prieto

    • Hola Enrique

      La verdad,como comento en el video por “necesidad” he tenido que pasar a Elementor y lo pongo entre comillas porque si tenía ganar de probar la versión pro que ya sabía por comentarios de otros diseñadores que era muy bueno pero me ha sorprendido, ahora mismo no hay rival para elementor, Ayer mismo hicieron otra actualización, es increible el potencial que tiene.

      Ahora lo importante es que sigan el ritmo como así parece, no paran de subir las descargas.

      En cuanto al diseño es como dices, no hay editor visual con más opciones personalizables que el , y han conseguido que a pesar de tantas widgets y variantes sea muy sencillo de usar, han realizado un trabajo espectacular.

      En cuanto a los tiempos de carga es cierto aunque en mi caso ha sido constante porque mi anterior maquetador si tenia un buen código.

      Lo que es asombroso es la ligereza al diseñar, ganas muchísimo tiempo con rapidez de menú que tiene.

      Un saludo Enrique y gracias

  2. Excelente articulo, me has ganado en publicarlo jeje, pero esta super top.

    Utilizo Elementor + Generatepress y las posibilidades que brindan son casi ilimitadas.
    en mi caso me voy mas por darle al usuario final una herramienta facil de gestionar, sin complicaciones y Elementor lo tiene, ni mas menos.

    Hice una prueba con mi esposa, ella no sabia nada absolutamente nada de WordPress, y le enseñe lo basico, instalarlo y configurarlo.
    instalo generatepress y elementor y en una tarde tenia una web basica hecha.
    Sin explicarle nada mas que como agregar secciones y algun widget.

    En ese punto, si alguien con conocimientos escasos o nulos puede lograr algo aceptable en una web para otros que nos dedicamos a ello profesionalmente estoy seguro que podemos hacer cosas increibles sin apenas tocar un poco de codigo.

    • ¡Hola Joel!, elementor no tiene fin y Generate Press+Elementor desde luego que es la combinación perfecta.

      Estoy totalmente de acuerdo, los maquetadores lo hacen muy fácil pero Elementor ya que lo ha estructurado de tal manera que cualquier persona sin conocimientos de diseño puede crear su Web, esto para los diseñadores es mucho mejor ya que aparte de regalar una herramienta a clientes muy sencilla de manajar para que puedan realizar sus cambios, a nosotros nos agiliza mucho el trabajo y de esta manera nos permiten poder enfocarnos más en la parte técnica.

      Es sorprendente lo de los actualizaciones, no descansan y estoy asombrado

      Gracias por comentar Joel, un saludo 🙂

  3. Que buena pinta tiene Jose M. me has dejado con los dientes largos… y más ahora que tengo que usar visual… Fantástico post como siempre. Felicidades 🙂

    • Hola Elena.

      Tu acabaste decepcionada con el Servicio que te dieron como me comentaste y yo me he llevado una buena desilusión con Forge page builder al dejar de dar un soporte mínimamente decente, pero mira, ya tenía muchas ganas de usar Elementor page builder y este “chasco” me ha servido para descubrir al 100% Elementor, es una maravilla.

      Si decides cambiar un día, ya sabes lo que tienes que hacer, despides a Visual composer que no ha sabido evolucionar y elige Elementor,no tiene quien le haga sombra.

      Gracias por el comentario, cambie mi web, lo probé a fondo y tutorial que he creado para explicar lo bien que va 😉

      ¡Un abrazo!

  4. Excente artículo. Muy detallado!
    Primero he dejado Page Builder de SiteOrigin para irme a Forge.
    Y ahora he dejado Forge en algunas landings y en otras me he cambiado a Elementor.
    Espero que ya no haya más cambios por una temporada jejej
    En page Builder me resultaba incómodo instalar tantos plugins y con Forge me iba bien con Furnace pero al cambiar de theme me daba algunos problemas.

    Un saludo!!

    • Hola Daniel, yo te recomiendo que pases a Elementor toda la Web para no tener dos maquetadores instalados que no crean nada de conflicto entre ellos pero si generan más codigo y cargan la velocidad de la Web ya que tienes 4 plugins de maquetación.

      Haz el paso definitivo, no te va a quedar otra por soporte y ya tienes editor visual para mucho tiempo.

      Gracias y un saludo.

  5. Potente es poco. Vaya pedazo de review + tutorial!!

    La verdad es que llevo ya unos meses con el ojo puesto a este maquetador. quizás lo uso para un nicho que estoy montando, a ver qué tal me funciona.

    Gracias por el post compi 😉

    • Yo me he visto “obligado a usarlo” y ¡menos mal!.

      Como tú,tenía ganas de usarlo porque se oían maravillas de el pero cuando lo pruebas te vas a dar cuenta de que es mejor aún, ya verás.

      Con la versión gratuita ya te haces una idea de todo lo que ofrece.

      Gracias a ti por el comentario campeón.

  6. Hola José Manuel.

    Bienvenido a la comunidad de enamorad@s de Elementor!
    Los que seguimos a Arturo García llevamos tiempo disfrutando de este excelente maquetdor.

    Hasta el punto que tenemos un grupo de Facebook y todo.

    Me encanta que te sumes porque sigo tu blog desde el principio, y mereces trabajar con buenas herramientas.

    Yo estoy creando ahora mi web con GeneratePress y Elementor Pro. (Lo compré en fase Beta)

    No paran de actualizar el plugin. Para colmo te ahorras varios plugins.

    Enfin, gente seria.

    Un cordial saludo máquina!

    (No paras en las Redes) je, je.

    • Hola Gracia, al mismo tiempo que empecé con la herramienta dí con el grupo de facebook, es muy activo, está muy bien.

      Las actualizaciones y nuevas funciones que van añadiendo yo no lo he visto en ningún otro sitio y como dices adquirir Elementor pro hace que puedas prescindir de varios plugins mejorando la velocidad de carga.

      No paro en las redes no jaja, si la respuesta del usuario es buena, me parece un canal primordial para que Google acabé valorando tu web

      Gracias por el comentario Gracia, un saludo 😉

    • Hola Patricia.. podrías indicar cual es el grupo de facebook donde estan los afines a elementor??? y si es en español??
      Gracias.

      José… muchas gracias, gran explicación. Yo tambien lo uso y pienso como tu. Anteriormente usaba pagebuider, pero ya se queda más corto.

      Gracias.

  7. ¡Simplemente brutal Jose!

    Menudo pedazo de tutorial que te has currado.

    Yo tengo pensado hacer cambio a Elementor este verano, tenía pensado hacerlo antes pero es el tipo de cosas que uno va posponiendo jajaja

    El caso, muy bueno el artículo Jose.

    Un abrazo

    • Gracias Ruben.

      En mi caso ha sido adelantar el cambio por necesidad, no pensaba hacerlo hasta más adelante también, pero me alegro haberme pasado ya , aun así tengo cambios pendientes que hacer (en casa del herrero…)

      Cuando lo pruebes no querrás cambiar, lo bueno es que cuando ya has usado otros editores, Elementor es facilísimo y trabajas muy rápido.

      Ya me cuentas y cualquier cosa que necesites me preguntas.

      Abrazos

  8. PEDAZO DE GUÍA!

    Pese a mis reticencias tendré que pasarme finalmente a este maquetador ya que Page Builder acaba quedandose corto a veces.

    Un saludo 🙂

  9. Hola Jose!
    He instalado elementor en mi página web el problema es que no me aparece la opcion de guardar usó el tema GeneratePress la versión gratuita. lo he probado tambien en mi otra web tambien no aparece la opción guardar en esta web uso otro tema.
    ¿Que podria hacer?
    De antemano muchisimas gracias.

    • Hola Joel.

      No entiendo que puede pasar, lo he usado en varias webs y funciona sin problema.

      La opción de Guardar esta ubicada en la zona inferior izquierda y sólo aparece en verde cuando has realizado algún movimiento aunque imagino que no será ese tu problema.

      Si directamente no te aparece no entiendo que puede pasar, te puedo sugerir que desinstales e instales de nuevo Elementor o que reestatablezcas las CSS que aparecen en la opción Elementor>herramientas(ubicada en el panel de control de WordPress.

      También puedes probar a desactivar y activar de nuevo el plugin de caché(si usas uno)

      No se me ocurre que más puede ocurrir porque no es normal.

      Espero ayudarte.

  10. Hola José gracias por la info. Yo estoy usando Elementor y me ha gustado mucho. Solo tengo una duda. ¿Conoces algún pluggin que me funcione para configurar las últimas entradas de mi blog en la página de inicio? Los que he instalado o no se renuevan solos con las últimas entradas o desconfiguran la imagen que uso en cada nueva entrada.
    Si me pudieses recomendar un pluggin que me solucione esto quedaría muy agradecida.
    Un saludo

    • Hola milena

      Te puedo recomendar Wp show post que funciona muy bien, genera un shortcode que podrás insertar en cualquier parte de la web y funciona muy bien con Elementor. Con la versión pro de Elementor no necesitas ningún plugin ya que lo lleva integrado y está realmente bien y trae mil opciones de configuración. Otro que también funciona con shortcodes es display-posts posts shortcode.
      A ver si te sirven,ya me cuentas, un saludo

  11. Hola José,
    Estoy intentando instalar Elementor en alguna de mis webs y en todas da este error:

    Parse error: syntax error, unexpected T_FUNCTION in /home/content/54/7454054/html/webs/xxx/wp-content/plugins/elementor/elementor.php on line 55

    Intenté instalarlo en 3 webs diferentes y no tuve suerte. Sabes cual podría ser el problema?
    Gracias

    • No suele ser lo normal y si sucede en 3 sitios o bien es porque crea algún tipo de incompatibilidad con los temas(si son los mismos en los 3) o algún plugin que tengas en común en las 3 webs.

      Te recomiendo que desactives algún plugin para ver si sigue sucediendo, en caso contrario sería acceder al editor html del plugin elementor y eliminar a través de filezilla o el panel de control de tu hosting una linea creada al final que indica error pero si sucede en las 3 entiendo que debe ser un conflicto común.

  12. amigo como estas gracias por la info, tengo un problema ayer hice una pagina, hoy quise terminarla con el elementor, pero resulta que al entrar a mi wp veo que desapareció osea voy a mis paginas, la veo en vista previa pero no sale esta limpia, entonces como hago cuando la termine, ayer la guarde y la veia normal pero hoy ya no esta. gracias que debo hacer para que aparezca Gracias

    • Hola Alex.
      Es raro lo que dices, si guardas los cambios estos deben aparecer.
      Puedes asegúrarte de todos los cambios realizados hasta los fecha en la opción historial de revisión,ahi verás si realmente todo se ha ido guardando.
      Si aparecen movimientos y sigue sin visualizarse puede deberse a la caché, borrala igualmente deberías borrar los caché del navegador.
      A ver si se soluciona así
      Un saludo

  13. Hola Jose Manuel.

    Magnífico tutorial. Gracias a ti he descubierto este gran plugin, con el cual estoy empezando a experimentar.

    Tengo un problemilla, a ver si a ti te suena…

    Estoy haciendo una landing page. Para ello, he cogido una de las plantillas que ya vienen hechas y la he modificado a mi gusto. Es una de las que aparece, en la cabecera, con una imagen.

    Total, que en la previsualización todo de lujo. Pero cuando he publicado la página, no sale igual. De hecho, cosas como estilos de colores de botones no los pilla. La imagen de la cabecera tampoco. Recuadros de diferentes secciones tampoco los pilla. En definitiva, ¡poco que ver con lo que es la plantilla original y lo que veo en la previsualización!

    He borrado caché, tanto de WP como de navegador, y nada, lo sigo viendo igual. Entro con el navegador en modo incógnito y lo mismo.

    ¿Alguna sugerencia?

    Gracias.

    • Hola Óscar,gracias, es muy bueno.
      Respecto al problema yo hasta ahora no he tenido ninguno, ha ido perfecto pero sí he leído que en los última actualización no funcionaban bien la plantillas predefinidas y parece ser tu caso.
      Prueba a editar una página normal a ver si te funciona bien para descartar que sea del editor
      Si el problema es de las plantillas, en breve seguro que sacan otra actualización y arreglan ese error.
      Ya me cuentas
      Saludos.

  14. Hola, todo perfecto, pero la url que me da de resultado, no soy capaz de que luego funciones, he probado a cambiar el slug y nada.
    Y esta url no se puede ver ¿que puedo estar haciendo mal?
    Un saludo

  15. Hola José, ya te había hecho una pregunta en Youtube, ahora te hago otra acá. Antes que nada, como siempre, felicitarte por tus videos y post.
    Ahora la consulta, puede ser que Elementor no funcione con Revolutions Slider?
    pues es lo que me está pasando en este momento.

    Desde ya, muchas gracias!

  16. Buenas tardes:
    Excelente el video sobre los aspectos del plugin Elementor de WordPress. Como se retira “?page_id=2” de localhost/proyecto/?page_id=2?, cuando se ve la página a traves de chrome. Gracias.

  17. Hola!!!

    Excelente tutorial!!! Tengo un problemilla, a ver si se te ocurre lo que puede ser, cuando diseño una página, no muestra las imagenes que le añado, ni de fondo, ni como imagen directa, la única manera que las saca es sin pongo una galería.

    Se te ocurre que podría ser??? quizás alguna incompatibilidad con la plantilla???

    Gracias.

    • Hola, no sé que decirte Victor, podía ser algún tipo de incompatibilidad con un plugin o algún problema de caché.
      De plantilla no tiene pinta.

      Yo probaría primero a borrar la caché de la web(si la usas), después del navegador.

      Y luego probaría a desactivar algún plugin si no ha funcionado borrando la caché.

      A ver si hay suerte

Deja un comentario

417 Compartir
Twittear187
Compartir126
Buffer57
Compartir29
+118