El 28 de junio fue lanzada la nueva versión de Elementor con una nueva y mejorada interfaz de edición, además de una serie de mejoras interesantes que mejoran la capacidad de crear páginas espectaculares sin escribir una sola línea de código.
Esta nueva versión es una actualización importante, es por ello que llevo más tiempo del que nos tienen acostumbrados. Se mantuvo cerca de un mes en período de pruebas de forma que cuando viera la luz estuviera en las mejores condiciones y sin errores.
En este artículo vamos a hacer un repaso de los cambios y mejoras que presenta esta nueva versión, muchos de ellos son sugerencias de los mismos usuarios.
Nuevo y espectacular interfaz de edición
https://player.vimeo.com/video/223443264
Secciones y columnas
En esta versión, se han separado los ajustes de la sección y la configuración de la columna, de forma que ahora resulta mucho más sencillo seleccionar las secciones y columnas.
Los ajustes de la sección aparecen en la mitad superior de cada sección, e incluyen las opciones de edición, duplicar, añadir, guardar y eliminar.
Los ajustes de la columna se ajustan desde la esquina superior izquierda de cada columna y aparecen como un único icono. Si nos colocamos sobre este icono se abrirá el menú de la columna, que incluye: editar, duplicar, añadir y eliminar.
Mejora dede las opciones de arrastrar y soltar
Se ha reescrito completamente la función de arrastrar y soltar, lo que la hace aún más precisa que antes. Al arrastrar un widget, una columna o una sección, toda la acción se lleva a cabo sin problemas. Por otra parte, el marcador azul que aparece antes de soltar el elemento en su lugar es más claro.
Añadir Nueva Sección / Plantilla
Hemos añadido un botón de añadir a los ajustes de la sección. Esto permite a los usuarios añadir una nueva sección o plantilla entre las secciones existentes. Ya no tendrá que arrastrar las secciones desde la parte inferior de la página.
No importa donde estés en la página, al hacer clic en este botón se abrirá la opción añadir sección / plantilla, que te permiten añadir secciones y plantillas existentes entre las secciones.
Ancho de las columna adaptable al dispositivo
El control de la columna de Elementor siempre ha sido uno de los puntos fuertes. Con esta nueva característica añadida, ahora se puede personalizar completamente diferentes anchos de columna en todo tipo de dispositivos.
¿Quieres 4 columnas en el navegador de escritorio, 3 en el móvil y sólo 2 en la tableta? No hay problema. Ahora es posible mediante el ajuste de ancho de columna adaptable.
También se ha añadido la opción de establecer un valor numérico específico para cada columna. Se puede establecer el ancho de columna ya sea arrastrando la escala en la pantalla o introduciendo el valor específico para el ancho de la columna. La creación de diferentes diseños para los distintos dispositivos es mucho más fácil ahora.
Índice Z – Organizar la superposición de capas
El índice Z puede parecer desalentador, pero en realidad es bastante simple. El índice Z determina el orden en que se muestran los elementos, cuanto mayor es el indice queda más arriba, pudiendo superponerse sobre otros elementos.
En diseño mediante CSS, hay 3 ejes en la página. Eje x, que es la dirección que va de izquierda a derecha. Eje y, la dirección que va hacia arriba y hacia abajo. Finalmente, hay un eje z invisible que funciona como una especie de orden en que se representan los elementos a modo de capas, de forma similar a como se hace por ejemplo en Photoshop.
Se ha añadido el control sobre z-index para cada elemento (accesible a través de la opción de Opciones avanzadas> Estilo Elemento > z-index).
Esto te permite jugar con cada elemento y su orden en comparación con otros elementos. Puede llevarlo hacia arriba, empujarlo hacia abajo y así sucesivamente.
Un ejemplo de cuándo se puede utilizar esta función es con una tabla de precios de 3 columnas, si deseas colocar la columna de la tabla de precio central frente a las otras dos tablas de precios, por lo que la columna central parece cubrir parte por encima de ellas.
Posibles conflictos con márgenes negativos
Con el fin de añadir compatibilidad con la nueva opción de índice z, se ha eliminado el z-index: 1;de la clase.elementor-widget-wrap.
Si has utilizado los márgenes negativos en el pasado, puedes experimentar problemas con las páginas anteriores creadas con Elementor. Con el fin de hacer frente a estos problemas, puedes utilizar el nuevo control z-index.
Efecto ‘hover’ sobre cualquier elemento
Ahora elementor te permite crear un estilo para cuando te posicionas sobre cada elemento de forma personalizada. Esto hace que el resultado sea más atractivo ya que permite la creación de efectos más impactantes cuando el usuario se desplaza sobre los elementos de la página.
Control de versiones
Las actualizaciones de software siempre suponen un gran dilema entre los usuarios. Por un lado, queremos mantenerno al día e incorporar las nuevas características que se incorporan constantemente. Por otro lado, las actualizaciones de software a veces conducen a fallos y errores molestos. Cuando se trata de WordPress, puede dar lugar a tiempos de inactividad o errores de diseño.
Una de las principales prioridades es proporcionar a los usuarios una transición sin problemas cada vez que una nueva versión de Elementor es liberada. Es por esto que se han introducido recientemente dos nuevas características para ayudar a hacer cambios más fácil y más seguro.
Opción rollback
Ahora puedes volver a una versión anterior de Elementor y Elementor Pro con un clic, desde la página de configuración de Elementor (Elementor> herramientas> versiones). Esto es un ahorro de tiempo en la búsqueda de los archivos de código fuente de la versión anterior, y luego subirlos a través de FTP …
La forma en que funciona, después de actualizar a una nueva versión y revisar el funcionamiento sobre tu sitio. En caso poco probable de que algo funcione mal, siempre puedes volver a la versión anterior. De esta manera su sitio en vivo puede revertir a cuando estaba funcionando correctamente, y se puede probar lo que salió mal con la nueva versión en un entorno de pruebas.
Después de volver a la versión anterior, siempre se puede actualizar a la versión más reciente con un clic.
Las pruebas beta
Ahora probar las versiones beta de Elementor es mucho más fácil.
En el pasado, había que descargar la versión beta y de forma manual instalarlo en su entorno de pruebas. Esto requiere una nueva instalación para cada versión beta.
Ahora, puedes registrarte para ser un beta tester desde el panel de control de Elementor (de Elementor > herramientas > version control), y recibir una notificación cada vez que una nueva versión beta esté disponible. Esto te mantendrá a la ultima en cuanto avances, y ayudará a monitorear y solucionar posibles errores cada vez que una nueva versión beta.
Esta característica es especialmente útil para los desarrolladores de sitios web y diseñadores, así como los desarrolladores de plug-in, ya que será capaz de probar la compatibilidad de la versión de subir Elementor y su página web.
Simplificar el proceso de inscripción a la prueba beta es otro esfuerzo que se ha hecho con el fin de poner el foco en opinión de los usuarios y su papel en la mejora de Elementor.
Si deseas unirte a la lista de correo para versiones beta, ve a my.elementor.com/beta y registra tus datos.
Configurar la página de importación cuando añades una plantilla
Ya en marzo, se añadió la configuración de página, que te permiten controlar las diversas configuraciones de toda la página.
Al guardar una plantilla, se ahorra toda la configuración de página. Si has añadido CSS personalizado a la página, esto también se guardará en la plantilla. Con esta nueva opción, se ha añadido la opción de importar la configuración de página cuando se inserta una plantilla en la página.
Si inserta una plantilla con una determinada configuración de la página, te preguntará si deseas reemplazar la configuración de página actual. La elección de la opción de insertar la plantilla con sus valores de configuración de la página significan que perderás la configuración anterior, así que tenlo en cuenta a la hora de utilizar esta función.
La pregunta si se debe incluir la configuración de página sólo aparecerá si la plantilla que estás insertando incluye cambios en la configuración de página. Si no se hicieron cambios, se insertará inmediatamente la plantilla.
Control de la etiqueta HTML para la sección y Columna
Hasta ahora, sólo se podía cambiar la etiqueta HTML del elemento de título, que aparece en los widgets. Para este elemento, que tenía la posibilidad de elegir div, h1, h2…
Ahora, se puede controlar la etiqueta HTML de las secciones y columnas, de forma que te permite elegir la etiqueta HTML para ellos.
- Las secciones tienen las siguientes etiquetas:
header, footer, aside, article, nav, div - Las columnas tienen las siguientes etiquetas:
div, article, aside, nav
Por ejemplo, el establecimiento de una sección para tener un encabezado o pie de página de etiquetas le permitirá crear una página que tiene una estructura jerárquica completa.
Este es un gran avance en términos de la semántica de página y capacidades de jerarquía código dentro Elementor. Esto es muy significativo en términos de hacer páginas amigables para SEO y ganar control sobre cómo los motores de búsqueda ven tus páginas.
Añadir sombras
Ha pasado casi un año desde que se lanzo esta característica. Añadir sombras es todavía una tendencia de diseño web y también han influido en la personalización de elementos. Ahora se ha ampliado las opciones de añadir sombra y creado una nueva opción para la inserción sombras.
Esto significa que la sombra podría aparecer dentro del elemento en lugar de fuera de ella, la apertura de una amplia gama de nuevas opciones de diseño para la adición de sombras.
Sin seguimiento de enlaces por los robots
Hay una demanda por parte de los profesionales de SEO, que aprecian el código limpio y eficiente que se genera con Elementor. Una de las principales peticiones era la de añadir la capacidad de definir enlaces que no fueran seguidos por los buscadores, con el fin de permitir controlar cómo se propagan cuando añades un enlace externo a tu sitio.
Se ha añadido la opción de hacer todos los enlaces rel="nofollow". Esta opción se añade a la opción actual de «abrir en una nueva ventana», y aparece para cada widget que tienes posibilidad de escribir una URL.
Espacio entre los elementos
Desde la primera versión, la separación vertical por defecto entre widgets (widgets que están apilados verticalmente) ha sido 20 píxeles. Esto significaba que cada vez que nuestros usuarios querían tener un espaciado predeterminado diferente, se tenía que definir a través de CSS personalizado. Ahora, se ha añadido un control global sobre este atributo, bajo Controles> Elementor> Configuración> pestaña Estilo. También puedes controlarlo a nivel de columna.
Edición para dispositivos móvil añadido a más widgets
Una de las prioridades es proporcionar una solución completa para la personalización de páginas adaptables a dispositivos.
Ahora, se ha añadido la posibilidad de personalizar la edición móvil de Imagen, cuadro de imagen, imagen del carrusel, divisor y la altura mínima de la sección. El objetivo es no dejar ningún elemento fuera de tu alcance. Hoy en día se puede crear un estilo completamente diferente en diferentes dispositivos.
Añadido paneles a la configuración Elementor
El panel de control de Elementor es cada vez más complejo. A pesar de que muchos ni siquiera son conscientes de esta zona, se está ganando popularidad porque se estan añadiendo cada vez mas opciones, como por ejemplo las opciones de control de versiones que se han mencionado antes.
Para que sea más organizada, se ha separado la configuración y herramientas en pestañas, con el fin de proporcionar una mejor y más organizada experiencia del usuario al navegar por los diferentes menús.
7 comentarios
Se han currado esta nueva actualización. Bravo por Elementor!!
Lo que me pregunto es que si han incluido el «nofollow» a todos los enlaces que se abran en nueva ventana, ya no se podrán tener enlaces follow para nueva ventana, que a veces también interesa. Por lo que hubiese sido mejor incluir un desplegable dando la opción de elegir el nofollow.
Por lo demas todo genial!
SI la verdad es que cada vez este plugin se pone mejor. La opción de nofollow y abrir en nueva ventana son independientes, asi que si no marcas la opción de añadir nofollow te debería funcionar.
Este post esta bueno, me ha venido util ya que estoy preparando un nuevo curso para hacer sitios web con Generatepress y Elementor Pro
Gracias, La intención es que sea información útil
Wow! Excelente artículo, cada vez me enamoro más de elementor. Gracias!
Gracias, yo antes usaba otro, pero la facilidad de uso y la comunidad que tiene este es genial.