Explore el futuro de Elementor: Editor V4 Alpha Funciones e innovaciones

Editor V4 Alpha introduce una opción para empezar con CSS Un marco básico que proporciona clases y estados reutilizables, mejoras de rendimiento, un sistema de estilo unificado y controles de estilo totalmente adaptables que están diseñados para mejorar la eficacia y la coherencia de la creación de sitios web.

A medida que el diseño web ha ido evolucionando con el paso de los años, los retos a los que se enfrentan los creadores de sitios web han aumentado, y muchos experimentan problemas similares:

Dificultades a la hora de aplicar estilos a varios elementos de un sitio web de forma coherente.
Duplicación del trabajo al actualizar el mismo estilo en varios lugares.
Limitar la capacidad de respuesta obligando a utilizar CSS personalizado u ocultar elementos.
Disminución del rendimiento debido a un diseño complejo
Diferencias de interfaz entre widgets

Editor V4 aborda estos problemas con un potente marco centrado en CSS que proporciona funciones de nivel profesional sin escribir una sola línea de código.

La primera versión alfa del Editor V4 ya está disponible como experiencia opcional, lo que le brinda la oportunidad de explorar las nuevas funciones a su propio ritmo. Puedes probar estas nuevas funciones, aportar tus comentarios y seguir utilizando las funciones conocidas de V3 mientras seguimos ampliando y mejorando la experiencia de V4.

Para empezar a utilizar Editor V4 Alpha, actualice a la versión Elementor 3.29, vaya a Elementor > Configuración > Editor V4 y siga los pasos de activación. Tenga en cuenta que esta es una versión alfa temprana y sólo debe utilizarse en sitios de ensayo o prueba, evitar su uso en un entorno de producción.

Estiliza una vez, aplica en todas partes - usa Clases.

Imagínese crear un sitio web con muchos botones que deben compartir el mismo diseño. En el pasado, tenía que diseñar cada botón uno por uno, o recurrir a métodos alternativos. Ahora, el sistema de clases de Editor V4 le permite:

Cree colecciones de estilos reutilizables que puedan aplicarse a varios elementos
Actualice un estilo en un lugar y todos los lugares que lo utilicen reflejarán inmediatamente el cambio.
Mantener la coherencia del diseño en todo el sitio

El sistema de clases introduce dos tipos de clases:

Clase local Cada elemento obtiene automáticamente una clase local única (mostrada en rosa) que tiene la mayor prioridad de estilo y no puede ser eliminada. Garantiza que los estilos específicos de cada elemento no sean anulados por otras clases.
Clase Mundial Puede crear y nombrar su propia clase global (mostrada en verde) para aplicarla a cualquier elemento que necesite compartir estos estilos. Cuando actualiza una clase global, todos los elementos que la utilizan se actualizan simultáneamente. Puede eliminar las clases globales de los elementos sin eliminar la propia clase, lo que facilita la experimentación con diferentes diseños en tiempo de diseño.

Definir estilos interactivos sin escribir código: con los Estados

Utilice estados (pseudoclases) para hacer su sitio más interactivo. Puede definir el aspecto de los elementos cuando los usuarios interactúan con ellos, por ejemplo creando los estados hover, focus y activate. De este modo, puedes diseñar experiencias interactivas atractivas sin tener que escribir código.

Para añadir un estado, simplemente haga clic en los tres puntos situados junto a la clase a la que desea aplicar el estado y seleccione el estado Hover, Active o Focus. Los cambios que defina sólo se aplicarán al estado seleccionado. Los cambios en un estado no afectarán a los demás, lo que te permite controlar con precisión los elementos interactivos. Lo mejor de todo es que puedes aplicar una experiencia de interacción consistente en todo el sitio utilizando estados con clases globales.

Gestionar y organizar sus clases con el Gestor de clases

El Gestor de clases le proporciona un centro de mando para mantener la coherencia de los estilos de su sitio web y le permite:

Eliminar o renombrar clases desde una ubicación central
Cambio de prioridad y jerarquía de clases mediante arrastrar y soltar
Ver una vista de organización de todas las clases globales
Comprender la cascada de estilos, utilizando indicadores de clase

Cuando trabaje con clases y estados, los indicadores codificados por colores le ayudarán a comprender la cascada de estilos. Cada color tiene una función diferente:

Puntos rosas: estilos de las clases locales
Punto verde: Estilos de clases globales
Puntos naranjas: estilos conflictivos a tener en cuenta
Puntos grises: estilos heredados de otras clases

Estas señales visuales proporcionan información instantánea mientras trabajas, ayudándote a entender de dónde vienen los estilos y cómo interactúan.

Fichas de estilo unificadas para simplificar el flujo de trabajo

Editor V4 introduce una pestaña de Estilos unificados para todos los elementos, a diferencia de V3, donde cada widget tenía un panel de Estilos independiente.

La principal ventaja de la pestaña Estilo uniforme:

La configuración de contenidos y funciones se mantiene en la pestaña General
Todas las opciones de estilo visual se encuentran en la pestaña Estilos
Aprenda el sistema una vez y aplíquelo en todas partes
Acceso coherente a potentes funciones de estilo en todos los elementos

La pestaña Estilo uniforme incluye amplias secciones que proporcionan un control total:

apertura (jerga ajedrecística): Definir el comportamiento y la estructura de la pantalla
Espaciado: establece controles de enlace para los márgenes y el relleno.
Tamaño: definir anchura y altura, establecer restricciones
Posicionamiento: selecciona el método de posicionamiento y controla el Índice Z
Tipografía: acceso a importantes opciones de estilo de texto
Contexto: crear diseños ricos en capas con un potencial ilimitado
Bordes: aplicar estilos de borde coherentes o diferentes
Efecto: añadir varias capas de sombra y otros efectos

Mejore el rendimiento de su sitio web con una única envoltura DIV

Editor V4 introduce un sistema mucho más limpio DOM que afecta directamente al rendimiento del sitio. Cada elemento utiliza ahora un único DIV en lugar de varios DIV anidados como en versiones anteriores. HTML de salida, reduce el tamaño de la página y reduce la complejidad del navegador al renderizar la página, lo que se traduce en las siguientes ventajas:

Código más limpio y renderizado más rápido
mejorado SEO clasificaciones
Mejor experiencia para el visitante

Aunque la versión alfa ya ha mostrado mejoras de rendimiento, a medida que Editor V4 madure, estas ventajas serán aún más significativas cuando se utilicen los elementos recién optimizados en un sitio web.

Controla cada atributo de estilo para cada dispositivo

Editor V4 ha sido completamente mejorado en términos de diseño responsivo, ofreciendo un control sin precedentes y abordando las limitaciones de los widgets V3, donde sólo ciertas opciones de control tenían funcionalidad responsiva.

En Editor V4, todas las propiedades de estilo pueden ajustarse para todos los dispositivos, sin excepciones. Basta con cambiar de dispositivo en la barra superior para realizar ajustes que sólo afectan a un tamaño de pantalla específico. Esto significa que puedes establecer estilos completamente diferentes para dispositivos móviles y de escritorio ¡sin tener que escribir una sola línea! CSS.

Creación de diseños ricos en capas con repetidores de estilo

Editor V4 introduce el Repetidor de estilos, que permite crear estructuras jerárquicas para fondos y efectos:

Añade varias imágenes de fondo, degradados y colores
Cree efectos de sombra complejos y superpóngalos.
Arrastre las capas para ajustar la prioridad
Duplicar, ocultar o eliminar capas mediante operaciones contextuales

Las herramientas de degradado mejoradas proporcionan un control avanzado, permitiéndole añadir tantas paradas de color como necesite y colocarlas con precisión para crear efectos visuales asombrosos.

El repetidor de estilo funciona actualmente para fondos y sombras de caja, y se añadirá soporte para más opciones de estilo en el futuro.

Nuevos elementos del Editor V4

Editor V4 Alpha introduce siete nuevos elementos atómicos:

Bloque DIV
Flexbox
leyenda
pasajes
imágenes
botones
SVG

Cada elemento demuestra la filosofía de V4: marcado simplificado, patrones de estilo coherentes y rendimiento mejorado. Este enfoque modular garantiza actualizaciones de diseño más rápidas y escalables para todo el sitio.

Perfectamente compatible con V3

Teniendo en cuenta que Elementor ya cuenta con más de 18 millones de sitios web, estamos lanzando Editor V4 por fases, lo que nos permite recopilar comentarios y mejorar continuamente la experiencia antes de que se convierta en el editor predeterminado.

Editor V4 es ahora perfectamente compatible con V3:

Puede utilizar elementos V3 y V4 en la misma página.
Siga utilizando los widgets de la V3 mientras explora progresivamente las funciones de la V4.
Los widgets V3 siguen siendo totalmente funcionales y pueden colocarse en diseños V4 (y viceversa).
No afecta a los flujos de trabajo existentes

Primeros pasos con V4

Notas importantesEsta versión alfa está pensada para pruebas y uso exploratorio. Recomendamos utilizarla únicamente en sitios de ensayo o prueba, no en sitios de producción.

Esta versión alfa es sólo el principio. En los próximos meses, se introducirán más funciones, se mejorará la funcionalidad existente y se perfeccionará Editor V4 en función de nuestros comentarios para convertirlo en el creador de sitios web más potente e intuitivo del mercado.

¡En futuras versiones, veremos - variables, propiedades personalizadas, CSS IDs y mucho más!

resúmenes

Con la introducción de Editor V4Elementor Se avecina una importante renovación. Las nuevas funciones no sólo mejoran la flexibilidad y la eficacia del diseño, sino que también ofrecen a los usuarios controles de diseño adaptable más potentes y un mejor rendimiento. Ya sea a través de clases reutilizables, estilos interactivos o estructuras DOM simplificadas, Editor V4 proporciona a todos los creadores de sitios web un flujo de trabajo más eficiente y una experiencia de diseño más refinada.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres