Liberando el poder del módulo de texto de Divi para diseños creativos de listas

La creación de diseños de listas únicos es un aspecto importante del diseño web. Los lectores aprecian la estructura y la estética de una lista bien diseñada porque les permite procesar la información mucho más rápido.

Con el módulo de texto de Divi, tiene todo lo que necesita para transformar listas ordinarias en hermosas obras de arte. La configuración del módulo de texto de Divi le permite orientar y diseñar diferentes elementos html dentro de su contenido, incluidas las listas. Y con algunas técnicas de diseño, puede aprovechar el poder de estas opciones para personalizar sus listas de formas sorprendentes.

En este tutorial, le mostraré cómo puede crear diseños de listas únicos en Divi.

Empecemos.

Vistazo

Aquí hay un vistazo a los cuatro diseños de lista que crearemos en este tutorial.

Inspirado en la configuración del módulo de texto

Si usted es como yo, puede tender a pasar por alto algunas de las opciones "ocultas" que acechan en lo más profundo del Divi Builder. Un módulo que tiene algunos tesoros enterrados es el Módulo de texto. La configuración del módulo de texto tiene varias pestañas que contienen opciones de estilo para diferentes elementos html. Esta puede ser una herramienta de diseño extremadamente conveniente y creativa. Estas pestañas incluyen opciones para el texto del cuerpo, enlaces, listas desordenadas, listas ordenadas y citas en bloque.

Y hay algunas gemas ocultas debajo de estas pestañas que es posible que no haya pensado utilizar en su diseño. Por ejemplo, ¿sabía que puede cambiar las opciones de estilo de lista para listas desordenadas? Hay varias opciones únicas disponibles (18 para ser exactos), incluidos números romanos y decimales con un cero a la izquierda.

Estos pueden parecer insignificantes, pero cuando aprovechas las opciones de diseño, puedes producir algunos diseños realmente creativos.

También puede orientar el estilo de diferentes niveles de encabezado (o etiquetas) en cada una de las pestañas debajo de las opciones de estilo de encabezado.

Esta capacidad de apuntar a múltiples elementos html en su contenido abre algunas posibilidades maravillosas. Con suerte, también te inspirarán.

Para obtener más información sobre esto, consulte la actualización de funciones que explica algunas de estas maravillosas opciones de texto.

Creando su lista HTML

Una lista html puede estar "ordenada" (con números, números romanos, etc.) o "desordenada" (con íconos cuadrados, íconos circulares, etc.). En el caso de listas desordenadas, los elementos de la lista se incluirán en una etiqueta "ul" ("ul" significa "lista desordenada"). Para las listas ordenadas, los elementos de la lista se envuelven en una etiqueta "ol" ("ol" significa "lista ordenada"). Cada elemento de la lista está envuelto en una etiqueta "li" ("li" para "elemento de la lista").

Aquí está la estructura básica de una lista ordenada:

<ol>
     <li>List Item</li>
     <li>List Item</li>
     <li>List Item</li>
</ol>

Que por defecto se verá así:

1. Elemento de lista
2. Elemento de lista
3. Elemento de lista

De hecho, puede crear una lista HTML utilizando el editor wysiwyg dentro de un módulo de texto Divi. Asegúrese de estar editando en la pestaña visual y simplemente escriba los elementos de su lista asegurándose de que haya un salto de línea (presione enter) después de cada uno. Luego, resalte el contenido y haga clic en uno de los íconos de la lista en la parte superior del editor.

Ahora vaya a la pestaña de texto para ver cómo se ve el HTML:

Esto funciona bien para listas simples, pero si desea crear listas anidadas (una lista dentro de una lista), es mejor que las cree usando HTML (usando la pestaña de texto) para evitar el dolor de cabeza de intentar hacerlo en el wysiwyg editor (pestaña visual).

Aquí está la estructura básica de una lista anidada que tiene una lista ordenada con cada elemento de la lista que tiene una lista desordenada anidada.

<ol>
  <ol>
  <li>Ordered List Item
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
  <li>Ordered List Item
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
  <li>Ordered List Item
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
</ol>

De forma predeterminada, esta lista html anidada se verá así:

1. Elemento de lista ordenado
   • Elemento de lista desordenado
2. Elemento de lista ordenado
   • Elemento de lista desordenado
