Se ha lanzado una nueva actualización importante de Elementor. Pasamos de la versión 2.xa Versión 3.0. Esta nueva versión viene con una nueva forma de crear sitios web usando WordPress y Elementor. Intentaremos convertir estas nuevas funciones.
¿Cuáles son las principales novedades de Elementor 3.0?
Elementor 3.0 viene con 3 adiciones principales que son: características del sistema de diseño, nuevo generador de temas y mejoras significativas en el rendimiento.
Características del sistema de diseño
¿Alguna vez te has preguntado qué hacen las grandes empresas para desempeñarse tan bien sin importar la plataforma en la que estén? Todo lo que crean parece coherente y tiene el mismo diseño. Eso es posible gracias a lo que se denomina "Design System". Según UnxDesign.cc, el sistema de diseño es:
La única fuente de verdad que agrupa todos los elementos que permitirán a los equipos diseñar, realizar y desarrollar un producto. Por lo tanto, un sistema de diseño no es un entregable, sino un conjunto de entregables. Evolucionará constantemente con el producto, las herramientas y las nuevas tecnologías.
Colectivo UX
Implementando un sistema de diseño, mantenga a todo su equipo consistente en torno a un lenguaje de diseño y también revolucione la forma en que trabaja su equipo y garantice un flujo de trabajo más rápido.
Create Amazing Websites
Con el mejor generador de páginas gratuito Elementor
Empezar ahoraLas características del sistema de diseño de Elementor 3.0 incluyen:
- Colores globales
- Nuevo panel de configuración del sitio
- Fuentes globales
Veamos en profundidad cómo esto le ayudará a crear mejores sitios web profesionales.
Colores globales
Elementor 3.0 agrega una nueva forma de trabajar con los colores del sitio. Ese nuevo método se llama Global Colors.
Global Colors te ayuda a cambiar el color desde una ubicación y a actualizar ese color en todos los lugares donde se usa.
Comenzará a elegir los colores globales básicos para su sitio web. Luego, vaya a cualquier estilo de color en Elementor y defínalo como uno de los cuatro colores. Tenga en cuenta que puede agregar tantos colores personalizados en la Lista global.
Es ahora que entran las variables CSS. Regrese a Global Colors y cambie uno de los colores. La combinación de colores de todo su sitio cambia según el nuevo Color global. ¿Alguna vez has experimentado algo tan fácil?
También podrá diseñar un color global diferente desde dentro de la entrada de control o crear un nuevo color global, todo usando el mismo selector de color dentro de la entrada de control.
Configuración del sitio
La creación de la primera configuración de diseño para un sitio web consume mucho tiempo. Tendrás que hacer malabares entre el código del tema, el Personalizador, functions.php. Son razones suficientes para justificar sus dolores de cabeza.
La nueva Configuración del sitio muestra varias herramientas de configuración. De esa manera, seguirá haciendo todas estas tareas desde un solo lugar.
Para comenzar, dentro de cualquier página que edite con Elementor, en el panel lateral izquierdo, haga clic en el ícono superior izquierdo. Eso te hará cambiar al panel de Configuración global.
Dentro de ese panel de Configuración global, encontrará:
- Diseño: para configurar la configuración de diseño predeterminada de Elementor, como el ancho del contenido predeterminado o el diseño de página predeterminado.
- Identidad del sitio: personalice sus identidades entre sitios, como el logotipo, el título, el lema e incluso el favicon.
- Estilo del tema: personalice los elementos HTML no relacionados con Elementor (generalmente establecidos por el tema) para Tipografía, Botones y Campos de formulario.
- Lightbox: defina el estilo predeterminado de Elementor Lightboxes
- Colores y fuentes globales: le permite configurar los colores y fuentes globales que se aplican a su sitio web.
Fuentes globales
Los colores y la tipografía son parte de los componentes de construcción de cualquier sitio web. Utilizando la misma lógica de la función Colores globales, este es un nuevo método de trabajar con los estilos de texto de su sitio.
Con las fuentes globales, todas las configuraciones de tipografía se pueden aplicar globalmente. Ahora puede configurar todas las configuraciones de tipografía de su sitio a nivel mundial, incluida la familia de fuentes, el tamaño y la escala de fuente, el grosor de fuente, la transformación de fuente, el estilo de fuente, la decoración de fuente, la altura de línea, el espaciado de letras e incluso la configuración de respuesta. También podrá establecer estas configuraciones para cada widget que contenga un texto y personalizar sus propias fuentes globales.
Con una Tipografía correctamente diseñada, podrás aplicar estos cambios de forma global.
Todo el sitio visualizado y organizado en un solo lugar
Si bien el conocido Constructor de temas se ha convertido en el líder de la industria en términos de tener una descripción general completa del diseño del sitio web, esta nueva interfaz de usuario va aún más lejos. El nuevo Theme Builder ahora le brinda una descripción general de un sitio web completo de una manera muy intuitiva.
Ese Theme Builder proporciona una descripción general del sitio, esto incluye todas las partes del sitio: encabezado, pie de página, plantilla de página global, plantilla de publicación global y más. Se puede obtener una vista previa de cada parte del sitio, lo que facilita mucho la tarea de diseñar un sitio web completo.
Mejoras de rendimiento
Mientras una aplicación crece, es obvio que el desarrollador debería preocuparse por el rendimiento. Las actualizaciones realizadas en Elementor 3.0 se realizan para garantizar una buena infraestructura de código que ha resultado en notables mejoras de rendimiento.
Ha habido una gran cantidad de depuración de elementos DOM, lo que hace que Elementor se renderice más rápido. Esto definitivamente debería mejorar la clasificación de velocidad de su página y la experiencia general para los usuarios en su sitio web.
Concretamente, ¿qué ha cambiado en términos de velocidad de página?
Elementor 3.0 proporciona mejoras significativas para los procesos de representación del lado del servidor y la forma en que Elementor representa los valores CSS dinámicos. Esto le permite incorporar elementos y valores dinámicos en todo su sitio web. Por ejemplo, puede crear una plantilla para las publicaciones del sitio y decidir que desea mostrar la imagen destacada de cada publicación como fondo detrás del título de la publicación.
En el fondo, cuando Elementor prepara una publicación para enviarla al navegador, analiza la publicación en busca de valores dinámicos, los recupera y, si incluyen algún valor de CSS, imprime ese CSS.
Con Elementor 3.0, el tiempo dedicado a este proceso se ha reducido sustancialmente. Gracias a los valores dinámicos que se almacenan para cada una de tus publicaciones. Una vez que se ha almacenado esa lista, cada vez que alguien visita la publicación, Elementor va directamente a esta lista, lo que acelera el proceso. Los valores dinámicos afectados por esta optimización incluyen imágenes de fondo, colores y mucho más. Esta mejora trae una notable reducción de las cargas del servidor.
Resumen de la actualización de Elementor 3.0
Como mencionamos anteriormente, esta versión viene con beneficios interesantes que realmente deberían impactar su trabajo diario. Lo que hemos pasado :
Las características del sistema de diseño que le ayudan a trabajar de manera más consistente y eficiente.
El nuevo Theme Builder es una poderosa herramienta visual para administrar cada parte de su sitio web desde un solo lugar.
Mejoras de rendimiento para una mejor experiencia de usuario.
Elementor 3.0 sin duda lo llevará al límite como creador web profesional. Si aún no lo ha hecho, actualice ahora a Elementor Pro. También debería considerar leer nuestra publicación que explica por qué Elementor es sin duda el mejor creador de páginas gratuito en WordPress.
