Hace dos días presentamos Divi 2.4 , la mayor actualización en la historia de Divi y un gran paso adelante para nuestro tema de WordPress más popular. Hay tantas funciones excelentes para explorar en esta actualización que fue difícil describirlas todas en la publicación de lanzamiento, por lo que hemos decidido hacer una serie de publicaciones de blog informativas de 2 semanas que tendrán como objetivo enseñarle cómo tomar aprovecha al máximo Divi 2.4 y sus nuevas opciones. En la segunda parte de esta serie, exploraremos algunas formas creativas en las que puede usar la configuración avanzada y cómo importar/exportar elementos guardados en su Biblioteca Divi. ¡Incluso estamos lanzando un paquete de biblioteca Divi que incluye todos los elementos de esta publicación para que pueda usarlos en su propio sitio!
Aprenda todo sobre Divi 2.4 aquí
Si aún no ha explorado Divi 2.4, probablemente se esté preguntando: «Espera, ¿qué es la Biblioteca Divi?» En pocas palabras, es un nuevo lugar para guardar módulos individuales, filas, secciones o incluso diseños completos que ha creado con Divi Builder. Una vez que se ha guardado un elemento en la biblioteca, se puede acceder rápidamente desde dentro del generador. Estos elementos de la biblioteca son como herramientas en su nuevo conjunto de herramientas de diseño web y se pueden usar al crear nuevas páginas en su sitio web o al crear nuevos sitios web para sus clientes.
Si era un usuario de Divi antes de la actualización, es posible que esté familiarizado con la función ‘Guardar diseño’ de Divi, que era y sigue siendo una característica increíble, pero con el poder de guardar solo fragmentos de sus diseños hace que la creación de páginas sea solo eso. mucho mas rápido.
Ahora que las secciones, las filas y los módulos tienen sus propios conjuntos de configuraciones de diseño avanzadas, puede dedicar mucho más tiempo a configurar los elementos de su página. Esto también puede hacer que los elementos altamente personalizados sean difíciles de construir una y otra vez. Pero gracias a Divi Library, puede guardar esas piezas complejas en la biblioteca, que luego se pueden usar en otra página o incluso en otro sitio web.
Explorando la Configuración de Diseño Avanzado en Divi 2.4
Aunque la configuración de diseño avanzado de cada elemento es única para cada elemento, hay muchas configuraciones que comparten y con las que debe familiarizarse. Esto no solo acelerará las cosas, sino que, lo que es más importante, te permitirá ser más creativo al idear el diseño de tu sitio web cuando sepas cuáles son las posibilidades.
Relleno y margen personalizados
Dale al contenido de tu módulo un poco más de espacio para respirar agregando relleno o margen personalizado. Puede definir el relleno/margen para el lado superior, derecho, izquierdo y/o inferior de su módulo.
borde personalizado
Agregar un borde alrededor de su módulo es tan fácil como elegir el grosor, el estilo y el color del borde.
Además de la configuración de botones para todo el sitio, también puede definir configuraciones de botones personalizadas por módulo.
Color/imagen de fondo
Ahora puede agregar un fondo a módulos individuales. Combinando esto con relleno personalizado, puede crear algunos módulos realmente creativos.
Opciones de texto
Si su módulo incluye elementos de texto, encontrará todo tipo de configuraciones para tipografía en la Configuración avanzada, como fuente, color, estilo, tamaño, altura de línea y espacio entre letras.
¡Estos son solo los básicos! A continuación, revisaré algunos módulos que tienen más configuraciones únicas para mostrarle cómo hacer que su sitio web sea realmente único.
Crear un control deslizante de testimonios
Este es en realidad un módulo deslizante de ancho completo que aprovecha la nueva opción de relleno personalizado para los controles deslizantes. En la configuración avanzada de un módulo deslizante, puede definir el relleno superior e inferior de cualquier control deslizante. Para lograr este efecto, he usado el título de la diapositiva como el contenido del testimonio, el contenido del cuerpo de la diapositiva para el atributo y reduje un poco el relleno del control deslizante, ya que los controles deslizantes de los testimonios suelen tener una altura más corta que un control deslizante de encabezado de página normal. Otra razón para reducir el relleno es para que pueda ser creativo y agregar más elementos alrededor del control deslizante, como una publicidad como en la captura de pantalla a continuación.
Dé a sus tablas de precios una nueva apariencia
El módulo de tabla de precios de Divi podría llevarse la victoria por las configuraciones más avanzadas. La configuración de sus tablas puede llevar un tiempo, por lo que este módulo es un ejemplo perfecto de algo para lo que puede usar la Biblioteca Divi. El módulo de la tabla de precios de arriba es un bonito estilo moderno de las tablas de precios de Divi, y el color de fondo dividido es simplemente para mostrarle que puede importar este módulo a su propia página y agregarlo sobre cualquier color de fondo que admita texto en blanco.
He editado bastante aquí, pero la esencia es que eliminé los bordes predeterminados, personalicé todo el texto para que sea blanco, modifiqué los botones para que sean blancos y di transparencia a los colores de fondo de la tabla. También puede ver que le he dado a la tabla de precios destacada un fondo más opaco con la configuración de diseño de la tabla destacada del módulo.
Control de mesa individual
Una última cosa a tener en cuenta sobre la configuración avanzada en el módulo de la tabla de precios es que puede personalizar las tablas en todo el módulo, pero también por tabla. Por ejemplo, puede darle a cada mesa su propio color de fondo para que cada producto se destaque realmente.
filas sin canalones
Las filas sin canaletas son una de las mejores cosas que puedes crear en Divi 2.4. Hablaremos más sobre las nuevas opciones de fila en una próxima publicación, pero quería incluir esto con el fin de crear un paquete de biblioteca Divi para nuestros lectores. Lo que está viendo aquí es una fila de dos columnas que se ha hecho de ancho completo sin espacio entre sus columnas. Los ajustes a continuación ilustran esta configuración
La imagen del café es en realidad una imagen de fondo de columna, y las columnas siempre tendrán exactamente la misma altura con la nueva configuración de altura de columna igual de Divi. También se incluye en el paquete de la biblioteca esta misma fila pero con la imagen a la izquierda. La combinación de los dos resultados en un buen diseño alternativo.
Si descarga el paquete de la biblioteca y coloca estas filas en sus propios diseños, el módulo de llamado a la acción heredará la tipografía y los estilos de los botones de su tema. Estén atentos para publicaciones más detalladas sobre las nuevas opciones de personalización de temas de Divi.
Módulo Blurb en caja
Los módulos publicitarios adyacentes a veces pueden chocar entre sí. Agregar un borde alrededor de ellos puede ser una muy buena solución si siente que necesitan un poco más de separación. Antes de Divi 2.4, tendría que hacer esto con CSS personalizado, pero ahora puede hacerlo simplemente usando las opciones de borde del módulo. Al agregar un borde, querrá agregar un poco de relleno personalizado para que su contenido no se estrelle contra el borde. En el ejemplo anterior, utilicé un relleno de 40 px, que es un buen valor en todos los puntos de interrupción, por lo que sus módulos en caja aún se verán geniales en dispositivos móviles.
Tomando esta misma idea de un módulo bordeado y agregándola a una sección con relleno personalizado, puede lograr una apariencia completamente nueva usando un módulo casi idéntico a los anteriores. Este es un gran ejemplo de cómo estas nuevas configuraciones avanzadas abren el mundo de las oportunidades de diseño.
Formulario de contacto transparente
La nueva configuración del formulario de contacto le permite controlar cosas como el color de fondo del formulario, el estilo del borde, el color del texto y las esquinas redondeadas del campo del formulario. En el módulo de arriba, elegí un color de fondo transparente, un borde blanco y esquinas redondeadas. Todos estos ajustes son totalmente personalizables. Puede elegir un color de fondo semitransparente, elegir el grosor de su borde e incluso definir un radio de esquina redondeado personalizado.
Encabezado de pantalla completa
El módulo de encabezado de ancho completo de Divi ahora se puede hacer ‘Pantalla completa’. Esto hace que sea cual sea el tamaño de su navegador, llenará la pantalla y centrará verticalmente su contenido. En el ejemplo anterior, cargué el logotipo de Divi en el nuevo campo Logotipo y agregué dos botones de llamada a la acción. El módulo de encabezado de ancho completo también le brinda la posibilidad de agregar un ícono de «desplazamiento» que, si se hace clic, se desplazará suavemente hacia abajo a la siguiente sección. Hay 11 íconos prefabricados entre los que puede elegir, además de poder definir su tamaño y color. Otra de mis características favoritas de este módulo es la superposición de colores de fondo. El fondo que ve aquí es en realidad una imagen muy brillante y saturada con una superposición oscura semitransparente para ayudar a que el texto se destaque de la imagen ocupada.
Guardar sus propios artículos en la biblioteca Divi
Al crear o editar un nuevo módulo, fila o sección dentro de Divi Builder, notará un nuevo botón Guardar en la parte inferior de las ventanas de configuración llamado «Guardar y agregar a la biblioteca». Esto va acompañado del botón estándar «Guardar y salir» a la derecha. Cuando hace clic en el botón «Guardar y salir», la configuración de su módulo se guarda en la página actual y la ventana emergente de configuración se cierra. Cuando hace clic en «Guardar y agregar a la biblioteca», el módulo aún se guarda en su página, pero también se agrega a su Biblioteca Divi.
Agregar elementos de la biblioteca a su página
Una vez que se ha guardado un elemento en la biblioteca, se puede agregar a cualquier página nueva desde Divi Builder haciendo clic en el botón «Agregar desde la biblioteca» al agregar un nuevo módulo, fila o sección a la página.
Descargue los elementos de la biblioteca descritos en esta publicación
Haga clic en el enlace a continuación para descargar los elementos descritos en esta publicación. Para importarlos a su biblioteca, vaya a Importar»>Herramientas > Importar . Seleccione el enlace de WordPress en la parte inferior de la lista de tipos de importación y se le pedirá que cargue el archivo. Entonces tendrá acceso a estos módulos para su propio uso. ¡Antes de cargar, asegúrese de descomprimir el archivo zip! Solo se pueden importar archivos XML.
Espero que este breve vistazo a la configuración avanzada lo ayude a crear sus propios módulos y posiblemente incluso lo motive a compartirlos con la comunidad
Descarga el paquete de la biblioteca