Elementor: review y tutorial en español

Elementor Page Builder

Hace tan sólo unos pocos meses te hablaba de Thrive Content Builder, un constructor web (o editor visual, llámalo como quieras) que durante el último año había revolucionado la forma de maquetar contenido de páginas y entradas en WordPress con su estilo drag&drop (arrastrar y soltar).

En aquel momento, te hablaba de él como el editor visual web más completo. Y si te lo decía era porque realmente así lo consideraba cuando escribí la entrada.

Pero… ahora algo ha sucedido. Algo que ha hecho que mi opinión como diseñador web haya dado un giro de 180º.

Durante los últimos días he conocido una nueva herramienta del mismo tipo llamada Elementor Page Builder, la cual apenas tiene 5 meses de vida y parece que claramente va encaminada a desbancar a Thrive Content Builder de su actual trono.

Esto me atrevo a decirlo tras haberla probado tan sólo durante un par de días haciendo pruebas con ella.

Te preguntarás… ¿tan pronto te ha convencido y tan maravillosa te parece que sólo te ha hecho falta probarla durante un par de días para “ponerle los cuernos” a Thrive Content Builder?

Mi respuesta rotunda, a riesgo de que me digas que soy de infidelidad fácil, es un SÍ tan grande como la catedral de Toledo.

Fíjate como será esto que hasta me he saltado mi calendario editorial a la torera y me he puesto a escribir como un loco entusiasmado sobre él.

¿Quieres saber por qué con argumentos y ejemplos?

Pues no te pierdas esta review sobre Elementor Page Builder que he preparado para ti en la que, no sólo te muestro todo lo que puedes hacer con este nuevo editor visual, si no que también voy a realizar una comparativa con Thrive Content Builder para que veas todos los puntos donde considero que lo aventaja considerablemente.

Primero…¿Qué es Elementor Page Builder?

Pues podría enrollarme muchísimo contándote qué es Elementor, pero mejor te lo cuento en un vídeo muy corto con el que entenderás porque es una de las herramientas más potentes en la actualidad para diseñar tu web de forma única y personalizada.


Características principales de Elementor Page Builder

Lo primero que voy a enseñarte son una serie de señas de identidad muy generales de Elementor que ya hablan muy bien de él a primer golpe de vista y que denotan que, probablemente, estamos ante el mejor plugin de este 2016 que se ha desarrollado para WordPress.

Review y tutorial sobre Elementor Page Builder


Elementor Page Builder es más rápido

Nada más instalarlo, este es el primer punto en el que me he percatado que Elementor destaca notablemente sobre otros editores visuales que he probado.

Verdaderamente, el plugin carga muy rápido cuando lo ponemos en acción. Pero no sólo es rápido al cargarse, si no también al utilizarlo.

Mientras lo estás utilizando, su funcionamiento es sumamente fluido. No se queda “pillado” y realmente no da fallos o problemas de ningún tipo. Realmente es un editor visual en tiempo real. Yo diría que en tiempo récord real. 😉


Elementor es de código abierto

Por si no sabes lo que es, algo que es de código abierto significa que su código fuente está a disposición de todo el mundo para que cualquier desarrollador pueda crear e implementar sus propias mejoras si lo consideran necesario.

Por ejemplo, WordPress es un CMS de código abierto y, gracias a ello, existen tantos plugins y temas creados para él por una gran cantidad de desarrolladores.

A raíz de este ejemplo que te pongo, seguramente entiendes por qué me parece un punto tan destacable el hecho de que Elementor Page Builder sea un editor visual de código abierto.

Que lo hayan hecho así implica directamente que es más probable que vayan saliendo cada vez más y mejores actualizaciones en el futuro (aparte de más frecuentes) ya que cualquier desarrollador que se ponga a estudiar cómo está hecho el editor podrá programar sus propios aportes a la herramienta y dar solución a una lista de problemas concretos más variados.


Diseño web sin saber de código HTML o CSS

Otra de las características principales que destacan los propios creadores de Elementor es que han creado este constructor web teniendo siempre al diseñador en mente.

Esto es que, a diferencia de otros editores de este estilo, su objetivo es que se puedan crear grandes diseños de la manera más rápida, profesional y efectiva posible sin que haya que tocar código o CSS.

Con este fin, han implementado elementos para diseñar que no estaban incluidos en ningún otro constructor web hasta la fecha.

Ya te aviso por adelantado que lo han logrado con nota. Pero no quiero anticipar demasiado sobre este tema, ya que quiero contártelo un poco más adelante de manera más detallada cuando te hable de todo lo que puedes crear e incluir en tus diseños con Elementor Page Builder.

En cualquier caso, si no me crees o piensas que estoy exagerando, fíjate como uno de sus desarrolladores crea una Landing Page en poco más de 10 minutos totalmente desde cero.


Por cierto, esto no significa que Elementor se cargue de un plumazo el hecho de que puedas hacer personalizaciones con tu propio código CSS o HTML. En esto también han pensado sus desarrolladores y, por tanto, tampoco se queda atrás de otros editores visuales en este aspecto. 😉


Facilidad de uso

Nada de esto que te he dicho antes tendría sentido si luego la herramienta fuese muy complicada de utilizar.

Pero no es el caso. De hecho, me atrevería a decir que es la más sencilla de este tipo que he utilizado hasta ahora.

Con Elementor podrás controlar una enorme cantidad de parámetros CSS para dar estilos a cualquier elemento que introduzcas en tu blog o tu web únicamente utilizando campos para rellenar, deslizadores o elementos seleccionables con un click de ratón.

Vamos, nada que cualquier usuario con un nivel básico de informática no sepa hacer.

Se puede decir que, en este sentido, también han mejorado lo que ya había y se han puesto a la cabeza del ranking. 😀

Un poco más adelante, te mostraré cómo usar Elementor Page Builder y todo lo referente a esta facilidad de uso y su interfaz. Vas a ver por tus propios ojos que lo que te cuento no es moco de pavo.


Diseño web fácil para dispositivos móviles

Esta característica, sin duda, es de las que más han llamado mi atención y una de las grandes diferencias respecto a Thrive Content Builder u otros editores visuales.

Con Elementor Page Builder por fin puedes controlar los media queries (es decir, el código CSS que hace que el diseño vaya cambiando en función del tamaño de pantalla del dispositivo) de manera totalmente visual.

Como verás más adelante cuando te enseñe uno por uno los elementos del editor, al pulsar sobre cada uno de los iconos responsive (escritorio, tablet o móvil), puedes establecer desde el frontend mediante sus opciones de personalización estilos CSS para cada una de las visualizaciones simplemente utilizando deslizadores o rellenando datos en los campos preparados para ello.

Diseño Responsive en Elementor Page Builder

De verdad, una pasada. Cuando lo he visto, ojiplático me he quedado. 😲


Elementor Page Builder es gratis

Ah, ¿que aún no te he comentado este pequeño detalle?

Pues sí, Elementor Page Builder no te va a costar un duro. Es totalmente gratuito.

Te preguntarás… ¿cómo algo tan bueno puede ser gratuito? ¿Lo va a seguir siendo en el futuro o es sólo una estrategia de marketing para captar clientes?

Pues ya te digo que no, no es una estrategia de marketing.

En su web, los desarrolladores de Elementor dejan bien claro que no han sacado Elementor de manera gratuita como un gancho o truco alguno, si no para crear un digno competidor entre los editores visuales DIY cuyo uso sea el más extendido posible.

De hecho, también aseguran que, a pesar de que piensan sacar el próximo 12 de diciembre una versión premium llamada Elementor Pro (cuyas funcionalidades van a ir más enfocadas al engagement, a la promoción o a las conversiones de los sitios web), no piensan quitar con ello ni una sóla funcionalidad a la versión gratuita.

Es más, no sólo no piensa hacer esto si no que su intención es la de seguir aportando funcionalidades nuevas en la versión gratuita que ahora no están implementadas.

Por ejemplo, ya tienen en mente un par de nuevos elementos que van a incluir próximamente llamados “Person” y “Countdown” así como un historial de revisiones para que puedas volver a un estado anterior mientras estás diseñando tus páginas por si te equivocas.


Elementor está traducido al español

Pues sí, como lo oyes.

Por defecto, nada más instalar Elementor, toda la herramienta esta traducida en perfecto castellano sin que tengas que instalar ningún archivo de traducción o similares.

Seguramente no es la característica más importante (o puede que para algunos sí que lo sea), pero que quieres que te diga… a nadie le amarga un dulce. Y si también me facilitan la vida poniendo el constructor web en mi idioma pues lo agradezco un montón, sinceramente.


Elementor es compatible con GeneratePress

Si sigues el blog, ya sabes que desde hace algún tiempo todos mis diseños los realizo bajo el theme / framework GeneratePress.

Pues bien, otra noticia genial relacionada con Elementor es que… ¡es 100% compatible con esta plantilla!

Y no lo digo yo. Lo dice Tom Usborne, el propio creador de GeneratePress, el cual en el propio foro de su tema WordPress recomienda Elementor como el editor visual a utilizar junto a su creación.

Es más, también los desarrolladores de Elementor recomiendan GeneratePress como una de las mejores plantillas que puedes utilizar con su constructor web.

Bajo mi punto de vista, esto es un auténtico puntazo en favor de Elementor Page Builder con respecto a Thrive Content Builder, ya que con el constructor de la empresa Thrive Themes si es cierto que había ciertas cosas que no eran del todo compatibles y te veías obligado a utilizar una herramienta u otra para hacer tus páginas (trucos como el de utilizar Thrive Leads en las secciones a ancho completo aparte).


Elementor es aprobado por usuarios y profesionales

Como te he comentado antes, Elementor Page Builder es muy joven aún. Salió al mercado el pasado 2 de junio de 2016. Eso significa que apenas tiene 5 meses de vida en el momento en el que estoy escribiendo estas líneas.

Sin embargo, en tan poco tiempo, los datos de uso y valoración que han conseguido por parte de todos los usuarios que usan WordPress son sencillamente espectaculares.

Actualmente, y con este poquito tiempo de vida que te comentaba, Elementor ya está siendo utilizado en más de 20.000 instalaciones de WordPress y la valoración media de todos los que lo usan es de 4.9 sobre una puntuación total de 5 (puedes ver estos datos en el repositorio de plugins de WordPress).

No me he puesto a mirar cuantos plugins que cuentan con este número de usuarios tienen esa valoración. Pero me atrevería a decir que muy, muy, muy pocos. Y si alguno más lo tiene, no creo que lleve tan poco tiempo en el mercado como Elementor.

El hecho de que los propios usuarios lo valoren tan alto y estén confiando en él tan pronto ya es un síntoma claro de que probablemente estamos ante el rey de los editores visuales de WordPress durante los próximos meses o años.


Su código está bien optimizado de cara al SEO

La última de las características principales con las que cuenta Elementor no es precisamente la menos relevante.

Los chicos de Elementor Page Builder también han desarrollado este plugin pensando en el tema del posicionamiento web y el SEO, creando un código limpio que cumple con los principales estándares recomendados por los principales buscadores como Google.

Por ejemplo, con Elementor se evita el uso de  los estilos “inline”, algo bastante perjudicial para los tiempos de carga a lo que sí recurren otros editores visuales.

Evidentemente, esto no significa que por instalar Elementor vas a ser el primero en las búsquedas que te interesen (para eso debes trabajar tanto tu SEO on page como tu SEO off page), pero sí que su código ayuda a no incumplir reglas básicas que te penalicen.


Review y tutorial en español sobre Elementor Page Builder

Bien, ya te he hablado de las características a nivel general con las que cuenta Elementor Page Builder y seguro que, como mínimo, habrán llamado poderosamente tu atención, ¿me equivoco?

Pues ahora voy a meterme contigo hasta las entrañas de este constructor web para que veas absolutamente todo lo que puedes hacer con él.

Prepárate para recibir un flechazo directo del Cupido tecnológico (vale, este termino me lo acabo de inventar. Pero seguro que lo hay por algún sítio… 😛 ) como el que he sufrido yo.

Como hice con GeneratePress o Thrive Content Builder, voy a dejarte todas mis impresiones tanto en formato texto como en los siguientes apartados (todos ellos incluyen su correspondiente vídeo explicativo) en los que voy a hablarte de todo lo que se puede hacer con Elementor Page Builder. Elige la opción que te resulte más cómoda. 😉

Vamos al lío.


Cómo usar Elementor en WordPress

Para empezar, vamos a echar un vistazo a la interfaz inicial que nos aparece nada más abrir el editor.

Si quieres, puedes dar un repaso general a la interfaz de Elementor para ver su interfaz y todas sus posibilidades en el siguiente vídeo. Vas a comprobar por ti mismo que aprender cómo usar Elementor no es para nada complicado.


Por defecto, lo primero que aparece son todas las herramientas de diseño que Elementor Page Builder pone a nuestra disposición, las cuáles se dividen en herramientas básicas y herramientas generales.

Vamos a repasar una por una estas herramientas a continuación en los próximos apartados de este artículo.

Antes de eso, únicamente aclararte que siempre podrás acceder a este panel de herramientas haciendo click en el icono de la parte superior derecha del panel de control de Elementor (te lo marco en la siguiente imagen con un cuadrado azul para que quede más claro).

Icono de herramientas en Elementor Page Builder


Cómo diseñar con Elementor tu web: Herramientas Básicas

A continuación, vamos a comenzar conociendo las herramientas básicas gratuitas que Elementor Page Builder pone a nuestra disposición. En el siguiente vídeo aprenderás sobre cada una de ellas y sus opciones:

Herramientas incluidas en Elementor Page Builder

Secciones en Elementor

La primera de las herramientas que encontramos precisamente no se encuentra dentro del panel de la barra lateral de Elementor, si no que es uno de los dos botones que aparecen en la página del diseño.

Estoy hablando de la opción “Agregar nueva sección”.

Con ella, Elementor ya está cubriendo una de las grandes carencias que Thrive Content Builder no ha arreglado durante todo este tiempo en su editor, que es la de poder crear secciones a ancho completo. 🙂

Esto puede hacerse seleccionando la estructura “limpia” para la sección (con una sola columna) marcando la opción “Stretch Section” o seleccionando “Ancho completo”  en la opción “Ancho de contenido” que se encuentra dentro de la sección “Disposición” que configura dicha sección.

Secciones en Elementor Page Builder

Además, no sólo puedes incluir como fondo de tu sección una imagen estática normal y corriente… ¡si no que también tienes la posibilidad de utilizar un vídeo!

No sólo eso, también podemos crear secciones con hasta 12 estructuras predefinidas que son la mar de variadas como puedes ver en esta imagen.

Estructuras para secciones en Elementor Page Builder

Esto empieza muy bien, ¿verdad? Pues seguimos…


Columnas

El generador de columnas es una de las herramientas más básicas y útiles a la hora de realizar cualquier diseño.

Nada más incluir un elemento de columna en nuestro diseño, aquí ya se ve una novedad importante respecto a Thrive Content Builder: podemos incluir cualquier número de columnas que queramos en una misma fila con cualquier proporción de ancho para cada una de ellas.