3. Elemento de lista ordenado
   • Elemento de lista desordenado

También puede agregar otras etiquetas html en la lista. Por ejemplo, podemos envolver el elemento de la lista ordenada en una etiqueta h5. El resultado se verá así:

<ol>
  <li><h5>Ordered List Item</h5>
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
  <li><h5>Ordered List Item</h5>
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
  <li><h5>Ordered List Item</h5>
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
</ol>

No se preocupe, esto es tan complicado como lo voy a conseguir con este tutorial. Pero lo que debe darse cuenta es que esta estructura tiene tres etiquetas diferentes (ol, ul y h5) que se pueden diseñar de forma independiente entre sí con la poderosa configuración de diseño de Divi en un módulo de texto.

Necesitaremos esta estructura un poco más tarde, pero por ahora, vamos a poner nuestra página en funcionamiento para comenzar nuestro diseño en el constructor visual.

Crear la sección y la fila para las listas

Cree una nueva página e implemente Visual Builder. Luego, seleccione la opción Crear página desde cero. Luego crea una sección regular con una fila de dos columnas.

Crear la lista HTML en un módulo de texto

En la primera columna de su fila, agregue un nuevo módulo de texto. En el cuadro de contenido en la configuración de texto, ingrese la siguiente lista HTML:

<ol>
 	<li>
<h5>Design</h5>
<ul>
 	<li>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.</li>
</ul>
</li>
 	<li>
<h5>Develop</h5>
<ul>
 	<li>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.</li>
</ul>
</li>
 	<li>
<h5>Deliver</h5>
<ul>
 	<li>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.</li>
</ul>
</li>
</ol>

Esta estructura debería parecer familiar desde antes. El texto del encabezado h5 serán los elementos de la lista ordenada y el texto ficticio "lorem ipsum" serán los elementos de la lista desordenada anidada.

De forma predeterminada, se verá así:

No demasiado impresionante hasta ahora, lo sé. Pero con este contenido en su lugar, ¡ahora podemos comenzar la parte divertida de diseñar nuestra lista con Divi!

Nota importante: dado que cada diseño es una versión modificada del primer diseño, sería mejor comenzar con el primer diseño de este tutorial y mantenerlos en orden.

Diseño de lista n. ° 1

Para empezar, démosle a nuestro módulo de texto un fondo degradado de la siguiente manera:

Color de fondo degradado a la izquierda: rgba (0,0,0,0.04)
Gradiente de color de fondo a la derecha: rgba (255,255,255,0)
Dirección del gradiente: 90 grados
Posición inicial: 25%
Posición final: 0%

Aplicar estilo a los elementos de la lista ordenados

Ahora vaya a la pestaña de diseño y seleccione la pestaña de lista ordenada debajo de la opción Texto.

Luego actualice lo siguiente:

Fuente de la lista ordenada: Abril Fatface
Peso de la fuente de la lista ordenada: Negrita
Color de texto de lista ordenada: # 559cad
Tamaño del texto de la lista ordenada: 45px
Altura de la línea de lista ordenada: 1.6em
Tipo de estilo de lista ordenada: decimal-inicial-cero
Posición de estilo de lista ordenada: Exterior
Sangría de elemento de lista ordenada: 2vw

Notará que h5 y la lista desordenada anidada heredarán el estilo de la lista ordenada principal. No se preocupe, podrá anular el estilo de los otros elementos.

Aplicar estilo a los elementos de la lista desordenada

Ahora haga clic en la pestaña de la lista ordenada para cambiar la siguiente configuración:

Fuente de lista desordenada: Montserrat
Peso de fuente de lista desordenada: Ligero
Color de texto de lista desordenado:
Tamaño de texto de lista desordenado: 18px
Tipo de estilo de lista desordenada: Ninguno
Sangría de elemento de lista desordenado: 0.01px

Diseñar el encabezado H5

El último elemento que necesitamos diseñar es el encabezado H5. Para hacer eso, vaya a las opciones debajo de Texto del encabezado y haga clic en la pestaña H5. Luego actualice lo siguiente:

Fuente del encabezado 5: Montserrat
Peso de fuente del encabezado 5: Ligero
Estilo de fuente del título 5: mayúsculas (TT)
Color del texto del encabezado 5: # 4f6d7a
Encabezado 5 Tamaño del texto: 5vw (escritorio), 70px (tableta), 40px (teléfono inteligente)

