Elementor: Pros, contras, precios y comparativa

¬ŅQu√© es Elementor?

Recuerdo la primera vez que escuché sobre Elementor.

Por el contexto, realmente no pude decir qu√© era. Y extra√Īamente, todo en lo que pod√≠a pensar era en los Dementores de Harry Potter.

Dementores Harry Potter

Después de ver las ocho películas ese fin de semana, no pasó mucho tiempo antes de que notara que más y más gente hablaba de ello.

Elementor esto . Elementor eso .

Ahora realmente ten√≠a que averiguar qu√© era. Y esta vez, no iba a dejar que mi imaginaci√≥n se apoderara de m√≠.

As√≠ que abr√≠ una nueva pesta√Īa, cambi√© a Google y presion√© la palabra “Elementor”. Para mi decepci√≥n, me di cuenta de que era solo OTRO pages builder de WordPress.

No tiene sentido.

¬ŅC√≥mo es posible que todos est√©n tan entusiasmados con un creador de p√°ginas de WordPress?¬†Quiero decir, no es nada que no hayamos visto antes. ¬Ņ¬†Realmente¬†podr√≠a valer la pena el bombo publicitario?

Rese√Īa de Elementor

Interfaz de usuario de Elementor Interfaz de usuario de Elementor

Elementor ya no es el chico nuevo del barrio. Es un creador de sitios web completamente desarrollado y en constante evoluci√≥n, con muchos ases bajo la manga.

A pesar de la dura competencia, se ha convertido r√°pidamente en uno de los creadores de p√°ginas visuales m√°s populares para WordPress, y contin√ļa creciendo a un ritmo r√°pido.

Desde su lanzamiento a mediados de 2016, Elementor ha tenido m√°s de 5 millones de  instalaciones y una impresionante  calificaci√≥n de 4.8 estrellas en WordPress.org.

A la gente claramente le encanta, pero ¬Ņes solo la √ļltima moda o es Elementor realmente el mejor pages builder para WordPress?

Averig√ľemos en nuestra review de Elementor.

Los pros y contras de Elementor

Para esta review, encendí Elementor para ver qué tan bien le va a este pages builder en comparación con las alternativas populares.

De ahora en adelante, compartiré mis experiencias con esta herramienta, así como lo que me gustó y no me gustó en el camino.

Hag√°moslo.

Pros
  • El producto principal es 100% gratis
  • Gran interfaz de usuario
  • Los widgets globales son incre√≠bles
  • Fuente abierta
  • Grupo activo de Facebook
  • Personalizaci√≥n extrema
  • Actualizaciones peri√≥dicas
Contras
  • Estilo forzado por defecto
  • Las plantillas globales vs est√°ticas pueden ser confusas
  • Carece de algunas funciones orientadas al marketing
  • Menos plantillas de p√°gina que algunos competidores

Instalación de Elementor

No hay nada peor (bueno, casi nada) que querer probar un nuevo pages builder de WordPress y tener problemas técnicos cuando intentas instalarlo.

Agregar Elementor a su instalación de WordPress es tan fácil como agregar cualquier otro buen plugin:

Instalación del plugin Elementor

Si tiene la suerte de poseer la versi√≥n Pro, la instalaci√≥n aqu√≠ tambi√©n es muy sencilla.¬†Simplemente descargue su archivo ZIP de instalaci√≥n, c√°rguelo a trav√©s de la pantalla ‘Agregar plugins’ y listo.

Esto es mucho más fácil que el proceso que siguen ciertos creadores de páginas de WordPress, incluido el que tuve que cargar a través de FTP.

Si no está familiarizado con FTP, es lo que Fred Flintstone usó para cargar sus plugins de creación de páginas.

NB Elementor Pro es un “plugin” para la versi√≥n gratuita de Elementor, es decir, necesita la versi√≥n gratuita instalada para que funcione la versi√≥n Pro.

La interfaz de usuario

Antes de sumergirnos en el meollo de la interfaz de usuario de Elementor, queremos brindarles a los desarrolladores los accesorios para una adici√≥n innovadora: el buscador de Elementor .

Buscador de Elementor

Uno de los mayores problemas que la mayoría de la gente tiene con los creadores de páginas es que hacer un cambio en una página o sección significa hacer muchos clics o tener que salir manualmente al panel de WordPress.

Esto no solo consume mucho tiempo, sino que también puede ser muy, muy frustrante.

No temas, Elementor Finder está aquí.

Presione CTRL + E (o CMD + E en Mac) para abrir la ventana de b√ļsqueda ‘Finder’:

Buscador de Elementor

Tambi√©n puede acceder al Finder desde el men√ļ principal de Elementor:

Buscador de Elementor en el men√ļ principal

Una vez que tenga el Finder abierto, simplemente escriba lo que est√° buscando y le mostrar√° una lista de opciones disponibles:

Esto le proporciona una manera f√°cil de saltar entre diferentes configuraciones, p√°ginas, publicaciones, Popups o secciones.

Pero, y soy muy quisquilloso aqu√≠, no te permite “encontrar” widgets.

¬ŅPor qu√© Elementor? ¬°Por qu√©!

De todos modos, aparte de eso, me encanta esta nueva función.

Consejo profesional

Si desea una lista de otros accesos directos que puede usar dentro de Elementor, use Ctrl +? en Windows o CMD +? en Mac.

Atajos de Elementor

El panel lateral Elementor

Como ocurre con la mayor√≠a de los creadores de p√°ginas, el panel lateral constituye la mayor parte de la interfaz de herramientas.

Creo que este formato funciona bien, especialmente para los creadores de p√°ginas visuales, porque no ocupa demasiado espacio en la pantalla, lo que obviamente es importante en este caso.

Panel lateral Elementor

Un buen detalle es que también puede expandir o contraer el panel arrastrándolo.

Debo admitir, esto es algo de lo que solo me di cuenta despu√©s de varias horas de usar el builder … * rubor *

Contraer el panel le brinda m√°s espacio para trabajar y no sacrifica la usabilidad de ninguna manera.

Realmente √ļtil.

Casi siento que podr√≠an haber llevado esto m√°s lejos y tener los √≠conos de elementos predeterminados en una lista, lo que permite que el panel se reduzca a√ļn m√°s.

Al hacer clic en la peque√Īa flecha en el panel lateral, se aleja completamente, lo que le permite obtener una vista previa de la p√°gina.

Por supuesto, no puede editar la p√°gina en vista previa.

¬ŅC√≥mo funciona el panel lateral de Elementor?

Esto puede parecer algo tan peque√Īo, pero la velocidad y la simplicidad de poder obtener una vista previa como esta fue enorme para m√≠.

Consejo profesional

Tambi√©n puede presionar ‘Cmd + P’ en una Mac, o ‘Ctrl + P’ en una PC para deslizar r√°pidamente el panel lateral dentro y fuera de la vista.

Prácticamente todo lo que la herramienta tiene para ofrecer se hace a través de este panel, así que permítame explicarlo.

En la parte superior izquierda, encontrará la configuración de la página.

Configuración del panel lateral de Elementor

(No se preocupe, voy a desarmar esto pronto).

En la parte inferior, tiene varias opciones m√°s:

Men√ļ inferior de Elementor
  1. Configuraciones
  2. Navegador
  3. Historial de revisiones (su versi√≥n de ‘Deshacer’)
  4. Modo receptivo (vista previa en escritorio, tableta o dispositivo móvil)
  5. Vista previa de cambios
  6. Ummm … guarda o actualiza sus cambios

Y finalmente, al hacer clic en el icono de la cuadrícula en la esquina superior derecha, volverá a la biblioteca de elementos:

Biblioteca de elementos de Elementor

En cuanto a agregar diferentes elementos a su contenido, es solo un caso de arrastrarlos y soltarlos desde la biblioteca directamente a la p√°gina.

No tengo quejas. El pages builder Elementor está a la altura de las expectativas hasta ahora.

Navegador de sección

Otro buen toque es la funci√≥n “Navegador de secciones”. Es una ventana flotante que le permite saltar r√°pidamente entre diferentes secciones de su dise√Īo.

Tambi√©n puede hacer clic derecho en cualquier elemento desde el ‘Navegador de secci√≥n’ y comenzar a editarlo.

Navegador de secciones de Elementor

Vista previa de cambios

Cuando actualiza su dise√Īo, se actualiza autom√°ticamente en la ventana Vista previa.

No tener que actualizar manualmente una segunda pesta√Īa del navegador para verificar cambios en su dise√Īo es una idea tan simple, pero un gran ahorro de tiempo para dise√Īadores y especialistas en marketing.

Debo admitir que me tomó un poco de tiempo acostumbrarme a dónde está todo, pero eso solo se espera cuando se cambia de otro pages builder.

En general, la interfaz de usuario inicial es limpia y muy f√°cil de usar.

Opciones de dise√Īo y columnas

Poder crear dise√Īos espec√≠ficos es de lo que se tratan los creadores de p√°ginas.

Entonces, ¬Ņc√≥mo se mide Elementor?