No sólo eso, podemos adaptar el tamaño de las columnas únicamente posicionándonos entre dos de ellas y reduciéndolas o ampliándolas haciendo click y arrastrando el ratón de nuestro PC.

Columnas en Elementor Page Builder

Esto sencillamente te da un abánico de posibilidades en cuanto a diseño prácticamente total.

Es cierto que en Thrive Content Builder también se pueden hacer columnas. Pero sólo se pueden hacer en función de los ajustes prestablecidos por la herramienta.Por ejemplo, lo máximo por fila son 4 columnas de ¼ de proporción cada uno respecto al ancho.

Pero esto con Elementor no sucede.

Yo puedo tener el número de columnas que quiera y no tienen que respetar unas proporciones determinadas. Puedo hacer si me place una columna de un 10% de la pantalla, otra del 20% y otra del 70% (por poner un ejemplo).

Te puedes imaginar ya que esto sencillamente lo que provoca es que la herramienta no limita para nada tu creatividad a la hora de diseñar.


Encabezado

El título creo que es bastante descriptivo, ¿no?

Esta herramienta será la encargada de incluir en tus diseños los encabezados de página pertinentes, pudiendo modificar en ella tanto su etiqueta html correspondiente (h1, h2, h3, etc.) como las características de su diseño.


También podrás enlazar los títulos a cualquier página que te interese, indicar los márgenes y relleno (padding) que te plazca, establecer imágenes o colores de fondo, dar clases  CSS determinadas, poner bordes alrededor del título con la anchura o forma (radio del borde) que tú quieras para el mismo, establecer sus opciones responsive por si quieres esconderlos en escritorio, móviles o tablets…

Decir que la mayoría de estas opciones también las encuentras en cualquiera de los elementos que vamos a ver, con lo que una vez más los límites de lo que vayas a crear sólo los va a poner tu creatividad e imaginación.

¿No es una gozada poder hacer todo esto desde una herramienta visual? No me digas que no, que ya estás babeando con Elementor Page Builder igual que yo… 😛


Imagen

Con ella podrás incluir imágenes en los lugares que te plazca, pudiendo establecer también multitud de opciones como su tamaño, alineación, opacidad, animaciones al pasar el ratón, borde, leyenda, márgenes, fondos etc.

Control total y absoluto también en la parte multimedia. 


Editor de Texto

Permite introducir textos simples en cualquier parte de tu diseño, pudiendo controlar todas sus opciones de edición y visualización desde un mini editor similar al de WordPress que aparece en la parte lateral.

Esto me parece otro punto a destacar, ya que los que estén acostumbrados al editor nativo de WordPress podrán seguir utilizándolo fácilmente dentro de la herramienta para crear sus textos, con lo que en este sentido les facilita la vida al no tener que aprender nada nuevo.

Con Thrive Content Builder también podía hacerse, pero había que incluir un elemento específico del tipo “Wordpress Content” para utilizarlo.

Además de todo esto, puedes elegir la posición del contenido a tu voluntad dentro de las columnas o secciones donde lo hayas creado, otorgando una flexibilidad total a la hora de maquetar de tus textos que te permite ponerlos prácticamente donde quieras a voluntad.

Posición de contenido en Elementor


Vídeo

Te facilita la inclusión de vídeos responsive dentro del diseño de tu blog o tu web que se encuentre subido en Youtube o Vimeo.


Esta opción si que es bastante similar a Thrive Content Builder, ya que incluye la posiblidad de autoreproducir el vídeo, mostrar u ocultar el control de reproducción, los vídeos sugeridos o el título y acción del reproductor.

Sin embargo, Elementor incluye además la posibilidad de que puedas elegir la proporción de tu vídeo (16:9, 4:3 o 3:2), establecer una imagen de cubierta personalizada que a ti te interese mostrar antes de que el usuario pulse el botón “Play” para reproducir el vídeo, animaciones de entrada, establecer fondos o controlar en que dispositivos quieres que se cargue la visualización de dicho vídeo.

Otra vez han “rizado el rizo” en este aspecto, sacándose de la manga varias nuevas funcionalidades de donde no la había. ¡Bravo!


Botones en Elementor

Por supuesto, no podía faltar el hecho de poder crear botones con Elementor Page Builder.


Aquí dispones de hasta 5 tipos de botones predeterminados para implementar. Pero en realidad… estos tipos son lo de menos.

Y es que Elementor te da tantas posibilidades también en este sentido que se puede decir que puedes crear el tipo de botón que te plazca gracias a sus personalizaciones.

Han mejorado también a Thrive Content Buider en este aspecto, ofreciendo una amplia variedad de iconos para botones que pueden posicionarse antes o después del texto y también a la distancia que tu desees.

Sin contar que, como ocurre con otros elementos, puedes elegir también fondos de color o imagen y bordes de diferentes estilos para darle la mayor personalización posible. Lo mismo ocurre si deseas implementar animaciones súper chulas para tus botones.

Otro 20 sobre 10 en este sentido para Elementor Page Builder. Sigamos…


Separador

El elemento separador incluye líneas que pueden separar diferentes secciones o, por ejemplo, los títulos del contenido.

Una vez más, los chicos de Elementor mejoran algo que yo echaba mucho en falta en Thrive Content Builder: la posibilidad de poder controlar todos los aspectos de diseño de estos separadores.

Estoy hablando sobre todo de su ancho y su color, algo que desde que usaba Thrive Content Builder no entendía como no habían podido incluir como opciones de configuración de este tipo de elemento web.  

Obi, obá, cada cosa que veo de ti me gusta más Elementor. 😀 ¡Continuamos!


Espaciador

Este es un elemento que puede parecer una chorrada a simple vista… pero que te quitará muchos quebraderos de cabeza.

Al incluirlo, lo que podrás generar es espacios en blanco del tamaño que tú decidas para separar otros elementos del diseño.

Sí, esto se puede hacer estableciendo márgenes, lo sé. Pero con esta herramienta tienes otra opción bajo mi punto de vista mucho más sencilla e intuitiva para usuarios menos expertos. 😉


Google Maps

Otra novedad importante de Elementor con respecto a Thrive Content Builder es que puedes incluir directamente mapas de Google Maps en tus diseños estableciendo fácilmente su dirección o coordenadas, su tamaño, el nivel de zoom de dicho mapa o impedir que se pueda ampliar dicho zoom a voluntad del visitante de tu blog o tu web.

Sí, ya sé que Thrive Content Builder incluía ya esta posibilidad en su editor visual… pero únicamente lo hacía permitiéndote pegar el código. Elementor, una vez más, ha mejorado esto haciéndolo mucho más intuitivo y fácil de hacer. Ya no es necesario que sepas que «numeritos» cambiar en el código que te da Google Maps para dejar tu mapa tal y como deseas.

Como sabes, ver estos mapas en las secciones de “Contacto” de empresas o negocios suele ser muy habitual para que los visitantes encuentren su sede física, con lo que el hecho de que te faciliten la vida para incluir algo tan común se agradece y mucho. 🙂


Icono

También puedes incluir iconos de Font Awesome en cualquier parte del diseño que se te antoje.

Sí, esto es algo que también podías hacer con Thrive Content Builder. Peeeero….

Una vez más, Elementor da muchas más posibilidades en cuanto a diseño se refiere, pudiendo establecer un fondo cuadrado o en círculo para el icono, determinar lo grande que quieres que sea el relleno del mismo, establecer colores primarios y secundarios para esta combinación, o si quieres con un click intercambiar dichos colores establecidos.

Hasta los puedes girar para que no se muestren siempre totalmente en posición vertical. Una pasada. Detalles como estos denotan mucho interés por hacer el mejor constructor web del mercado. 🙂

Vamos, que Elementor Page Builder no para de dejarnos tanto a ti como a mi con la boca abierta a cada cosita que vemos de él, ¿a que sí? 😀


Cuadro de imagen

Esta herramienta es una manera cómoda y sencilla de incluir una imagen que cuente directamente debajo con un título y una descripción de la misma.

Naturalmente, como ocurre con todo en Elementor, puedes controlar todos los parametros referentes a tamaños, colores, fondos, etiquetas de título, márgenes etc.tanto de la imagen en sí como del encabezado o el texto.

 

Cómo maquetar con Elementor: Herramientas Generales

Pasamos al siguiente nivel. Concretamente vamos a hablar de cómo maquetar con Elementor tu web a través de las herramientas generales del plugin (o como me gusta llamarlas a mi, básicas combinadas).

Todas estas herramientas generales también pertenecen a la versión gratuita de Elementor Page Builder, por lo que tampoco te costará ni un sólo euro utilizarlas.


Caja de icono

Similar a la herramienta anterior de “Cuadro de imagen”, pero en esta ocasión se cambia la imagen por un icono de Font Awesome en la parte superior.

Es una funcionalidad muy útil, por ejemplo, para crear esas cajas de destacados que tan habitualmente se encuentran en las páginas de inicio de los sitios web.

Cajas de icono en Elementor Page Builder


Galería de imágenes

Para mi, otro destacado en las novedades que incluye Elementor con respecto a otros constructores web.

De una forma súper sencilla, puedes incluir en tu diseño galerías de imágenes seleccionando las que quieres que aparezcan en ella, tamaño, número de columnas de la galería, bordes, fondos etc.


Lo único que echo en falta aquí es el hecho de que pudieses crear la galería de imágenes con diferentes formatos (más ordenados o más desordenados de tipo grid, por ejemplo) o clasificar la galería de imágenes en diferentes subcategorías.

Hacer esto último sería un puntazo para crear, por ejemplo, portfolios que al pulsar en un enlace pudieras ver únicamente las imágenes de una determinada categoría de dicho portfolio.

Pero vamos, viendo todo lo que ha hecho Elementor en tan poco tiempo… no descarto que lo acaben implementando. 😉


Carrusel de imágenes

Parecido a la galería de imágenes, pero esta herramienta va más enfocada a crear los famosos sliders que tanto vemos en muchos sitios web (y que a mi tan poco me gustan, dicho sea de paso).


Tengo que decir que aquí sí que parecen haberse esmerado más los chicos de Elementor, ya que puedes decidir no sólo las diapositivas a mostrar, si no también establecer o configurar los elementos de navegación de las mismas prácticamente a voluntad.

Del mismo modo, tienes la posibilidad de indicar cómo quieres que funcionen las automatizaciones de tu slider: si se pausará su reproducción al poner el ratón sobre él, si se auto-reproducirá, cuantos segundos estará cada imagen en pantalla, cuanto durará cada efecto de transición de imagen a imagen, en qué dirección se irán desplazando las imágenes etc.

No me quito el sombrero porque ya hace tiempo que lo tiré por la ventana. Si no me lo quitaría una y mil veces ante los cracks que han desarrollado este editor visual. 🙂

En fin, prosigamos que aún nos queda un rato…


Listado de iconos

O lo que es lo mismo: listas cuyas viñetas son iconos.

Aquí también las opciones de personalización son mucho mayores que en Thrive Content Builder, ya que en él apenas encontrabamos 6 estilos diferentes de lista configurables desde el editor y con sólo 8 colores predeterminados a establecer en ellas.

En cambio, en Elementor dispones de todos los iconos de Font Awesome para diseñar tus listas personalizadas, pudiendo establecer cualquier color que se encuentre dentro del código hexadecimal.

Por si esto fuese poco, el grado de personalización es aún mayor si tenemos en cuenta que puedes establecer un icono para cada elemento de la lista, no teniendo que ser necesariamente todos los iconos de una misma lista iguales.

Vuelvo a hablar desde el punto de vista de los diseñadores cuando os digo de corazón que os quiero mucho, chicos de Elementor. 😀


Contador

Otra novedad incluida por Elementor respecto a otros constructores web es esta herramienta de contador con la que podemos crear esas animaciones con las que en muchos blogs o webs se representan datos.

Las opciones de configuración de este elemento una vez más son sensacionales, pudiendo establecer el texto que aparecerá debajo del contador, el número de inicio y fin del mismo, prefijo o sufijo del número y duración de la animación en su proceso de llegar hasta el número máximo a contar.


Barra de progreso

Otro elemento muy interesante añadido por este editor visual es este de las barras de progreso.

Seguro que las has visto en más de una ocasión: son esas barras que se van llenando con un porcentaje, muy utilizadas, por ejemplo, para mostrar gráficamente el grado de habilidades o conocimientos de un freelance o una empresa en una materia determinada.

Elementor te permite configurar también desde su editor todo lo referente a estas barras: porcentaje a establecer, colores, texto que aparecerá en el interior o si quieres establecer un título para dicha barra en el exterior de la misma.


Recomendación

El nombre de este elemento no es demasiado descriptivo en realidad, ya que hace referencia a implementar testimonios de personas y clientes acerca de tu marca o servicios.

Personalmente, aquí si que pienso que Elementor ha dado menos opciones predeterminadas que Thrive Content Builder para que cueste menos esfuerzo diseñar unos testimonios de clientes chulos.

Pero también hay que decir que combinando esto con otros elementos o con las propias opciones de diseño de esta herramienta (fondos, bordes, márgenes etc.)  se puede hacer prácticamente cualquier cosa que se te ocurra en este sentido. Así que tampoco lo veo algo tan grave. 😉


Pestañas

En esta ocasión sí que creo que no hace falta explicar mucho más: esta herramienta te facilita la posibilidad de que puedas crear contenido dividido en diferentes pestañas de una manera cómoda y fácil.

Puedes añadir tantas como gustes y, al igual que sucede con la mayoría de elementos, tienes la posiblidad de configurar el diseño de las mismas a voluntad en cuanto a colores, tipografías, espaciados etc.


Acordeón

Un elemento muy similar a las pestañas, pero con la diferencia de que en esta ocasión todos los textos incluidos en cada una de las partes están ocultos y la estructura de todos ellos se forma de manera vertical.

Para que lo visualices mejor, es exactamente como yo tengo hecha la sección “Preguntas Frecuentes” en la página de mi servicio de diseño web en WordPress Base Emprendedora.

Cuenta con ajustes de diseño y configuración similares a las pestañas para dejar todo a tu gusto, con lo que no me voy a repetir más en este sentido que bastantes palabras llevo ya a estas alturas como para meterte “relleno”. 😛


Alternar

Otro tipo diferente de elemento “Acordeón”.

La única diferencia que veo al respecto de este es que el icono que aparece a la izquierda de cada uno de los cuadros que lo conforman es una flechita en vez de un simbolo de suma (+).


Iconos Sociales

Permite la inclusión de iconos de redes sociales en cualquier parte de tu diseño, pudiendo ser utilizados para enlazar los mismos desde tu sitio web.

Hay que decir que incluye hasta 27 iconos de redes sociales diferentes, con lo que es muy raro que no puedas enlazar las que tú usas, incluso si son algunas menos habituales como SoundCloud o GitHub. 😀

Para cada uno de ellos, puedes establecer si quieres que el icono aparezca de forma cuadrada, con los bordes redondeados o circular, así como elegir entre el color oficial de cada una de las redes sociales en cuestión o personalizar los colores de estos iconos a tu gusto (o, mejor dicho, en línea con tu diseño).