Para terminar el diseño de nuestro módulo de texto, agregue el siguiente relleno personalizado:

Relleno personalizado (escritorio): 3vw superior, 3vw inferior
Acolchado personalizado (tableta): 2vw izquierda
Relleno personalizado (teléfono inteligente): 50 px a la izquierda

Guardar ajustes.

Ahora copie el módulo de texto y péguelo en la segunda columna de la fila. Puede notar que los números de la lista deben ajustarse en el módulo de texto duplicado para que continúe desde la lista anterior. Queremos que nuestra segunda lista de módulos de texto comience con el número 4 (en lugar de 1). Para hacer esto, necesitamos agregar un pequeño cambio a nuestra lista html. Vaya al cuadro de contenido en la configuración del módulo de texto y reemplace la etiqueta de apertura "ol" con lo siguiente:

<ol start="4">

Ahora veamos el resultado final.

Diseño de lista n. ° 2

Para este segundo diseño de lista de ejemplo, voy a duplicar la primera sección que creamos para darnos una ventaja. También presentaré un fondo genial para el diseño de la lista usando degradados de fondo.

Creación de un diseño de degradado de fondo personalizado

En la sección duplicada, actualice la configuración de la sección con el siguiente fondo degradado:

Color de fondo degradado a la izquierda: #ffffff
Gradiente de color de fondo a la derecha: rgba (155,29,32,0.08)
Dirección del gradiente: 45 grados
Posición inicial: 50%
Posición final: 0%

Guardar ajustes.

Ahora actualice la configuración de su Fila con el siguiente degradado de fondo:

Color de fondo degradado a la izquierda: rgba (155,29,32,0.08)
Gradiente de color de fondo a la derecha: rgba (255,255,255,0)
Dirección del gradiente: 45 grados
Posición inicial: 25%
Posición final: 0%

Columna 2 Gradiente Color de fondo a la izquierda: rgba (255,255,255,0)
Columna 2 Color de fondo degradado a la derecha: #ffffff
Dirección del gradiente de la columna 2: 45 grados
Posición inicial de la columna 2: 65%
Posición final de la columna 2: 0%

La clave de estos diseños de degradado de fondo es que todos tienen la misma dirección de degradado de 45 grados. Luego, puede usar la posición inicial para espaciar el diseño de manera uniforme.

Configuración de estilo para el diseño de lista n. ° 2

En este punto, realmente podemos divertirnos modificando los diseños de nuestras listas de formas únicas. Para este segundo ejemplo, le mostraré lo fácil que es transformar su diseño con solo unos pocos cambios menores. Vaya al módulo de texto en la primera columna y actualice la configuración de la siguiente manera:

Primero elimine el degradado de fondo.
Peso de fuente de lista desordenada: Medio
Color de texto de lista desordenada: rgba (0,0,0,0.5)
Peso de fuente de lista ordenada: Regular
Color de texto de lista ordenada: # 9b1d20
Peso de fuente del encabezado 5: Delgado
Encabezado 5 Color del texto: rgba (0,0,0,0.8)
Encabezado 5 Tamaño del texto: 5vw (escritorio)

Ahora copie los estilos del módulo en el módulo de texto en la columna de la derecha.

Aquí está el diseño final de nuestro segundo ejemplo.

Diseño de lista n. ° 3

Para el tercer ejemplo, pensé que sería bueno dar un ejemplo de un diseño de lista de una columna centrada. Para crear este diseño, duplique la segunda sección de ejemplo. En la nueva sección duplicada, cambie la estructura de filas a una columna y luego elimine el segundo módulo de texto.

Ahora actualice la configuración de la sección con nuevos colores de fondo degradados:

Color de fondo degradado a la izquierda: # 559CAD
Gradiente de color de fondo a la derecha: # 4f6d7a

Actualice la configuración de Fila con un nuevo color de fondo degradado a la izquierda:

Color de fondo degradado a la izquierda: # 4f6d7a

Luego agregue un nuevo degradado de fondo al módulo de texto .

Color de fondo degradado a la izquierda: rgba (255,255,255,0)
Gradiente de color de fondo a la derecha: # 559cad
Dirección del gradiente: 45 grados
Posición inicial: 75%
Posición final: 0%