Para comenzar a crear un dise√Īo, primero querr√° ‘ Agregar nueva secci√≥n’ desde el √°rea de contenido.

Agregar nueva sección en Elementor

(Cubriremos las cosas de la plantilla m√°s tarde)

Al hacer clic en el bot√≥n morado ‘agregar nueva secci√≥n’ aparece una peque√Īa opci√≥n de dise√Īo.

Nuevas opciones de dise√Īo de secci√≥n

Al principio, no pensé que tuviera sentido tener que pasar por esto cada vez que agregas una nueva sección, pero de todos modos, simplemente soltando un elemento en la página, la sección predeterminada será una sola columna.

Es ser consciente de estos matices que tienden a acelerar las cosas con los creadores de p√°ginas.

Digamos que quiero una sección de 2 columnas.

Cómo agregar una sección de 2 columnas en Elementor

Pedazo de pastel.

Y agregar más columnas a una sección también es sencillo.

Simplemente haga clic derecho en el botón de la columna para cualquier elemento y tendrá la opción de agregar una columna adicional.

cómo agregar una nueva columna en Elementor
Sección de 3 columnas en Elementor

Y como las columnas est√°n contenidas en secciones, puede apilar columnas f√°cilmente para crear dise√Īos m√°s complejos.

Columnas de Elementor contenidas con secciones

Otra caracter√≠stica √ļtil es poder crear columnas adicionales arrastrando y soltando elementos en su lugar.

Todo lo que necesita hacer es arrastrar el elemento usando el bot√≥n ‘columna’, y puede presionarlo virtualmente en cualquier lugar.

cómo agregar una columna adicional en Elementor

Hasta aqu√≠ todo bien. Usar Elementor parece una maravilla.

Pero, ¬Ņqu√© hay de ajustar el ancho?

Nuevamente, bastante sencillo.

Simplemente coloque el cursor sobre un elemento para revelar el borde , luego arrastre el lado para aumentar / disminuir el ancho.

Cómo ajustar el ancho de la columna en Elementor

Finalmente, hay un elemento de ‘Secci√≥n interna’ en la barra lateral (que por defecto es de 2 columnas) si prefiere hacerlo de esa manera.

Elemento de sección interior en Elementor

En general, encontr√© que las opciones de dise√Īo funcionaron bien y no puedo ver √°reas obvias donde se quede corto.

Edición y estilo forzado

Ahora, profundicemos un poco más y hablemos sobre la experiencia de edición / estilo.

Las versiones anteriores de Elementor tenían esta cosa molesta en la que solo se podían editar elementos desde la barra lateral.

Eso es ahora en el pasado distante.

Y déjeme hacer una nota al margen rápida aquí: volveremos a la sección de review de Elementor que solicitó en un momento.

Quiero se√Īalar que Elementor es uno de los mejores creadores de p√°ginas espec√≠ficamente debido a las constantes actualizaciones. Hablaremos m√°s sobre su actualizaci√≥n m√°s reciente a lo largo de este art√≠culo, pero d√©jeme darle un ejemplo: 

La actualización de Elementor 3.0 vino con muchas mejoras de rendimiento, ya que fue una gran queja de algunos clientes en el pasado.

Eso es lo que obtienes con Elementor.

Ahora volvamos a modificar los elementos de la p√°gina.

Editar elementos ahora es tan fácil como cabría esperar de un pages builder tan popular como Elementor.

Por ejemplo, la edición de texto y el estilo se pueden realizar online o desde la barra lateral.

edición de texto online y en la barra lateral en Elementor

¬ŅPor qu√© ofrecer dos formas de lograr el mismo objetivo?

Porque las personas son criaturas de h√°bitos. De esta manera, el builder admite cualquier work flow al que la gente est√© acostumbrada.

Tambi√©n puede acceder a los men√ļs ‘Estilo’ y ‘Avanzado’ sin tener que salir de la misma pesta√Īa.

Formato de estilo avanzado en elementor

Desde mi punto de vista, prefiero este enfoque a la edici√≥n de texto porque puedo ver mi dise√Īo y texto “en vivo” .

Otros elementos, como las im√°genes, solo se pueden manipular desde la barra lateral, pero eso tiene mucho sentido porque puede obtener una vista previa de los cambios a medida que los realiza.

Estilismo

Elementor también merece un elogio adicional por sus opciones de estilo de texto.

Puede parecer una cosa trivial, pero realmente aprecio el hecho de que te dan tanto control sobre cómo funcionan los elementos de texto.

No solo tiene opciones para el tama√Īo de fuente, negrita, cursiva y subrayado.

No

Elementor le permite modificar cosas como el espaciado de letras, la altura de las l√≠neas e incluso establecer una sombra paralela para su texto.

Configuración de estilo de Elementor

De acuerdo, las sombras paralelas son un poco de 2002, pero todavía tengo una debilidad por ellas.

Y luego debe asentir con la cabeza apreciando el hecho de que Elementor tambi√©n incluye opciones de estilo de texto en forma de modos de ‘Mezcla’ como luminosidad, aclarar, oscurecer, etc.

Un pages builder gratuito que le brinda este nivel de control sobre su tipografía es prácticamente inaudito.

Voy a amarlo.

Estilo forzado

Pero hubo problemas, como ¬Ņpor qu√© mis t√≠tulos eran azules?

Al entrar en el men√ļ ‘Configuraci√≥n ‘, se hizo evidente que Elementor tiene sus propias opciones de estilo, ignorando por completo el estilo de mi tema.

Estilo forzado en Elementor

Todavía no estoy seguro de por qué Elementor le impondría un esquema de color de forma predeterminada.

Lo mismo ocurre con las fuentes. Me gustan mis fuentes.

No toques las fuentes, ¬Ņde acuerdo?

Elementor tomó en cuenta los comentarios de los usuarios, por lo que ahora se le advierte que la configuración de su tema podría ser secuestrada, y también puede desactivar los esquemas de color predeterminados de Elementor.

Entonces, si activa un tema que reconoce Elementor (Hestia, por ejemplo), obtendrá esta ventana emergente que le permite evitar que Elementor anule la configuración de su tema.

Estilos predeterminados de Elementor

Y podemos verificar el men√ļ ‘Configuraci√≥n’ para confirmar esto.

¬°Ordenado!

paletas de colores deshabilitadas en Elementor

Si te encuentras con un problema en el que Elementor ha tomado el control de tu estilo de tema predeterminado para fuentes y colores, no temas, ¬°no todo est√° perdido!

Simplemente vaya al men√ļ ” Configuraci√≥n ‘y elija’ Descartar ‘tanto para los colores como para las fuentes.

Fuentes globales de Elementor

Y puedes ir un paso m√°s all√°.

Desde el men√ļ ‘Configuraci√≥n’, elija ‘Configuraci√≥n del panel de control’.

Configuración del tablero en Elementor

Ahora est√° a solo dos clics del mouse de detener el secuestro de estilo de Elementor en seco.

Configuración de estilo global en Elementor

¬°Oh, el drama!

Y mira.

No quiero quitarle nada a Elementor aquí; es GENIAL que incluso pueda configurar diferentes colores / fuentes para páginas individuales; simplemente no estoy demasiado interesado en tener estos configurados como predeterminados.

Sin embargo, con la actualizaci√≥n m√°s reciente de Elementor (Elementor 3.0, lanzada el 30 de septiembre de 2020), agregaron a√ļn m√°s opciones de estilo.

Opciones de dise√Īo global

En Elementor 3.0 tiene acceso a un Sistema de dise√Īo global.

Básicamente, esta es una forma de unir todas sus páginas bajo un paraguas de estilo, con características como fuentes globales, colores y algunas otras funcionalidades.

Opciones de dise√Īo global en Elementor

“Configuraci√≥n del sitio” es el panel que puede usar para encontrar la mayor√≠a de estas opciones, y son un soplo de aire fresco para los dise√Īadores web que usan Elementor.

Entonces, hablemos de los elementos reales (o widgets) dentro de Elementor.

lista de elementos b√°sicos en Elementor

Estos son los peque√Īos bloques de construcci√≥n que usa para juntar su contenido , y Elementor ofrece una biblioteca generosa para elegir.

Si tiene la versión Pro de Elementor, también tendrá acceso a estos widgets adicionales:

Elementos Elementor Pro

Tambi√©n es bueno ver que Elementor es compatible con los widgets est√°ndar de WordPress , as√≠ como con los widgets de terceros que pueda haber instalado.

Widgets de WordPress en Elementor

En general, definitivamente no es una mala selección, pero está lejos de ser completa.

Especialmente en comparación con otros creadores de páginas de WordPress.

La pregunta es, ¬Ņqu√© falta?

Bueno, a veces puede ser difícil saberlo hasta el momento en que necesita realizar una acción en particular.

Por ejemplo, digamos que está armando una publicación de review de resumen y desea terminarla con una buena tabla de comparación.

¬ŅAdivina qu√©?

Elementor no tiene un elemento de tabla.

Comentario de elemento de tabla de Elementor

