Elementor 3.0: Ajustes, colores, tipografías globales y mejoras de velocidad ¡hacía falta!

Si has venido sufriendo las últimas actualizaciones de Elementor estás de enhorabuena porque la versión 3.0 de Elementor es por fin una actualización que merece la pena.

Ajustes globales del sitio

Ahora hay un panel de ajustes del sitio que muestra montones de configuraciones para toda la web, para que sin salir de Elementor tengas un único lugar en el que configurar todos los ajustes de tu web.

En cada página que estés editando con Elementor puedes ir al panel izquierdo y, haciendo clic en el icono superior izquierdo ir al panel de ajustes globales.

En este panel de ajustes globales encontrarás:

  • Identidad del sitio: Para personalizar la identidad de tu web, o sea, el logotipo, título, descripción e incluso el favicon.
  • Diseño: Define los ajustes de la estructura por defecto para Elementor, como el ancho por defecto para el contenido o la estructura de página por defecto.
  • Caja de luz: Configura todos los estilos por defecto de las cajas de luz emergentes de Elementor.
  • Estilos del tema: Aquí podrás personalizar todos los elementos HTML que no son de Elementor (normalmente configurables en el tema), como tipografías, botones, imágenes y campos de formularios.
  • Colores y fuentes globales (esto lo explico abajo en detalle)

Colores globales

La versión 3.0 de Elementor incorpora un nuevo método de trabajar con los colores del sitio, los colores globales.

Con los ajustes de colores globales puedes cambiar todos los colores desde un único sitio, y hacer que los colores que modifiques se cambien automáticamente en todos los módulos en los que estén.

Lo primero es elegir los colores globales básicos de tu sitio, y luego ir a cualquier estilo de color de Elementor y configurarlo para que sea uno de los cuatro colores principales.

También puedes añadir tantos colores personalizados como quieras en la lista global, y ponerles un nombre a tu gusto.

Cuando cambies uno de los colores en los colores globales cambiará todo el esquema de colores de tu web acorde con el nuevo ajuste de color global. Más fácil imposible, y sin tocar ni una sola línea de código CSS.

También puedes asignar un color global distinto desde cada control, y crear un nuevo color global, todo usando el mismo selector de colores dentro de cada control.

Si te dedicas a diseñar webs para clientes esto es una gozada, pues puedes hacer cambios en el esquema de colores de una web y que se apliquen a todas las páginas y entradas en vez de tener que editar una a una.

A partir de ahora puedes configurar, editar y quitar cualquier color global desde un único sitio, en unos pocos clics.

Fuentes globales

Los colores y las tipografías son la base fundamental del diseño de cualquier web. Y si usamos la misma lógica que hemos visto arriba de los colores globales, deberíamos poder cambiar las tipografías de un modo rápido y sencillo.

En Elementor 3.0, con los ajustes de fuentes globales, todos los ajustes de tipografía se pueden configurar globalmente.

Ahora vas a poder configurar globalmente todos los ajustes de tipografías de tu web, incluidos:

  • Familia de fuentes.
  • Tamaño y escala de fuentes.
  • Peso de las fuentes.
  • Transformación de las fuentes.
  • Estilo de fuentes.
  • Decoración de fuentes.
  • Altura de línea.
  • Espaciado de letras.
  • Ajustes de adaptación a dispositivos móviles.

También podrás aplicar estos ajustes a cada widget que contenga texto, y personalizar tus fuentes globales más allá de la lista básica.

Una vez hayas configurado la tipografía de tu sitio podrás hacer cambios que afectarán a todas las áreas de texto de tu web, desde los ajustes de fuentes globales, y ver exactamente qué fuentes globales se han aplicado en cada parte.

Maquetador de temas

El maquetador de temas de Elementor es una aplicación basada en React, que proporciona una visión general del sitio, incluyendo todas las partes del mismo: cabecera, pie de página, plantilla de página global, plantilla de entrada global y mucho más. Cada parte del sitio está a tu alcance de manera intuitiva, haciendo que la tarea de diseñar una web completa sea mucho más fácil.

El nuevo maquetador de temas te permitirá echar un vistazo a toda la estructura del sitio de forma visual. Ver qué partes están activas y cuáles no, gestionar qué plantilla se aplica a las diferentes áreas de tu web, y tener un fácil acceso para cambiar, actualizar o añadir contenido a tu gusto.

Cada parte de la web tiene una vista previa automática de la imagen y una captura de pantalla de la plantilla real. Esto te permite obtener una «vista de pájaro» visual de todo tu sitio, para que puedas identificar la plantilla exacta que deseas editar.

¿Cómo funciona?

Para empezar a construir tu sitio con el nuevo maquetador de temas, haz clic en el icono de la hamburguesa en la parte superior izquierda del editor, y luego haz clic en «Maquetador de temas». También puedes acceder a él desde la barra superior de administración y usando un atajo CMD / CTRL + Mayúsculas + 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 una web nueva, y no tienes ninguna parte todavía, haz clic en cualquier parte y constrúyela desde cero. Es recomendable comenzar con una nueva cabecera (sólo para no perder de vista la visión global…)

Después de construir la cabecera, puedes pasar a diseñar partes adicionales del sitio e insertarlas en cualquier página que desees.

Mejoras de rendimiento y velocidad

