Crear 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 Divi y su módulo de texto, tienes todo lo que necesitas para transformar listas ordinarias en bellas 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.
Aquí hay un vistazo a los cuatro diseños de listas que construiremos en este tutorial.
Inspirado en la configuración del módulo de texto
Si eres como yo, es posible que tienda a pasar por alto algunas de las opciones «ocultas» que acechan en lo profundo de 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 cuerpo del texto, enlaces, listas desordenadas, listas ordenadas y citas en bloque .
Y, hay algunas gemas ocultas debajo de estas pestañas que quizás 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 una serie de opciones únicas disponibles (18 para ser exactos), incluidos números romanos y decimales con un cero inicial.
Estos pueden parecer insignificantes, pero cuando aprovecha las opciones de diseño, puede producir algunos diseños realmente creativos.
También puede orientar el estilo de diferentes niveles de título (o etiquetas) en cada una de las pestañas de las opciones de estilo de título.
Esta capacidad de apuntar a múltiples elementos html en su contenido abre algunas posibilidades maravillosas. Con suerte, también te inspirarán a ti.
Para obtener más información sobre esto, consulte la actualización de funciones que explica algunas de estas maravillosas opciones de texto.
Creando tu Lista HTML
Una lista html puede estar «ordenada» (con números, números romanos, etc.) o «desordenada» (con iconos cuadrados, iconos circulares, etc.). Para las listas desordenadas, los elementos de la lista estarán envueltos en una etiqueta «ul» («ul» significa «lista desordenada»). Para las listas ordenadas, los elementos de la lista están envueltos 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:
|
01
02
03
04
05
|
<ol> <li>List Item</li> <li>List Item</li> <li>List Item</li></ol> |
Que por defecto se verá así:
- Elemento de la lista
- Elemento de la lista
- Elemento de la lista
De hecho, puede crear una lista HTML utilizando el editor wysiwyg dentro de un módulo de texto Divi. Asegúrese de que está 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 Intro) 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.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
|
<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í:
- Elemento de lista ordenada
- Elemento de lista desordenado
- Elemento de lista ordenada
- Elemento de lista desordenado
- Elemento de lista ordenada
- 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í:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
|
<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 para este tutorial. Pero lo que debe tener en 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, pongamos en funcionamiento nuestra página para comenzar nuestro diseño en el generador visual.
Creando la Sección y 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.
Creación de 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:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
|
<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 ordenados y el texto ficticio «lorem ipsum» serán los elementos de la lista desordenada anidada.
Por defecto se verá algo como esto:
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 #1
Para empezar, vamos a darle a nuestro módulo de texto un fondo degradado de la siguiente manera:
Color izquierdo de fondo degradado: rgba(0,0,0,0.04)
Color derecho de fondo degradado: rgba(255,255,255,0)
Dirección de degradado: 90 grados
Posición inicial: 25 %
Posición final: 0 %
Dar estilo a los elementos de la lista ordenada
Ahora vaya a la pestaña de diseño y seleccione la pestaña de la lista ordenada debajo de la opción Texto.
Luego actualice lo siguiente:
Fuente de lista ordenada: Abril Fatface
Peso de fuente de lista ordenada: Negrita
Color de texto de lista ordenada: #559cad
Tamaño de texto de lista ordenada: 45px
Altura de línea de lista ordenada: 1.6em
Tipo de estilo de lista ordenada: cero decimal
Posición de estilo de lista ordenada: Fuera de
lista ordenada Sangría del artículo: 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 demás elementos.
Dar estilo a los elementos de la lista desordenada
Ahora haga clic en la pestaña de la lista ordenada para cambiar las siguientes configuraciones:
Fuente de lista desordenada: Montserrat
Peso de fuente de lista desordenada: Claro
Color de texto de lista
desordenada: Tamaño de texto de lista desordenada: 18px
Tipo de estilo de lista desordenada: Ninguno
Sangría de elemento de lista desordenada: 0.01px
Estilo del encabezado H5
El último elemento que necesitamos diseñar es el encabezado H5. Para hacer eso, vaya a las opciones debajo de Texto de encabezado y haga clic en la pestaña H5. Luego actualice lo siguiente:
Título 5 Fuente: Montserrat
Título 5 Peso de la fuente: Claro
Título 5 Estilo de fuente: Mayúsculas (TT)
Título 5 Color del texto: #4f6d7a
Título 5 Tamaño del texto: 5vw (escritorio), 70px (tableta), 40px (teléfono inteligente)
Para finalizar el diseño de nuestro módulo de texto, agregue el siguiente relleno personalizado:
Relleno personalizado (escritorio): 3vw superior, 3vw inferior
Relleno personalizado (tableta): 2vw izquierdo
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, debemos 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:
|
01
|
<ol start="4"> |
Ahora veamos el resultado final.
Diseño de lista #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 izquierdo de fondo degradado: #ffffff
Color derecho de fondo degradado: rgba(155,29,32,0.08)
Dirección de degradado: 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 izquierdo de fondo degradado: rgba(155,29,32,0.08)
Color derecho de fondo degradado: rgba(255,255,255,0)
Dirección de degradado: 45 grados
Posición inicial: 25 %
Posición final: 0 %
Color de fondo izquierdo de degradado de columna 2: rgba(255,255,255,0)
Color de fondo derecho de degradado de columna 2: #ffffff
Dirección de degradado de columna 2: 45 grados
Posición inicial de columna 2: 65 %
Posición final de 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 de inicio para espaciar el diseño de manera uniforme.
Configuración de estilo para el diseño de lista #2
En este punto, realmente podemos divertirnos ajustando 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
de encabezado 5: Delgado Color
de texto de encabezado 5: rgba(0,0 ,0,0.8)
Título 5 Tamaño del texto: 5vw (escritorio)
Ahora copie los estilos del módulo en el módulo de texto en la columna derecha.
Aquí está el diseño final de nuestro segundo ejemplo.
Diseño de lista #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 fila 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:
Fondo degradado Color izquierdo: #559CAD
Fondo degradado Color derecho: #4f6d7a
Actualice la configuración de Fila con un nuevo color de fondo degradado izquierdo:
Fondo degradado Color izquierdo: #4f6d7a
Luego agregue un nuevo degradado de fondo al módulo de texto .
Color izquierdo de fondo de degradado: rgba(255,255,255,0)
Color derecho de fondo de degradado: #559cad
Dirección de degradado: 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 #2 para una lista de una columna. La clave de este diseño es colocar gradientes 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 #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/número más tradicional.
Vaya a la configuración del módulo de texto y actualice lo siguiente:
Fuente de lista ordenada: Poppins
Peso de fuente de lista ordenada: Pesada
Alineación de texto de lista ordenada: Centro
Tamaño de texto de 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 al interior hará que el número se acumule sobre el texto del encabezado, lo cual es conveniente para este diseño).
Peso de fuente de lista desordenada: Claro
Color de texto de lista desordenada: #ffffff
Fuente del encabezado 5: Lato
Peso de la fuente del encabezado 5: Delgado
Espaciado entre letras del encabezado 5: 6vw (escritorio), 70px (tableta), 40px (teléfono inteligente)
Color del texto del encabezado 5: #ffffff
Tamaño del texto del encabezado 5: 6vw
Relleno personalizado (escritorio): 15 % a la izquierda, 15 % a la derecha
Relleno personalizado (tableta): 5 % a la izquierda, 5 % a la derecha
También debe eliminar el relleno izquierdo personalizado de 50 px 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 minimalista (¿ves lo que hice allí?). Para la lista ordenada, voy a usar grandes números romanos en mayúsculas 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 #4
Para impulsar este diseño de lista, duplique la primera sección con el diseño de lista #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: Luz
Color de texto de lista ordenada: #000000
Tamaño de texto de lista ordenada: 6vw
Tipo de estilo de lista ordenada: romano superior
Sangría de elemento de lista ordenada: 0vw
Fuente del encabezado 5: Lato
Peso de la fuente del encabezado 5: Negrita
Estilo de fuente del encabezado: Subrayado
Color del subrayado del encabezado 5: rgba(0,0,0,0.14)
Estilo del subrayado del encabezado 5: doble
Color del texto del encabezado 5: #000000
Tamaño del texto del encabezado 5: 40px
Relleno personalizado: 3vw izquierda, 3vw derecha
Elimine el relleno izquierdo personalizado para tabletas y teléfonos inteligentes transferido del diseño anterior.
Posición horizontal de la sombra del cuadro: 6px
Posición vertical de la
sombra del cuadro: 6px Intensidad de propagación de la sombra del cuadro: 0px
Intensidad de desenfoque de la sombra del cuadro: 0px
Color de la sombra: #000000
Posición de la sombra del cuadro: Sombra interior
Copie Estilos de módulos 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 tener una mejor comprensión de cómo aprovechar el poder de la configuración del módulo de texto como un experto en Divi. Ya no tendrás que conformarte con diseños de listas aburridas en tu 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 compartirlos en los comentarios.
¡Salud!