Por el momento, si desea una tabla, deberá instalar otro plugin, como TablePress, y pegar el código corto en Elementor.

Esto no es un gran problema, pero es de esperar que incluyan un widget de tabla integrado en una versión futura.

También tiene la opción de instalar el plugin Ultimate Addons For Elementor, que agrega un widget de tabla y un montón de otras características interesantes también. Este no es un plugin gratuito, pero obtiene una gran relación calidad-precio aquí.

Ahora, hablando de la relación calidad-precio, resulta que Elementor es un pages builder de código abierto.

El primero de su tipo. El rompe cadenas. La madre del Drag√≥n … no importa.

Fanático de Juego de Tronos aquí.

Ser de código abierto significa que los desarrolladores externos pueden crear widgets, plantillas y bloques para sitios creados con Elementor, todos los recursos que puede encontrar de forma gratuita o por una tarifa en el mercado de plugins de WordPress.

Esto presenta a cualquier marketer con su propio equipo de desarrollo / persona con una oportunidad de negocio: desarrollar plugins para Elementor.

Elementor tiene una comunidad activa de m√°s de 61,000 miembros, por lo que es un mercado enorme para que lo aproveches.

¬ŅC√≥mo se te ocurren ideas para un plugin para Elementor?

Encuentre algo que no le guste y pídale a su desarrollador que cree una solución para resolver ese problema 

Ahorro de tiempo con widgets

Al crear un dise√Īo complejo para un sitio nuevo, puede ser muy √ļtil incluir un grupo de elementos con estilo.

Por ejemplo, en Thrive Architect, puedo colocar rápidamente un elemento de llamada a la acción con un estilo previo como este:

Thrive Architect elemento de llamada a la acción de estilos previos

Claro, el dise√Īo en s√≠ es bastante b√°sico, pero es m√°s que suficiente para la mayor√≠a de las personas.

Y, lo m√°s importante, solo tard√≥ un segundo en aparecer en la p√°gina .

En sus inicios, Elementor sol√≠a luchar con esto. No presentaba la misma cantidad de elementos prefabricados y, si somos honestos, todav√≠a no est√° all√≠.

Cuando se habla de recursos o plantillas, Elementor puede quedarse atr√°s de competidores como Thrive Architect o Divi Builder.

¬ŅPero es suficiente competir con gente como Thrive Architect? ( Consulte nuestra comparaci√≥n entre Thrive Architect y Elementor si desea obtener m√°s informaci√≥n ) .

S√≠ definitivamente. Elementor es una opci√≥n fenomenal, especialmente si eres un desarrollador y dise√Īador web experimentado que desea tener m√°s control sobre su work flow.

Pero eso no significa que sea perfecto. Nuestro objetivo es una review justa de Elementor, as√≠ que tenga en cuenta el hecho de que Divi tiene una cantidad incomparable de plantillas de p√°gina, y Thrive Architect tiene caracter√≠sticas y widgets que se adaptan mejor a los especialistas en marketing.

Lucha por encontrar su enfoque .

Puede parecer que est√° tratando de satisfacer a todos.

Pero está mejorando en esto con cada actualización.

Otra posible solución para una falta real o percibida de plantillas es usar algo como el plugin Envato Elements.

Obtiene cientos de “kits” y bloques de plantillas gratuitos que puede importar directamente a Elementor para su uso posterior.

Envanto Elementor Element

Sin embargo, recuerde que esto puede tener un impacto en el backend de su sitio. La combinación de tantos elementos de muchos plugins puede hacer que su sitio sea difícil de cargar. Así que no se exceda.

Dicho esto, creo que Elementor cubre los conceptos b√°sicos realmente bien y si no le importa instalar un pu√Īado de plugins adicionales, hace un excelente trabajo manejando todo lo dem√°s.

Ahora continuemos con nuestra review de Elementor.

Como es de esperar de cualquier pages builder en estos d√≠as, Elementor le permite crear ‘widgets’ personalizados a partir de sus elementos de contenido.

(Estos son diferentes de las plantillas de p√°gina, que cubriremos pronto).

Entonces, digamos que estoy usando un ‘cuadro de icono’, y lo he dise√Īado exactamente como me gusta.

Widget de caja de iconos en Elementor

Si quisiera usarlo nuevamente en el futuro, puedo guardar este elemento (ahora personalizado) en mi biblioteca.

Todo lo que tiene que hacer es hacer clic derecho en el elemento y luego hacer clic en ‘Guardar como plantilla’ .

A continuación, aparecerá un popup.

Ingrese un nombre, presione ‘Guardar’ y su elemento personalizado se agregar√° a su biblioteca.

Cómo guardar un widget como plantilla en Elementor
Elementos globales en elementor

El elemento que guardó también tendrá un borde amarillo para indicar que es un widget global.

En este punto, puede usar el widget global en cualquier p√°gina (o incluso nuevamente, en la misma p√°gina) yendo a la pesta√Īa del widget global.

Lista global de widgets de Elementor

Bien, así es como funciona, pero seamos prácticos.

¬ŅQu√© sucede si desea realizar cambios en su widget global ?

Bueno, si hace clic en el widget, notar√° algunas cosas en el panel izquierdo.

realizar cambios en los widgets globales en Elementor

En primer lugar, el widget global est√° bloqueado .

Eso significa que no puede editarlo o realizar cambios de estilo como lo haría con un elemento normal.

Puede desbloquear temporalmente el elemento haciendo clic en el bot√≥n ‘Editar’, que aplicar√° sus cambios a este widget global en TODAS sus p√°ginas.

Entonces, ¬Ņqu√© sucede si desea realizar cambios en el widget sin aplicar esos cambios globalmente?

Ah√≠ es donde entra la ‘desvinculaci√≥n ‘.

Desvinculación de widget global de Elementor

Hacer clic en este bot√≥n convertir√° efectivamente su widget global en su forma ‘elemental’ normal.

Notará que el borde amarillo vuelve a ser azul y puede realizar cambios como lo haría normalmente en Elementor.

Elementor Global Widget Editor

Y lo bueno de usar widgets globales con Elementor es que se pueden usar pr√°cticamente en cualquier lugar de su sitio.

Si ya no necesita un widget determinado, es igualmente f√°cil de eliminar.

Simplemente dir√≠jase a su panel de WordPress, haga clic en ‘ Plantillas’ , ‘Plantillas guardadas’ y luego resalte el widget que desee enviar a su mont√≥n de basura digital.

plantillas guardadas en Elementor

Códigos cortos

Códigos cortos de Elementor

Los códigos cortos de Elementor funcionan en las páginas, independientemente de si se han creado con Elementor o no.

E incluso hay un widget de WordPress dedicado para ellos.

Widget de WordPress de la biblioteca Elementor

Con esto, puede dise√Īar f√°cilmente “llamadas a la acci√≥n” dentro de Elementor y luego hacer que se muestren globalmente en su barra lateral.

Aquí tienes un ejemplo de Copyblogger.

Elemento global de Elementor en la barra lateral de Copyblogger

En general, Elementor maneja muy bien los widgets globales.

De hecho, lo hace mucho mejor que otros creadores de p√°ginas “premium”.

La función de código abreviado facilita la combinación de elementos de plugin, lo que amplía su conjunto de herramientas y lo ayuda a personalizar las páginas.

Plantillas de sección

Esto es una continuaci√≥n de la funci√≥n ‘Widgets globales’ que acabamos de cubrir anteriormente, pero las ‘Secciones’ funcionan de manera un poco diferente.

Entonces, ¬Ņqu√© es exactamente una ‘Plantilla de secci√≥n’?

Es b√°sicamente un contenedor, que combina elementos individuales en una secci√≥n determinada para darle control sobre el grupo como un todo.

Ejemplo de plantilla de sección en Elementor

Para evitar tener que volver a crear las mismas secciones una y otra vez, simplemente puedo guardarlas como una ‘Plantilla de secci√≥n’.

guardar como plantilla en Elementor

Estamos guardando toda la sección porque mi llamado a la acción se compone de varios elementos individuales.

Entonces, solo le dar√© un nombre y presionar√© ‘Guardar’.

Elementor Guarde su sección en la biblioteca

Ahora esencialmente puedo agregar esa sección a cualquier página con unos pocos clics.

Frio.

Pero aquí es donde las cosas se volvieron un poco confusas.

A diferencia de los widgets globales, las plantillas de secci√≥n no aparecen en la pesta√Īa ‘Global’.

elementos globales en Elementor

Entonces, ¬Ņd√≥nde los mantiene ocultos Elementor?

Hay dos formas de importar secciones y, como descubr√≠, ambas se comportan de manera muy diferente:

  1. El widget de plantillas
  2. El botón Agregar plantilla
cómo encontrar plantillas en Elementor

El m√©todo del bot√≥n ‘Agregar plantilla’

  1. Haga clic en el bot√≥n “Agregar plantilla” del espacio de trabajo principal.
  2. Haga clic en la pesta√Īa ‘Mis plantillas’
  3. Elige tu plantilla
  4. Haga clic en ‘Insertar’
insertando plantillas guardadas en Elementor

Ahora se le presentar√°n todas las plantillas que haya guardado en Elementor, incluidas las plantillas de ‘Secci√≥n’.

Haga clic en ‘Insertar’ y la secci√≥n aparecer√° en su p√°gina. Simple como eso.

Una nota rápida aquí es que si puede importar accidentalmente la configuración del documento de la plantilla.

O, en t√©rminos sencillos, importar√° accidentalmente una gran cantidad de suciedad que podr√≠a (y probablemente lo har√°) estropear su dise√Īo.

Pero Elementor le advierte sobre esto con anticipación:

Importar la configuración del documento en Elementor

Lo bueno de agregar una sección de esta manera es que puede realizar cambios inmediatamente antes de guardarla nuevamente.

plantilla de edición en Elementor

Todo es bastante sencillo, con todo funcionando como cabría esperar.

El m√©todo ‘widget de plantilla’

Eso me lleva a nuestra segunda opción.

Por extra√Īo que parezca, esto no funciona de la misma manera que la funci√≥n ‘Agregar plantilla’.

Esta vez, vamos a insertar la plantilla de secci√≥n usando el ‘widget de plantilla’ del panel lateral.

Widget de plantilla en Elementor

Al igual que con cualquier otro widget de Elementor, primero debe arrastrarlo y soltarlo en la p√°gina.

Después de eso, le pedirá que seleccione su plantilla guardada.

En este caso, estamos buscando nuestra plantilla de secci√≥n guardada .

Ahora, aqu√≠ hay una peculiaridad aleatoria: el widget de plantilla no le muestra una lista de plantillas de secci√≥n hasta que realmente escribe algo en el campo de b√ļsqueda:

Widget de plantilla en Elementor

Tienes que “Ingresar 1 o m√°s caracteres” para que cualquier cosa aparezca aqu√≠.

B√ļsqueda de widget de plantilla en Elementor

Esa es una elecci√≥n de UX bastante extra√Īa desde el punto de vista del usuario.

Obviamente, si tiene cientos de secciones guardadas, entonces esto tiene sentido.

Pero incluso entonces, si no puede recordar c√≥mo se llama su secci√≥n guardada, tendr√° que salir de Elementor, ir a su Panel de control y encontrar el nombre de la secci√≥n guardada all√≠ en ‘Plantillas’.

La plantilla de la secci√≥n se cargar√° … pero aqu√≠ es donde las cosas se vuelven un poco confusas.

Esta vez, las plantillas de secci√≥n se tratan como un solo bloque , por lo que para realizar cambios es necesario hacer clic en el bot√≥n “Editar plantilla”.

Editar bloque de plantilla en Elementor

Y una vez que haga clic en ‘Editar plantilla’, se abre la secci√≥n en un editor separado en una nueva pesta√Īa del navegador.

Aquí es donde debe realizar los cambios que desee y luego guardar la sección de plantilla.

No solo eso, sino que cualquier plantilla importada mediante el ‘elemento de plantilla’ se considera autom√°ticamente como “global” .

Pero, y esto es un gran PERO, a diferencia de los widgets globales, estas plantillas no se pueden desvincular .

Me tomó un tiempo darme cuenta de esto porque Elementor no me dio ninguna indicación de que estos se tratarían de manera diferente.

Muy confuso.

Así que aquí está la conclusión:

Si desea una secci√≥n est√°tica y desvinculada, deber√° usar el bot√≥n “Agregar plantilla”.

De lo contrario, use el widget de plantilla.

Plantillas de p√°gina

¬ŅQu√© es un pages builder sin algunas plantillas de p√°gina completa, eh?

Nuevamente, hay dos formas de cargar una plantilla de p√°gina dentro de Elementor.

  1. Desde el bot√≥n ‘Agregar plantilla’ en el espacio de trabajo principal
  2. Desde el widget ‘Plantilla’ en la barra lateral
agregando plantillas en Elementor

Las plantillas de página sufren el mismo problema que las plantillas de sección: el uso del widget de plantilla te deja con un solo elemento que luego debe editarse en una ventana de editor separada para cambiar algo.

Así que vamos a evitar eso como una opción.

Estoy seguro de que los desarrolladores tienen una razón para manejar las plantillas de esta manera, pero no entiendo.

Elementor viene precargado con un mont√≥n de plantillas dise√Īadas profesionalmente, que puede usar de inmediato.

Para ver las plantillas disponibles, haga clic en el bot√≥n ‘Agregar plantilla’:

plantillas dise√Īadas en Elementor

Desde all√≠, haga clic para obtener una vista previa de una plantilla individual y, si le gusta lo que ve, puede implementarla en su p√°gina haciendo clic en ‘Insertar’ .

NB Una cosa que not√© al insertar una plantilla fue que si tiene una tonelada de contenido existente en la p√°gina, puede tardar un poco en cargarse.

Una vez que se carga la plantilla, probablemente encontrar√° que no se parece en nada a la vista previa que vio.

insertando plantilla Elementor

Esto sucede porque Elementor est√° restringido a los l√≠mites de su tema.

B√°sicamente, si su tema dice “¬°el contenido va aqu√≠!”, Ah√≠ es donde va el contenido.

√Ārea de contenido de Elementor

Entonces, ¬Ņqu√© sigue?

Para utilizar correctamente una plantilla de p√°gina completa, primero debe tener una plantilla de p√°gina de ancho completo (o en blanco) para que Elementor trabaje.

Una plantilla de ancho completo conserva el encabezado y pie de p√°gina de su tema, mientras que una plantilla en blanco es exactamente eso, en blanco.

No hay uno correcto o incorrecto para usar, solo depende de lo que esté tratando de lograr.

Ahora, voy a ser sincero contigo.

En el primer borrador de esta review, hice una perorata épica acerca de que Elementor no tiene esta funcionalidad incorporada, junto con las formas en que puede evitarlo.

Poco despu√©s, ¬Ņadivinen qu√© pas√≥?

As√≠ es, fueron y lo agregaron .

Y aunque siempre es divertido eliminar una secci√≥n completa de su art√≠culo, me complaci√≥ ver que todos estamos en la misma p√°gina. (Sin juego de palabras).

Para acceder a √©l, haga clic en el bot√≥n ‘Configuraci√≥n de p√°gina’ y luego busque el men√ļ desplegable ‘Dise√Īo de p√°gina’:

configuración de página en Elementor
configuraci√≥n de dise√Īo de p√°gina en Elementor

Ahora puede elegir entre ‘Ancho completo’, ‘Elementor Canvas’ y cualquier otra plantilla incluida con su tema.

Nota

La opci√≥n ‘Elementor Canvas’ es solo una plantilla en blanco. Por alguna raz√≥n, decidieron ponerse elegantes con el nombre

Intent√©moslo de nuevo con la opci√≥n ‘Lienzo’ seleccionada.

opción de lienzo en Elementor

¬°Eso es m√°s parecido, Elementor!

Ahora, con las cosas t√©cnicas resueltas, ¬Ņqu√© pasa con las plantillas de p√°gina reales?

Honestamente, qued√© bastante impresionado con los dise√Īos.

Son limpios, profesionales y f√°ciles de trabajar.

En una iteración anterior de esta review, me expresé lírico acerca de que había una buena combinación de plantillas, pero que podrían volverse propensas a un uso excesivo.

Pero eso es solo si:

  1. Haces muy poco para personalizar la plantilla para tu propio uso
  2. Nunca se actualiza a Elementor Pro

Elementor comete el “error” de intentar ser el pages builder de WordPress perfecto para todos en la Tierra.

Lo que significa que nunca podr√°n mantener felices a todos, sin importar cu√°nto se esfuercen.

Biblioteca de plantillas en Elementor

Si depende de p√°ginas de ventas o de aterrizaje predise√Īadas, las plantillas de Elementor Pro deber√≠an tener algo que se adapte a ti

Pero si, como yo, est√° contento de crear p√°ginas de destino tu mismo, simplemente puede guardar sus propias plantillas de p√°gina para reutilizarlas una y otra vez.

Como nota final, también puede importar las plantillas de otras personas.

Este sitio tiene una selección muy respetable de plantillas de página, plantillas emergentes y bloques de sección, con algunos tutoriales incluidos por si acaso.

A√ļn mejor: no le costar√° ni un centavo, aunque el sitio acepta donaciones.¬†

plantillas importadas en Elementor

Sin embargo, un punto más antes de continuar con la review de Elementor. Si bien las plantillas de página son geniales, y aunque para algunas personas las plantillas de página no importan en absoluto, Elementor comenzó a quedarse atrás de su competencia.

Thrive Architect est√° dirigido a los especialistas en marketing, por lo que sus plantillas de p√°gina de destino son m√°s complejas.

Divi simplemente saca a Elementor del parque, entregando m√°s de 2000 plantillas de p√°gina individuales a su disposici√≥n. M√°s sobre eso en nuestro enfrentamiento Divi vs Elementor.

Entonces, si las plantillas de página son importantes para ti, es posible que Elementor no siempre sea la mejor opción.

Adaptabilidad

Al igual que la mayor√≠a de los creadores de p√°ginas actuales, Elementor responde de forma predeterminada, por lo que su dise√Īo se adaptar√° autom√°ticamente a diferentes tama√Īos de pantalla.

Elementor est√° a la altura del est√°ndar del mercado de los creadores de p√°ginas, lo que permite a los usuarios obtener una vista previa en vivo de su sitio, en diferentes tama√Īos de dispositivos, con solo tocar un bot√≥n.

Y lo que me sorprendi√≥ a√ļn m√°s fue que puedes realizar cambios independientes para cada dispositivo .

Para ilustrar lo que quiero decir, tengo dos títulos aquí:

Encabezados en Elementor

Si cambio a la vista previa de ‘M√≥vil’, mis t√≠tulos se ven m√°s o menos iguales.

Vista previa móvil en Elementor

Pero por el bien de los argumentos, digamos que no estoy contento con el espacio entre ellos en los dispositivos móviles

Esto es realmente f√°cil de solucionar en Elementor.

  1. Seleccione el elemento que desea ajustar
  2. Haga clic en ‘Avanzado’
  3. Agrega un margen para el elemento
  4. ¬°Todo listo!
Edición de la vista previa móvil en Elementor

Y aquí está la verdadera magia.

Cuando vuelvo a la vista previa de mi escritorio, Elementor no ha aplicado los mismos cambios al dise√Īo de mi escritorio.

encabezados en Elementor

En serio, ¬Ņc√≥mo no puedes amar eso?

Si alguna vez ha luchado con el dise√Īo receptivo y ha luchado para que su contenido se vea bien en cualquier dispositivo, este es un verdadero cambio de juego .

Consejo profesional

Tambi√©n puede presionar ‘Cmd + Shift + M’ en una Mac, o ‘Ctrl + Shift + M’ en una PC para recorrer las vistas previas del dispositivo.

Pero chicos … se pone a√ļn mejor.

No solo puede controlar el estilo para diferentes dispositivos, sino que tambi√©n puede ocultar el elemento por completo .

configuraciones receptivas en Elementor

Y esto no se limita a elementos individuales, también funciona con secciones.

Si bien esta cantidad de control sobre su página también se presenta en otros creadores de páginas, Elementor fue el primero en lograrlo, y todavía es fuerte con una de las formas más fáciles de realizar una edición receptiva.

Theme builder

¬ŅSabes cu√°ndo encuentras un tema que realmente te gusta, pero a√ļn necesitas modificar ciertos aspectos para que se vea bien?

Especialmente el encabezado o el pie de p√°gina, porque nunca se ven exactamente como tu quieras.

¬ŅQu√© pasar√≠a si‚Ķ hubiera alg√ļn tipo de herramienta que le permitiera crear encabezados, pies de p√°gina y otros elementos de dise√Īo personalizados?

¬ŅY si pudiera implementarlos en todo su sitio con unos pocos clics del mouse?

S√≠, s√≠, me estoy preparando para hablar sobre Elementor Theme Builder .

¬ŅEntonces, c√≥mo funciona?

Como de costumbre, Elementor mantiene esto agradable y simple: lo inicia desde su panel de WordPress:

Generador de temas Elementor

Luego, simplemente haga clic en ‘Agregar nuevo’ y elija un tipo de plantilla y haga clic en ‘Crear plantilla’.

A los efectos de esta review, crearemos un nuevo encabezado.

creando el tipo de plantilla de encabezado en Elementor

A continuación, puede optar por crear su propio encabezado desde cero o utilizar una de las prácticas plantillas de encabezado predeterminadas que luego puede cambiar el estilo a su gusto.

plantillas de encabezado en Elementor

Y con unos pocos clics del mouse, puede crear un logotipo que se parezca m√°s a ti.

plantilla de encabezado editada en Elementor

Luego, todo lo que necesita hacer es hacer clic en ‘Publicar’ y usar la funci√≥n ‘Agregar condici√≥n’ para decirle a Elementor d√≥nde desea implementar su nuevo encabezado:

Oye, listo, tu nuevo encabezado se publica en todas las p√°ginas de tu sitio.

Puede seguir exactamente el mismo proceso para crear un pie de p√°gina nuevo y elegante para todo su sitio.

Y si comete un error, siempre puede hacer una copia de seguridad y cambiar las ‘Condiciones de visualizaci√≥n’ para el encabezado.

Entonces, ahora puede hacer que cualquier tema se adapte a su dise√Īo.

Pero se pone mejor. Con la nueva actualizaci√≥n, Elementor 3.0, Theme Builder le brinda muchas m√°s opciones de personalizaci√≥n al hacer que todo el sitio est√© disponible en un solo tablero.

Con el nuevo Theme Builder, puede realizar ajustes avanzados para:

  • Encabezados
  • Pies de p√°gina
  • P√°ginas
  • Publicaciones
  • P√°ginas de productos
  • P√°ginas de error

Y mucho m√°s, seg√ļn lo que necesites de √©l. Es una gran actualizaci√≥n para una herramienta que ya es poderosa, y el control adicional que brinda al usuario habitual es digno de menci√≥n.

Definitivamente una ventaja en nuestra review de Elementor.

Eso es muy bueno, Elementor. Bien hecho.

Bueno, cronometramos la actualización para esta review bastante bien, porque Elementor lanzó recientemente su generador de Popups.

¬°Verano!

Nota: Esto solo está disponible en la versión Pro.

Este es un gran movimiento de su parte por varias razones:

1. Muestra que escuchan las solicitudes de funciones de los clientes.
2. Ahora no necesitar√° un plugin por separado para crear Popups

Entonces, ¬Ņc√≥mo se usa?

Asumir√≠a que esta funci√≥n estar√≠a disponible como un widget, pero tiene que volver al panel de WordPress para encontrarla … en plantillas.

plantillas emergentes en Elementor

Ahora, lo extra√Īo es que inicia el proceso de creaci√≥n de Popups desde el panel de WordPress en lugar de hacerlo desde Elementor … pero edita la ventana emergente desde el espacio de trabajo normal de Elementor.

cómo agregar una nueva ventana emergente en Elementor
cómo crear una nueva ventana emergente en Elementor

Parece que tendr√≠a m√°s sentido integrarlo en la propia interfaz, ¬Ņno?

Por supuesto, el razonamiento detrás de la ubicación del generador de Popups probablemente se basa en la frecuencia con la que el desarrollador web promedio crea un popup.

¬ŅQuiz√°s una vez a la semana?

Y siempre puede usar la nueva funci√≥n ‘Finder’ para volver al tablero cuando lo necesite.

Pero yo divago.

opciones para mostrar Popups en Elementor

Hay docenas de plantillas emergentes diferentes para elegir , con algo que se adapta a casi cualquier persona, incluidos los tipos de marketing.

Un buen toque es que puede elegir qu√© categor√≠a de ventana emergente le gustar√≠a de un men√ļ desplegable:

  • Barra inferior
  • Cl√°sico
  • Volar en
  • Pantalla completa
  • Hola bar
  • En este lado

Simplemente haga clic en la plantilla que elija y luego haga clic en el bot√≥n verde ‘Insertar’ como se ilustra aqu√≠:

cómo insertar un popup en Elementor

Otra opción es cerrar la ventana de la biblioteca y luego se lo lleva directamente al editor de Elementor.

Desde aqu√≠ puedes dise√Īar tu propia ventana emergente desde cero, si realmente quieres:

Dise√Īo emergente desde cero en Elementor

Obtiene una cantidad vertiginosa de opciones de dise√Īo que le permiten modificar no solo el contenido de la ventana emergente, sino tambi√©n sus dimensiones, forma, combinaci√≥n de colores, etc., etc.

ventana emergente en Elementor

Algunas caracter√≠sticas muy interesantes en la pesta√Īa ‘Avanzado’ incluyen poder evitar que los visitantes cierren la ventana emergente con la tecla de escape y deshabilitar el desplazamiento de p√°gina hasta que interact√ļe con la ventana emergente.

Configuración emergente en Elementor

Esto atrae la peque√Īa parte de Sith que hay en m√≠, pero espero que no se abuse de estas caracter√≠sticas.

Despu√©s de todo, algunas personas est√°n m√°s llenas de Sith que otras. *tos*

Tambi√©n obtienes docenas de animaciones de entrada para jugar en la pesta√Īa de configuraci√≥n emergente principal: “Lightspeed” es mi favorito actual.

Configuración de animación emergente en Elementor

Una vez que est√© satisfecho con el dise√Īo de su ventana emergente, puede hacer clic en ‘Publicar’.

Aquí es donde se le presentan las diversas configuraciones para controlar el comportamiento de su nueva creación:

Condiciones : tu eliges dónde desea que aparezca la ventana emergente, por ejemplo, una página frente a todo su sitio. También puede establecer varias condiciones para la misma ventana emergente.

Desencadenadores : esto es lo que hace que se dispare la ventana emergente en primer lugar. Todos los sospechosos habituales est√°n cubiertos, incluidos “en el desplazamiento”, “al hacer clic” y “en la intenci√≥n de salida de la p√°gina”, entre otros.

Reglas avanzadas : tiene configuraciones para cubrir cosas como mostrar la ventana emergente solo despu√©s de que su visitante lea x n√ļmero de p√°ginas, o haya visitado su sitio x n√ļmero de veces, por ejemplo.

Configuración avanzada emergente en Elementor

Integración del Autorespondedor?

Por lo tanto, puede crear Popups de aspecto asombroso y configurarlas para que se activen de muchas formas diferentes.

¬ŅQu√© tan bien se integra el generador de Popups con MailChimp, GetResponse o Aweber ?

Idealmente, esto sería un asunto de apuntar y hacer clic.

Pero no lo es.

S√≠, puede integrar cualquiera de las respuestas autom√°ticas anteriores con la ventana emergente … solo tiene que obtener una clave API y luego averiguar qu√© elementos de formulario en su ventana emergente necesita modificar para que funcione.

O, alternativamente, puede usar un plugin como Mailoptin, aunque no lo he probado personalmente. Simplemente viene recomendado por la buena gente de Elementor, y confío en ellos.

Sería bueno tener la funcionalidad de respuesta automática directamente dentro de Elementor porque más plugins = más potencial para que las cosas salgan mal.

Custom fields

Bien, sabemos que esto es territorio de nerds puro, pero tenemos que cubrirlo.

¬ŅPor qu√©?

Porque Elementor hace que administrar estas cosas sea muy f√°cil.

Y si está interesado en el ecommerce, aunque sea remotamente, debe aprender un poco más sobre cómo funcionan los datos dinámicos y los campos personalizados.

También tiene mucho sentido si crea sitios afiliados, y verá por qué mientras le explicamos cómo usa realmente los campos personalizados y los datos dinámicos dentro de este generador de páginas.

Antes de continuar, debemos mencionar que hay tres requisitos para los ejemplos que usamos aquí:

  1. Elementor Pro
  2. El plugin de interfaz de usuario de tipo de publicación personalizada
  3. El plugin Campos personalizados avanzados.

Una vez que tenga instalados los dos plugins anteriores, es hora de crear sus tipos de publicaciones personalizadas.

Pero espera … ¬Ņqu√© son los tipos de publicaciones personalizadas?

Estos son b√°sicamente tipos de publicaciones que no encajan con el dise√Īo de publicaci√≥n est√°ndar.

Ejemplos típicos de esto serían las páginas de productos para una tienda de ecommerce, o tal vez el portafolio de un artista que necesita incluir precios y otra información.

Son los tipos de publicaciones en las que necesita agregar información adicional de una manera que no es compatible con una instalación estándar de WordPress.

Entonces, sigamos adelante y configuremos algunos tipos de publicaciones personalizadas para Dave’s Bike Emporium.

Hacemos esto desde el panel de WordPress, utilizando el plugin de IU del tipo de publicación del cliente.

tipo de publicación personalizada en Elementor

Una vez que agregue un nuevo tipo de publicaci√≥n, ver√° que tiene una nueva opci√≥n de men√ļ en su panel de WordPress.

En este ejemplo es ‘Bicicletas; porque … bueno … Dave vende bicicletas.

opci√≥n de men√ļ despu√©s de agregar el tipo de publicaci√≥n personalizada en Elementor

A continuación, debemos agregar una taxonomía para nuestras publicaciones personalizadas.

Una taxonomía es básicamente una forma de agrupar datos similares en un solo lugar.

Para esto, llamamos a nuestra taxonom√≠a “biketype” .

Tambi√©n debemos adjuntarlo a nuestro tipo de publicaci√≥n personalizada de “Bicicletas”.

taxonomía de publicaciones personalizadas en Elementor

Ahora necesitamos agregar diferentes subcategorías (Nuevos tipos de bicicletas) dentro de nuestra estructura de publicación personalizada:

subcategorías para el tipo de publicación personalizada en Elementor

Est√° bien, ese es el tipo de publicaci√≥n personalizada que se ocupa, pero ¬Ņc√≥mo agregamos los detalles del producto?

Aquí es donde entra en juego Advanced Custom Fields (ACF).

¬ŅCu√°ndo llegamos a c√≥mo usar estas cosas en Elementor?

Paciencia Padawan… .paciencia.

Estos son los campos personalizados que creamos agregando nuevos ‘Grupos de campos’ en ACF:

cómo crear campos personalizados en Elementor

El asterisco rojo al lado de cada ‘Etiqueta’ significa que es un campo obligatorio, en caso de que se lo pregunte.

Ahora, cuando hace clic en ‘Agregar nuevo’ debajo de su tipo de publicaci√≥n personalizada ‘Bicicletas’, aparece esta pantalla:

ejemplo de datos de tipo de publicación personalizada en Elementor

Una vez que haya agregado algunos datos de muestra aqu√≠, es hora de obtener y crear una plantilla de publicaci√≥n √ļnica en Elementor.

Nota: Haga esto desde ‘Plantillas’ en su panel de control y luego ‘Agregar nuevo’.

cómo crear una sola publicación en Elementor

Puede optar por utilizar una de las elegantes plantillas de Elementor o hacerlo solo con un dise√Īo pr√°ctico.

Elegimos el enfoque manual porque ya hab√≠amos dise√Īado un encabezado b√°sico para Dave’s Bike Emporium anteriormente.

La primera pieza de contenido din√°mico que agregamos a nuestra p√°gina de plantilla es una imagen de fondo.

Hacemos esto haciendo clic en la secci√≥n en la que queremos trabajar y yendo a la pesta√Īa ‘Estilo’.

Desde all√≠, hacemos clic en el tipo ‘Fondo’ y luego en el bot√≥n de datos ‘Din√°mico’.

cómo agregar una imagen de fondo en Elementor

Tambi√©n agregamos un widget din√°mico de ‘T√≠tulo de publicaci√≥n’ de la categor√≠a de widget ‘√önico’; estos se llamaban ‘Elementos del tema’ hasta que una actualizaci√≥n reciente lo cambi√≥.

De hecho, si no ha usado Elementor durante algunos meses, podría sentirse un poco perdido.

Peque√Īa queja, pero ya est√°.

widget de título de publicación dinámica en Elementor

Al agregar el widget “T√≠tulo de la publicaci√≥n”, se inserta autom√°ticamente el nombre de la primera bicicleta de nuestros tipos de publicaciones personalizadas: la “Hustle 2000”.

Ese final de las cosas funciona bastante bien.

Pero, ¬Ņqu√© hay de dise√Īar otras partes de su dise√Īo con datos din√°micos?

Agreguemos un cuadro de icono y luego usemos campos personalizados para arrastrar algunos datos a él.

cuadro de icono y campos personalizados en Elementor

Una caracter√≠stica que realmente me gust√≥ es la capacidad de obtener una vista previa de su dise√Īo final con diferentes datos antes de presionar el bot√≥n de publicar.

vista previa de una plantilla con campos personalizados

De esa manera, puede probar que su plantilla funciona para cada una de sus publicaciones / productos / portafolios personalizados, etc.

Finalmente, haga clic en ‘Publicar’ cuando est√© listo, y luego elija d√≥nde desea que se aplique la plantilla, es decir, todo su sitio frente a ciertos tipos de publicaciones o p√°ginas.

Entonces, ¬Ņqu√© tan bien maneja Elementor los tipos de publicaciones personalizadas, los campos personalizados y los datos din√°micos?

Honestamente, una vez que entienda su estructura, dise√Īar estas p√°ginas con plantillas es muy f√°cil .

Incluso los principiantes completos podrían tener páginas dinámicas en funcionamiento en una tarde.

Las desventajas

Pero no es perfecto.

¬ŅPor qu√©?

Bueno, por algunas razones extra√Īas, Elementor olvida ciertos campos de datos cuando salgo de una p√°gina.

Esto sucedió incluso después de actualizar la página y verificar las vistas previas.

Para ser justos, esto podría ser algo que me falta, pero si ese es el caso, actualizaremos esta review nuevamente en el futuro.

¬ŅAlguna otra queja?

El dise√Īo del men√ļ de datos din√°micos es complicado y no es tan intuitivo.

Lo que queremos decir con eso es que cuando elige su campo ACF para colocar datos en la p√°gina, debe hacer clic en √©l nuevamente para elegir su clave en ‘Configuraci√≥n’

‚Ķ Y luego otro sub-sub-men√ļ para agregar texto antes o despu√©s de los datos din√°micos.

Cómo agregar datos en campos personalizados en Elementor

Simplemente se sentía torpe, a pesar de que realmente hace el trabajo.

Historial de deshacer y revisar

Bien, esta es un √°rea que estaba ansiosa por cubrir.

Todos cometemos errores al dise√Īar dise√Īos. Las cosas se mueven. Otras cosas se eliminan.

O te desconectas mentalmente durante unos segundos y haces algo catastr√≥ficamente tonto … pero no recuerdas qu√©.

Sucede.

Pero, ¬Ņqu√© pasa si simplemente desea deshacer una acci√≥n ?

Eso no deber√≠a ser demasiado dif√≠cil, ¬Ņverdad?

En versiones anteriores de Elementor, la falta de una funci√≥n ‘Deshacer’ fue una gran queja para m√≠.

Empiezo a sospechar que el equipo de Elementor revisa las revisiones de productos y encuentra los defectos m√°s evidentes en su producto … y luego los corrige de inmediato.

¬ŅMe est√°n acechando‚Ķ.?

Elementor ha pasado de no tener una funci√≥n “Deshacer” real a tener 2.5

El .5 es que puede usar CTRL + Z para deshacer manualmente sus cambios m√°s recientes, pero m√°s all√° de eso, debe confiar en la funci√≥n ‘Historial’ y la pesta√Īa ‘Revisiones’.

Las otras dos opciones para deshacer su “obra manual” est√°n disponibles a trav√©s del bot√≥n “Historial”.

Opción de historial en Elementor

Al hacer clic en “Historial”, aparecer√° una pantalla con dos pesta√Īas independientes: “Acciones” y “Revisiones”.

Las acciones son los cambios que realiz√≥ durante su sesi√≥n de dise√Īo actual. Para deshacer cualquier cambio que acaba de hacer, pase el mouse sobre √©l y ver√° una opci√≥n de “deshacer”.

Me gusta esto porque es bastante similar a lo que estoy acostumbrado a ver en otros programas de dise√Īo como Photoshop.

historial de acciones en Elementor

Si hace clic en la pesta√Īa ‘Revisiones’, ver√° una lista de cambios que datan de hasta 30 d√≠as.

Una vez que haya encontrado la review que busca, simplemente haga clic en el bot√≥n verde “Aplicar” .

historial de revisiones en Elementor

Funciona muy bien, bastante justo.

Pero…

En primer lugar, no es tan simple como hacer clic en un botón.

Requiere navegar a trav√©s de los men√ļs y obtener una vista previa de las diferentes revisiones antes de encontrar la correcta.

Alg√ļn tipo de sistema de nombres l√≥gicos ayudar√≠a a evitar que esto sea una molestia.

En segundo lugar, y este es el verdadero truco, esta función se basa en el sistema de revisiones de WordPress, lo que significa que las revisiones solo aparecen cada vez que presiona el botón guardar / actualizar.

Básicamente, si no has guardado tus cambios por un tiempo y realmente arruinas algo, se acabó el juego.

Lo que generalmente resulta en lagrimeo de cabello, rechinar de dientes y cuestionar tu lugar en el universo.

Consejo profesional

Tener un mes de revisiones puede parecer una buena idea, pero realmente pueden acaparar recursos y ralentizar su sitio.

¬ŅC√≥mo?

Porque cada review guardada agrega m√°s desorden e hinchaz√≥n a su instalaci√≥n de WordPress, aumentando el tama√Īo de la base de datos que ejecuta el programa.

Una soluci√≥n es utilizar ocasionalmente un plugin “limpiador” de la base de datos de WordPress, como este.

No he probado el plugin por mí mismo, por lo que aconsejaría hacer una copia de seguridad antes de ejecutarlo.

Pero me han dicho que hace un trabajo sólido al limpiar el historial de revisiones (así como otras cosas de la base de datos).

Aunque no es exactamente un factor decisivo, y realmente me gusta la función de historial de revisiones, todavía me sorprende que un pages builder tan bien pensado carece de un enfoque más visual para manejar las revisiones de páginas / sitios.

A√ļn as√≠, para una review justa de Elementor, de todos modos hacen un buen trabajo.

Copiar estilo y copiar pegar

Si ha estado en el mundo de los sitios web y los creadores de p√°ginas durante alg√ļn tiempo, comprender√° lo tedioso que puede ser a veces.

No es el proceso de dise√Īo y dise√Īo, eso es casi siempre lo divertido.

El tedio comienza cuando tienes que actualizar el estilo de varios elementos o secciones de tu sitio.

Por lo general, debido a un peque√Īo cambio que realiz√≥, ahora tiene que pasar al resto de su sitio.

Ingrese horas de trabajo no muy divertido.

Seguro que podr√≠as escribir un mont√≥n de CSS personalizado para esto … o podr√≠as esperar una soluci√≥n de apuntar y hacer clic.

Elementor obviamente escuchó los gritos de los desarrolladores que sufrían de RSI cuando introdujeron las funciones Copiar estilo y Copiar pegar a mediados de 2018.

Entonces, ¬Ņc√≥mo funcionan estas funciones?

Bueno, supongamos que acaba de crear un nuevo elemento con el que est√° bastante satisfecho:

Función Copiar estilo y Copiar pegar

Pero desea recrear ese estilo en otra parte de su dise√Īo.

cómo copiar el estilo del cuadro de iconos en Elementor

Urrghhh … genial, ahora tengo que entrar manualmente y actualizar el estilo de todos los dem√°s elementos.

simplemente podr√≠a usar la funci√≥n “Copiar estilo” de Elementor en su lugar.

Todo lo que necesita hacer es hacer clic con el bot√≥n derecho en el elemento de origen, el que desea copiar el estilo, y elegir “Copiar”.

Y luego haga clic derecho en el elemento de destino y elija “Pegar estilo”.

Función Copiar estilo y Copiar pegar en Elementor

Si no le gustan los cambios que ha realizado, simplemente haga clic derecho de nuevo y “Restablecer estilo”.

cómo restablecer el estilo en Elementor

¬ŅQu√© tan f√°cil es eso?

Una vez más, esto puede parecer una característica trivial para algunos, pero vale su peso en oro si necesita cambiar el estilo de un montón de elementos diferentes.

Entonces, ¬Ņqu√© pasa con la funci√≥n “Copiar y pegar” que mencion√© anteriormente?

Elementor ofrece una interfaz completa de Drag & Drop, que funciona muy, muy bien.

Pero, ¬Ņqu√© sucede si solo desea copiar una columna o secci√≥n completa en una parte diferente de la p√°gina?

Podr√≠as recrear los elementos en una nueva secci√≥n y luego atajar cosas aplicando la funci√≥n “Copiar estilo”.

O simplemente puede copiar y pegar toda la sección en una nueva parte de su página.

Que es exactamente lo que vamos a hacer.

Resalte la secci√≥n o elemento que desea copiar, en este caso estamos copiando una secci√≥n completa y seleccione “Copiar”.

Copiar función en Elementor

Luego, despl√°cese hasta la parte de la p√°gina donde desea colocarla y seleccione “Pegar”.

Pegar característica en Elementor

¬°Trabajo hecho!

Buena funci√≥n para ahorrar tiempo, ¬Ņverdad?

Copiar la función Pegar en Elementor

¬ŅQu√© es eso? ¬ŅQuieres poder copiar y pegar secciones enteras en otra p√°gina ?

No hay problema.

Simplemente copie su elemento o sección como hicimos en el ejemplo anterior,

Luego salga a su panel de WordPress. Abra la nueva p√°gina en Elementor y haga clic derecho donde desea colocar el contenido copiado.

Esta peque√Īa funci√≥n significa poder agregar secciones enteras a otras p√°ginas en segundos en lugar de (potencialmente) horas.

No nos volveremos hiperb√≥licos aqu√≠ y describiremos cualquiera de estas caracter√≠sticas como “cambiadores de juego”.

Pero una vez que se acostumbre a usarlos, le resultará difícil trabajar de otra manera.

Open Source

Vamos a levantar el ánimo de nuevo. 

Fácilmente, una de las mayores diferencias entre Elementor y otros creadores de páginas es que es de código abierto.

Eso significa … uhm … Google, ¬Ņqu√© significa?

Open Source: indica el software para el que el código fuente original está disponible gratuitamente y puede redistribuirse y modificarse.

Dado que el código está disponible gratuitamente, permite a los usuarios corregir errores, mejorar las funciones existentes e incluso introducir funciones completamente nuevas en el software.

De hecho, puede ver toda la “acci√≥n” en GitHub, aqu√≠ mismo.

Elementor Open Source

Como resultado, el desarrollo generalmente avanza m√°s r√°pido que con los creadores de p√°ginas “internos”. Y la mayor√≠a de la gente est√° de acuerdo en que el c√≥digo abierto es el camino a seguir.

Tambi√©n abre las puertas a √ļtiles plugins de terceros.

Los efectos de esto ya son evidentes al buscar ‘Elementor’ en el repositorio de plugins de WordPress:

B√ļsqueda de plugins de Elementor en WordPress

Todos estos son plugins de terceros dise√Īados para mejorar Elementor, y muchos de ellos son gratuitos.

Si bien algunos de ellos ofrecen mejoras menores, otros virtualmente otorgan superpoderes a Elementor.

Un buen ejemplo de esto son los plugins esenciales para Elementor.

plugins esenciales para Elementor

Este plugin agrega una pila de nuevos widgets a la biblioteca de Elementor y m√°s de 100 ‘Bloques’ listos para que los coloques en tus dise√Īos.

Hay muchos otros plugins de Elementor que me encantaría incluir aquí, pero ocuparía una publicación completa.

Hmmm … estad atentos a ese … quiz√°s.

Aunque es un poco complicado tener que instalar plugins encima de los plugins, siempre he sido un fan√°tico de este enfoque porque mantiene el producto principal delgado para aquellos que no necesitan todas las campanas y silbidos adicionales.

Apoyo y soporte de Elementor

No creo que haya visto tantos elogios por el apoyo como los que he visto con Elementor.

Donde esto normalmente se debe a un soporte de chat en vivo de primera categoría, ese no es el caso aquí.

De hecho, Elementor no ofrece soporte de chat en vivo .

En cambio, tiene algo a√ļn mejor.

Una comunidad activa y entusiasta de “Elementoristas” a su entera disposici√≥n.

Comunidad Elementors en Facebook

Me referí a esta comunidad varias veces a lo largo de la redacción de esta review, y sin duda continuaré haciéndolo mientras use Elementor.

¬°Es asombroso ver lo r√°pido que ha crecido esta comunidad! La √ļltima vez que lo comprob√© ten√≠a menos de 5.000 miembros.

En este momento, hay m√°s de 30,000 Elementorists que probablemente ya hayan respondido cualquier pregunta que pueda tener sobre el plugin.

opci√≥n de b√ļsqueda en Elemenor Community en Facebook

Si una b√ļsqueda se queda corta, pregunte en el grupo.

Es una comunidad colaborativa y, por lo general, recibirás respuestas a raudales aproximadamente una hora después de la publicación.

Aparte de eso, encontr√© su canal de YouTube muy √ļtil .

Canal de Youtube de Elementor

Elementor tiene muchas partes móviles y puede ser abrumador cuando comienzas a usarlo, especialmente si nunca antes has usado un pages builder.

En mi opinión, sus videos son el punto de partida perfecto, ya que cubren todas las características principales de la herramienta.

Incluso tienen listas de reproducci√≥n dedicadas a los novatos, como la de ‘Introducci√≥n’, y su ‘C√≥mo hacer en un minuto’ es otra opci√≥n s√≥lida para los principiantes.

También tienen documentación detallada, si eres más lector.

SI por alguna razón todavía necesita ayuda, hay una opción VIP, pero solo está disponible para miembros Pro.

Soporte técnico de Elementor

Para ser honesto, creo que eso es justo dada la calidad de las opciones de soporte gratuitas disponibles para ti.

El soporte premium es b√°sicamente un sistema de tickets.

Por supuesto, hice una solicitud para probar qué tan confiable era para esta review.

Formulario de contacto de Elementor

Como se esperaba, fue estelar.

En general, no te puedes quejar.

Y si lo hicieras, seguro que te cuidarán 

¬ŅEres PRO, o no?

A lo largo de esta review, solo he mencionado brevemente la versión paga de Elementor, también conocida como Pro.

Y aunque Elementor es, en su mayor parte, un plugin gratuito, la actualización le brinda un poco más de potencia de fuego.

Precios de Elementor

Entonces, ¬Ņcu√°les son los beneficios de ser Pro?

No escribiré una novela sobre esto, porque puedes sacarlo directamente de la boca del caballo, aquí mismo.

Lo que sí haré, sin embargo, es comentar las diferencias más notables entre la versión gratuita y la versión Pro.

Entonces, para empezar, tienes acceso a un montón de widgets adicionales.

Widgets de Elementor Pro

Si bien clasificar√≠a algunos de estos como un poco efectivos, hay algunas adiciones muy √ļtiles.

Otras características importantes de la versión Pro de Elementor incluyen:

  • Un builder de formularios visual
  • Integraci√≥n con WooCommerce
  • Generador de Popups y plantillas
  • El builder de temas

También podrá utilizar widgets globales que se pueden utilizar en todo su contenido, así como en otras áreas de su sitio.

Widgets globales de Elementor

Cubrí los widgets globales anteriormente en la review, por lo que probablemente no se sorprenderá de que recomiende Pro solo por esta razón.

En cuanto a las plantillas de página, le complacerá saber que la actualización desbloqueará una gran cantidad de plantillas de página premium para que pueda incursionar.

Plantillas de p√°gina de Elementor Pro Premium

Y el √ļltimo que mencionar√© le brinda una capa adicional de control de dise√Īo con ‘CSS personalizado en vivo’.

Entonces, si eres un ninja de hojas de estilo, apreciar√°s este.

Css personalizado de encabezado de Elementor

Personalmente, siento que la idea de un creador de p√°ginas es eliminar la necesidad de CSS por completo. Casi lo veo como una red de seguridad para cuando la herramienta no puede funcionar.

Por esa razón, no creo que esto deba ser una función Pro.

¬ŅElementor es adecuado para ti?

Ahora que he cubierto todas las diferentes características y funciones de Elementor, sopesando los pros y los contras y brindando mi experiencia a lo largo del camino, hablemos de TI.

Al igual que con cualquier herramienta, Elementor no será la opción correcta para todos , por lo que quiero llegar al final de quién es exactamente para quién es adecuado este pages builder.

Bloggers low cost

Voy a salir y decirlo.

Elementor es un sue√Īo h√ļmedo para blogueros econ√≥micos. Quiero decir, vamos‚Ķ ¬° es 100% gratis !

Descarga de la versión gratuita de Elementor

Sí, hay una versión Pro.

Y s√≠, como mencion√© antes, ofrece algunas adiciones √ļtiles.

Pero este no es su producto “freemium” habitual.

En la mayor√≠a de los casos, freemium significa tener acceso a una peque√Īa porci√≥n del pastel. Una porci√≥n que est√° plagada de restricciones pesadas y, a menudo, molestas y / o publicidad intrusiva.

Elementor le da acceso a la MAYOR√ćA del pastel sin quitarle nada significativo al producto. En mi opini√≥n, es 100% utilizable sin ser Pro .

¬ŅEso significa que no deber√≠as actualizar?

Bueno, no del todo .

Como dije antes, hay algunas ventajas definidas de la versi√≥n paga, pero estas son cosas sin las que puedes vivir absolutamente si … bueno …

Sin billetera de dinero
(Lo siento, solo tenía que tirar eso allí).

Blogueros principiantes

¬ŅElementor es adecuado para principiantes?

A pesar de la ligera curva de aprendizaje que experimenté, probablemente debido a que estoy demasiado familiarizado con el funcionamiento de Thrive Architect, sigo pensando que es un GRAN pages builder para principiantes .

Por supuesto, si nunca antes ha usado un pages builder, le costar√° acostumbrarse, pero creo que se puede decir lo mismo de cualquier pages builder con las mismas capacidades.

Hubo algunos casos en los que las cosas simplemente no tenían sentido: las plantillas globales frente a las no globales son un buen ejemplo.

Pero en la mayoría de los casos, una simple publicación en el grupo de Facebook aclaró rápidamente mi confusión.

En general, si es un principiante y está buscando un pages builder que le brinde la menor cantidad de fricción con la mayor cantidad de flexibilidad, Elementor es una excelente opción.

Desarrolladores web

Toqué esto anteriormente en la review, pero quería desarrollarlo aquí.

Elementor no est√° orientado a los especialistas en marketing, lo que significa que le faltan algunas funciones .

Cosas en las que nosotros, como especialistas en marketing, podemos confiar en un pages builder.

Dicho esto, Elementor ha avanzado a pasos agigantados.

Un ejemplo perfecto de esto es la integración de los autorespondedores más populares a través de API:

Integración de la API de respuestas automáticas en Elementor

Entonces, si eres un usuario de GetResponse , Drip, Mailchimp, ConvertKit (y otros), entonces no tendr√°s que depender de hackear Elementor para que juegue a la pelota.

Un √°rea en la que todav√≠a cae es que no hay forma de ejecutar A / B testing en Popups o suscripciones .

Esto es una verdadera lástima considerando que puede integrar Elementor con la mayoría de las plataformas de respuesta automática / marketing por email, pero su capacidad para aprovechar al máximo sus funciones es limitada.

Pero en lo que me gustaría centrarme aquí es en las cosas positivas.

Sí, Elementor tiene fallas, pero sigue siendo un gran pages builder para los especialistas en marketing en casi cualquier nivel.

Conclusión

No hay duda de que Elementor es uno de los mejores, si no el mejor, pages builder gratuito del mercado.

Este plugin de WordPress repleto de funciones incluso se mantiene firme frente a muchos creadores de páginas premium más establecidos, y el desarrollo no muestra signos de desaceleración.

Quizás lo más interesante es que es el primer pages builder de open source.

En cuanto a Elementor Pro, ya es una actualización atractiva a pesar de estar en su infancia, e imagino que la mayoría de las características nuevas a partir de este momento serán exclusivas para los miembros.

¬°Sin embargo, solo el tiempo lo dir√°!