Cómo usar las opciones de estilo de lista y texto de Divi para diseños únicos de contenido de alternancia y acordeón

Vistazo

Aquí hay un vistazo rápido a los diseños que construiremos usando las opciones de estilo de lista y texto de Divi.

Descargue los diseños de estilo de lista para Toggles y diseño de acordeones GRATIS

Para poner sus manos en los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.

Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json a Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, necesitará tener lo siguiente:

1. El tema Divi instalado y activo
2. Una nueva página creada para construir desde cero en el front-end (constructor visual)
3. Imágenes que se utilizarán para contenido simulado

Después de eso, tendrás un lienzo en blanco para comenzar a diseñar en Divi.

Parte 1: uso de estilos de lista en módulos de alternancia

En esta primera parte del tutorial, vamos a crear tres conmutadores, cada uno de los cuales tiene contenido diseñado con opciones de estilo de lista. Esto será útil para separar los elementos de su lista en alternancias separadas casi como una propaganda personalizada de contenido.

Primero crea una sección regular con una fila de tres columnas. Luego actualice la configuración de la fila de la siguiente manera:

Canalón Ancho: 2

Ancho: 100%

Ancho máximo: 90vw

Agregar un módulo de alternancia

A continuación, agregue un módulo de alternancia a la columna 1. Este será el primero de los tres módulos de alternancia que se agregarán a cada una de las tres columnas.

Agregar el contenido HTML de alternancia

El contenido HTML es clave para este diseño. Para que podamos aprovechar los diferentes estilos de lista dentro de la configuración de alternancia de Divi, debemos agregar listas HTML a nuestro cuadro de contenido.

Continúe y pegue el siguiente código HTML en el

cuadro Contenido del cuerpo.

Ahora, esta pieza de código HTML crea una lista ordenada usando la etiqueta ol. La lista ordenada tiene solo un elemento de lista (li) que es una lista desordenada anidada (ul) con un elemento de lista (li) que tiene algún contenido simulado. Debajo de la lista ordenada hay un párrafo básico de texto.

Con esta configuración, podemos apuntar a cada una de esas etiquetas (ol, ul, p) para un estilo diferente utilizando los estilos de texto integrados de Divi que incluyen estilos de lista.

Observe que la etiqueta ol inicial tiene start=”1″ dentro. Esto le dice a la lista con qué número comenzar enumerando los números de la lista ordenada con cada elemento de la lista. Técnicamente, esto no es necesario para el primer número porque comenzará automáticamente con 1 de forma predeterminada. Pero lo necesitaremos para los próximos conmutadores que agregaremos.

Además, la etiqueta de la lista desordenada tiene un estilo en línea para aumentar un poco el contenido de ul usando un margen negativo. Así es como superpondremos el número de la lista ordenada con el texto de la lista desordenada en el diseño.

Dar estilo al contenido

Ahora podemos comenzar a agregar algunos colores y estilos de fuente utilizando la configuración integrada y los estilos de lista. Actualice la configuración de diseño de alternar de la siguiente manera:

Color de icono: #ff3d97

Tamaño de fuente de icono: 26px

Color de fondo de alternancia abierta: #ffffff

Color de fondo de alternancia cerrada: #ffffff

Color de texto de título abierto: #333333

Color de texto de título: #333333

Fuente del título: Oswald

Tamaño del texto del título: 18px

Altura de la línea del título: 3em

Fuente de lista desordenada: Oswald

Peso de fuente de lista desordenada: Claro

Color de texto de lista desordenada: #333333

Tamaño de texto de lista desordenada: 36px

Tipo de estilo de lista desordenada: Ninguno

Fuente de lista ordenada: Kameron

Peso de fuente de lista ordenada: Negrita

Color de texto de lista ordenada: rgba(255,61,151,0.34)

Tamaño de texto de lista ordenada: 100px

Altura de línea de lista ordenada: 1.1em

Duplicar el primer módulo de alternancia para crear las otras alternancias

Para crear los conmutadores para las columnas 2 y 3, vamos a duplicar el módulo de conmutador que acabamos de terminar de diseñar. Luego podemos arrastrarlos a cada columna para que cada columna tenga el mismo módulo de alternancia.

Actualizar los números de inicio de la lista ordenada

Para la alternancia duplicada en la columna 2, necesitamos que la lista ordenada comience con el número «2» en lugar de «1». Para cambiar esto, abra la configuración del módulo de alternancia y cambie el número de inicio en la etiqueta ol a «2».

También deberá actualizar el conmutador en la columna 3 con el número de inicio de la lista ordenada de «3».

Diseño final

Ahora veamos el diseño final.

Parte 2: Uso de estilos de lista en módulos de acordeón

En esta segunda parte del tutorial, le mostraré una forma rápida y fácil de llevar los diseños de contenido de estilo de lista desde el módulo de alternar a un módulo de acordeón. El proceso es fácil porque puede usar el mismo texto y estilos de lista en un módulo de acordeón (o prácticamente en cualquier módulo) que usamos en nuestros conmutadores anteriores. Para hacer esto, primero cree una nueva sección con una fila de una columna. Luego agregue un módulo de acordeón a la fila.

