Cómo utilizar las opciones de estilo de lista y texto de Divi para diseños únicos de contenido de alternancia y acordeón
Publicado: 2019-07-24Las opciones de estilo de lista y texto de Divi son una característica común disponible en la mayoría de los módulos Divi. Esto abre nuevas oportunidades para diseñar contenido creativo y enumerar diseños dentro de módulos (como el módulo de alternancia y acordeón) que antes solo eran posibles dentro del módulo de texto. El truco consiste en configurar su contenido con el html apropiado para que pueda orientar esos elementos utilizando la configuración de diseño incorporada.
En este tutorial, le mostraré cómo usar las opciones de estilo de lista y texto de Divi para diseños únicos de contenido de alternancia y acordeón. Esto será útil siempre que desee incorporar diferentes diseños de texto sin tener que usar clases CSS o CSS en línea.
Empecemos.
Vistazo
Aquí hay un vistazo rápido a los diseños que crearemos usando las opciones de estilo de lista y texto de Divi.
Descargue los diseños de estilo de lista para el diseño de alternar y acordeones GRATIS
Para poner sus manos sobre 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 nuestra lista de correo electrónico Divi Daily mediante 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!
Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json al Divi Builder.
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Para comenzar, necesitará lo siguiente:
- El tema Divi instalado y activo
- Una nueva página creada para construir desde cero en el front-end (constructor visual)
- Imágenes que se utilizarán para contenido simulado
Después de eso, tendrá 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, crearemos tres conmutadores, cada uno de los cuales tiene contenido diseñado utilizando opciones de estilo de lista. Esto será útil para separar los elementos de su lista en conmutadores separados casi como una propaganda personalizada de contenido.
Primero cree una sección regular con una fila de tres columnas. Luego actualice la configuración de la fila de la siguiente manera:
Ancho de la canaleta: 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 alternar
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, necesitamos agregar listas HTML a nuestro cuadro de contenido.
Continúe y pegue el siguiente HTML en el
Cuadro de contenido corporal.
<ol start="1">
<li>
<ul style="margin-top: -1.5em;">
<li>Lorem ipsum dolor sit amet</li>
</ul>
</li>
</ol>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</p>
Ahora, este fragmento 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 diferentes estilos usando 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 automáticamente comenzará con 1 por defecto. Pero lo necesitaremos para los próximos conmutadores que agreguemos.
Además, la etiqueta de lista desordenada tiene un estilo en línea para subir un poco el contenido 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.
Estilo del contenido
Ahora podemos comenzar a agregar algunos colores y estilos de fuente utilizando la configuración incorporada y los estilos de lista. Actualice la configuración de diseño de alternancia de la siguiente manera:
Color del icono: # ff3d97
Tamaño de fuente del icono: 26px
Abrir alternar color de fondo: #ffffff
Color de fondo de alternancia cerrada: #ffffff
Color del texto del título abierto: # 333333
Color del texto del título: # 333333
Fuente del título: Oswald
Tamaño del texto del título: 18px
Altura de la línea de título: 3em
Fuente de lista desordenada: Oswald
Peso de fuente de lista desordenada: Ligero
Color de texto de lista desordenada: # 333333
Tamaño de texto de lista desordenado: 36px
Tipo de estilo de lista desordenada: Ninguno
Fuente de lista ordenada: Kameron
Peso de la fuente de la lista ordenada: Negrita
Color de texto de lista ordenada: rgba (255,61,151,0.34)
Tamaño del texto de la lista ordenada: 100px
Altura de la línea de lista ordenada: 1.1em
Duplique 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 alternancia 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 manera rápida y fácil de llevar los diseños de contenido de estilo de lista desde el módulo de alternancia 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 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 de cada acordeón individual con el mismo contenido html de alternancia exacta dentro de cada una de las tres opciones que creamos anteriormente.
Extienda los estilos de alternancia al acordeón
Una forma rápida de transferir el estilo de los conmutadores 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. A continuación, seleccione ampliar 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 para "Alternar", "Texto del título" y "Texto del cuerpo".
Luego, mira el resultado final del 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 un nuevo HTML de la siguiente manera:
<ol style="column-count: 2">
<li>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
</ul>
</li>
<li>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
</ul>
</li>
<li>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
</ul>
</li>
<li>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
</ul>
</li>
</ol>
Observe el atributo de estilo en línea "column-count: 2" que se ha agregado a la etiqueta ol inicial. Esto permitirá estructurar el contenido de la lista ordenada 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 incorporada de Divi para los estilos de título, enlace y lista.
Aplicar 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 algún 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 de enlace: subrayado
Color del texto del enlace: # ff3d97
Tamaño del texto del enlace: 15px
Y dado que no superponemos ningún texto con este diseño, continúe y dé a los números de estilo de lista ordenados un color más brillante de la siguiente manera:
Color de texto de lista ordenada: # ff3d97
Agregar un fondo a la palanca
Para terminar el diseño, podemos agregar un fondo personalizado a nuestro conmutador. Para hacer esto, actualice la siguiente configuración de alternancia:
Imagen de fondo: [carga la imagen que elijas]
Color de degradado de fondo a la izquierda: rgba (255,255,255,0.92)
Gradiente de fondo Color derecho: rgba (255,255,255,0.8)
Dirección del gradiente: 90 grados
Posición inicial: 50%
Posición final: 0%
Colocar degradado sobre la imagen de fondo: SÍ
Agregar elementos receptivos a la alternancia de dos columnas
Dado que el contenido de alternancia ahora tiene dos columnas, actualice 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 desordenado: 26px (escritorio), 18px (tableta), 14px (teléfono)
Sangría de elemento de lista desordenado: 1 px
Tamaño del texto de la 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 un contenido corporal 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 CSS o clases personalizadas externas. Esta también es una excelente manera de mostrar estilos de lista creativos dentro de cualquier módulo usando 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 tener noticias tuyas en los comentarios.
¡Salud!