También puedes escoger el espaciado entre cada icono o el relleno de los mismos decidiendo su tamaño.

Vamos… lo que quieras y se te ocurra como quien dice. Si no creas unos iconos a redes sociales únicos y exclusivos con Elementor, será porque no quieres. 😉


Alerta

Sirve para crear textos destacados inmersos en una caja de color que el usuario puede cerrar en un momento determinado cuando le plazca (o no, si decides desactivar esta opción).

En ella, además de las opciones de diseño comunes a otros elementos, puedes también determinar si quieres que aparezca un borde en la parte izquierda de la misma (concretando tu también su ancho, color, etc. que más te interese).


SoundCloud

A mi, personalmente, el hecho de que hayan incluido este elemento ya sencillamente me parece la caña. Demuestra el grado de perfección en cuanto a número de posibliidades que desean ofrecer los desarrolladores de Elementor Page Builder.

Con esta herramienta puedes incluir un archivo de audio de SoundCloud, algo muy útil si tu web está relacionado con la música, la radio o si tienes un podcast y subes tus ficheros de audio a esta plataforma.

Pero esto no se queda aquí…

Podrás controlar si autoreproducir el audio, mostrar (o no) botones de compra, descarga, me gusta, compartir, comentarios, número de reproducciones, colores de los controles… ¿sigo?

Voy a ir buscando el núemro de un escultor para que les haga un monumento a estos chicos de Elementor. 😀


Shortcode

Por si los elementos anteriores te saben a poco, ahora vamos a ver ya las opciones de integración total con cualquier otra cosa (plugin, widget o lo que sea) que se te ocurra.

El primero de ellos es la posibilidad de incluir shortcodes (esos fragmentos de código que te dan plugins tan utilizados como el Contact Form 7 o el Thrive Leads para crear formularios de suscripción).

Evidentemente, como ya te habrás dado cuenta, esta posibilidad te abre la puerta a colocar multitud de funcionalidades directamente en tu diseño creado con Elementor Page Builder, ya que es una muy buena vía para poder utilizar dentro de él plugins externos que nada tienen que ver con él.


HTML

Lo mismo sucede si, por cualquier otra razón, necesitas incluir código HTML creado por ti mismo.

Elementor no pone trabas en este aspecto y para ello te facilita esta herramienta llamada “HTML” con la que podrás incluir tus propias personalizaciones si es que eres diseñador o desarrollador web (o, simplemente, si tienes unos conocimientos mínimos de código).


Ancla de menú

Otra de las herramientas que me ha dejado con la boca abierta es precisamente esta llamada “Ancla de menú”.

De hecho, me ha hecho caer en la cuenta de esta “deficiencia”, provocando mi reflexión sobre cómo algo tan sumamente sencillo no pudiese estar implementado en Thrive Content Builder en todo este tiempo que lleva en el mercado.

Gracias a ellas puedes establecer un nombre a una determinada sección dentro de tu página.

Y tu pensarás… ¿y eso para que narices sirve? ¿Qué tiene de especial?

Bien, pues tiene de maravilloso que estas anclas son la base para poder crear diseños de una sola página (One Page Design), de tal forma que puedas indicar en tu menú principal hacia que sección de dicha página se debe dirigir al pulsar el enlace haciendo ese efecto de “scroll” hacia abajo o hacia arriba que es tan molón.


Vaya por delante que no soy amigo de estos diseños One Page porque creo que perjudican al SEO de tu página, pero está bien que incluyan esta posibilidad a la hora de diseñar porque es cierto que este tipo de webs son muy atractivas visualmente hablando (y perfectas para dispositivos móviles).

No sé cuantos puntazos a su favor lleva Elementor a estas alturas, pero este es uno más sin duda.


Barra lateral

Otra vuelta de tuerca de Elementor Page Builder de cara a la personalización de tu diseño es el hecho de poder incluir una barra lateral en el lugar que te plazca de tu diseño sin necesidad de que esta ocupe todo el alto de la pantalla.

De esta forma, puedes seleccionar cualquier posición de widgets que se antoje y mostrarla donde te de la real gana.

Por ejemplo, en el caso de GeneratePress puedes incluir donde quieras y como quieras los widgets que incluyas en la barra lateral derecha, la barra lateral izquierda, cabecera o en cualquiera de las 5 posiciones que tienes disponibles en el pie de página a modo de bloque.

¿Cómo dices? ¿Que qué pasa si quieres incluir un único widget sólamente?

Sin problema, amigo mío. En esto también ha pensado Elementor. Échale un ojo a la siguiente herramienta. 😉


WordPress

En esta zona cuya cabecera ocupa el nombre de nuestro querido gestor de contenidos, podrás encontrar de manera individual todos los widgets que puedes colocar y que los plugins que tengas instalados te permitan implementar.

Sí, sí… lo has entendido bien.

Puedes usar tus widgets en cualquier parte de tus páginas o entradas.

Llegados a este punto, no sé tú pero yo ya estoy haciendo la ola a estos fueras de serie que han creado el plugin Elementor.

Pero espera… que aquí no ha terminado esto.


Opciones generales de Elementor

¿Recuerdas que te dije que todo lo mencionado anteriormente era accesible desde el icono de la parte superior derecha de Elementor?

Si, ¿verdad?

Pero… ¿te has percatado que en la parte izquierda hay otro icono?

Opciones generales en Elementor Page Builder

Si lo pulsas, verás que a través de él podrás establecer opciones generales para tu diseño sin tener que repetirte como si fueses una sopa de ajo.

Esto es, puedes establecer los parámetros por defecto que se te antojen para tu diseño:

– Colores globales, definiendo tu propia paleta de colores o seleccionando una de las predeterminadas que Elementor pone a tu disposición.

– Fuentes globales, escogiendo tus tipografías por defecto para texto normal, diferentes encabezados o títulos (h1, h2,h3) y peso de las mismas.

– Selector de color, para que puedas elegir previamente tu paleta de colores y sean estos los colores que te aparezcan en las opciones de Elementor a la hora de estar diseñando cualquier elemento de la web. Más personalizado imposible. 😀

– Configuración de Elementor, el cual es un enlace hacia la página de configuración del plugin dentro de tu WordPress.

Dentro de ellas, puedes seleccionar los tipos de entradas donde vas a querer o poder utilizar Elementor Page Builder, qué tipo de usuarios tendrán permitido utilizarlo, decidir si quieres heredar las paletas de color o tipografías establecidas por defecto en tu plantilla o elegir el ancho de la caja del contenido que mostrará los contenidos que no selecciones como visibles a ancho completo de la pantalla.

Tutorial sobre Elementor Page Builder

– Historial de revisiones, una función para poder volver atrás si te equivocas en algún momento al hacer algo. A día de hoy, en el momento que escribo este artículo, no está todavía implementada aunque aparezca en el menú.

– Eliminar todo el contenido, para resetear el diseño de una página o entrada por completo si así lo deseas y comenzar de nuevo a crearla desde cero.

– Sobre Elementor, que lo único que hace es la función de enlazar el editor visual hacia la web de los desarrolladores.

¿Cómo vas? ¿Estás cansado?

Yo te reconozco que un poco de tanto escribir. 😛

Pero me he propuesto crear la mayor review / tutorial sobre Elementor Page Builder y aún me quedan algunas cosillas en el tintero que comentar.

Por cierto, son muy interesantes. Más aún si como yo eres diseñador o desarrollador web. 😉

Opciones Responsive y Plantillas para Elementor

Vamos a irnos a la última sección del Elementor Page Builder, que es la que se encuentra justamente en la parte inferior del mismo en una barra pequeña gris que contiene 4 iconos.

Opciones de diseño web responsive en Elementor Page Builder

El primero de esos iconos es un aspa en forma de X que simplemente sirve para cerrar el editor y volver a tu panel de administración de WordPress.

Hasta aquí, no hay ningún misterio ni nada destacable, de acuerdo.

Pero a partir del siguiente icono la cosa ya se pone más interesante…

En el segundo de los iconos, al pulsarlo, puedes seleccionar la vista que prefieras para establecer como se verá el diseño de las páginas o entradas de tu blog o web en versiones de escritorio, tablets o móviles.

Pero no es un simple visualizador.

La magia de esto es que para cada una de estas vistas… ¡puedes establecer unas opciones determinadas que cambiarán el CSS de tu diseño dependiendo del tamaño de la pantalla elegida!

Es decir, no te hará falta saber sobre media queries para adaptar fácilmente el diseño de tu blog o tu web a dispositivos móviles.

Por ejemplo, puedes establecer para cualquier elemento de tu diseño que en la versión de escritorio tenga un margen y un padding determinado, mientras que en la versión de tablet tenga otro distinto y otra variante más en tu versión móvil.

De esta manera puedes adaptar a voluntad desde el editor absolutamente todo, independiemente del dispositivo en el que se vaya a mostrar tu página web.

De verdad, esto para mi ha sido ya la guinda del pastel.

Ningún otro plugin o herramienta de este tipo que yo conozca te permite controlar a través de ellos el diseño de las versiones de tablets y smartphones, con lo que esto me parece un adelantamiento a la velocidad de la luz en toda regla por parte de Elementor Page Builder con respecto a otros constructores web o editores visuales.

El tercer icono de este mini-menú corresponde al acceso directo a toda la documentación oficial publicada sobre Elementor.

No está de más que le eches un ojo detenidamente, ya que en este sentido los creadores del plugin también se han esmerado y poseen una cantidad importante de información que responde a muchas dudas que puedas tener al respecto de su funcionamiento el de las herramientas contenidas en él.

Por último, el cuarto icono te permitirá diseñar tus páginas o entradas a partir de plantillas prediseñadas con Elementor Page Builder (a día de hoy un total de 26 ya están disponibles para ser utilizadas), así como a guardar tus propias plantillas y poder importarlas en otros proyectos que te interese hacerlo.

Plantillas incluidas en Elementor Page Builder

Y hasta aquí esta review y tutorial en español sobre la versión gratuita de Elementor Page Builder.

Ahora te toca a ti. Déjame en los comentarios lo que piensas sobre todo lo que te he contado aquí sobre Elementor Page Builder: lo que más te ha gustado, lo que menos, lo que crees que le falta, lo que tú incluirías…¡lo que sea!

¿NECESITAS AYUDA PARA CREAR UNA WEB QUE TE GENERE NEGOCIO?
Si estás buscando un diseñador web profesional que, además de una web bonita y con personalidad, te haga una web que capte clientes y ventas por internet, cuéntame que es lo que necesitas y definamos un plan a medida para tu caso.
ME INTERESA TENER UNA WEB ASÍ

