El nuevo editor de backend de Divi es una característica completamente nueva que trae el poder del constructor visual al backend. El nuevo editor backend tiene una interfaz familiar (como el constructor clásico) pero con todas las características nuevas que no estaban disponibles para el constructor clásico hasta ahora. Entendemos que cualquier cambio (ya sea grande o pequeño) requiere algunos ajustes en su flujo de trabajo habitual. En este tutorial, daré un resumen práctico de todas las nuevas funciones ahora disponibles en Divi y su editor de fondo. Creo que te sorprenderán las mejoras y te emocionará probarlas en tu próximo proyecto.
Aquí hay un desglose de las características que cubriremos en este tutorial:
- Velocidad
- Modos de vista con representación de página 100% precisa
- Nueva estructura del menú del constructor
- Configuración del constructor
- Copiar y pegar elementos Divi entre páginas
- Búsqueda filtrada
- Acceso rapido
- Administrador de color y sugerencias de colores mágicos
- Buscar y reemplazar
- Extender estilos
- Arrastrar y soltar Carga de archivos
- Contenido dinámico
- Opciones de desplazamiento
- Edición masiva y selección múltiple
Accediendo al nuevo Divi Backend Editor
La nueva experiencia de Divi Builder (Divi 3.18) incluye las nuevas características del Divi Backend Editor que se analizan en este artículo. Fue lanzado para integrarse sin problemas con el reciente lanzamiento de WordPress 5.0. Para obtener más información sobre cómo acceder a la nueva experiencia Divi Builder con WordPress 5.0, consulte esta publicación .
¡Ahora vayamos a esas increíbles características!
#1 Nueva interfaz de usuario de Divi Backend Editor
El nuevo backend de Divi Builder tiene algunos elementos nuevos con los que quizás deba familiarizarse primero. En su mayor parte, las cosas se verán muy familiares, pero hay algunas diferencias importantes.
- El botón «Usar Visual Builder» se reemplazó por un botón «Crear en el front-end». Esto es solo un cambio en la redacción. El botón le permitirá diseñar su página en la parte delantera como lo ha hecho Visual Builder en el pasado.
- Los modos de vista ahora disponibles en el backend (más sobre esto más adelante).
- La nueva interfaz de usuario de Divi Builder, que por defecto es el modo de vista de estructura alámbrica.
- Enlace para volver a Classic Divi Builder. Esto le permite ir y venir del constructor Divi clásico y del nuevo constructor Divi.
#2 Velocidad
La velocidad es una de esas características que es difícil mostrarle en una publicación, pero es tan importante para el flujo de trabajo que pensé en mencionarla aquí. Es posible que algunos de ustedes hayan evitado usar el Visual Builder en el pasado porque no era tan rápido como el Classic Backend Builder. Pero ahora puede disfrutar de una experiencia de construcción visual mucho más rápida en el back-end y en el front-end gracias al aprovechamiento de la memoria caché . ¡Ve y compruébalo por ti mismo!
#3 Modos de visualización con representación de página 100% precisa
Los modos de vista en el nuevo Divi Backend Editor es donde puede alternar rápidamente del modo de vista de estructura alámbrica predeterminado a otros modos de vista (escritorio, tableta, teléfono inteligente y alejamiento) que le brindan una experiencia de construcción visual en el backend.
Así es como se ve cada modo de vista al alternar entre cada uno de ellos.
Modo de vista de estructura alámbrica
Básicamente, esto reemplaza el generador backend clásico de Divi con todas las características de Visual Builder incorporadas. Esta también es una excelente vista a prueba de fallas para editar páginas con mucha personalización o código personalizado que dificultaría la edición de ciertos elementos en uno de los modos visuales. . Por ejemplo, si tiene elementos que se superponen, puede resultar difícil acceder al menú de configuración de un elemento. Por lo tanto, todo lo que necesita hacer es cambiar al modo de vista de estructura alámbrica, abrir el modo de configuración para ese elemento y luego volver a cambiar para editar el elemento visualmente.
Modo de vista de alejamiento
Este modo de vista le permite editar su página visualmente desde una perspectiva más amplia. Le permite ver el diseño general de su página sin tener que cargarla en un nuevo navegador. Le permite mover elementos más grandes (como secciones o filas) mucho más fácilmente. Además, si está utilizando funciones como selección múltiple y buscar y reemplazar para realizar ajustes de diseño en toda la página, esto le permitirá ver esos cambios en tiempo real sin tener que desplazarse tanto.
Modo de vista de escritorio
Esta vista es donde hará la mayor parte de la edición de su constructor visual en el backend. El modo de vista abarca todo el ancho del constructor. Y dado que la vista del constructor abarca casi todo el ancho del navegador, puede tener una representación de escritorio precisa de la página en el backend.
Modo de vista de tableta
La vista de tableta muestra cómo se verá su página con un ancho de 768 px (una orientación vertical común para tabletas).
Modo de vista de teléfono inteligente
El modo de vista de teléfono inteligente le brinda una representación precisa de su página a 479 px de ancho (una orientación de retrato común para teléfonos inteligentes)
La nueva estructura de menú incluye todas las opciones como antes en un lugar conveniente y compacto. También hay una nueva opción de Configuración del constructor en el extremo derecho que no estaba disponible en el backend hasta ahora (más sobre esto a continuación).
#5 Configuración del constructor
La nueva configuración del generador ahora está disponible en el generador de backend. Esta poderosa función le permite personalizar su experiencia de constructor para que se ajuste a su propio flujo de trabajo.
Todas estas opciones serán útiles para configurar cómo desea que Divi funcione de forma predeterminada. Estas son algunas de las opciones que pueden sorprenderte.
Personalice la barra de herramientas de configuración del constructor con opciones de modo flotante, modo de clic y modo de cuadrícula
Al editar una página en el backend en uno de los modos de vista visual (como el modo de vista de escritorio), puede agregar o eliminar elementos de la barra de herramientas con esta opción. Incluso puede agregar el modo de desplazamiento (la interacción predeterminada), el modo de clic y el modo de cuadrícula a su barra de herramientas para cambiar la forma en que interactúa con Divi sobre la marcha.
En el modo de desplazamiento (el modo de interacción predeterminado), al pasar el cursor sobre módulos, filas y secciones, se muestran sus controles y luego se puede hacer clic en estos controles.
En el modo de clic, los controles se muestran cuando hace clic en un elemento en lugar de cuando se desplaza sobre él. Una vez que se ha hecho clic en un elemento, sus controles permanecen visibles hasta que haga clic en otra cosa o salga. El modo de clic también resalta elementos al pasar el mouse, lo que puede ser muy útil para identificar módulos pequeños en una página.
En el modo de cuadrícula, todos los controles de módulos, filas y secciones de la página se muestran a la vez.
Incluso hay una opción para establecer el modo de integridad predeterminado en la configuración del constructor también.
Optimizar el flujo de creación de páginas
Puede optimizar el flujo de creación de su página para que se ajuste a sus necesidades. Por ejemplo, en lugar de que se le pida que elija el método de creación de su página cada vez que cree una página nueva, puede configurar el flujo de creación de la página para que siempre comience a crear una página nueva desde cero.
Ahora, cuando cree una nueva página e implemente Divi Builder, irá directamente a editar la página desde cero, lo que le ahorrará un tiempo valioso durante el desarrollo de un nuevo sitio.
También puede leer más sobre estas configuraciones de Builder en la publicación del blog de características .
#6 Copiar y pegar elementos Divi entre páginas
Ahora puede copiar elementos o estilos Divi completos de una página y pegarlos en una página completamente diferente. Esto le ahorra un montón de tiempo al construir su sitio web. En lugar de guardar su elemento en la biblioteca divi e importarlo a una página nueva, ¡todo lo que necesita hacer es copiarlo y pegarlo!
#7 Búsqueda Filtrada
La búsqueda filtrada es una de las maravillosas mejoras en la eficiencia del diseño que solía estar disponible solo en Visual Builder.
Esto le permite escribir consultas de búsqueda en la parte superior de su modal de configuración para encontrar una determinada opción más rápido. Y puede seleccionar ciertos filtros para mostrar estilos modificados, estilos receptivos, estilos flotantes y contenido activo. Incluso puede combinar consultas de búsqueda con filtros para una búsqueda más específica.
Por ejemplo, puede escribir la palabra «fuente» en la barra de búsqueda del modal de configuración para mostrar todas las opciones de diseño relacionadas con la fuente. Luego, puede agregar el filtro «estilos modificados» en combinación con su consulta de búsqueda para revelar todas las opciones de fuente que tienen estilos modificados.
Es una forma rápida y fácil de inspeccionar las opciones de diseño de sus propios diseños, así como muchos de los diseños de diseño prefabricados disponibles. Otros filtros incluyen Estilos de respuesta (valores establecidos para tabletas y teléfonos inteligentes), Estilos de desplazamiento (valores establecidos para desplazamiento), Contenido activo (contenido y/o configuraciones activas en la pestaña de contenido).
#8 Acceso Rápido
El acceso rápido es una característica fácil de pasar por alto, pero es un importante ahorro de tiempo de desarrollo. Esta función solo funciona en uno de los modos de vista del constructor visual. Cuando abre la configuración de un módulo, puede pasar el cursor sobre los elementos del módulo en el generador visual para revelar los bordes azules resaltados y los botones de acceso rápido. Al hacer clic, estos nuevos botones de acceso rápido lo llevarán directamente a la configuración de diseño relevante para ese elemento en particular dentro del módulo.
Por ejemplo, observe lo fácil que es navegar a la configuración de estilo de un título en un módulo de texto.
Esta característica también funciona de manera opuesta. Quick Access también facilita la identificación de elementos relevantes en la página dentro de la configuración del módulo. A medida que busca (o se desplaza) a través de las opciones, Divi indicará a qué elemento del módulo pertenece cada grupo de opciones con un borde resaltado en azul.
Observe cómo se resalta el elemento de texto del encabezado al pasar el cursor sobre el grupo de opciones «Texto del encabezado» en la configuración del módulo.
#9 Gerente de Color y Sugerencias de Color Mágico
La función Administrador de color y Sugerencias de colores mágicos es extremadamente conveniente cuando se cambia el color de un elemento en el modo de configuración. Por ejemplo, puede alternar rápidamente el uso de colores recientes, así como su paleta de colores guardada. Y puede abrir la cuadrícula de sugerencias de colores mágicos para revelar una fila de colores sugeridos para cada uno de los colores en su paleta de colores guardada o reciente.
#10 Buscar y reemplazar
Buscar y reemplazar le permite reemplazar cualquier valor en su página con un valor completamente nuevo en segundos. Simplemente haga clic derecho en una configuración y elija la opción Buscar y reemplazar. Esto le permitirá buscar en toda su página, o en una parte particular de su página, valores específicos y reemplazar esos valores con algo nuevo. Esto significa que puede cambiar la combinación de colores, las fuentes y más de toda la página en cuestión de segundos.
Por ejemplo, si su página tiene el mismo estilo de color verde en todas partes, puede hacer clic derecho en cualquier opción de color usando ese color (como un color de texto de encabezado) para encontrar un valor de reemplazo de ese color con uno diferente.
En la ventana emergente Buscar y reemplazar, puede elegir reemplazar el color dentro de toda la página con un color azul. Luego, si selecciona «reemplazar todo», el valor del color se reemplazará en todas las instancias de ese color sin importar qué elemento lo esté usando.
Esto cambia el esquema de color de toda la página en segundos.
#11 Estilos extendidos
Extender estilos le permite extender una opción de estilo específica o los estilos de un elemento completo a otros elementos a lo largo de su página.
Para extender estilos en Divi, simplemente haga clic derecho en cualquier elemento, opción o grupo de opciones y elija la opción Extender estilos. A continuación, puede elegir dónde y a qué elementos le gustaría extender los estilos. Puede extender los estilos a módulos específicos dentro de ubicaciones específicas, o puede extender los estilos a todos los módulos en toda la página utilizando la ubicación y la segmentación de elementos.
Por ejemplo, supongamos que ha diseñado un módulo de contador de números y desea extender todos los estilos de ese módulo a los otros módulos de contador de números en esa fila. Simplemente haga clic con el botón derecho en el módulo de contador de números y seleccione «Extender estilos de contador de números». Luego, en el modal extender estilos, seleccione para extender los estilos a lo largo de la Fila.
Todos los módulos contadores de números heredarán los estilos de ese módulo.
También puede extender estilos de opciones de diseño particulares (o grupos de opciones). Por ejemplo, supongamos que ha agregado un borde a uno de sus Módulos de contador de números y qué extender esos estilos de borde a los otros módulos en su fila. Simplemente haga clic derecho en el grupo de opciones de estilos de borde y seleccione «Extender estilos de borde».
En el modal Extender estilos, seleccione para extender los estilos de borde a todos los contadores de números a lo largo de la fila.
Esto extenderá los estilos de fila a todos los módulos de contador de números en esa fila.
# 12 Arrastrar y soltar Carga de archivos
Con la función de carga de archivos de arrastrar y soltar , ahora puede arrastrar y soltar archivos desde su computadora directamente al generador de back-end. Divi detecta los tipos de archivos que está cargando y los transforma automáticamente en varios módulos diferentes, o los aplica a la página de forma creativa.
Por ejemplo, puede arrastrar varias imágenes al Divi Builder para crear automáticamente una galería de imágenes en la parte inferior de su página. Simplemente resalte las imágenes que desea en su computadora y luego arrástrelas al generador. Eso es todo. ¡Divi hace el resto!
Vea otras formas geniales de usar la función de carga de archivos Arrastrar y soltar para aumentar la productividad .
#13 Contenido dinámico
El contenido dinámico le permite convertir cualquier módulo Divi en un elemento dinámico que extrae su contenido dinámico de la base de datos a través de metapost, campos personalizados y más.
Por ejemplo, puede usar fácilmente contenido dinámico para mostrar el título de la página en el encabezado principal de su diseño Divi. Simplemente abra el modal de configuración de texto y haga clic en el icono de contenido dinámico que aparece al pasar el cursor sobre el cuadro de contenido. Luego seleccione «título de la página» de la lista de opciones de contenido dinámico disponibles.
Crea tus propios campos personalizados.
Luego agregue ese campo personalizado como contenido dinámico en el diseño de su página.
#14 Opciones de desplazamiento
Las opciones de desplazamiento también están disponibles dentro del nuevo generador de backend Divi. Puede implementar una opción de desplazamiento para un elemento específico haciendo clic en el icono de desplazamiento que aparece al pasar el cursor sobre una opción dentro del modal de configuración.
Supongamos que desea cambiar el color de fondo de un módulo de texto al pasar el mouse, implementaría las opciones de desplazamiento para el color de fondo y cambiaría el color de fondo debajo de la pestaña de desplazamiento. Ahora, cuando va y viene entre las pestañas predeterminadas y flotantes, puede ver el efecto flotante en tiempo real.
#15 Edición masiva y multiselección
La edición masiva y la selección múltiple le permiten seleccionar varios elementos (módulos, filas, secciones) en su página para editarlos todos a la vez.
Supongamos que desea agregar un borde a todos los módulos de texto en una fila en particular. Simplemente mantenga presionada la tecla de control (o comando) y haga clic en todos los módulos que desea editar de forma masiva. Luego agregue el estilo de borde que desee en el modal de configuración del elemento. Todo lo que cambie se aplicará a todos los módulos a la vez.
La edición masiva y la selección múltiple funcionan en todos los modos de vista, incluido el modo de vista de estructura alámbrica. Esto es útil para mover o copiar y pegar varios elementos a la vez para reorganizar su diseño mucho más fácilmente. Simplemente mantenga presionado control/comando y seleccione los elementos de su diseño y luego puede arrastrarlos a cualquier lugar que desee. O una vez, seleccionado, haga clic derecho en uno de los elementos para usar copiar y pegar.
Pensamientos finales
El nuevo Divi Backend Builder ha heredado algunas características bastante sorprendentes con la nueva actualización de Divi 3.18. Entonces, si ha estado utilizando el generador de back-end clásico para crear sus sitios web o si solo necesita que le recuerden el poder de Divi, espero que este artículo arroje algo de luz sobre todo lo que puede haberse estado perdiendo. ¡Siéntete libre de compartir algunas de tus funciones favoritas con nosotros!
Espero escuchar de usted en los comentarios.
¡Salud!