homefinance blog
Crear proyectos 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 texto Div, tienes todo lo que necesitas para convertir listas ordinarias en hermosas obras de arte. La configuración del módulo Divi de texto le permite apuntar y estilizar diferentes elementos HTML en sus contenidos, incluidas las listas. Y con algunas técnicas de diseño, puede capitalizar el poder de estas opciones para personalizar sus listas de manera sorprendente. En este tutorial, le mostraré cómo puede crear listas únicas en la división.
Vamos a empezar. Pull With the Eye es un vistazo a los cuatro modelos de listas que construiremos en este tutorial.
Inspirado en la configuración del módulo de texto si usted es como yo, es posible que tenga la tendencia a pasar por alto algunas de las opciones “ocultas” que se esconden profundamente en el Builder Div. 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 bloqueadas.
Y, hay algunas piedras ocultas en estas pestañas que quizás no haya pensado en usar en el diseño. Por ejemplo, ¿sabía que puede cambiar las opciones de las listas para listas desordenadas? Hay una serie de opciones únicas disponibles (18 para ser exactamente), incluidos decimales romanos y cero.
Estos pueden parecer insignificantes, pero cuando puede usar opciones de diseño, puede producir algunos modelos verdaderamente creativos. También puede orientar el estilo de diferentes niveles de título (o etiquetas) en cada una de las pestañas debajo de las opciones de estilo de título. Esta capacidad de apuntar a varios elementos HTML en su contenido abre algunas posibilidades maravillosas. Esperamos que también te inspire.
Para obtener más detalles, consulte Actualización de las características que explican algunas de estas maravillosas opciones de texto. Creación de su lista HTML Se puede “ordenar” (con números, figuras romanas, etc.) o “desordenado” (con iconos cuadrados, iconos circulares, etc.). Para las listas desordenadas, los elementos de la lista se empaquetarán en un “UL” (“UL” etiqueta 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 lista está envuelto en una etiqueta “Li” para “Elemento de lista”).
Aquí está la estructura básica de una lista ordenada:
Artículo de lista
Artículo de lista
Artículo de lista
Qué valor predeterminado se mostrará de la siguiente manera:
Elemento de lista
Elemento de lista
Elemento de lista
En realidad, puede crear una lista HTML utilizando el editor WYSIWYG a partir de un módulo de texto DIV. Asegúrese de editar en la pestaña visual y simplemente ingrese los elementos en la lista asegurando que haya una interrupción de línea (presione Entrar) después de cada uno. Luego resalte el contenido y haga clic en una de la lista de la lista en la parte superior del editor.
Ahora vaya a la pestaña Texto para ver cómo se ve HTML:
Esto funciona bien para listas simples, pero si desea crear listas vestidas (una lista de una lista), es mejor crearlas usando HTML (usando la pestaña de texto) para evitar el dolor de cabeza al intentar hacerlo en el editor Wysiwyg (visual (visual pestaña). Aquí está la estructura básica de una lista de tocadores que tiene una lista ordenada con cada artículo en la lista que tiene una lista desordenada.
Elemento de la lista ordenada
Algunos elementos de la lista
Elemento de la lista ordenada
Algunos elementos de la lista
Elemento de la lista ordenada
Algunos elementos de la lista
Por defecto, esta lista HTML HTML se verá así:
Elemento de la lista ordenada
Artículo de lista desordenado
Elemento de la lista ordenada
Artículo de lista desordenado
Elemento de la lista ordenada
Artículo de lista desordenado
También puede agregar otras etiquetas HTML a la lista. Por ejemplo, podemos envolver el elemento listado ordenado en una etiqueta H5. El resultado se verá así:
Elemento de la lista ordenada
Algunos elementos de la lista
Elemento de la lista ordenada
Algunos elementos de la lista
Elemento de la lista ordenada
Algunos elementos de la lista
No se preocupe, esto es tan complicado como lo obtengo para este tutorial. Pero lo que necesitas hacer un poco más tarde, pero por ahora, pongamos nuestra página en funcionamiento para comenzar nuestro diseño en el Visual Builder. Creación de la sección y la fila para listas Crear una nueva página e implementar Visual Builder. Luego seleccione la opción de crear una página desde rasguños. Luego cree una sección normal con dos columnas. Creando la lista HTML en un módulo de texto en la primera columna de su turno, agregue un nuevo módulo de texto. En el cuadro de contenido desde la configuración de texto, ingrese la siguiente lista HTML:
Design
lorem ipsum dolor sitio amet, consecuencia adipiscing elit. Integer Nec Odio. Libro de elogio. SED CURSUS ANTE DAPIBUS DIAM. Sed nisi. Nulla quis sem en nibh elementum imperdiet.
Desarrollar
lorem ipsum dolor sitio amet, consecuencia adipiscing elit. Integer Nec Odio. Libro de elogio. SED CURSUS ANTE DAPIBUS DIAM. Sed nisi. Nulla quis sem en nibh elementum imperdiet.
Entrega
lorem ipsum dolor sitio amet, consecuencia adipiscing elit. Integer Nec Odio. Libro de elogio. SED CURSUS ANTE DAPIBUS DIAM. Sed nisi. Nulla quis sem en nibh elementum imperdiet.
Esta estructura debería parecer familiar desde anteriormente. El texto del encabezado H5 será los elementos listados ordenados, y el texto ficticio “lorem ipsum” será la lista de la lista desordenada. Por defecto, se verá así:
No es demasiado impresionante hasta ahora, lo sé. Pero, con este contenido en vigor, ¡ahora podemos comenzar la parte divertida del diseño de nuestra lista con Div! Nota importante: Debido a que cada diseño es una versión modificada del primer diseño, sería mejor comenzar con el primer diseño en este tutorial y mantenerlos en orden. Lista de diseño # 1
Para comenzar, ofrecamos nuestro módulo de texto un fondo de gradiente de la siguiente manera: fondo de fondo con mano izquierda: RGBA (0.0,0,04) Derecho -Conaldo de color de fondo: RGBA (255,255,255,0) Dirección de gradiente: 90 grados Posición inicial: 25% de posición final: 0%
Estilizar los elementos enumerados ordenados ahora revise la pestaña de diseño y seleccione la lista de pedidos en el interruptor de texto.
Luego, actualice lo siguiente: Fuente Lista ordenada: Abril Fatface Swilled Lista Fuente Peso: Bold El color del texto de la lista ordenó: # 559 Tamaño de tamaño de Cad Somemed: 45 PX Altura Lin. Ordenado: Fuera de la lista Artículo de indentación comandada: 2VW
Notará que el H5 y la lista desordenada vestida heredarán el estilo de los padres ordenados. No se preocupe, podrá anular el estilo de los otros elementos.
Estilización de los artículos de la lista desordenada Ahora haga clic en la lista de pedidos para cambiar la siguiente configuración: Fuente Lista de noordinarios: Montserrate Fuente de lista no ordenada: Fácil el color del texto de la lista desordenada: El tamaño de la lista no ordenada: 18 PX Tipo de lista no ordenada: Lista no ordenada: Ninguna sangría del elemento de lista desordenado: 0.01 PXSTIL H5 El último elemento que necesitamos para estilizar es el encabezado H5. Para hacer esto, acceda a las opciones debajo del texto del encabezado y haga clic en la pestaña H5. Luego actualice lo siguiente: Sección 5 Fuente: Montserrat Sección 5 Peso de la fuente: Título fácil 5 Estilo de fuente: Eppercase (TT) Sección 5 Color de texto: # 4f6d7a Título 5 Dimensión de texto: 5VW (escritorio), 70 PX (tableta), 40 PX (teléfono inteligente)
Para completar el diseño de nuestro módulo de texto, agregue el siguiente relleno personalizado: Lineo personalizado (escritorio): 3VW arriba, 3VW Down Lining personalizado (tableta): trenza personalizada de 2 VW (teléfono inteligente): 50 px izquierda
Guarde la configuración. Ahora copie el módulo de texto y péguelo en la segunda columna de la fila. Es posible notar que los números de lista deben ajustarse en el módulo de texto duplicado, para continuar desde la lista anterior. Queremos que nuestra 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 desde la configuración del módulo de texto y reemplace la etiqueta “OL” con la siguiente:
Ahora, verifiquemos el resultado final.
Diseño de la lista no. 2
Para este segundo ejemplo del diseño de la lista, reproduciré la primera sección que creamos para darnos un comienzo. También introduciré un fondo frío para diseñar la lista utilizando gradientes de fondo. Creación de un diseño de gradiente de fondo personalizado en la sección duplicada, actualice la configuración de la sección con el siguiente fondo de gradiente: fondo degradado izquierdo: #FFFFF de gradiente derecho Fondo: RGBA (155,29,32.08) Dirección de gradiente: 45 grados Posición inicial: 50% final final Posición: 0% ahorra configuraciones. Ahora actualice la configuración de la fila con el siguiente gradiente de fondo: fondo de fondo con mano izquierda: RGBA (155,29,32.08) Gradiente de color de fondo derecho: RGBA (255,255,255,0) Dirección de gradiente: 45 grados Posición inicial: 25% Posición final: 0% Columna 2 Gradiente de fondo izquierdo: RGBA (255,255,255.0) Columna 2 Jardín de color derecho: #FFFFFFF COLUMNA 2 DIRECCIÓN DEL PROBACTOR: 45 DEG COLUMNA 2 Posición de inicio: 65% Columna 2 Posición final: 0%
La clave de estos modelos de gradiente de fondo es que todos tienen la misma dirección de gradiente de 45 grados. Luego puede usar la posición inicial para distanciar el diseño de manera uniforme. Configuración de estilo para diseñar listas # 2 En este momento, realmente podemos divertirnos modificando nuestras listas de maneras únicas. Para este segundo ejemplo, le mostraré lo fácil que es convertir su diseño con solo unos pocos cambios menores. Acceda al módulo de texto en la primera columna y actualice la configuración de la siguiente manera: primero elimine el gradiente de fondo. Peso de la lista de la lista desordenada: Lista de color de texto de texto medio ordenado: RGBA (0.0,0,5) Lista ordenada Fuente Peso: texto regular Texto Someed: # 9B1D20 Rúbrica 5 Fuente Peso: Título delgado 5 Color de texto: RGBA (RGBA (RGBA 0.0, 0,0,8) Título 5 Dimensión de 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 del segundo ejemplo.
El diseño de la lista no. 3
Para el tercer ejemplo, pensé que sería bueno dar un ejemplo de una lista centrada de una columna. Para crear este diseño, copie la segunda sección, por ejemplo. En la nueva sección duplicada, cambie la estructura de la fila en 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 con colaboración izquierda: # 559CAD Derecha BUAM DEPARDADO: Nuevo gradiente de fondo en el módulo de texto.Color de fondo degradado de la izquierda: RGBA (255,255,255.0) Derecho -Color de fondo degradado: # 559CAD Gradiente Dirección: 45 grados Posición inicial: 75% Posición final: 0% Crear una versión más oscura de fondo simétrico en la lista de diseño # 2 para una lista de una lista de A columna.La clave de este diseño es estratificar los gradientes de fondo agregando uno a la sección, fila y modo.
Configuración de estilo para diseñar listas # 3 Para este tercer ejemplo, quiero mostrarle lo que parece una lista alineada en el centro. Y para el elemento de lista ordenado, usaré un estilo decimal / numérico más tradicional. Acceda a la configuración del módulo de texto y actualice lo siguiente: Lista de fuentes ordenada: Poppins Lista nadada Fuente Peso: Alineación dura del texto de la lista ordenada: texto central Texto Someed: 4VW (escritorio), 50 px (tableta) Texto Swroit : # F4F1BB Tipo de estilo de lista Ordinado: decimal La posición del estilo de la lista ordenada: Dentro de la lista Artículo de sangría ordenada: 0VW (Nota: Cambiar la posición del estilo interior hará que el número sean encima del cabezal del encabezado, que es conveniente para este diseño.) Lista desordenada Fuente Peso: fácil El color del texto de la lista desordenada: #FFFFFFFFF 5 FUENT: LATO Rúbrica 5 Fuente: Rúbrica delgada 5 letras Espacio: 6VW (escritorio), 70 PX (tableta), 40 PX (teléfono inteligente) Título 5 Color de texto: #FFFFFFT Título 5 Tamaño Texto: Fuera personalizada de 6 VW (Escritorio): 15% izquierda, 15% de revestimiento personalizado derecho (tableta): 5% a la izquierda, 5% a la derecha también debe eliminar el relleno Subiendo a 50 PX personalizados en el teléfono inteligente para este diseño. Aquí está el diseño final. El diseño de la lista no. 4
Para este cuarto ejemplo, iré con un diseño más mínimo: “Lista” (¿vea lo que hice allí?). Para la lista ordenada, usaré grandes números con grandes mayúsculas en la fuente Lato. También encajaré en la lista agregando un tono de caja a cada módulo. Configuración de estilo para diseñar listas # 4 para activar esta lista el diseño rápidamente, copie la primera sección con el diseño de la lista # 1. Luego actualice la primera configuración del módulo de texto en la nueva sección, de la siguiente manera: elimine el gradiente de fondo. Fuente comandada de la lista: Lata Lista ordenada Fuente de peso: Color de texto fácil comandado: # 000000 Tamaño de tamaño TEXTO LISTA SWEDED: 6VW Lista swrvened: SUPER-ROMAN Swited Lista Artículo: 0VW Rúbrica 5 Fuente: Lato Título 5 Fuente de peso: Dare Style Font of Antet: Título 5 subrayado Color subrayado: RGBA (0.0,0,0,0.14) Título 5 Estilo subrayado: Título doble 5 Color de texto: Personalizado para tableta y teléfono inteligente tomado del diseño anterior. Posición horizontal de la sombra de la caja: 6 PX Box Sombra Posición vertical: 6 PX Potencia de extensión de la caja: 0 PX Potencia de la incertidumbre de la sombra de la caja: 0 PX Color de sombra: # 000000 Caja Sombra Posición: El La sombra interna copia los estilos del módulo en la segunda columna. Luego actualice la posición de la sombra de la caja en el tono exterior. Aquí esta el resultado final.