208 comentarios en «Elementor: review y tutorial en español»

  1. Hola José Antonio.

    La verdad es que por todos lados se está hablando de elementor y no es para menos. Me parece un bombazo y mucha más siendo gratuito.

    Muchas gracias por la reseña que has hecho, es muy útil (bueno en general todo lo que escribes). Te has convertido por derecho propio en una referencia para mi.

    En breve me pondré con elementor page builder estoy seguro que me va a dar muchas alegrías.

    Un saludo ;9

    Responder

    • Hola Israel,

      Pues sí, Elementor es un auténtico bombazo en toda regla. Tanto es así que yo me he lanzado enseguida a comprar la versión Pro que sale el 12 de diciembre y estoy esperando con ansia todo lo que puede ofrecer (que estoy convencido que será mucho. Y eso que ya lo que ofrecen gratis es una barbaridad).

      Gracias a ti por pasarte a leer el artículo y dejarme tu opinión al respecto. Yo también estoy convencido que Elementor nos va a dar muchas alegrías de aquí en adelante. 🙂

      Un abrazo!

      Responder

  2. bueno, es genial, solo he podido leerlo a la mitad, ya que estoy priorizando, pero me lo he instalado y lo voy a empezar a utilizar, esta en mi lista de proximas tareas, para no dejar cosas a medias, una vez mas gracias por esta info que nos das de manera tan detallada , lo compartire en mis redes

    Responder

    • Hola Mario,

      Si te ha parecido genial sólo leyendo la mitad de lo que puedes hacer… ¡verás cuando lo pruebes! De verdad que yo desde que lo he descubierto estoy como un niño con zapatos nuevos. 🙂

      Muchas gracias por pasarte a comentar y mil gracias más por compartirlo en tus perfiles de redes sociales. 😀 ¡Un abrazo!

      Responder

  3. Hola Jose.

    Ví esta herramienta el otro día; tampoco la miré con detalle, esa es la verdad. Mi pregunta es si sirve para las entradas, de modo que los post queden más llamativos, sin tener que tocar el dichoso código.

    Un afectuoso saludo

    Responder

    • Hola Adela,

      Sí, Elementor también puede ser utilizado en las entradas tal y como digo tanto en el vídeo como en el artículo.

      Sin embargo, también es cierto que nunca recomiendo utilizar para las entradas del blog un maquetador visual. ¿El motivo? Precisamente esto que ha pasado entre Thrive Content Builder y Elementor.

      Ponte en situación: si sale otra herramienta dentro de un año o dos (o el tiempo que sea), quieres cambiar a ella y has estado maquetando los artículos de tu blog con el maquetador visual que quieres dejar de utilizar… recuperar ese trabajo va a ser tarea de chinos (por no decir prácticamente imposible).

      Un abrazo!

      Responder

  4. Hola José

    Simplemente pasaba a comentarte que gracias a tu recomendación comencé con GeneratPress, y la verdad muy contenta con este theme.

    Con respecto a este pluguin, al igual que tú lo recomiendo , es muy intuitivo. La verdad es excelente, si así lo es en su versión gratuita, no quiero imaginar cómo será en su versión premium.

    Me queda una duda.

    ¿ Sabes si es incompatible con algún pluguin?

    Mil gracias.

    Responder

    • Hola Lina,

      Como ya he dicho antes, la verdad es que estoy muy expectante ante esa versión Premium que sale el 12 de diciembre. Seguramente cuando salga, ya contaré por aquí mis impresiones acerca de ella para que cualquiera pueda ver en que mejora la versión gratuita.

      En principio, no conozco de ningún plugin en concreto con el que sea incompatible. Hasta el momento no me he topado con ningun conflicto de este tipo aunque, por supuesto, ante la cantidad de plugins existentes tanto en el repositorio de WordPress como Premiums, no puedo asegurar al 100% que no haya ni una sola incompatibilidad como estas que tú mencionas.

      En cualquier caso, si detecto alguna, actualizaré la review y la pondré sin problema. Y lo mismo os pido a vosotros, los lectores del blog: si detectáis alguna incompatibilidad dejarlo por aquí en un comentario para que todos estemos al corriente. 😉

      Gracias a ti! Un abrazo!

      Responder

  5. Hola Jose Antonio,

    Gracias por hacer un post tan completo y sencillo de entender. ¡Eres muy generoso!

    Me parece una herramienta brutal por todo lo que comentas. Yo utilizo Thrive Content Builder desde hace tiempo y estoy contenta pero probaré Elementor 😉 Ya te contaré mis impresiones. ¡Feliz Día!

    Responder

    • Hola María Jose,

      Eso que dices de contar tus impresiones cuando lo hayas probado estaría genial. Me encanta que lo hagáis para que también se muestre el punto de vista de personas que no son diseñadores ni tienen un perfil técnico como tal. ¡Ya nos contarás! 😉

      Un abrazo!

      Responder

  6. Muy bueno este tutorial, siendo una potente herramienta de trabajo. Me ha encantado y me la he instalado, pero tengo un problema:
    Al añadir un nuevo plugin y siguiendo tus instrucciones, a mi se me descarga una version de Elementor Page Builder con el menu de inicio en Ingles.
    Luego al pinchar en cualquiera de ellos, el contenido me sale los encabezados en Español y el Texto en Ingles.
    Por favor, podrías indicarme donde me he equivocado o si hay algún sistema para cambiar el idioma,
    Muchas gracias por tu atencion

    Responder

    • Hola Daniel,

      En principio, yo no tuve que hacer nada especial para que el plugin me apareciese en español. ¿Tienes configurado el idioma de tu sistema WordPress como español o instalaste la versión en inglés? Es probable que si hiciste lo segundo, el plugin te esté cogiendo el idioma por defecto de tu WordPress y por eso te aparezcan los textos en inglés. 😉

      Gracias a ti! Saludos!

      Responder

  8. Hola José Antonio.

    Una duda respecto a Elementor. Una vez maquetado todo a tu gusto, si eliminas el plugin, pierdes todo? Me refiero a si tiene locking.

    Un saludo y muchas gracias!!

    Responder

    • Hola Óscar,

      Sí, supongo que al igual que ocurre con Thrive Content Builder, si creas páginas o entradas con Elementor y luego lo desinstalas, lo único que te aparecerá en dichas páginas y entradas serán unos bonitos códigos..jeje!

      Ten en cuenta que cada maquetador visual tiene sus propias estructuras HTML y clases CSS predefinidas que van implícitas en los ficheros del plugin, por lo que es normal perder todo si lo desinstalas.

      Saludos!

      Responder

  9. Hola, José Antonio.

    En primer lugar, darte las gracias por habernos dado a conocer esta gran herramienta (en mi caso estaba pensando comprar Thrive Content Builder y de momento parece que me voy a ahorrar ese dinero).

    Estoy elaborando una landing page en la que quiero recabar algunos datos de los visitantes (nombre, e-mail, y dos o tres datos más) para poder enviarles después un presupuesto, pero no se como hacer para incluir el formulario directamente desde el editor; si lo hago editando desde WordPress no me sale.

    ¿Me puedes ayudar?

    Gracias.

    Responder

  10. Hola !

    Es un artículo épico….felicidades !!!

    Yo estoy aprendiendo mucho sobre wordpress y ahora genesis…estaba por comprar el famoso Thrieves Builder….pero he encontrado este maravilloso plugin Elementor…

    Lo he instalado pero me está pasando un pequeño problema….con las entradas me funciona pero con las páginas no.
    Me dice que debo llamar la funcion «the_content» en la plantilla actual….debo decir que estoy trabajando sobre la Flymag
    Me preguntó a que se refiere con llamar ? claramente sé que debo modificar el código de la plantilla pero qué parte exactamente,,,,, Sí pudieras guiarme sería genial !

    Saludos !!!

    Responder

    • Hola Carolina,

      Puede que el problema que tienes se daba a alguna incompatibilidad con tu plantilla en concreto. Deberías buscar entre los ficheros del tema que estás utilizando y buscar uno que se llama page.php, a ver si hay localizas algo que pueda estar entorpeciendo el uso de Elementor con tu theme.

      Aunque, sinceramente, me resulta raro que con las entradas te funcione y con las páginas no. Pienso que si fuese incompatible, sería incompatible con todo y no sólo con las páginas. 😉

      ¡Saludos!

      Responder

  11. Hola, hoy acabo de descubrir GeneratePress gracias al blog de Arturo García y he acabo aquí para ver tu review. Los dos me habéis convencido . Con Elementor acabo de ver la versión premium y no sé hasta que punto merece la pena. No es barata (199€ si la quieres para varias páginas, lo cual es mi intención) y solo entra soporte y actualizaciones durante un año, lo que quiere decir que si incorporan nuevas funcionalidades y ya ah expirado el tiempo tendrás que volver a comprarla, lo cual me parece absurdo. Imagino que tu ya la habrás trasteado, ¿merece la pena la inversión o con la versión gratuita es más que suficiente?

    Gracias!

    Responder

    • Hola Cati,

      Pues precisamente tengo pendiente hacer una review sobre las características de Elementor Pro para ayudarte a tomar la elección que comentas. Esta versión si que incluye nuevas funcionalidades y mejoras interesantes. Para hacerte una idea, y hasta que escriba esta review que te comento, puedes pasarte por la página de Elementor Pro en la cual te dicen todo lo que incluye la misma. Por el blog del plugin o por su canal de Youtube también hay información adicional al respecto.

      No obstante, aclararte (aunque creo que ya lo sabes por lo que comentas) que esa licencia es para desarrolladores (es la que yo tengo). Cuesta 199$ al año, exacto. Pero se supone que si eres diseñador o desarrollador de sitios web, el ahorro de tiempo que te va a suponer utilizar esta herramienta y los ingresos que vas a generar a raíz de ella, compensan lo que vas a invertir en la misma.

      Por tanto, eso tienes que valorarlo tú misma si te compensa o no comprarla.

      Gracias por dejar tu comentario. ¡Un abrazo!

      Responder

  12. Hola Jose! muy interesante tu completisimo articulo acerca de esta herramienta. Yo vengo usando LiveComposer para realizar este tipo e websites personalizados casi al 100%, con lagunas limitantes del plugin en sí… veo que este es much mas fácil de usar, pero no me queda claro una cosa (no sé si me lo perdí en tu explicación):
    Puedo tamien generar Templates/Plantillas para las secciones de contenido? es decir, diseñar un para seccion de contenido, otra para un home, etc etc… y de ser así, me permite la libertad de crear mis propios Header(incluyendo estilos de menus) y Footers?…
    Gracias de antemano!!!

    Responder

    • Hola David,

      Con Elementor puedes crear cualquier tipo de páginas personalizadas y no sólo eso. También puedes guardarlas como plantillas y reutilizarlas en ese mismo blog o en otro. Es una herramienta pensada para ayudar tanto a personas con pocos conocimientos como a diseñadores y desarrolladores y ahí está su gran fortaleza. Ha pensado en todo tipo de usuarios.

      Resumiendo: puedes generar perfectamente tus propios templates. Del mismo modo, tienes varias plantillas predeterminadas que también puedes utilizar. Es más, este repositorio se va actualizando. Hace pocas fechas insertaron algunas plantillas predeterminadas más.

      En cuanto a la parte de headers y footers, esto es más bien misión de Generatepress. En cualquier caso, teniendo Generatepress con sus addons premium, puedes eliminar de una página concreta la cabecera por defecto que hayas establecido y crear tu propio menú con Elementor para una página determinada (creo que es esto lo que me preguntas).

      Gracias a ti por leer y comentar. ¡Saludos!

      Responder

  13. Hola José Antonio:

    Muchas gracias por tu artículo. Es de gran ayuda. Me queda una duda, que no sé si puedes revolverme. ¿Elementor permite el uso al tributo Alt para describir imágenes? Te lo comento porque lo he instalado, he hecho una prueba, pero al pasar el ratón sobre la foto no muestra el texto alternativo.

    Salu2,

    Responder

    • Hola Miguel,

      Sí, Elementor te permite configurar la etiqueta Alt de las imágenes. ¡Pero ojo! No debes confundir la etiqueta alt con que en el navegador se te muestre el texto alternativo o no lo haga. Yo mismamente tengo todos los atributos Alt de mis imágenes rellenados y no se muestran.

      La etiqueta que debes rellenar para que al pasar el ratón se muestre un texto, es la etiqueta Title.

      En este artículo de Fernando Tellado, de AyudaWP te dejo la diferencia entre una cosa y otra: https://ayudawp.com/alt-y-title-diferencias-y-obligaciones/

      Saludos!

      Responder

  15. Hola amigo Jose Antonio, grandioso articulo. Confieso que me he enamorado de esta herramienta quería hacerte algunas preguntas sobre ella. Quería saber si puedes añadir una librería de iconos adicional aparte de la que ya incluye para colocar iconos personalizados o es mejor usar para esta finalidad la caja de imagen.

    Mil gracias, por tan estupendo articulo.

    Saludos

    Responder

    • Hola Isabel,

      Hasta donde yo sé, la función de implementar una librería adicional como tal no está disponible en Elementor. En cualquier caso, tienes una cantidad enorme de iconos para elegir dentro de él.

      Si necesitas o quieres poner diferentes iconos, siempre te queda la posibilidad de incluirlos directamente como imágenes en tus diseño. 😉

      ¡Saludos!

      Responder

  16. Wow jose realmente este plugin es la caña, yo vengo de trabajar con puros themes de themeforest y como editor visual el visual composer, que venga hasta ahora he podido hacer todos los trabajos para la empresa que trabajo dentro de todo bien, pero si tenemos que tocar siempre mucho codigo para hacer realmente personalizaciones mas a fondo. Recientemente como te he comentado me he suscrito a tu blog y visto tus tutoriales etc, y he visto este que es mas reciente que el de thrive y venga acabo de instalar hace poco el generate press y hoy el elementor y lo poco que he ido probando va de maravillas, quiero renovar mi web totalmente, venia usando una plantilla de themeforest muy famosa, realmente la web quedo muy bonita a nivel visual pero no he recibido el feedback buscado, espero poco a poco ir conviritnedola en una web mas util gracias a tus aporte y experiencia.

    Saludos.

    Responder

    • Hola Rosa,

      La combinación Generatepress + Elementor, incluso la de Generatepress + Thrive Content Builder, es infinitamente superior a la mayoría de temas que puedes encontrar en Themeforest. O, al menos, esa es mi humilde opinión y lo que me dice mi experiencia. La flexibilidad en cuanto a opciones y diseño y la facilidad de uso de cualquiera de estas combinaciones no es ni comparable.

      Estoy seguro que, en cuanto lleves un tiempo probando estas dos herramientas, te vas a enamorar perdidamente de ellas igual que yo u otros diseñadores. 😉

      ¡Saludos!

      Responder

  17. Gracias Jose por esta fabulosa informacion, por tu sugerencia ya tengo Elementor y Generatepress, la informacion es perfecta pero creo que falle en algo, no me funciona nada, al clickear sobre agregar nueva seccion no me da la grafica que expones sino un texto «ELIGE TU ESTRUCTURA» pero no se donde. De todas formas es mi novatada. Saludos
    Al

    Responder

    • Hola Al,

      En el minuto 28 del vídeo con mi tutorial se explica esta parte que comentas. Al pulsar en “Nueva sección”, efectivamente, te aparece un mensaje en el que te pide elegir la estructura que quieres para esa sección (ancho completo, en 2 columnas, en tres, etc.). Simplemente tendrías que seleccionar una de estas estructuras y empezar a trabajar con los elementos que quieras insertar en la sección. No tiene más.

      Si no te salen estas opciones para elegir estructura, puede que no se haya instalado bien el plugin (en cuyo caso, te aconsejo que lo desinstales por completo y lo vuelvas a instalar), que haya algún tipo de incompatibilidad con otro plugin que tengas instalado (compruébalo desactivando todos los plugins momentáneamente menos el de Elementor y mira si así funciona o no) o que la versión de PHP de tu hosting sea inferior a la recomendada por Elementor para que este funcione (debe ser como mínimo la 5.4).

      Saludos!

      Responder

  18. Hola José Antonio…
    llego por aquí buscando en google info sobre Elementor y me encuentro con este megatutorial… gracias por compartir tu trabajo.

    Me queda la duda si… ¿es posible crear páginas de lanzamiento de productos con videos y webinars con Google Hangouts y chat en vivo o requerirá otro plugin para lograrlo?

    Saludos.

    Responder

    • Hola Francisco,

      Claro que puedes crear landings de lanzamiento de productos con incursión de vídeos. Para eso tienes los elementos de incluir código HTML, por ejemplo. Con esa herramienta puedes incluir fragmentos de código HTML que te faciliten otras plataformas (como por ejemplo puede ser Youutube) e incluir vídeos si así lo deseas. También dispones de la herramienta «Vídeo» como se indica en la review. 😉

      Saludos!

      Responder

  19. Gracias José Antonio…
    Voy a echarle un ojo. Aún me queda la duda si se puede tener un chat en vivo cuando se este impartiendo el webinar, por aquello de las preguntas en vivo durante la presentación.
    Genial tu blog…

    Responder

  20. Hola.

    Antes que nada, muchas gracias por este tutorial tan completo.
    Tengo una duda. ¿Se puede utilizar solamente para crear una página y junto con otra plantilla? Por ejemplo, yo utilizo la plantilla Dante, que me ofrece muchas opciones. Tengo el tetxo de la página de ventas, y ahora toca montarla. ¿Puedo utilizar Elementor solo para esa página?

    Gracias.

    Responder

    • Hola Toni,

      Elementor, teóricamente según sus desarrolladores, puede utilizarse con cualquier plantilla. De hecho, su slogan reza lo siguiente: «Any Theme. Any Page.» (Cualquier tema, cualquier página). 😉

      Sin embargo, sí que te digo que dependiendo de la plantilla que tengas, podrás desactivar por ejemplo en una página concreta la cabecera o el menú de navegación principal que uses normalmente para hacer un diseño tipo landing sin distracciones. Por ejemplo, con Generatepress, que es la plantilla que utilizo yo, esto es posible gracias a sus addons, con lo que hacer una landing page no tiene complicación alguna en este sentido.

      Saludos!

      Responder

  21. Hola a tod@s!
    Uso desde hace poco Elementor en mis proyectos web y lo cierto es que estoy muy satisfecho por sus posibilidades en diseño. Ahora bien, estoy intentando usar algún plugin para que aparezcan Pop-ups y nada, me da errores y no funciona.
    He probado con unos cuantos y no hay manera ¿Alguien sabe de alguno (gratuito) que funcione bien con elementor?
    Muchas gracias!!!

    Responder

    • Hola Alex,

      Gratuito no sabría decirte, porque yo hace tiempo que el que utilizo para todo el tema de formularios de suscripción y demás es Thrive Leads, que es de pago. Eso sí, para mi a día de hoy es el mejor del mercado para esta tarea y no me ha dado ni un solo problema de compatibilidad con Elementor como los que cuentas tú.

      Te dejo aquí una guía sobre el plugin que te comento por si no lo conoces y te interesa: https://www.joseantoniocarreno.com/thrive-leads/

      De todos modos, ten cuidado de no estar usando la herramienta incorrecta con Elementor. Por ejemplo, si vas a implementar un shortcode, utiliza la herramienta shortcode, no la de HTML ni el editor de textos.

      Gracias a ti por pasarte a leer el post y dejar tu comentario. ¡Un abrazo!

      Responder

  22. Hola Jose Antonio,

    Había instalado Elementor porque había oído buenas referencias de este plugin, pero no me había atrevido a usarlo. No sabía por dónde empezar. Entonces encontré tu tutorial, y me ha ido genial. He ido probando uno a uno todos los widgets de Elementor mientras leía tu post, y ahora finalmente tengo una idea global de cómo funciona. 🙂

    La verdad es que me ha parecido IMPRESIONANTE. Las posibilidades creativas que ofrece son fantásticas, y además sin tener que tocar nada de código. El último contacto que había tenido con un editor parecido había sido el Visual Composer (en su versión de hace más de un año), que en su momento me pareció que era muy bueno… ¡pero Elementor es infinitamente mejor!

    ¡Muchas gracias por el tutorial!

    Responder

    • Hola Leo,

      Efectivamente, como bien dices las posibilidades creativas con Elementor se multiplican al instante con respecto a otros maquetadores para WordPress. Y esto es fruto del gran trabajo de los desarrolladores, los cuales han pensado desde el principio en crear una herramienta sencilla de utilizar de cara precisamente a diseñadores con el fin de que estos puedan explotar al máximo sus ideas y creatividad. Y lo mejor de todo es que lo han hecho sin renunciar a que también sea sencillo de utilizar para usuarios con conocimientos normales en el manejo de WordPress. Es de matrícula de honor lo que han conseguido estos chicos. 🙂

      Gracias por dejar tu opinión. ¡Un abrazo!

      Responder

  23. Antes que nada saludos cordiales, y gracias por tu tiempo al exponer tus conocimientos y guiarnos hacia nuestro proposito recien he estado viendo tu video sobres Elementor page builder y por sugerencias tuya (y porque me interesa) he comprado los addons por $ 39.95. Hace algun tiempo tome un curso de WordPress y ahora estoy tratando de montar un sitio. Encontre dos sitios que casi hablan de lo mismo, El de Arturo y el tuyo y me quede a leer el tuyo. tan es asi que he comprado Generatepress y he bajado Elementor, los he instalado pero a la hora de verlos funcionar no me trabaja. Pongo editar con Elementor y me da dos opciones agregar nueva seccion o añadir plantilla. pongo agregar nueva seccion y no me da NADA solo se queda buscando. Que puede ser? Compre los add-ons, he desintalado y vuelta a instalar, y me quede quieto porque no encontre el camino. Sera porque estoy trabajando en mi Pc como local host?. Ya hice lo que me sugeriste en tu respuesta del 20 de Febrero pero sigue igual al punto que lo habia dejado olvidado. En tu email enviado dices que no lo haga en privado y que sea a travez de tu blog. Bien hoy lo he retomado y te escribo de nuevo. Tengo tres graficas para enviarte pero esto lo puedo hacer a travez de un adjunto. Y aqui no se puede, seria a travez de tu correo.
    Si tu o alguien mas me puede ayudar les agradeceria, y si tiene algun costo hazmelo saber. Me ayudan!! Gracias de antemano.
    Al
    Mi correo alfredpctech@yahoo.com

    Responder

    • Hola Al,

      Que estés trabajando en un entorno local no creo que sea el problema. Si ya has comprobado lo de la versión de PHP, revisa que ningún plugin de los que tengas instalados te esté generando algún tipo de incompatibilidad. Lo más sencillo es que desactives todos y compruebes si el problema persiste. Si se soluciona, es que algún plugin te está haciendo la vida imposible y deberías ir activándolos uno por uno para ver cual es exactamente.

      Saludos!

      Responder

  24. Hola de nueva José Antonio,

    Te quería enviar un mensaje mediante tu formulario de contacto, en respuesta a la primera lección de tu curso, pero cuando clico ENVIAR me aparece este mensaje:

    «Sorry, there was an error. Please be sure JavaScript and Cookies are enabled in your browser and try again.»

    Estoy usando Chrome. ¿Cómo te podría enviar el mensaje?

    Perdona que te deje esta nota en la sección de comentarios de esta entrada, pero no se me ha ocurrido otra forma ponerme en contacto contigo. 😉

    Responder

    • Hola Leo,

      Puedes responderme directamente al correo desde que se envía el curso, no es necesario que me escribas desde el formulario.

      En cualquier caso, si quieres escribir desde el formulario puedes probar a hacerlo desde otro navegador si Chrome te está dando problemas. Lo que te dice ese mensaje de error es que tienes que tener Javascript y las cookies habilitadas en tu navegador para poder enviar el mensaje, nada más.

      Saludos!

      Responder

  25. Gracias por tu respuesta Jose Antonio; te comento PHP tengo version 5.6.25; y tengo 3 plugin instalados, Elementor, akismet y GP Premium. he desinstalado todo hasta WordPress, pero sigo igual. Algo mas que pueda hacer?
    Saludos
    Al

    Responder

    • Hola Al,

      Comprueba con Firebug o el inspector de elementos de Chrome (tecla F12) si se te genera algún error en la consola. Si conoces el error concreto, seguramente te será más fácil hallar la solución.

      Saludos!

      Responder

  26. Buen día José Antonio:

    He leído tu manual y el ebook que me has enviado, primero gracias por el esfuerzo
    segundo , no tengo ni idea de programación web y voy a intentar construir un sitio web
    con wordpress . Tengo que decirte que tu manual ha sido de lo más claro que he encontrado
    por la red. En un par de meses te contaré y si consigo sacar el proyecto adelante
    te invitaré a visitar mi sitio y a una copa si es posible

    Gracias

    Responder

  27. Hola Jose Antonio, estoy empezando a utilizar elementor junto con thrive leads, estoy pez con ambos plugins. Veo que existe la posibilidad de insertar un shortcode en elementor con facilidad, pero como puedo insertarlo directamente en un boton? He creado un formulario de estos en dos pasos y me estoy volviendo loca para ponerlo en un boton de elementor. Gracias

    Responder

    • Hola Natalia,

      Con Elementor no puedes enlazar con un botón a un shortcode (que creo que es lo que estás intentando hacer). Si quieres hacer un formulario en 2 pasos, la mejor manera de hacer es creando tanto el botón como la lightbox que lanzará ese botón desde Thrive Leads y luego insertar el shortcode que te da esta herramienta en Elementor.

      Recordarte también que tienes un tutorial de Thrive Leads en el blog por si quieres echarle un ojo ante cualquier duda: https://www.joseantoniocarreno.com/thrive-leads/

      Un fuerte abrazo!

      Responder

  28. Ese día después de dormir ocho horas y tomarme dos cervezas descubrí que se puede directamente, poniendo en el texto del botón el shortcode

    Responder

    • Hola Natalia,

      Pues mira, como se suele decir en estos casos: «Nunca te acostarás sin aprender una cosa más». La verdad es que yo nunca había probado a hacer esto que tu comentas puesto que, como te decía en mi respuesta anterior, yo lo hacía todo desde Thrive Leads (botón y lightbox). Pero ahora tengo curiosidad por probarlo a ver si funciona como tú dices, ya que de ser así, el tiempo de carga ser vería ligeramente mejorado. ¡Gracias por tu aporte!

      Saludos!

      Responder

  29. Hola y gracias por este super tuto, la verdad que me encanto y tambien yo lo que hize fue usar una plantilla de boostrap que tengo por ahi la modifique como yo queria y puedo utilizar elementor y boostrap y tener los diseños de boots a la mano y si, antes yo hacia los temas desde cero pero esto esta super genial para mi, ya para que reinventar.

    Lo estoy usando recientemente pero la verdad es que hay cosas que aun quedo corto, a ver si puedes ayudarme un poco, tengo una estructura de 50 x 25 x 25, entonces quiero que cuando este en la dimencion 1024 la columna derecha baje y quede al 100%, la segunda que agarre el 50% y luego el 100% para todas….

    Te voy agradecer mucho si me puedes decir donde esta esa opcion, no quiero meterle mano mucho al css ya que quiero saber primero si lo trae elementor y asi es menos pesada la web.

    Gracias!

    Responder

    • Hola Henry,

      Elementor, como se ve en el vídeo, trae opciones en el maquetador para establecer diferentes propiedades Responsive desde su editor, pero no sé si esto será exactamente lo que andas buscando. Si no puedes hacer lo que quieres con esas opciones para ese tamaño concreto de ancho de pantalla (1024 pixeles), tendrás que hacer un media querie en CSS irremediablemente.

      Gracias a ti. Saludos!

      Responder

  30. Hola José
    Me encanta Elementor, pero tengo una duda respecto a utilizarlo en un blog. Empleo el Blank Page Template y no me permite crear un blog; en cambio emplea la página del tema original que uses.
    ¿Algún consejo para remediar esto?
    Muy bueno tu informe. Saludos desde Argentina.

    Responder

  31. Estoy trabajando con Elementor y no encuentro la posibilidad de establecer de forma manual y exacta el ancho de una columna. Cierto que puedo hacerlo arrastrando y soltando, pero de esa forma no consigo establecer un porcentaje exacto.
    Podrías indicarme si esta opción está disponible y dónde? Gracias de antemano.

    Responder

    • Hola Adolfo,

      Para establecer el ancho de columna tienes que hacerlo con la opción de arrastrar y soltar que comentas. Actualmente, no existe ninguna opción dentro de la herramienta «Columnas» para dar el porcentaje exacto y no hay otra manera de hacerlo que como tú has dicho.

      Sí que tienes en «Disposición – Más estructuras» algunas estructuras predeterminadas (normalmente las más utilizadas en diseño web) con porcentajes concretos para poder utilizarlas directamente sin tener que andar cambiando el deslizador en cuestión.

      Saludos!

      Responder

  32. Andaba encantada con Elementor, todo funcionaba excelente pero esta semana se actualizo (no se si eso tuvo que ver) y ahora cuando le doy editar con elementor se queda la pagina o la entrada en blanco, había leído que tal vez era problema de memoria, asi que le desistale varios plugins pero no, aun sigue sin funcionar, agradezco si me pueden colaborar con ese tema, o si saben donde puede estar la falla.
    Gracias!! Saludos

    Responder

    • Hola Karen,

      ¿Que tema estás utilizando? Prueba a cambiar a uno de los temas por defecto y ver si el problema se mantiene. Si con un tema por defecto de los que trae WordPress te funciona, probablemente se deba a una incompatibilidad con la plantilla que estás utilizando.

      En cualquier caso, también tienes la posibilidad de escribir a los desarrolladores de Elementor a ver si pueden iluminarte el camino en tu caso concreto. 😉

      Gracias a ti. ¡Un fuerte abrazo!

      Responder

  33. Hola Jose Antonio.
    Estoy empezando a usar elementor, y este post es super esclarecedor. Muchas felicidades.
    Quería hacerte una pregunta: En el ejemplo que pones de acordeón, tu página Plan Blog Brazos Cruzados, aparecen todos los elementos cerrados, ¿cómo lo haces?
    Gracias !!!

    Responder

  35. Hola, Jose Antonio.

    Quiero darte las gracias en primer lugar por tu trabajo. Por estos mega tutoriales e interés por enseñar.

    Acabo de empezar con generatepress (con addons) y elementor, pero tengo una duda nada más comenzar. Cuando damos a editar con elementor la página que vamos a crear, me sale todo lo de elementor, pero encima de donde se empiezan a poner los widgets, me sale el nombre de la pagina (página prueba, página ejemplo…) Me he dado cuenta de que a ti no te sale nada de eso, todo lo tienes blanco y limpio. Lástima que no pueda enviarte una captura.

    ¡Gracias!

    Responder

    • Hola David,

      Si estás utilizando los addons, puedes quitar los títulos por defecto marcando la opción correspondiente en la parte derecha, donde pone «Disable Elements – Page Title» de tu la pantalla de edición de página en WordPress.

      Otra opción es, dentro de Elementor, ir al menú de la parte izquierda superior (el de las tres barras horizontales) – Page Settings y marcar la opción «Hide Title». De este modo tampoco se te mostrarán los títulos. 😉

      ¡Saludos!

      Responder

  36. Hola Jose
    He adquirido GeneratePress e instalado Elementor en su version Libre. Por lo que entiendo en tu post, al instalar Elementor se instalan tambien algunas de las plantillas? en mi caso, en las librerias NO aparece Ninguna.
    Unicamente me aparece el mensaje: «Elije una plantilla Elementor del fichero JSON, y añádela a la lista de plantillas disponibles en tu biblioteca.»
    Sabrás porqué no aparece ninguna plantilla? o en dado caso, como agregar las plantillas ?

    Gracias de antemano.
    Saludos

    Responder

  37. Me Respondo…
    Que ha aparecido la opcion de Añadir Plantilla una vez que he hecho la primera pagina con Elementor
    Aparecen dos botones
    1.- Agregar Nueva Secccion.
    2.- Añadir Plantilla.
    Se da click en Añadir Plantilla y wualaa! aparecen las plantillas. !!!
    aparecen tanto las plantillas gratuitas, como las Pro.
    Yo habia supuesto que podrian aparecer las plantillas en la biblioteca desde un inicio para cargarlas y maquetar sobre ellas.
    En fin. trabajare con una de ellas.

    Excelente Post.
    Gracias.

    Responder

  38. Buenas tardes José Antonio.
    Excelente post te doy las gracias de antemano. Me pasan dos cosas he editado una pagina con elementor y todo perfecto me encanta pero hoy le doy a editar pagina con elementor y se queda cargando no me abre el editor. Y otra que he dado cuenta que cuando lo abro la pagina en el teléfono en el icono del menú me sale lo siguiente la http://www.lapagina.com/#sidr-main si voy a otra pagina de la Web que no esta editada con elementor me funciona perfectamente.

    Responder

  40. Hola, Jose Antonio.

    Quiero darte las gracias de antemano por tu trabajo.
    Hace poco que he empezado con generatepress y elementor (en su versión gratuita) y tengo una duda. ¿Hay alguna manera de insertar un formulario pop-up de Mailchimp en Elementor? .
    Pues he probado copiar el código del formulario y pegarlo en una sección de HTML de Elementor, pero no hace nada y si lo pego utilizando el escritorio de wordpress me desconfigura todo el diseño realizado con Elementor.

    Mucha gracias!
    Un saludo!

    Responder

    • Hola Antonio,

      ¿El código que has pegado en la sección HTML es código HTML o es un shortcode? Si se trata de un shortcode, debes utilizar su herramienta correspondiente, no la herramienta HTML.

      No utilizo Mailchimp, así que no sé exactamente como funciona el tema de los popups en él o como podrían insertarse directamente. Imagino que, al igual que Mailrelay que es el proveedor que yo utilizo, los formularios que allí generen podrás incluirlos con código HTML. En ese caso, tienes que hacerlo tal cual lo has hecho (utilizando la herramienta HTML de Elementor).

      Por si puede servirte, hoy mismo he escrito un nuevo post en el que hablo sobre este tema de insertar formularios de suscripción desde Thrive Leads con Elementor. Te recomiendo Thrive Leads para este tipo de tareas de insertar formularios o ventanas emergentes (popups) con formularios, ya que hoy en día es el mejor plugin que hay para realizar esta tarea y está perfectamente integrado con Mailchimp (y con muchas otras plataformas). Te dejo aquí debajo el enlace:

      https://www.joseantoniocarreno.com/thrive-leads-elementor/

      ¡Saludos!

      Responder

  41. Hola Jose!
    He creado mi pagina web en wordpress y al comienzo edité mis paginas con page builder, pero de un momento a otro dejó de funcionar y buscando alternativas encontré elementor, el cual me pareció fabuloso. Ahora tengo un pequeño problema y es que necesito crear un par de paginas más y al agregar una plantilla no me aparece la pestaña roja que permite eliminar secciones, quisiera saber si este problema es común con las actualizaciones y si debo esperar que se arregle solo.

    Muchas gracias de ante mano.

    Responder

    • Hola Luisa,

      Si te refieres a que al insertar un elemento de diseño de tipo Plantilla no te deja editar dicha plantilla, esto es normal. Esa herramienta se utiliza para duplicar elementos de diseño en diferentes páginas, de tal forma que si necesitas editarlos puedas hacer los cambios en todas estas páginas una sóla vez (en lugar de ir haciéndolo una por una).

      En cualquier caso, si esto no es lo que pretendes hacer, si pulsas en el botón de la izquierda que pone «Unlink» te dejará editar sin problema cualquier elemento de plantilla guardado que importes en otras páginas con esta herramienta de Elementor.

      Si quieres editar en una plantilla guardada las secciones, debes utilizar la opción «Biblioteca de plantillas» en el icono de carpeta que se encuentra en el menú de la parte inferior de Elementor (el que tiene fondo gris).

      Saludos!

      Responder

  43. Hola!

    Me gustaría editar categorías de wordpress. Tanto de los post, como de woocommerce. ¿Sabes si hay forma de hacerlo con Elementor?

    Un saludo.

    Responder

  44. Gracias José Antonio,

    ¿Las has probado? ¿Se pueden editar las categorías de woocommerce con Elementor Pro como si fueran una página de wordpress?. ¿Tienes algún código descuento para comprar la versión Pro? ¿Es pago anual?

    Un saludo.

    Responder

    • Hola Juan Fco,

      En realidad, lo que puedes hacer es crear tus propias páginas de categorías de Woocommerce con Elementor Pro. Así podrás diseñarlas a tu gusto desde cero.

      No tengo ningún código de descuento en estos momentos para comprar la versión Pro de Elementor, lo siento. Sin embargo, si deseas adquirirla, puedes hacerlo a través de mi enlace de afiliado de la herramienta. Te lo dejo a continuación:

      https://elementor.com/pro/?ref=1188

      ¡Saludos!

      Responder

  45. Hola amigo, mil gracias por el buen tutorial, he estado usando Elementor para el desarrollo de una pagina web te la dejo aca http://grupoprevenso.com/developer/ y he notado un problema en los fondos de las paginas no se ven, ni en ordenadores con grandes pixelajes ni en las versiones responsive de dispositivos móviles? Abra algún problema en wordpress con eso? Si se tenga que agregar código en el archivo functions.php o algo parecido? Te agradecería la ayuda…

    Saludos.

    Responder

    • Hola Katherine,

      Lo primero que yo haría sería comprobar que no esté existiendo algún tipo de incompatibilidad entre alguno de tus plugins y Elementor. Después también comprobaría si hay incompatibilidad entre la plantilla y Elementor. Puede que alguna de ellas sea la que te esté causando el problema. En cualquier caso, si tienes la versión Pro, el equipo de soporte de la herramienta puede ayudarte con tu problema (en realidad, para eso están). 😉

      Saludos!

      Responder

    • Buenas tardes Carla,

      Haz una prueba activando otro de los themes por defecto de WordPress (por ejemplo, Twenty Sixteen o uno similar). Si el problema se soluciona al cambiar de theme, entonces está claro que es una incompatibilidad con tu tema y con ese maquetador que incluye.

      Feliz tarde de martes. Un saludo.

      Responder

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

    Responder

    • Hola Joel,

      La verdad es que es bastante extraño lo que comentas. Eres la primera persona que conozco que le pasa algo así.

      Yo comprobaría que no haya incompatibilidad entre plugins o con el tema que estés utilizando. Si el problema persiste, probaría a descargar de nuevo Elementor o cambiar a una versión anterior de la herramienta (Elementor – Herramientas – Control de versiones).

      Si, aún así, sigue sin aparecerte el botón de Guardar, el siguiente paso sería ponerte en contacto con el soporte del plugin a ver si ellos te pueden dar una solución al respecto.

      Un saludo!

      Responder

  48. Hola Jose Antonio muy bueno tu articulo excelente , te quería preguntar que plugin utilizas para tu redes sociales , me parece muy interesante como muestras al final , tu twitter , facebook ,google + , linkedlk .

    Saludos

    Responder

    • Hola Ricardo,

      Exactamente no sé a qué parte te refieres. Si es a la caja de autor que aparece debajo de los posts, dicha caja está implementada con el plugin Fanciest Author Box. Por el contrario, si te refieres a los iconos sociales del pie de página, esos los tengo hechos gracias a los iconos de Font Awesome que incluye Generatepress y con un poco de código HTML y CSS. 😉

      Si quieres saber qué plugins utilizo habitualmente, te aconsejo que te pases por esta otra entrada en la que hablo de ellos:

      https://www.joseantoniocarreno.com/los-mejores-plugins-para-wordpress/

      Un saludo!

      Responder

  49. Hola Jose Antonio.
    Estoy creando la página de la Asociación en la que trabajo. No encuentro un plugin chulo para poner las últimas entradas de forma tal que aparezca en la página de inicio como noticias. ¿Conoces alguno que pueda utilizar?
    Gracias

    Responder

    • Hola Milena,

      Si adquieres Elementor Pro, podrás hacer esto que tú quieres ya que trae consigo una herramienta llamada «Blog Grid» que sirve precisamente para esto que comentas. Y la verdad, es bastante buena, ya que puedes darle la apariencia que quieras además de poder mostrar las entradas que más te interesen, ya sea clasificadas por categorías o etiquetas.

      Si quieres saber más, te invito a que le eches un vistazo en la review de Elementor Pro que puedes encontrar en este mismo blog: https://www.joseantoniocarreno.com/elementor-pro/

      Saludos!

      Responder

  50. Hola Jose Antonio, estoy queriendo comenzar mi blog… compre el framework Genesis + Child Theme Showcase, pensé que todo seria sencillo pero me estoy comiendo las uñas porque no entiendo nada sobre como diseñar la web 🙁 estoy estresada. Descubri Elementor y la verdad es que muy util, pero no tengo idea cómo hacer la Home ya que wordpress sólo me permite modificarla (tocando codigo, que no entiendo nada) desde el escritorio, en personalizacion > widgets y ahi ir agregando. Se que otra opcion sería crear una página y ponerla como portada (pagina estatica) pero no logro poder «fijar» un encabezado con el menu y luego debajo crear o insertar una plantilla de Elementor, podrias ayudarme? 🙁 Gracias! Dani J.

    Responder

    • Hola Dani,

      Lo siento, pero yo hace tiempo que no trabajo con Génesis Framework y sin ver que tienes hecho de manera interna no puedo darte ninguna valoración.

      Génesis es un buen framework, pero no es ni de lejos la mejor opción para alguien que no tenga muchos conocimientos técnicos (como me parece que es tu caso). La mejor recomendación que te puedo hacer es que eches un vistazo a Generatepress, un theme framework que cuenta con todo lo que puedes hacer con Génesis pero cuya interfaz es mucho más fácil e intuitiva. Te dejo aquí el enlace a la review / tutorial que realicé hace tiempo en este mismo blog:

      https://www.joseantoniocarreno.com/generatepress-wordpress-tutorial-espanol/

      ¡Saludos!

      Responder

  51. Hola José,

    Mil gracias por el tutorial, es un currazo. He instalado Elementor y la primera en la frente: «Lo sentimos, no se encontró el área de contenido en su página. Debes llamar a la función «the_content» en la plantilla actual, para que Elementor pueda funcionar en esta página». El caso es que si vuelvo a intentarlo sin poner título a la página sí que me deja editar pero no me da la opción de desactivar cabecera, menús principales, sidebar, etc.. Imagino que será alguna incompatibilidad con la plantilla (es uno de los childs de Génesis). Poca solución, ¿no? Espero equivocarme y que pueda haber alguna manera de utilizar Elementor..

    ¡Un saludo!

    Responder

    • Hola Natalia,

      Normalmente, a mi me ha saltado el mensaje que comentas cuando estoy utilizando una plantilla predeterminada de un theme o de otro maquetador como puede ser Thrive Content Builder (ahora Thrive Architect). Revisa esto, porque con un tema de Génesis no debería darte problema alguno. 😉

      Saludos!

      Responder

  52. Holaaa.. yo estoy utilizando el tema Hestia, el mismo es recomendado para Elementor pero me sale el mensaje de «Lo sentimos, no se encontró el área de contenido en su página. Debes llamar a la función “the_content” en la plantilla actual, para que Elementor pueda funcionar en esta página”.. mi pregunta es donde puedo implementar ese codigo y cómo seria?? .. pues anteriormente habia utilizado ese tema en otra página y no tuve ese problema. Espero puedas ayudarme pues estoy desesperada jaja gracias!!!

    Responder

    • Hola Marie,

      Cuando aparece ese mensaje, normalmente es porque estás utilizando alguna plantilla preestablecida dentro de tu tema. Para que veas un ejemplo más claro, yo me he encontrado ese mensaje cuando tenía alguna página creada con una landing page de Thrive Architect. 😉 Resumiendo: revisa que en esa página no estés utilizando ya una plantilla.

      Gracias a ti. ¡Saludos!

      Responder

  53. Me gustaría saber como puedo manejar múltiples idiomas con este plugin, alguna recomendación de algún plugin de traducción compatible con este plugin

    Responder

    • Hola Milton,

      Imagino que te refieres a una web multidioma. En este sentido, necesitas un plugin como WPML, que es compatible tanto con Generatepress como con Elementor. Otra opción que puedes contemplar es Polylang.

      Un saludo!

      Responder

  54. Excelente nota José! La verdad que me quitó muchas dudas que tenía al respecto.
    En el día de ayer instale el Elementor, pero tengo una duda. Quiero hacer una página web en la cual las personas ingresen consultas, y la página se conecte a una base de datos que tengo creada en MySQL, y esa base genere determinados resultados. Es posible ingresar código PHP en los objetos de Elementor? Estuve buscando esta opción en el WordPress y dentro del plugin Elementor y no la encontré. Encontré plugins de «short code» para instalar aparte, pero esos no me sirven. Ojalá me puedas ayudar! Saludos!

    Responder

  55. Hola José, enhorabuena por el tutorial, realmente bueno.
    He descubierto este plugin hace poco y estoy pensando en usarlo de inmediato… Actualmente estoy utilizando el tema «Square» versión: 1.3.5 y sólo me queda una duda antes de instalar «Elementor».
    Los cambios, ediciones y añadidos que vaya incorporando ¿se conservarán si actualizo el tema a una versión superior? Lo digo porque tengo disponible una nueva versión y si al actualizar perdiera todo lo echo, sería una faena, claro…
    Gracias de antemano y un saludo.

    Responder

    • Hola Angel,

      En principio, no tiene que haber ningún problema con los contenidos que generes en Elementor por el hecho de que actualices tu theme. Por ejemplo, yo mismo lo hago en esta web cada vez que sale una actualización nueva de Generatepress y ningún problema.

      Eso sí, es conveniente que antes de hacerlo hagas una copia de seguridad para curarte en salud y revertir el proceso en caso de que sea necesario.

      Gracias a ti. ¡Un saludo!

      Responder

  56. Hola Dani, enhorabuena por tu tutorial.
    Te he hecho caso y empezado a trabajar con GP y Elementor.
    De momento todo perfecto pero…..
    Tengo una pregunta:
    Por qué no me aparace la opción de maquetar con Elementor en la página Blog?

    Gracias! Un saludo

    Responder

  58. José Antonio :
    Gracias por el artículo y el tutorial. Tengo instalado elementor pro todo en inglés ¿cómo debo hacer para que pase al castellano?

    Responder

    • Hola Alfonso,

      Elementor se instala automáticamente en el idioma que esté establecido por defecto en tu WordPress. Es decir, si tu WordPress está instalado en inglés, Elementor aparecerá en inglés. Si tu WordPress está en español, Elementor automáticamente se instalará en español sin que tengas que hacer nada.

      Saludos!

      Responder

  59. Hola José, recibe un cordial saludo desde México. Vengo buscando ayuda con WP-GN-EL. Verás, en una de las páginas de mi sitio, he usado el widget acordión, en 3 secciones distintas a lo largo de la página pero resulta que solo el primero funciona correctamente, desplegando todos los conceptos pero los dos restantes, no. Ya borré uno de ellos para hacerlo desde cero, y nada, tampoco funciona. Probé a duplicar el primero que sí funciona, y editarlo con la información del segundo y tampoco funciona. Crear uno nuevo en la parte inferior, y tampoco funciona. ¿Alguna probable solución o algo que pueda ayudar a resolver el problema? Muchas gracias de antemano y por compartir este tutorial tan completo. Jesus.

    Responder

    • Hola Jesús,

      Cuando esto sucede, en un alto porcentaje de los casos es debido a que algún plugin de los que tienes instalados en tu WordPress está generando algún conflicto con Elementor que provoca este error. Algunas veces a mi me ha pasado en webs de clientes que tenían instalados ciertos plugins de compresores de código javascript, css y HTML. Mira que este no sea el motivo. 😉

      Saludos!

      Responder

  60. Pues bueno, nada más comentar que siguiendo tu recomendación de revisar los plug-ins que no son tantos los que tengo instalados, los desactivé todos excepto Elementor, Elementor Pro y Generate Press y nada. El error no desapareció en lo absoluto. No me ha quedado otra que volver a hacer la página entera que me estaba causando el problema, he trabajado ahora en lugar de «Acordeón» con el widget «Cambiar» y ha quedado de lujo. Lamentable que no pudiera encontrar el error. 🙁 Otra cosa que me deja tremendo mal sabor de boca es, que no sé cómo es posible que utlizando este tipo widgets, tanto el Acordeón como «Cambiar», el consumo de RAM se me dispara por arriba delos 3.8GB. 😯 y Elementor se arrastra a grado insufrible. Cabe mencionar que trabajo con Safari en MacOS. Bueno, esa es mi historia. Gracias José Antonio, por el review, está buenísimo; y gracias por la ayuda también. Saludos desde México.

    Responder

    • Hola David,

      Muchísimas gracias por tus amables palabras. Aunque en mi «debe» tengo que decir que han salido bastantes nuevas herramientas y características y ya va siendo hora de que renueve tanto el tutorial en vídeo como actualizar dichas novedades. 🙂

      Saludos!

      Responder

  63. A mi me salta una super duda, ya cree mis columnas que es lo que quería crear en mi entrada, me parece genial lo que hace Elementor, pero no encuentro como ponerle un fondo a todo la entrada y no por secciones, me podrías ayudar con eso por favor.
    Saludos cordiales
    Christopher Pineda

    Responder

    • Hola Cristopher,

      Si te refieres a ponerle un fondo a toda la página, esto no tienes que hacerlo con Elementor. En mi caso, puedo hacer esto gracias a las opciones de fondos que me proporciona Generatepress en el menú «Apariencia – Personalizar».

      Saludos!

      Responder

  64. Muchas gracias por su tutorial tan comprehensivo, José Antonio. He logrado entender concretamente el concepto de «diseño». Definitivamente su tutorial es el mejor que he visto hasta el momento sobre el tema de diseñar páginas. Solamente leer o escuchar «arrastrar aquí y botar aca» no comunica muy bien conmigo.
    Gracias, José Antonio, por tan genial presentación,

    Everardo Larreynaga

    Responder

  65. Lo primero: Gracias, excelente tutorial.

    El problema:
    ¿Cómo hacer una sitio web en varios idiomas con Elementor?

    Al cambiar el contenido se cambia en el resto de idiomas 🙁

    Saludos y, de nuevo, gracias!!!

    Responder

  66. Felicidades por el artículo, lo encontré muy completo y una buena guía de referencia, pero he tenido un inconveniente con elementor y es que al crear una entrada con elementor no me permite tener un extracto de ésta y por consiguiente en mi página de entradas aparece completa la entrada, he intentado colocando el código de la etiqueta de leer mas de todas las formas (short code, html, en el mismo text)pero no lo he conseguido, por lo que me deja la duda si en la versión pro se puede, lo cual no me amerita gastar tanto sólo por esa funcionalidad, existe alguna forma de mostrar el resumen de las entradas que hago?
    Gracias de nuevo por el esfuerzo que pones en esto
    Saludos

    Responder

    • Hola Hugo Lau,

      Sí que puedes crear un corte de «Leer más» gracias a las opciones de la herramienta «Texto», puesto que el editor de esta herramienta es exactamente el mismo que el de WordPress y ahí deberías tener la posibilidad de meter esa opción igual que en el editor nativo. 🙂

      Saludos!

      Responder

      • Hola, antes que nada gracias por tu trabajo y dedicación. Es muuuy útil la info!
        Llego al post con el mismo problema, estoy usando el tema Twenty Seventeen que parece no es lo mejor para entradas de blog. En la página de entradas aparecen los posteos enteros y no encuentro la opción para que se vea solo un resumen y un «leer más». Me lo podrías explicar con un poco más de detalle. Estoy usando elementor pero planeaba dejar la pagina de entradas con la plantilla original(me da igual como sea). Para la facilidad de ingreso de entradas sobre todo.
        Espero puedas ayudarme. Gracias!!

        Responder

  67. Hola José, antes de nada gracias por toda tu información!
    Me quedé con una duda. ¿En una página maquetada con Elementor, puedo añadir un módulo donde visualice mis útlimas entradas? Y por liarla un poco más, ¿Un módulo donde visualice una categoría especifica de los post?
    Gracias de ante mano.
    Maria

    Responder

  68. Genial Artículo,

    La verdad que estaba buscando cosas sobre Elementor, porque los otros editores visuales no me han gustado nada, este además de Open Source esta genial, he visto que es relativamente fácil programar nuevos widgets y creo que va a ser uno de mis Plugins fundamentales a partir de ahora.

    Un saludo
    y de nuevo gracias.

    Responder

    • Hola Nuño,

      Bajo mi punto de vista, Elementor unido a Generatepress te da infinitas posibilidades de diseño tocando el menor código posible (y, por tanto, permitiendo realizar diseños web profesionales de manera mucho más rápida y eficiente). Si te dedicas al diseño web con WordPress al igual que yo, ni te lo pienses. 😉

      Gracias a ti por tu comentario. ¡Un saludo!

      Responder

  69. Hola José Antonio, muy bueno tuto-review!
    Quisiera consultarte cómo puedo combinar las secciones de GeneratePress con Elementor Tengo la versión premium de GP pero sólo puedo maquetar con uno u otro. No me deja combinar los elementos, salvo el menú. Quizás estoy haciendo algo mal.
    Por otro lado, tiene sentido tener la versión pro de GeneratePress con todas las opciones que brinda elementor? Cuáles podrían ser las desventajas de usar las dos versiones gratuitas?

    Muchísimas gracias por tu tiempo.
    Saludos!
    Mariana

    Responder

    • Hola Mariana,

      No puedes combinar ambas secciones. Utiliza unas u otras. Yo te recomiendo que utilices las de Elementor porque te resultará más sencillo si no tienes conocimientos de código. 🙂

      En cuanto a tener la edición Pro de Generatepress, a día de hoy para mi tiene todo el sentido del mundo tenerla para los aspectos generales de la web. Aunque es cierto que con Elementor 2.0 cada vez va siendo menos necesario, ya que ahora se pueden crear cabeceras y footers por ejemplo sin problema. Pero yo aún así, aún la pondría.

      Saludos!

      Responder

  70. Hola José! nuevamente yo con otra consulta :/
    Resulta que cuando estoy editando con Elementor y vuelvo a personalizar algún elemento desde Apariencia de GP, cuando quiero volver a editar con Elementor no carga la pantalla, se queda en blanco. Probé desactivando y volviendo a instalar el plugin, pero no se solucinó. También probé desactivando otros plugins, pero nada. No sé si será algún tema de configuración. Me podrás ayudar por favor? Muchísimas gracias!!

    Saludos, mariana

    Responder

  71. He adquirido Elementor pro y al ponerme a trabajar resulta que es exactamente igual al Elementor gratuito. En ajustes globales faltan bastantes y para mi importante «Eliminar todo el contenido».
    Como puede ser esto, le ha pasado a alguien.
    Un saludo, gracias

    Responder

    • Hola Segundo,

      PUes no me ha pasado nunca. Prueba a desactivar todos los plugins que tengas salvo Elementor a ver si aún así te sigue pasando. Si haciendo esto que te digo se soluciona, es probable que algún otro plugin que tengas instalado entre en conflicto con Elementor Pro y por eso no te salen las nuevas opciones.

      Asegúrate también de tener todo bien actualizado (WP, plugins, que la versión PHP de tu servidor sea la correcta para trabajar con Elementor, etc).

      Un saludo!

      Responder

  72. Hola Jose. Estoy usando Elementor hace poco y no me funciona bien el elemento pestañas. No me deja editar dentro de cada pestaña el texto, o sea que no me deja diferenciar los H2, H3, etc ni cambiar espacios en el texto ni nada. Sabes que puedo hacer para editar todo esto? O tal vez no se puede?
    Gracias

    Responder

  73. Hola a todos, en cuanto probé Elementor me pareció fantastico y no dudé en comprarme la versión pro, pues necesitaba enlazar un formulario con mailchimp, así que no vi otra salida, tal vez la haya. En este momento aún lo desconozco.
    Ya véis llevo poco tiempo probando este plugin, pero me está dando algunos quebraderos porque no consigo que mi homepage ( está todo en construccion, si) esté totalmente optimizada para smartphones. Os cuento mi problema por si a vosotros os ha pasado y lo habéis solucionado ya.

    En yoast seo, me aparece el mensaje que mi homepage no puede ser indexada. Entonces testeo con la URL in Google’s mobile friendly test , y obtengo unoos 10 errores del tipo htps://midominio.com/wp-content/plugins/elementor/assets/css/frontend.min.css?v Estado:error Tipo:CSS

    Muchas gracias de antemano.

    Responder

  74. Hola , ya hice mi maqueta y se visualiza con el previo muy bien, la cuestión es que cuando le doy actualizar no aparecen los cambios en mi sitio, sólo los puedo ver en el editor ¿a qué se deberá?

    Responder

    • Hola Marisa,

      Tiene pinta que es un problema de caché. Borra la caché del plugin de caché que estés utilizando (WP Super Cache, WP Fastest Caché o similares) y también comprueba en tu hosting que no tienes ninguna caché de servidor activa que esté provocando esto (y si la tienes, bórrala también).

      Saludos!

      Responder

  75. Hola José,
    Cuando diseño con Elementor coloco el zoom de mi pantalla a 67% para ver todas las herramientas sin tener que utilizar el scroll. Luego al previsualizar, si coloco la pantalla al 100%, observo que todo está desajustado y agigantado.

    La pregunta es si el ajuste del zoom de la pantalla debe ser el mismo tanto en diseño como en previsualización. ¿Cómo se verá una vez publicado?

    Muchas gracias!

    Gustavo

    Responder

  76. Hola José, muy buen post. Ya habia comprado Elementor cuando vi tu review, además de estar muy bien explicado me parece perfecta para los que no lo tienen del todo claro.
    Queria preguntarte si hay alguna manera de mantener orden con las imagenes desde Elementor.
    Me explico, tengo la necesidad de subir una buena cantidad de imagenes y es absolutamente necesario que esté todo en orden, para eso uso el Media Library Folders, el problema es que al cargarlas en la galeria desde el Elementor las coje directamente desde la biblioteca de medios y están todas mezcladas ;(
    ¡Muchas gracias!

    Responder

    • Hola YD,

      En Elementor tienes la herramienta llamada «Galería de imágenes» que sirve precisamente para colocar en tu web en una galería en el orden que lo desees (tanto a nivel estructural en número de columnas como el orden en el que se muestran las imágenes, que puede controlarse desde una de las pestañas que aparecen el panel de Medios de tu WordPress al seleccionar desde esta herramienta de Elementor las imágenes que aparecerán en esta galería).

      Saludos!

      Responder

  77. Hola, Buenos días.
    Primeramente gracias por la explicación muy buena y comprensible totalmente, te cuento que yo recién estoy incursionando en el mundo de WordPress y buscando sobre Elementor te consegui, que Dicha, Gracias.
    Me fue muy bien con la practica, todo lo pude hacer sin inconvenientes, ahora comparándolo con otros aun no tengo punto de referencia por lo nueva en este mundo.
    Te quería pedir recomendaciones sobre que debo estudiar para seguir ahondando sobre WordPress (Plugins, temas, php, css3, html, etc) , por favor, de antemano gracias.

    Responder

    • Hola Noxcelis,

      Pues verás, para estar en este mundillo del diseño web lo mínimo que deberías saber es HTML, CSS y manejar WordPress con soltura. Pero también viene muy bien tener conocimientos de programación (y si es en PHP y Java, mejor que mejor). Aunque también depende en qué te quieras especializar: no es lo mismo diseñar una web que maquetarla que desarrollar plugins o aplicaciones a medida. Son perfiles distintos dentro de un mismo ámbito. 😉

      Saludos!

      Responder

    • Hola Gabriela,

      Pues muchísimas gracias a ti por tus palabras. Siempre dan ánimo para seguir compartiendo buenos contenidos con todos vosotros, que sois en realidad los que le dais vida a este blog y a este proyecto. 😀

      Un abrazo!

      Responder

  79. En mi opinión es el mejor plugin de diseño web con wordpress, por lo menos de mucho lejos el mejor que haya probado y he probado bastante. También da mejor resultados en diseño de contenido que se puede conseguir con algunos templates de pago que he podido probar.
    Es muy flexible, la versión gratis permite hacer un montón de cosas que cubren unos 90% de lo que necesito en diseño. Las herramientas responsive permiten sacar diseños adaptados con mucha facilidad y de ser bastante creativo.
    Lo único que me he planteado un par de veces fue saber si al crear un mismo contenido pero uno que sea visible para escritorio y tablet por ejemplo, y otro solo para móvil, si google le consideraría duplicate content y, si fuera el caso, como evitarlo. Si alguien sabe contestar 😉
    Sino, encantado por Elementor y ahora no me podría pasar de este plugin para diseñar contenido con wordpress.

    Responder

    • Hola Ben,

      Muchas gracias por dejar tu punto de vista sobre Elementor. 🙂

      Respecto a tu pregunta, hasta donde yo sé eso no tiene nada que ver con el contenido duplicado. De hecho, creo que el código (o el diseño) que pongas que aparezca, por ejemplo, sólo en la versión móvil, no aparece en ningún momento en la versión de escritorio o en la de tablet.

      De todos modos, esto es más una pregunta para los desarrolladores del plugin que para mi mismo. Te invitaría a escribirlos, que te lo aclarasen y compartieses su respuesta aquí con todos nosotros.

      Un saludo!

      Responder

  80. muy completo el elementor page builder, y buen review, pero tengo que cambiar un banner insertado con este elementor y no encuentro la forma de configurar que abra el enlace en nueva página, solo pide url.

    Responder

  81. Hola.
    Uso Elementor en una web y hasta ahora no había tenido ningún problema, pero hoy he entrado a modificar unos H y me encuentro con que no aparece la barra inferior. Donde puedes salvar las modificaciones, ver la página, la versión tablet y móvil, etc.
    ¿Sabes cuál puede ser el problema? ¿Alguna incompatibilidad conocida?
    Sería genial una ayuda con esto.
    Muchas gracias.

    Responder

    • Hola Joaquín,

      A día de hoy no me ha ocurrido nada similar ni en mi propia web ni en la de mis clientes. Tampoco hay ninguna incompatibilidad conocida que provoque esto. Claro, también veo que tu consulta es del pasado 5 de diciembre, con lo cual no sé si ya has resuelto este problema.

      Saludos.

      Responder

  82. Hola, primero que todo felicitarle por su tan completa publicación y por compartirnos su conocimiento.
    Trabajo con elementor desde hace varios meses y últimamente estoy teniendo un gran problema.
    Estoy intentando agregar nuevas imágenes a la galería, pero cuando intento cargar nuevas imágenes se queda cargando pero no lo termina de hacer y la parte derecha donde se ven las propiedades de la imagen y demás se queda en blanco.
    Como pudiera resolver ese problema que me impide seguir actualizando mi web?
    Gracias y feliz Navidad
    Renato

    Responder

    • Hola Renato,

      No he tenido el problema que comentas y recientemente he creado varias galerías de imágenes con Elementor. Quizás se tratase de algún error puntual que se subsanó con una actualización posterior a la publicación de tu consulta. Si no es así, yo te recomendaría que consultases al soporte de Elementor para solucionar este problema.

      Saludos.

      Responder

  83. ¡Hola buenas!
    Utilizo normalmente Elementor para mis WordPress y me suele ir bastante bien, pero en una nueva página que he hecho me aparece este problema: «¡El servidor no tiene ImageMagick o GD instalado y/o activado! Se requiere alguna de estas bibliotecas para que WordPress pueda redimensionar imágenes. Por favor contacta al administrador de tu servidor para activar esto antes de continuar.»
    Y no se a qué es debido o donde tengo que cambiar lo que haga falta, muchas gracias!

    Responder

    • Hola Pilar,

      Creo que ese error que comentas no pertenece a Elementor. En todo caso, para asegurarte, te recomiendo ponerte en contacto con el soporte técnico del plugin. Aunque quizás antes descartaría que fuese un tema de servidor como te marca este error, por lo que preguntar en tu hosting también es una buena opción.

      Saludos!

      Responder

  84. Hola Jose Antonio,
    Buen articulo. Ya he instalado Elementor. He instalado un theme que viene con el. Mi duda es. como se cambia el fondo de una pagina? No de la sección si no de la pagina. Saludos.

    Responder

    • Hola Lorena,

      Imagino que te refieres a algo así como lo que realicé en esta página para un cliente: https://www.radioconsuegra.es/

      El fondo de página no puede cambiarse con Elementor. Para eso tendrías que utilizar la versión premium de Generatepress. Por eso siempre digo que la combinación Generatepress + Elementor es muy buena, porque donde uno no llega, llega el otro (y viceversa).

      Saludos!

      Responder

  85. Disculpa, tengo Elementor, pero me ha surgido un gran problema, empecé a crear distintas páginas con Elementor, sin embargo, cuando quiero entrar a otras páginas, donde nunca usé elementor, al parecer todas toman automáticamente el template de una de las páginas que había hecho con elementor por default.

    Si desactivo elementor, todas las páginas que tenía este problema, vuelven a su estado normal, he buscado y buscado y la verdad no encuentro cómo realizar una configuración sobre este tema, o peor aún, qué es lo que lo ocasiona.

    ¿Tienes idea de lo que ocurre y cómo resulverlo?

    Te lo agradecería muchísimo, llevo un mes con este problema así.

    Responder

    • Hola Héctor,

      No puedo darte una solución a tu problema porque no sé qué tienes instalado y cómo. Por lo que me cuentas, quizás haya algún tipo de incompatibilidad entre Elementor y el tema que estás utilizando (es raro, pero puede pasar). ¿También te sucede si creas nuevas páginas? ¿Puede ser que no hayas borrado el contenido anterior que tenías y por eso te está cogiendo lo «antiguo»?

      Saludos!

      Responder

  86. Buenos días, me gustaría saber que manera hay con elemento pro de crear contenidos de texto desplegables. ¿Tengo que usar shortcode?
    Gracias por la atención. Un saludo!

    Responder

    • Hola Aroa,

      Sí, en Elementor hay herramientas de textos desplegables. Concretamente, hay dos: una se llama «Acordeón» y la otra «Alternar». Utiliza la que mejor te convenga en tu caso. 🙂

      Gracias a ti por tu comentario. Un saludo!

      Responder

  87. buenas noches como puedo hacer para colocar en mi pagina el area de deja tu comentario como este y para poder responder algunas posible spreguntas o comentarios que hagan, similar con este sector de deje su comentario, te estra muy agradecido por la respuesta

    Responder

  88. Hola buenos días,
    PRIMERO FELICITARTE Y DARTE LAS GRACIAS por ver que desde el 2016 sigues respondiendo a la gente sobre temas de elementor… me parece increible en serio.
    LA pregunta ahora.
    Utilizo elementor canvas.
    Quiero establecer el diseño de caja, que por defecto, mi tema me permite y hace bien. Pero cuando uso el elementor canvas, no consigo encontrar la manera de que el contenido de la web quede dentro de la caja. Sabes de que INFERNAL MANERA, puedo conseguirlo??? llevo mucho tiempo intentando conseguirlo y no veo por donde…. se que soy yo… pero al final me decido a escribir en un foro….

    la web publicada ahora mismo es esta
    http://www.surfskating.com

    la estoy modificando a elementor canvas en entorno test, pero ese diseño gris de fondo no lo consigo poner….

    Responder

    • Hola Héctor,

      Sin ver qué has hecho, qué tienes instalado, como tienes implementado todo en la web, etc… no puedo ayudarte demasiado, ya que este tipo de problemas pueden venir derivados de diferentes motivos. Si no sabes resolverlo y necesitas ayuda en este sentido, te invito a que eches un ojo a mi servicio de mantenimiento web WordPress cuya modalidad para solicitar un presupuesto a medida de soporte técnico puede resultarte de mucha utilidad. O también tienes a tu disposición mis servicios como diseñador web WordPress para realizar codo con codo, de forma personalizada y con estrategia tu proyecto.

      Saludos.

      Responder

  89. Hola,

    te quería hacer una pregunta acerca de Elementor y su uso. Tengo hecho ya mi portafolio con Elementor canvas (una de sus opciones). Pero el problema con el que me encuentro es que con esa opción bajo la cual tengo construida el portafolio, no se me ven igual los elementos puestos desde la pantalla del mac y desde la pantalla de un portatil asus. Es decir, tengo un problema con lo que se refiere a la colocación de los títulos de las obras y del principal. Ya me han dicho desde urgencias wordpresss que es un problema de diseño con elementor. Y me han recomendado que utilice la versión PRO que esa es de pago y me descargue una plantilla. ¿Me han asesorado adecuadamente? ¿Cuál es mi problema exactamente y cómo lo podría resolver utilizando una versión gratuita?

    Muchas gracias.

    Responder

    • Hola Aina,

      En Elementor Pro, efectivamente, existe una herramienta para realizar portfolios que te facilitará mucho la vida. En cualquier caso, sin ver qué has hecho, qué tienes instalado, como tienes implementado todo en la web, etc… no puedo ayudarte demasiado, ya que este tipo de problemas pueden venir derivados de diferentes motivos. Si no sabes resolverlo y necesitas ayuda en este sentido, te invito a que eches un ojo a mi servicio de mantenimiento web WordPress cuya modalidad para solicitar un presupuesto a medida de soporte técnico puede resultarte de mucha utilidad. O también tienes a tu disposición mis servicios como diseñador web WordPress para realizar codo con codo, de forma personalizada y con estrategia tu proyecto.

      Saludos.

      Responder

  90. Estimado José Antonio, he construido mi blog con Elementor, pero ahora que quiero editar mi página MIS LIBROS, no he podido centrar verticalmente la imagen de mis libros, es decir, no me acuerdo cómo hacerlo. Y si le echas una mirada te darás cuenta que no se ven bonitos los cuadros. ¿Puedes ayudarme?

    Responder

  91. Excelente web.. no sabia de su existencia….la visitare con frecuencia…me interesa mucho su contenido.
    Gracias por compartir tus conocimientos con nosotros.

    Responder

  93. Hola llevo horas editando con Elementor bajo pedido y he seguido paso a paso tus consejos..
    He actualizado cada vez… pero
    A la hora de visualizar la página solo sale el arranque de la Home diciendo ¡Hola Mundo!… es una pena… ¿Que pasa?

    Responder

  94. Hola ¿Donde se encuentran los archivos CSS de las paginas de elementor? Lo pregunto porque quiero pasar de un dominio a otro diferente y he cambiado el theme.
    Exporte e Importe las paginas anteriormente generadas con Elementor, pero no hay estilos, y tampoco lo que añadi para configurar la vista de la página.

    He hecho clic en el boton
    REGENERAR ARCHIVOS … Los estilos configurados en Elementor se guardan en archivos CSS en la carpeta de subidas. Recrea esos archivos de acuerdo a los ajustes más recientes.Y no ha surgido efecto.
    E insisto… he cambiado de DOMINIO y el THEME, pasando la web anterior al nuevo dominio y despues instalar theme y plugins necesarios.

    Gracias por adelantado.

    Responder

  95. Hola,

    Antes de nada darte la enhorabuena por tu web. Da mucha información, gracias.

    Tengo un problema con elementor y es el siguiente. Al incluir seccciones o plantillas editando una página, se me incrustan estos elementos en todas las páginas de mi web y no en la página que edito. De esta manera no puedo dar a cada página el diseño que quiero, ¿dónde está el problema?

    Responder

  96. Hola, José Antonio

    Muchas gracias por el tutorial.
    Tengo una pregunta:
    Si quiero constuir una onepage con Elemmentor,,, ¿necesito instalar sí o sí antes un tema o puedo hacerlo desde cero? En cualquier caso ¿qué recomiendas tú ? ¿Y los gratuítos tienen algún inconveniente?
    Te agradezco de antemano la ayuda
    Un saludo
    Maite

    Responder

  97. Hola, José Antonio!

    Gracias por este tutorial. A la hora de crear mi landing page, ¿Tengo que descargarme antes una plantilla o puedo hacerlo desde cero? En cualquier caso, ¿tú que recomiendas? Y en caso de plantilla, ¿las gratuítas tienen algún inconveniente? ¿O merece la pena comprarla?

    Muchas gracias
    Maite B

    Responder

  98. Hola quizas sepas como experto ayudarme, porque me paso esto con elementor free, de un momento a otro cuando quise modificar las páginas en la pestaña páginas de WP, me aparece todo el desarrollo de la página (Ej. Home) escrito y con fotos, botones justo debajo del enlace de manera vertical.

    Algo asi:

    About — Elementor
    Editar | Edición rápida | Enviar a la papelera | Ver | Editar con Elementor
    A
    Few
    Words
    About
    Our
    Team
    –una foto–
    y así con cada pagina que comienzo a modificar con elementor

    Responder

    • Hola Alejandro,

      Para solucionar problemas técnicos de este tipo de un proyecto concreto, tienes a tu disposición mi servicio de soporte técnico en el cual puedes solicitar un presupuesto a medida para tareas concretas como la que me comentas: https://www.joseantoniocarreno.com/mantenimiento-web-wordpress/

      No puedo solucionar este problema sin ver qué tienes hecho y cómo lo tienes. Es como si le pides a un mecánico que te diga cómo arreglar un coche sin que previamente pueda ver el vehículo y lo que produce la avería. 🙂

      Saludos.

      Responder

  99. Hola José Antonio,

    Tengo una duda a la hora de editar una página con Elementor. Me gustaría crear una plantilla que muchas páginas la compartan entre sí, así cuando edite esa plantilla los cambios se visualicen en todas las páginas en común a esa plantilla. La cosa que quiero, es que cada página sea independiente en imágenes y textos, no en estructura.

    ¿Hay alguna forma de hacer esto? Si 10 páginas son iguales en estructura, y de repente quiero meter un bloque nuevo, no quiero entrar a editar las 10 páginas, solo editar la plantilla padre y que se cambie luego en todas.

    Espero que se entienda. Gracias.

    Un saludo.

    Responder

  100. Hola gracias por la respuesta pero a esta altura ya encontré solución… Hay una opción, en el nuevo editor de bloques de wordpress, que te permite colocar un «seguir leyendo» en donde quieras y te lleva a la entrada correspondiente. Muchas gracias igual! Saludos

    Responder

  103. Buenos días Jose Antonio, buen artículo!! Me encanta elementor! Tan solo una pregunta que me no he podido resolver, a ver si puedes ayudarme. Es con respecto al diseño de la H1. Cuando pones el nombre de la URL, se te activa por defecto como H1 en wordpress. Pero, cuando quiero rediseñar el H1 dentro del editor elementor, se me duplica el H1…! Dentro de wordpress y en el editor Elementor. Yo utilizo Astra como Theme, y me da una opción para ocultar el H1, pero aun así sigue duplicado. ¿Qué me recomendarías hacer?

    Responder

  104. Hola! Me encanta este artículo! está genial estructurado!

    Como veo que controlas quería preguntarte una cosa.

    se puede meter un elemento dentro de otro?

    Me gusta el elemento pestañas, pero me gustaría poder meter otros elementos dentro, por ejemplo el de post, de ese modo podría hacer varias pestañás con las categorias de los post y al entrar en la pestaña NOTICIAS se muestran los post de noticias si pincho en la pestaña ACTUACIONES salen los post de esa otra categoria, etc…

    se podría?

    Muchas gracias!! Un abrazo!!

    Responder

  105. Gracias por el artículo Jose antonio, me parece muy completo!
    Soy usuario de Elementor desde hace poco y tengo un problema que quizás me cuesta concretar.
    La cuestión es que me aparece en algunas entradas (casi al final) una especie de marca de agua en color gris con el título de mi blog. No aparece en todas y sólo en la vista para móvil. Podría ser debido a algún plugin o a algun campo de Generatepress que aparece Elementor. ¿Se te ocurre a qué podria ser debido?
    Gracias de antemano

    Responder

  106. Actualmente elementor es el único maquetador web que empleo. He probado otros pero la versatilidad, su facilidad de uso y su potencia han hecho que destierre a los demás.

    Responder

  107. Hola gracias por la info y el curro que te has pegado.

    Tengo un problemilla, al crear una sección con varias columnas, dependiendo de la resolución del monitor, ya sea escritorio o portatil, lo que hay en esas columnas intenta adaptarse pero se deforma, osea que si en un monitor de 1600 se ve bien, en uno de 1400 el diseño de esa sección se ve una columna más arriba que otra…no sé si me explico.
    Te dejo mi web y creo que lo veras enseguida, si reduces la ventana edl navegador o pruebas con resolucion más baja de 1600, verás las secciones con 4 columnas lo que hacen.

    No sé cómo lo puedo areglar…alguna sugerencia???

    Gracias y saludos.

    Responder

  108. Hola
    Empecé a usar Elementor porque con DIVI tuve problemas en la carga y con la optimización de la carga de la web.
    La verdad es que fue un gran acierto, a fecha de hoy la misma web y el mismo diseño, están a años luz a pesar de que DIVI se sigue gustando, pero al final las prioridades cambian

    Un saludo

    Responder

  109. Hola Jose, que tal!!!.
    Me ayudas por favor.
    Tengo diseñada una pagina de inicio con 3 columnas: la primera con un Menu, la segunda con una imagen y la tercer es un flip box. El problema es que al hacer una vista previa de la página los anchos, altos y distribución de algunos elemento no están iguales a como se muestra en el modo ‘diseño’. No se si logro explicarme bien. Ideal seria que pudiera pegarte una imagen por aca pero por lo visto no se puede.

    Ojala puedas responder…te lo agradecería muchisimo.

    Saludos desde Chile.

    Responder
Deja un comentario

José Antonio Carreño Rodríguez solicita tu consentimiento para publicar y moderar los comentarios. Los datos no se cederán a terceros salvo en los casos en que exista una obligación legal. En todo caso, los datos que nos facilitas están ubicados en servidores cuya sede se encuentra dentro del territorio de la UE. En el caso de no pertenecer a la UE, se informa previamente y sólo se realiza mediante el consentimiento expreso del usuario o mediante cláusulas contractuales tipo para la transferencia de datos personales entre responsables del tratamiento a un tercer país, o bien, por adhesión al EU-US Data Privacy Framework (DPF). Por motivo del uso de Google Fonts, es posible que algunos de sus datos (como la IP) sean tratados con la finalidad de prestar el servicio adecuado del mismo. Tiene derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la información adicional.

descubre cómo son lAS WEBS DE LOS NEGOCIOS QUE CONSIGUEN VENDER POR INTERNET

Ebook "11 claves para crear una web que venda", de José Antonio Carreño
MÁS INFORMACIÓN

José Antonio Carreño

Diseñador web para negocios online

Avatar de José Antonio Carreño.
Te ayudo a crear una web para tu negocio que te genere negocio
SERVICIO DISEÑO WEB
Youtube Linkedin Instagram

También te puede interesar...

José Antonio Carreño: logo blanco.
Diseñador Web Freelance
contacto@joseantoniocarreno.com
Web alojada en Ginernet
SERVICIOS
LEGAL
SÍGUEME EN...
Youtube Instagram Linkedin-in