Luego, duplique uno de los dos acordeones predeterminados en la pestaña de contenido para un total de tres acordeones. Luego actualice el contenido para cada acordeón individual con el mismo contenido html de alternancia exacto dentro de cada una de las tres alternancias que creamos anteriormente.

Extienda los estilos de alternancia al acordeón

Una forma rápida de transferir el estilo de los interruptores que creamos al módulo de acordeón es usar la función de extensión de estilos . Para hacer esto, abra uno de los módulos de alternancia y haga clic derecho en la categoría de estilo de icono y seleccione «extender estilos de icono» en el menú contextual. Luego seleccione extender los estilos de este icono a «Todos los acordeones» en «Esta página».

Luego haga lo mismo para cada una de las categorías de diseño que tienen un estilo personalizado que debe extenderse al módulo de acordeón. Estos incluyen el estilo de «Alternar», «Texto del título» y «Texto del cuerpo».

Luego mira el resultado final para el diseño de acordeón.

Parte 3: uso de estilos de lista para crear contenido de varias columnas en un módulo de alternancia

En esta tercera parte del tutorial, le mostraré cómo puede crear múltiples columnas de contenido para sus diseños de estilo de lista.

Primero, cree una nueva sección con una fila de una columna. Luego copie y pegue uno de los módulos de alternancia que creamos anteriormente en la fila.

Luego, actualice el contenido del cuerpo del módulo de alternancia con algo de HTML nuevo de la siguiente manera:

Observe el atributo de estilo en línea «column-count:2» que se ha agregado a la etiqueta ol inicial. Esto permitirá que el contenido de la lista ordenada se estructure en dos columnas en lugar de una. Puede cambiar esto a cualquier número para más columnas según sea necesario.

Y observe cómo tenemos la capacidad de usar la configuración de diseño integrada de Divi para los estilos de título, enlace y lista.

Dar estilo al texto del enlace

Dado que los estilos de título y lista ya están en su lugar desde el diseño anterior, todo lo que tenemos que hacer es agregar algo de diseño para el texto del enlace.

Abra la configuración de alternancia y actualice lo siguiente:

Peso de la fuente del enlace: Semi negrita

Estilo de fuente del enlace: Subrayado

Color del texto del enlace: #ff3d97

Tamaño del texto del enlace: 15px

Y dado que no estamos superponiendo ningún texto con este diseño, continúe y dé a los números de estilo de la lista ordenada un color más brillante de la siguiente manera:

Color de texto de la lista ordenada: #ff3d97

Agregar un fondo a la palanca

Para finalizar el diseño, podemos agregar un fondo personalizado a nuestra palanca. Para hacer esto, actualice la siguiente configuración de alternancia:

Imagen de fondo: [cargue la imagen de su elección]

Degradado de fondo Color izquierdo: rgba(255,255,255,0.92)

Degradado de fondo Color derecho: rgba(255,255,255,0.8)

Dirección del degradado: 90

grados Posición inicial: 50 %

Posición final: 0 %

Coloque el degradado sobre el fondo Imagen: SÍ

Adición de elementos receptivos a la palanca de dos columnas

Dado que el contenido de alternancia ahora tiene dos columnas, actualicemos el diseño con algunos estilos receptivos para que se adapte bien a los dispositivos móviles.

Primero, actualice la configuración de la fila de la siguiente manera:

Ancho: 100%

Ancho máximo: 89vw (escritorio), 90vw (tableta y teléfono)

A continuación, abra la configuración de alternancia y actualice lo siguiente:

Tamaño de fuente del icono: 5vw

Tamaño del texto del título: 4vw

Tamaño de texto de lista desordenada: 26 px (escritorio), 18 px (tableta), 14 px (teléfono)

Sangría de elemento de lista desordenada: 1 px

Tamaño de texto de lista ordenada: 8vw

Diseño final del contenido de alternancia de varias columnas

Aquí está el diseño en pantallas de tabletas y teléfonos.

Y aquí está el mismo diseño con un fondo más oscuro y colores de texto blancos.

Pensamientos finales

La mayoría de las veces, los conmutadores y los acordeones tendrán contenido de cuerpo básico que realmente no requiere un diseño creativo. Pero si llega el momento en que desea darle vida a su contenido de alternancia y acordeón, puede aprovechar las opciones de estilo de lista y texto integradas de Divi. Una vez que tenga su html en su lugar, puede orientar esas etiquetas html para diferentes diseños sin tener que usar clases o CSS personalizados externos. Esta también es una excelente manera de mostrar estilos de listas creativas dentro de cualquier módulo utilizando el generador Divi porque estas mismas opciones de estilo de lista están disponibles en todos los módulos.

Diviértete explorando nuevos diseños.

Espero escuchar de usted en los comentarios.

¡Salud!