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

 

En este post encontrarás ocultar

¿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 vivir de internet ¡Suscríbete!

 Recibe Trucos / Consejos sobre SEO y Monetización

Información básica sobre protección de datos:


  • Responsable: José Manuel Peña Fernández
  • Finalidad:  recoger y tratar los datos personales que te solicito para gestionar la solicitud que realizas en este formulario de contacto.
  • Legitimación: tu consentimiento de que quieres comunicarte conmigo.
  • Destinatarios: tus datos serán guardados en Webempresa,  (proveedor de hosting de Tu Web de Cero) dentro de la UE.
  • Derechos: tienes derecho, entre otros, a acceder, rectificar, limitar y suprimir tus datos.
  • Información adicional: Puedes consultar la información adicional y detallada sobre protección de Datos en mi Política de Privacidad.

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.

 

 
YouTube video
Los planes de precio han cambiado y no son los mismos que comento en el video, échale un vistazo

 

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:

 

elementor-page-builder

 

  • 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

 

servidor-y-elementor-pro

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

 

planes-elementor-pro

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

 

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

 

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:

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.

 

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.

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.

 

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

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


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

 

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

 

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

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.

 

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

.

YouTube video

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

.

YouTube video

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

tabla-de-precios-de-elementor

 

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

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.

 

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

.

YouTube video

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

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

.

YouTube video

 

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

 

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

 

opciones-inferiores-elementor

  • 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

 

plantillas-del-editor-visual-elementor  

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

José Peña
José Peña
Consultor SEO y Especialista en crear webs rentables con WordPress desde cero. He tenido la oportunidad de ayudar a muchas personas a comenzar y crecer su web hasta convertirse en un negocio de éxito. Además he creado “MkCero” (mi propia agencia de Marketing Digital). Más sobre mí | Mi Linkedin | Mi Canal de Youtube

105 comentarios en «Elementor Page Builder: Tutorial sobre el maquetador visual definitivo»

  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

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

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

    Responder
    • ¡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 🙂

      Responder
    • Hola Jose, muchas gracias por tu tutorial.
      Super completo.
      La verdad ya estoy terminando mi pagina y no he leido todo, pero queria saber si hay alguna forma de cambiar el URL de las pagina internas, ya que lo que se ve es muy largo y poco practico.
      Gracias!!!

      Responder
      • Hola Paula esa tarea no es cuestión de Elementor pero puedes cambiar el tipo de enlace permanente en los ajustes de WordPress y ahí indicar nombre de entrada o usar uno personalizado

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

    Responder
    • 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!

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

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

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

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

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

    Responder
    • 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 😉

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

      Responder
      • Cada vez somos más Kike, Elementor no tiene competencia, gracias a ti.

        Un saludo

        Responder
  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

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

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

    Responder
    • Gracias Borja.

      No te vas a arrepentir, el diseño es importante pero el tiempo también y con Elementor todo es muy fácil.

      Ya me cuentas.

      Saludos 😉

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

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

      Responder
  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

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

      Responder
  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

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

      Responder
  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

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

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

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

      Responder
  14. Excelente, mas claro no canta un gallo… comunica bien, lo probaré y sin dudas lo seguire usando

    Responder
    • Gracias Ciro,me alegra que me digas eso.
      Pruébalo que es muy bueno y su optas por elegir la versión pro te asombrará más aún, no hay ninguno que le haga competencia.
      Saludos!

      Responder
  15. 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

    Responder
    • No entiendo bien José.

      ¿Te refieres a la hora de guardar una plantilla? ¿que no te funciona cuando lo insertas en una página?

      Responder
  16. 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!

    Responder
  17. Ya pude solucionarno! haciendo una página nueva.

    Responder
  18. 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.

    Responder
    • Hola Carlos Eduardo, al trabajar en local genera códigos internos, cuando migres la web a tu servidor remoto las urls serán amigables.

      Responder
  19. 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.

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

      Responder
  20. Buenos días: Muchas gracias por la explicación en castellano tan bien detallada. Estoy teniendo un problema que no se como definir y no encuentro foros donde poder encontrar una solución a esto. No se si tu que pareces saber mas que yo podrás aunque sea darme alguna pista.

    Cuando estoy maquetando con elementor, en el builder la vista de lo que hago es correcta. Pero cuando le doy a guardar y lo veo en la web, no tiene nada que ver. Ni borrando cache, ni entrando con otros usuarios, exploradores…trabajo a ciegas. No se bien por donde seguir probando.
    Muchísimas gracias

    Responder
    • Vaya Vicky, si has borrado caché y todo, es raro porque puede mostrar en un momento dado alguna diferencia por visualizarse en distintas resoluciones pero nada que ver con lo que dices.

      Sé que está dando algún problema a nivel de servidor al necesitarse aumentar la memoria (tendrías que decírselo a tu hostinh)aunque en ese caso normalmente no te permite editar,pero podías probar por si fuera el problema

      El resto no sabría decirte ya que en todos lo proyectos me ha funcionado perfecto, podría ser un plugin o la misma plantilla.

      Responder
  21. Buenas tardes: muchas gracias por este tutorial tan completo. Estoy empezando a trabajar con Elementor y me he instalado la versión gratutita. El caso es que cuando creo mi página e intento empezar a maquetarla en Elementor me aparece un ventana que me dice que no se ha podido cargar la vista previa y en la opción de Aprende más que me da no encuentro solución.
    Muchas gracias

    Responder
    • Hola Marta, creo que puede ser debido a la memoria límite que pide la herramienta(64mb) , contacta con tu hosting a ver si te la pueden ampliar.

      Responder
  22. Si, si, si. Elementor es lo mas y free. Como tus super tutopost. A mi me encantó la opción elegir plantilla ya hecha y luego maquearla a tu manera, junto con todas las opciones que tan bien nos enseñas.

    Muchas Gracias José Peña. Algunas de las opciones, se me habían pasado de largo pero ahí estás tú para no dejar puntada sin hilo. 😉

    Responder
    • Te contesté en mi canal de youtube, gracias Lucia.

      Responder
  23. Estoy trabajando en mi primera web, estoy algo asustada con respecto a Word Press pero he descubierto tus consejos y creo que me podrían ayudar mucho. Me gustaría suscribirme.

    Responder
    • Hola Ana, no te asustes, al principio es normal que te parezca complicado, son muchas cosas.

      Si empiezas desde el primer artículo seguro que vas avanzando poco a poco, si tienes alguna duda pregúntame.

      Si te quieres suscribir perfecto, además es la mejor manera de empezar ya que haces un pequeño minicurso para que vayas entiendo todos los conceptos que te vas a encontrar (tranquila que es muy cortito y se lee rápido)

      Un saludo

      Responder
  24. Buenas tardes, agradecerte por tu posts, quisiera que me ayudes en un problema, sucede lo siguiente, en la versión 2018 aprece el boton de actualizar y ya no de Guardar.
    Resulta que ahora se realiza con el boton actualizar pero no guarda los cambios a la paginas una vez que salgo de elementor. No se que esta sucediendo si me puedes ayudar por favor.

    Gracias de antemano

    Responder
    • ¿Estás usando un plugin de caché? Si es así borra la cache y mira si ahoa si se reflejan los cambios, igualmente elimina la caché del navegador.

      Ya me cuentas

      Responder
  25. ¡Hola José!, gracias por este post tan completo y los vídeos. Quería plantearte una duda, no sé si me podrás ayudar. En el widget «galería de imágenes», cuando intento cambiar el tamaño de las imágenes, no lo hace correctamente, si le pongo thumbnail sí me las pone cuadradas a 150px, pero si eligo medium a 300 x 300px o large, no aparecen cuadradas, sino que cada una de las fotos aparece con su tamaño proporcional original.

    Cuando lo hago con el widget de una imagen individual tampoco me lo hace, pero puedo conseguirlo mediante la opción de tamaño personalizado (que no existe en galería)

    He limpiado la caché del navegador, y tampoco va, así que no sé.

    De hecho para mostrar mis imágenes estaba dudando entre utilizar este widget de Elementor o el plugin «Final Tiles Grid Gallery» que tiene múltiples efectos al pasar por encima de las fotos, con Elementor (al menos con la versión gratuita) no he visto que incluya ninguno a no ser que crees tu galería imagen a imagen. ¿Cuál me recomiendas?

    Un saludo y ¡gracias anticipadas!

    Responder
    • Hola Ana, lo ideal es que subas las imágenes en el tamaño que te pide la caja, si las subes a 300×300 y eliges esa opción debería mostrártelas bien, de otra manera pueden no ser verse bien y si las personalizas las estarás escalando siendo negativo para la velocidad.
      En cuanto al plugin nunca lo he utilizado aunque si alguna parecido de themeforest como Essencial Grid y es cierto que son vistosos y dan mucho juego pero igual que te he comentado antes estos suelen ser algo pesados, Elementor funciona muy bien pero en esta parte de galerías quizá le falta un poquito que sea más visual como pretendes, seguro que van añadiendo más funcionalidades.

      Responder
  26. Hola, quería consultar, hice toda mi página en elementor, y ahora estoy leyendo un poco más al respecto, y tengo una duda con los temas. ¿si cambio de tema pierdo toda el diseño que haya hecho antes? Pues no sabía que se podía usar, de hecho usé una que traía q se llama Twenty Seventeen, pero parece que es mejor usar OceanWP.

    Muchas gracias

    Saludos

    Responder
    • Hola Alejandro.
      Cada tema tiene sus propias funcionalidades, perderás partes del diseño que tenías ya que tendrás que ajustar de nuevo las opciones predefinidas de la plantilla de tipografías, colores etc…
      Te recomiendo que cambies porque verás que no es mucho trabajo y un theme gratuito te va a limitar mucho y sobre todo que aconsejo que adquieras una plantilla de pago como la que comentas «Ocean Wp» que es muy buena pero algo cara. Yo te recomiendo Generate Press que es la que yo uso para todos mis proyectos y es muy buena y muy compatible con Elementor. Te dejo un Tutorial: https://tuwebdecero.com/generate-press-mejor-plantilla-wordpress/
      Ya me cuentas que te parece

      Responder
  27. Creado el menú con Elementor por como podría poner la opción de menú fijo para que no suba después con la pagina.

    Gracias, saludos

    Responder
    • Hola Segundo.
      Fíjate bien que tienes la opción menú pegajoso dentro de las opciones del menú

      Responder
  28. Hola !!! Antes de nada darte la enhorabuena por el tutorial explicado de una manera tan sencilla y tan potente al mismo tiempo. Me ha abierto los ojos, pues estoy aterrizando en este mundillo y no me está resultando nada fácil. Gracias de nuevo !!!!
    Yo tengo el Tema generate press, y he descargado la demo de elementor, pero antes de comprar la versión pro, y abusando de tus conocimientos , quería preguntarte lo siguiente:
    Deseo una pagina muy visual, limpia, sencilla y como apariencia muy minimal. El propósito de la página es mostrar lo que hago para poder enseñarlo y compartirlo. He visto paginas de portafolios y la idea que mas me gusta es un tema ASSEMBLE para wordpress. Pregunta: me será mejor GENERATEPRESS+ELEMENTOR PAGE BUILDER ó WORDPRESS + ASSEMBLE ??????
    Gracias de nuevo por todo y desde ya te seguiré !!! todavía no tengo página, solamente una pagina de prueba

    Responder
    • Hola Mª Jesús, me alegra que te guste, te cuento

      El tema Assemble es de la plataforma themeforest, está tiene el inconveniente de que trae intregrado el maquetador Visual Composer, en muchos temas no permite eliminarlo sin perjudicar a sus funciones, es por eso que te «casi obliga» y es una faena.

      Mi recomendación es que pruebes directamente con Generate Press y Elementor Gratis y ver hasta donde llegas y luego decides que adquirir de pago.

      Una buena opción podría ser dejar Generate gratis y Elementor de Pago ya que este último hoy día ya te permite crear cabeceras y footer (que son funciones de la plantilla)

      Si tienes más dudas me preguntas 😉

      Responder
  29. Hola, José: me gustaría saber tu opinión sobre este tema de Wordpress «massive dynamic» y si lo consideras a la altura de Generate + Elementor.
    No estoy habituada a maqueta en Wordpress. También quería saber si Elementor es compatible con Thrive leads o Sumo

    Responder
    • Hola Sara, este tipo de constructores integrados dentro de las plantillas nunca van a estar a la altura de Elementor, Divi etc…, pero dependiendo de las necesidades agilizan el trabajo.

      El problema que traen las plataformas tipo themeforest es la casi obligación a usarlo con lo cual usar otro maquetador ajeno puede traer incompatibilidad.

      Yo probaría con las opciones gratuitas de Generate y Elementor y luego vería si adquirir las de pago, incluso Elementor permite ya crear cabeceras y footer siendo posible adquirir Generate press gratis y ver que tal te va.

      Es totalmente compatible con las dos herramientas que dices, las he probado con ambas y sin problema

      Responder
  30. Tengo una web con elementor y generate press.
    Quiero hacer modifiaciones en mi página de inicio. Algunos cambios de enlaces y modificar el footer.
    Resulta que hago las modificaciones en editar con elementor pero no veo forma de guardar los cambios. No tengo opción de guardar o Actualizar.
    Me sale un mensaje solo unos instantes para consultar historial pero desaparece al momento. Cuando entro en el historial, eligo otra de mis modificaciones y le doy a Aplicar pero sigue sin tomar mis modificaciones.
    ¿Como puedo hacer modificaciones y guardarlas?

    Responder
    • Hola Martín, podría ser un problema de caché o bien que necesites ampliar la memory limit del servidor.

      Otra opción sería en ajustes de elementor (panel lateral) en modo avanzado activar la opción de carga.

      Si es otro motivo podría ser una incompatibidad de plugins

      Responder
  31. Hola José,
    Estuve editando mi página de Inicio con Elementor y todo fue muy bien. Ahora opte por editar una página que está dentro de un menú desplegable y cuando le doy actualizar no me lo muestra ni se me carga en mi sitio. Sabrás que puede ser? Acabo de actualizar el plugin a la versión 2.1.3.
    Gracias!!

    Responder
    • Tiene pinta de ser la caché de WordPress o del navegador, si la eliminas creo que podría verse bien.

      Responder
  32. Hola José,
    Estuve editando mi página de Inicio y todo fue muy bien. Ahora opte por comenzar a editar una página que se encuentra dentro del menú desplegable y cada vez que actualizo no veo los cambios que he realizado, me aparece la página en blanco como si no hubiese hecho nada. Sabrás que puede ser? Actualice el plugin a la versión 2.1.3.
    Gracias

    Responder
    • Tiene pinta de ser problema de Caché Yamila, borra y también la caché del navegador que uses a ver si es ese el problema

      Responder
  33. Nunca he visto una forma tan brutal de destripar un plugin ¡Qué bestialidad de artículo! no te dejaste nada de nada.

    Estoy probando esta herramienta y no sabía del todo bien el potencial que podría tener, ya te podrás imaginar que todas mis dudas desaparecieron.

    ¡Muchas felicidades!

    Responder
    • Muchas gracias Alex por el comentario, es un post que voy actualizando y sinceramente me cuesta ya que cada pocos días continúan sin incluir nuevas funcionalidades, la verdad es que no se hasta donde van a llegar porque han conseguido un editor superrápida de manejar, una vez lo manejas el diseño es muy rápido.

      Me alegra que te guste, es muy conocido pero todavía hay quien desconoce todo su potencial y cuando lo descubre alucina.

      Saludos majo!!

      Responder
  34. Hola necesito ayuda con el elementor y polylang. Tengo todo mi site traducido con polylang pero he tenido que hacer 2 footers con elementor para cada idioma por que no me los deja traducir pero no puedo poner uno a cada idioma. Me.podeis ayudar?

    Responder
    • No has probado a crear cada footer personalizado y guardar como plantillas para asignarlo a cada página más rápido?

      Responder
  35. Hola José , gracias por explicar tan bien Elementor !
    Mi pregunta es: con Elementor podria hacer ina página con un diseño totalmente libre y no tener el menu o el header preestablecido del tema usado ?
    Es decir casi como si la hiciera desde cero en html ?
    Muchas gracias y un saludo !!

    Responder
    • Hola José, con la versión pro sì, puedes crear Menùs y footer personalizados al 100% y quitar los de por defecto de la plantilla,es genial

      Responder
  36. Hola Jose, qué completo tu post, soy conocedora del plugin Elementor, estoy utilizando la versión gratuita para maquetar una página, lo dejé grabado y todo bien, ahora que quiero seguir maquetando, cuando le doy a Editar con Elementor la página no se carga, digamos que se va al link pero se queda en blanco totalmente. Es curioso, porque si la visualizo como si la estuviese consultando por internet, sí que se ve maquetada, pero cuando quiero acceder a Editar no me deja. Aishhh qué le pasa a esto!! Así no la puedo tener publicada, no estaba acabada!
    Un saludo

    Responder
    • Desconozco que puede ser Rosa pero sí en alguna ocasión ha surgidom un pequeño conflicto y se ha solucionado o ampliando la memoria limite en el servidor, puedes activarlo o pedir a tu hosting que lo haga.

      O también puedes cambiar los ajustes de Elementor y activar la pestaña de cambio de método de carga.

      A ver si así se soluciona el problema.

      Ya me cuentas Rosa

      Responder
  37. Hola,
    ¿Insertar HTML con elementor tiene que ser la version PRO?.
    Es que cada vez que lo intento, me da error 403 servidor.
    Saludos.

    Responder
    • Hola Roberto, no necesita la versión premium.
      Este tipo de error no es frecuente al editar una caja html, no debería dar problemas.
      Cuando se origina un error 403 podria ser por algún impedimento en los permisos en el hosting o alguna incompatibilidad con algún plugin

      Responder
  38. Amigo excelente artículo, queria preguntar si existe alguna manera de cambiar la tipografía sólo para móvil? veo que toma la misma para escritorio y móvil por igual

    Responder
  39. Hola José,

    tengo una duda, cuando dices:
    «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.»
    Es en la versión de pago? Porque a mi en la gratuita se me modifica todo al variar la versión móvil o tablet.

    Gracias por tu post!

    Responder
    • Hola Luisa gracias a tí por el comentario.
      Todo se modifica cuando se adapta a móvil o a tablet ya que es responsable pero individualmemte además se puede dar ligeros cambios específicamente pero desconozco si ahora mismo solo está disponible esta opción en la versión móvil.
      Puedes ver en la parte inferior de las opciones si tienes esa posiblidad o al editar cada widget si incluye el dibujo de tablet y móvil, en ese caso puedes dar padding, ocultar o cambiar tipografías etc.. según tu gusto y sin alterar las versión de ordenador pro como te digo, no sé si es solo para elementor pro.
      Saludos!

      Responder
  40. Hola!! Muy buen post. Yo tengo un problema con el Elementor. Cuando quiero cargar un widget no me lo permite. Directamente me aparece una señal de stop cuando intento trasladar el widget a la sección que cree. Alguien puede ayudarme? Gracias!!!

    Responder
    • Hola Laura, tienes que asignar un número de columnas para que te permita insertar un widgets, imagino que lo habrás hecho pero asegúrate por si ese es el problema

      Responder
  41. Hola. Estoy empezando a utilizar elementor. Quiero introducir un portfolio de imágenes…pero solo me sale un cuadro con color que enlaza a la foto. Cómo puedo hacer que me salga la foto en miniatura?

    Responder
    • Hola Raquel, no sé por qué te aparecen colores, debería dejarte incluir imágenes sin problemas. El widget de portfolio no es lo mejor de Elementor pero te deja algunas opciones.

      Responder
  42. Hola José!!
    Vaya peazo post, madre mia!!!
    estoy luchando con elementor y tengo una duda: se puede hacer, en una pagina, un fondo global (degradado sutil de blanco a gris) y despues poner fondos en sección y fondos en sección interior? o sea, como 3 capas de fondos? no lo consigo!!! mil gracias!!

    Responder
    • Gracias Julia. Siempre puedes usar capas de fondo con degradados y luego insertar fondos encima de cada sección de forma nommal ajustanto los anchos.

      Creo que es una forma de hacerlo

      Responder
  43. Hola José, Muchas gracias por tu blog! Yo utilizo ELEMENTOR PRO y ya es imprescindible para mí. Pero hay un tema que me vuelve loca y seguramente es sencillo. Configurar la Web para tablet y móvil. He visto videos donde lo explican pero yo no consigo modificar una columna y si consigo alguna modificación perjudica a la imagen en los demás dispositivos. Lo que estoy haciendo es crear todo el contenido de nuevo para cada dispositivo. Te agradezco de antemano si pudieses darme alguna pauta. Gracias! y un cordial saludo. Heidi Laas

    Responder
    • Algunas de las personalizaciones de elementor te permiten aplicar cambios individualmente a cada dispositivo. Para ello tienes que fijarte si al lado de cada opción aparecen iconos pequeños de los dispositivos. Si es así si modificas no debe alterar el diseño del resto.

      Responder
  44. Hola José, me dirijo a ti de nuevo ya que Wordpress me dirige a ELEMENTOR por dos razones:

    1. En mi ordenador cuando entro en mi Web la veo tal y como va a quedar sin haberla aún publicado y por este motivo me he descargado Wordpress en la tablet y en el móvil. En estos dos no puedo ver la Web tal y cómo va a quedar sino con el caos de la construcción.

    2. Cuando abro la Web y no se carga de inmediato, primero la veo sin el ancho completo que he asignado y además veo los botones del color amarillo de ELEMENTOR. Esta es la contestación que me da Wordpress …Para cargar tu sitio web, se necesitan cargar todos los elementos. En WordPress.com por ejemplo, muchos temas van a cargar primero una fuente de Google (para que se vea ya el texto, incluso si tu navegador no dispone de la fuente utilizada en el sitio web) pero en seguida se cargaría (si se puede) la fuente correcta. Esto es algo similar, pero proviene de los elementos creados con Elementor. Van cargandóse y puedes verlo.
    En conexiones rápidas, este cambio es casi instantáneo pero en conexiones más lentas, puede que tarde un poco más y verás los elementos sin formato/estilo…

    ¿Puedo hacer algo para arreglarlo? Muchas gracias!!!

    Responder
    • 1. Diseñar en varios dispositivos es una caos porque es diferente forma de trabajar y te puedes liar por el tamaño de los dispositivos al ser cada uno de un tamaño. Lo mejor es trabajar en un sitio desde las opciones de Elementor y sus dispositivos
      2.No suele pasar eso pero es cierto que algún plugin o la conexión puede hacer que al cargar se muestre eso que comentan, el formato simple en html sin mostrar los estilos ni el javascript.

      Responder
  45. que tal Jose necesito de tu ayuda, tengo elementor pro y el tema de generate expres que uso para mi pagina, pero no puedo quitar el menú que trae por default porque no me aparece en la opccion donde dice DESACTIVAR ELEMENTOS solo me aparece titulo del contenido, pero no me aparece ( pie de pagina y navegación principal) para que se pueda quedar el menu que acabo de crear, o es porque tengo que tener la version premium de generate expres ??????

    Responder
    • Hola Juan Manuel.
      Para hacer eso necesitas generarepress premium pero tienes más opciónes.
      Usar CSS para eliminar el menú con display:none (algo que a lo mejor te resulta complejo)
      Usar canvas. Para ello en la página que estés editando con Elementor, en la opcion de la rueda(esquina inferior izquierda) tienes una opcion para canvas. Buscalo. Esto hará que puedas crear una página sin menú y footer por defecto y lo creas con Elementor como quieras

      Responder
  46. Buenos dias!
    A mí personalmente me encanta Elementor, es súper práctico e intuitivo y hace que prácticamente cualquiera pueda diseñar una bonita página web. Cada día me sorprendo más de la cantidad de cosas que se pueden hacer con él y que desperdicio por desconocerlas!! Gracias por este post tan explicativo!!

    Pero… tengo un problema a la hora de redactar texto que no sé si es de elementor o no…. cuando escribo » » (las comillas), al redactar me salen así, pero luego en el texto definitivo me aparece como <> …
    ¿esto es normal? ¿sabéis como agregar comillas?

    ¡¡Muchísimas gracias por todo!!

    Responder
    • Hola Sonia. Gracias por el comentario. Elementor es la bomba y quien no dice que es el mejor es que no lo ha probado, sinceramente
      Es raro lo de las comillas y no sabría ayudarte. Imagino que al editar con WordPress te sale bien. En caso contrario como no sea del idioma del teclado
      No sé decirte la verdad. Sorry

      Responder
  47. Hola

    Muy buen post te has marcado. Una pregunta, al cambiar una página de wordpress a Elementor han dejado de aparecer los comentarios. ¿Cómo puedo volver a incluirlos incluida la opción de insertar comentarios?

    Muchísimas gracias.

    Responder
    • Gracias Juan.Mira si en las opciones de pantalla de WordPress está desactivado y si lo que has hecho es editar con elementor incluye el widget de de comments

      Responder
  48. Hola José,

    Gran artículo. Una pregunta:

    Yo actualmente uso el theme Newspaper, que tiene su propio builder y no va mal, pero creo que mete demasiada basura al código hasta el punto de que una portada muy simple llega a tener más de 8000 líneas de código, lo cual me parece una burrada.

    Por eso quería migrar a Elementor y usar una plantilla limpia como Ocean o Hello. La cuestión es que Newspaper tiene una opción que a mí me gusta mucho, y es la de poder tener un menú horizontal deslizante en móvil. En Xataka puedes ver el ejemplo. Si entras en móvil, puedes ver ese menú al que me refiero.

    La cuestión es que he estado probando Elementor pero no he visto por ningún lado opción de mostrar así el menú.

    ¿Sabes si es posible hacerlo? ¿Hay alguna opción para ello? Imagino que con CSS se puede hacer, pero no tengo ni idea.

    Gracias y un saludo,
    Adrián.

    Responder
    • Hola Adrián, se puede hacer usando Addons como Jet de Crocoblock o Elementor Extra. No sé exactamente cual es el que lo incluye pero es un gasto extra a Elementor

      Responder
  49. Elementor es sin duda la herramienta más potente de diseño web que existe actualmente.
    Gran artículo.
    GRACIAS.

    Responder
  50. Hay alguna manera de que la plantilla guardada se refresque los cambios en todos los sitios donde lo has utilizado.

    Es decir, utilizo una plantilla o un bloque guardado en diferentes sitios de una web, esta plantilla o bloque actualizo la información y se actiliza automáticamente en todas las páginas de la web que los he utilizado. ¿Es posible? Gracias.

    Responder
    • Sí es posible. Creado o guardando plantillas y usándolas en el mismo sitio a través del shortode o importándolas. De esta manera todos los cambios que hagas en la plantilla guardada se aplicara a todos los sitios donde tengas metida esa plantilla

      Responder

Deja un comentario