Esto crea una versión más oscura del diseño de fondo simétrico en el diseño de lista n. ° 2 para una lista de una columna. La clave de este diseño es colocar degradados de fondo en capas agregando uno a la sección, la fila y el módulo.

Configuración de estilo para el diseño de lista n. ° 3

Para este tercer ejemplo, quiero mostrarle cómo se ve una lista alineada al centro. Y para el elemento de la lista ordenada, usaré un estilo decimal / numérico más tradicional.

Vaya a la configuración del módulo de texto y actualice lo siguiente:

Fuente de lista ordenada: Poppins
Peso de la fuente de la lista ordenada: Pesado
Alineación de texto de lista ordenada: centro
Tamaño del texto de la lista ordenada: 4vw (escritorio), 50px (tableta)
Color de texto de lista ordenada: # f4f1bb
Tipo de estilo de lista ordenada: decimal
Posición de estilo de lista ordenada: Interior
Sangría de elemento de lista ordenada: 0vw

(Nota: cambiar la posición del estilo hacia adentro hará que el número se apile sobre el texto del encabezado, lo cual es conveniente para este diseño).

Peso de fuente de lista desordenada: Ligero
Color de texto de lista desordenado: #ffffff

Fuente del encabezado 5: Lato
Peso de fuente del encabezado 5: Delgado
Encabezado 5 espaciado de letras: 6vw (escritorio), 70px (tableta), 40px (teléfono inteligente)
Color del texto del encabezado 5: #ffffff
Encabezado 5 Tamaño del texto: 6vw

Relleno personalizado (escritorio): 15% izquierda, 15% derecha
Relleno personalizado (tableta): 5% izquierda, 5% derecha

También debe quitar el relleno izquierdo personalizado de 50 píxeles en el teléfono inteligente para este diseño.

Aquí está el diseño final.

Diseño de lista # 4

Para este cuarto ejemplo, voy a ir con un diseño de “lista” más mínimo (¿ves lo que hice allí?). Para la lista ordenada, usaré números romanos en mayúsculas grandes en la fuente Lato. También enmarcaré la lista agregando una sombra de cuadro a cada módulo.

Configuración de estilo para el diseño de lista n. ° 4

Para poner en marcha este diseño de lista, duplique la primera sección con el diseño de lista n. ° 1. Luego actualice la configuración del primer módulo de texto en la nueva sección de la siguiente manera:

Eliminar degradado de fondo.

Fuente de lista ordenada: Lato
Peso de fuente de lista ordenada: Ligero
Color de texto de lista ordenada: # 000000
Tamaño del texto de la lista ordenada: 6vw
Tipo de estilo de lista ordenada: romana superior
Sangría de elemento de lista ordenada: 0vw

Fuente del encabezado 5: Lato
Peso de fuente del encabezado 5: Negrita
Estilo de fuente de encabezado: subrayado
Título 5 Color de subrayado: rgba (0,0,0,0.14)
Título 5 Estilo de subrayado: doble
Título 5 Color del texto: # 000000
Tamaño del texto del encabezado 5: 40px

Acolchado personalizado: 3vw izquierda, 3vw derecha

Elimine el relleno izquierdo personalizado para tableta y teléfono inteligente que se transfirió del diseño anterior.

Posición horizontal de la sombra del cuadro: 6px
Posición vertical de la sombra del cuadro: 6px
Fuerza de propagación de la sombra de caja: 0px
Fuerza de desenfoque de sombra de caja: 0px
Color de sombra: # 000000
Posición de la caja de sombra: Sombra interior

Copie los estilos de módulo en la segunda columna. Luego actualice la posición de la sombra del cuadro a la sombra exterior.

Aquí esta el resultado final.

¡Eso es todo!

Pensamientos finales

Después de crear y ajustar sus listas html en los ejemplos anteriores, debería comprender mejor cómo aprovechar el poder de la configuración del módulo de texto como un experto en Divi. Ya no tendrá que conformarse con diseños de listas aburridos en su contenido. Espero que estas técnicas te inspiren a crear increíbles diseños de listas para tu próximo proyecto.

Me encantaría ver algunos ejemplos tuyos, así que no dudes en compartir los comentarios.

¡Salud!