Elementor 3.0 finalmente está aquí, y brinda una forma completamente nueva de crear sitios. Prepárate para una versión especial 3 en 1 que incluye: características del sistema de diseño, nuevo generador de temas y mejoras de rendimiento significativas.
Cada lanzamiento de nuevas funcionalidades hace avanzar a Elementor, pero las principales producen saltos sustanciales para el flujo de trabajo de nuestros usuarios.
Elementor 1.0 en 2016 trajo un enfoque completamente nuevo al diseño visual de WordPress. Elementor 2.0 en 2018 incluyó un generador de temas revolucionario.
Ahora, en 2020, estoy encantado de presentar Elementor 3.0 , que viene con no una, sino 3 características innovadoras diferentes: características del sistema de diseño, nuevo generador de temas y mejoras significativas de rendimiento.
Tomó meses de trabajo y una reconstrucción integral de nuestra infraestructura, pero el arduo trabajo valió la pena. Elementor 3.0 incluye mejoras tanto básicas como profesionales y una forma completamente nueva de crear sitios web. Sigue leyendo para descubrir cómo esta versión revolucionará tu flujo de trabajo y te permitirá crear sitios web más rápidos y consistentes que nunca.
Características del sistema de diseño
Administra el sistema de diseño de tu sitio web desde un solo lugar
¿Cómo se las arreglan las grandes marcas como Spotify, Apple o Nike para ofrecer una experiencia consistente y ganadora en todas las plataformas?
No importa qué página de destino, página web, banner o activo vea, mantienen la misma apariencia. Esto es gracias a algo llamado sistema de diseño.
Pero, ¿qué pasaría si te dijéramos que los creadores web como tu ahora pueden ofrecer el mismo tipo de consistencia de gran marca a sus clientes?
Presentamos las características del sistema de diseño. Implementa un sistema de diseño, revoluciona tu flujo de trabajo y manten a todo tu equipo consistente en un lenguaje de diseño.
Revoluciona tu flujo de trabajo y crea sitios web más rápidos y consistentes.
¿Qué es un sistema de diseño?
- Nuevo panel de configuración del sitio, incluida la identidad del sitio, la configuración de la caja de luz, los estilos de tema y más
- Colores globales
- Fuentes globales
Exploremos cada una de estas funciones y veamos cómo te ayudarán a crear sitios web más profesionales.
Características del sistema de diseño N.1
Configuración del sitio
Definir la configuración básica de un sitio web puede llevar bastante tiempo.
Juggling Theme code, Customizer, functions.php… olvídalo.
Agregamos un nuevo panel de Configuración del sitio, que muestra muchas herramientas de configuración en todo el sitio. De esta manera, puedes permanecer dentro de Elementor y tener un lugar para configurar todas las configuraciones de tu sitio. ¡Dulce!
Dentro de cualquier página que edites con Elementor, ve al panel izquierdo y haz clic en el icono superior izquierdo. Cambiará al panel de Configuración global.
Dentro del panel de Configuración global encontrarás:
- Identidad del sitio: personaliza la identidad entre sitios como logotipo, título, lema e incluso favicon
- Diseño: define la configuración de diseño predeterminada de Elementor, como el ancho del contenido predeterminado o el diseño de página predeterminado
- Lightbox: establece todo el estilo predeterminado de Elementor Lightboxes
- Estilo del tema: personaliza tus elementos HTML que no sean de Elementor (generalmente establecidos por el tema) para tipografía, botones, imágenes y campos de formulario.
- Colores y fuentes globales (se explicarán en detalle a continuación)
Características del sistema de diseño N.2
Colores globales
La versión 3.0 introduce un nuevo método para trabajar con colores del sitio: Global Colors.
Los colores globales te permiten cambiar el color en un solo lugar y actualizar ese color en todos los lugares donde lo colocaste.
Comienza eligiendo los cuatro colores globales básicos de tu sitio. Luego, ve a cualquier estilo de color en Elementor y configúralo para que sea uno de los cuatro colores. También puede agregar tantos colores personalizados a la lista global y nombrarlos como desees.
Ahora la magia de las variables CSS entra en acción. Vuelve a colores globales y cambia uno de los colores. La combinación de colores de todo tu sitio cambia de acuerdo con el nuevo color global. Mezclar y combinar colores durante el proceso de diseño web nunca ha sido tan fácil.
Creamos esto para que puedas ver el color global real dentro del control, eliminando todas las conjeturas. También podrás asignar un color global diferente desde dentro del control, o crear un nuevo color global, todo usando el mismo selector de color dentro del control.
¿Ofreces servicios para mantener, actualizar o rediseñar sitios existentes? ¡Entonces esté es tu día de suerte! Esta función es perfecta para realizar cambios en la combinación de colores de un sitio web sin la necesidad de revisar todas sus páginas y publicaciones y editar cada una de ellas individualmente. A partir de ahora puedes configurar, editar y eliminar cualquier color global de un lugar con unos pocos clics.
Características del sistema de diseño N.3
Fuentes globales
Los colores y la tipografía son los componentes básicos de cualquier sitio web. Usando la misma lógica de los colores globales, creamos un método completamente nuevo para trabajar con los estilos de texto de su sitio.
Con las fuentes globales, todas las configuraciones de tipografía se pueden configurar globalmente. Ahora puedes configurar todos los ajustes de tipografía de tu sitio a nivel global, incluidos: familia de fuentes, tamaño y escala de fuente, peso de fuente, transformación de fuente, estilo de fuente, decoración de fuente, altura de línea, espaciado de letras y Configuración responsiva.
Podrás aplicar esta configuración a cada widget que contenga texto y personalizar tus propias fuentes globales más allá de la lista básica.
Una vez que configures la tipografía de su sitio, podráa realizar cambios que afecten a todas las áreas de texto que se establezcan con las fuentes globales.
También puedes ver exactamente qué fuentes globales se aplicaron.
El nuevo creador de temas
Todo tu sitio visualizado y organizado en un solo lugar
Aunque Theme Builder de Elementor se ha convertido en el líder de la industria en términos de diseño visual completo de sitios web, decidimos hacerlo aún mejor.
Presentamos el nuevo Theme Builder, un solo lugar para administrar TODO su sitio de una manera visual e intuitiva.
Theme Builder es una aplicación basada en React, que proporciona una descripción general del sitio, incluidas todas las partes del sitio: encabezado, pie de página, plantilla de página global, plantilla de publicación global y más. Cada parte del sitio está intuitivamente al alcance, lo que hace que la tarea de diseñar un sitio web completo sea mucho más fácil.
El nuevo Theme Builder le permitirá echar un vistazo a la estructura completa de su sitio visualmente. Vea qué partes están activas y cuáles no, administre qué plantilla se aplica a diferentes áreas de su sitio web y tenga fácil acceso para cambiar, actualizar o agregar contenido como desee.
Cada parte del sitio obtiene una vista previa automática de la imagen y una captura de pantalla de la plantilla real. Esto le permite obtener una «vista de pájaro» visual de todo su sitio, para que pueda identificar la plantilla exacta que desea editar.
Cómo funciona
El siguiente párrafo te convertirá en un ‘super-constructor de temas’, por delante de la mayoría de los creadores web, por lo que te sugiero que preste especial atención.
Para comenzar a construir tu sitio usando el nuevo constructor de temas, haz clic en el icono de hamburguesa en la parte superior izquierda del editor, luego haz clic en el ‘constructor de temas’. También puedes acceder a él desde la barra de administración superior y usando un atajo CMD / CTRL + Shift + E. Esto es aplicable desde cualquier lugar de tu sitio.
Ahora verás todas las partes esenciales que se necesitan para crear un sitio completo.
Si es un sitio nuevo y aún no tienes partes, haz clic en cualquier parte y constrúyelo. Sugerimos comenzar con un nuevo encabezado (solo para estar ‘al tanto’ de las cosas …)
Después de crear el encabezado, puedes pasar al diseño de partes adicionales del sitio e insertarlas en cualquier página que desees.
Nuevo generador de temas:Finalmente, una vista panorámica de todo tu sitio web.
Característica extra: Mejoras en el rendimiento
Siempre estamos haciendo ajustes y mejoras de rendimiento, pero esta vez, hemos realizado algunas actualizaciones importantes en nuestro código e infraestructura, que resultaron en algunas mejoras de rendimiento notables.
Hemos reducido la cantidad de elementos DOM y hemos hecho que Elementor renderice sus páginas web más rápido.
Esto mejorará la clasificación de velocidad de tu página y la experiencia general de los usuarios en tu sitio web.
¿Qué cambió en términos de velocidad de carga de la página?
Elementor 3.0 incluye mejoras significativas en los procesos de representación del lado del servidor y en la forma en que Elementor representa los valores CSS dinámicos.
Elementor te permite incorporar elementos y valores dinámicos en tu sitio web. Por ejemplo, puedes crear una plantilla para las publicaciones del sitio y decidir que deseas mostrar la imagen destacada de cada publicación como fondo detrás del título de la publicación.
Detrás de la escena, cuando Elementor prepara una publicación para enviarla al navegador, escanea la publicación en busca de valores dinámicos, los recupera y, si incluyen algún valor de CSS, imprime ese CSS. Este proceso es «costoso», lo que significa que consume mucho tiempo y recursos.
En Elementor 3.0, redujimos sustancialmente el tiempo dedicado a este proceso. Esto se hace almacenando en una lista de valores dinámicos para cada publicación. Una vez que se ha creado esa lista, cada vez que alguien visita la publicación, Elementor va directamente a esta lista, lo que hace que el proceso sea más rápido y ágil. Los valores dinámicos afectados por esta optimización incluyen imágenes de fondo, colores y más.
Esta mejora trae consigo una reducción sustancial de las cargas del servidor, el tiempo hasta el primer byte y, como resultado, un tiempo de carga mucho más rápido para los visitantes del sitio. ¿Notaste una mejora en el rendimiento en uno de sus sitios? Háznoslo saber en los comentarios.
En Elementor, consideramos el rendimiento del sitio como un tema de alta prioridad, y continuaremos mejorando en ese frente en las próximas versiones.
Nota importante sobre la actualziación
Elementor 3.0 es una versión principal e incluye algunos cambios sustanciales en la infraestructura. Antes de actualizar a la versión 3.0, asegúrate de hacer una copia de seguridad de su sitio y, si estás utilizando un complemento de terceros para Elementor, asegúrese de que sea compatible con Elementor 3.0.
Asegúrate de actualizar a la versión principal de Elementor 3.0 antes de actualizar Pro 3.0.
Para obtener más respuestas a las preguntas relacionadas con 3.0, visita nuestra página de preguntas frecuentes sobre 3.0 .
¡Es hora de dar una vuelta a Elementor 3.0!
Como mencionamos, esta versión está repleta de ventajas y creemos que realmente impactará en tu trabajo diario. Resumamos:
Las características del sistema de diseño te ayudan a trabajar de manera más consistente y eficiente.
El nuevo constructor de temas es una poderosa herramienta visual para administrar cada parte de tu sitio web sin código.
Nuestras mejoras de rendimiento mejorarán el tiempo de carga de tu sitio.
Elementor 3.0 te ayudará a obtener una ventaja como creador web profesional. Si aún no lo has hecho, actualice ahora a Elementor Pro y haz de 2020 el año en que tu negocio se dispara.
Este artículo es una traduccion del artículo publicado en el blog oficial de Elementor Introducing Elementor 3.0: Design System Features, New Theme Builder & Significant Performance Improvements