Esta vez se han realizado algunas actualizaciones importantes al código y la infraestructura de Elementor, que hacían falta de verdad, y han resultado algunas importantes mejoras de rendimiento.

Se ha reducido el número de elementos DOM, y ahora Elementor muestra las páginas más rápido.

Esto mejorará la velocidad de las páginas y la experiencia general de los usuarios en tu web.

Elementor 3.0 incluye mejoras significativas en los procesos de renderizado del lado del servidor y en la forma en que Elementor renderiza valores CSS dinámicos.

Elementor permite incorporar elementos y valores dinámicos en tu web. Por ejemplo, puedes crear una plantilla para las entradas del sitio y decidir si quieres mostrar la imagen destacada de cada entrada como fondo detrás del título de la misma.

De fondo, cuando Elementor prepara una entrada para enviarla al navegador, escanea la entrada en busca de valores dinámicos, los busca y, si incluyen algún valor CSS, lo imprime. Este proceso es «costoso» – lo que significa que consume tiempo y recursos.

En Elementor 3.0 se reduce sustancialmente el tiempo empleado en este proceso. Esto se hace almacenando una lista de valores dinámicos para cada entrada. Una vez que se ha creado esa lista, cada vez que alguien visita la entrada, Elementor va directamente a esta lista, haciendo así que el proceso sea más rápido y eficiente. 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.


Bueno, y esto es lo que tiene que ofrecer Elementor 3.0 ¿lo has probado? ¿a que hacían falta estos cambios?

¿Prefieres ver un resumen de las novedades en vídeo? Aquí lo tienes…

Y, recuerda, ahora puedes obtener Elementor Pro con un importante descuento.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(4 votos, promedio: 5)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

9 comentarios en “Elementor 3.0: Ajustes, colores, tipografías globales y mejoras de velocidad ¡hacía falta!”

  1. Saludos cordiales.

    Desgraciadamente, como viene siendo habitual en WordPress, la UX ha empeorado. La usabilidad ahora tiene bastante menos sentido.

    El 3.0 nos ha usurpado el Personalizador de WordPress para algunas funciones, con lo cual, es recomendable no usarlo. Es decir, algunas cosas funcionan, otras no…pues lo mejor es no llevarse sustos o cabreos y utilizar un tema que tenga el personalizador al mínimo. Adiós GeneratePress.

    Por otro lado, si utilizamos el theme Hello, vamos a tener que maquetar mínimo una plantilla para que salgo algo sin descuadrar que no sea creado por Elementor. Es decir, si utilizamos sólo WordPress, este tema tiene ese defecto de descuadre.

    Como indicaba, todo esto se soluciona con apenas dos simplezas, pero que no son nada intuitivas. Un botón que sustituya al personalizador sería necesario (sin tener que entrar en una página editada con Elementor para entrar a los Ajustes del Sitio) y una maquetación mejor sin necesidad de utilizar Elementor para editar (Editor Clásico o Gutenberg).

    1. Eso es debido a – creo yo – que Elementor está lanzado en su carrera de independizarse de WordPress, momento en el que dejaré de publicar nada sobre él en el blog. Y no es un mal de WordPress sino de otros desarrolladores.

      Están metidos de lleno en ofrecer un servicio completo, y los veo dentro de nada compitiendo con Wix y Automattic en soluciones – aparentemente – nocode, vamos, hosting con builder de toda la vida.

      Yo lo veo ¿tú?

      1. Saludos para ambos
        Perdonad que me meta en vuestra conversación; pero vine a la zona de comentarios para preguntar a Fernando si (teniendo en cuenta las nuevas características y funcionalidades de Elementor) considera oporturno prescindir de la utilización de un tema o plantilla como GeneratePress o Astra y usar HelloTheme cuando he visto vuestro hilo.
        Soy nuevo en éste mundillo y estoy intentado desarrollar un sitio web. Había pensado utilizar Elementor como maquetador y Astra como plantilla; pero ahora tengo la duda si será preferible utilizar HelloTheme.
        Un saludo y gracias por vuestros aportes (algo se pega).

      2. Hola Fernando. Es la primera vez que escribo en tu blog y es para darte toda la razón en que Elementor va a ir por libre a medio plazo… yo personalmente ya no estoy trabajando con este maquetador visual.
        Aparte de Divi, qué te parece la alternativa de Beaver Builder???
        Muchas gracias!!!

        1. Beaver Builder está muy por detrás de Divi, a años luz.

          Mi consejo, si ya te manejas con algún maquetador actualmente, da igual si Elementor, Divi o el que sea, es que no lo dejes, que sigas ganándote la vida con él, pero dejes un rato al día, a la semana, cuando puedas, y empieces a realizar el ejercicio de replicar tus páginas maquetadas con estos builders solamente con bloques nativos del editor de WordPress y, si acaso, con ayuda de algún bloque más de tantas colecciones que hay.

  2. Hola Fernando, este es un tema ajeno a elementor pero haber si me puedes ayudar en esto, en mi carrera por cambiar los correos automaticos de worpress y hacerlos mas vistosos, ¿sabes alguna alternativa a Better Notifications for WP?¿Cual usas tu si es que usas algun plugin de este tipo que cambia los correos automaticos de wordpress y ademas los activa y desactiva cuando lo necesitas?
    Un saludo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido