Una de las páginas de destino exclusivas que les ofrecemos como miembros vitalicios y nuevos clientes del Black Friday este año es la impresionante página de destino del kit de interfaz de usuario. Este diseño contiene algunas de las mejores combinaciones de diseño integradas de Divi y maquetas de alta calidad que llevarán su sitio web al siguiente nivel. En esta publicación, le mostraremos cómo tenerlo en sus manos y usarlo de manera efectiva.

Si es un cliente vitalicio actual o si ha comprado una cuenta nueva o se ha actualizado durante nuestra oferta de Black Friday, puede descargar este diseño ahora mismo.

Obtenga la página de inicio exclusiva del kit de interfaz de usuario del Black Friday

Antes de entrar en este caso de uso, deberá tener en sus manos la página de inicio exclusiva del kit de interfaz de usuario de Black Friday que puede obtener al convertirse en un nuevo miembro de Elegant Themes, actualizar su cuenta existente o si ya es un miembro vitalicio con nosotros. Si ya es miembro vitalicio, puede iniciar sesión en nuestra área de miembros y descargar todas nuestras páginas de destino exclusivas aquí. Todos los demás deberán usar el botón a continuación para comprar o actualizar antes de poder seguir el resto de nuestro tutorial.

¡Reclame el trato antes de que desaparezca!

Uso de estructuras de columnas de Divi para enumerar productos y características de manera hermosa

En el resto de esta publicación, asumiremos que ha aprovechado nuestra oferta del Black Friday o que ya es miembro vitalicio y tiene acceso a la página de inicio del kit de interfaz de usuario del Black Friday.

Una vez que haya descargado la nueva página de inicio del kit de interfaz de usuario de nuestra área de miembros, puede ver el video a continuación para ver lo fácil que es configurarlo. También le recomendamos que siga este tutorial para preparar su sitio para una mayor personalización.

En esta publicación de caso de uso, le mostraremos cómo enumerar asombrosamente sus características y / o productos utilizando las nuevas estructuras de columnas de Divi. El diseño que manejaremos se ve muy bien con la página de inicio del kit de interfaz de usuario y le permite usar el espacio en su página de una manera efectiva y hermosa.

Avance

Echemos un vistazo al resultado en diferentes tamaños de pantalla.

Hover y animación

También agregaremos algunas configuraciones sutiles de desplazamiento y animación a los diversos elementos de diseño. Esto dará la siguiente interacción:

¡Empecemos!

Agregar nueva página usando la página de inicio del kit de interfaz de usuario

Lo primero que deberá hacer es crear una nueva página utilizando la página de inicio del kit de interfaz de usuario que ha descargado y subido. Si no está seguro de cómo hacerlo, asegúrese de revisar el video en la parte anterior de esta publicación que lo guiará paso a paso.

Localizar la sección de características en la página

Una vez que haya cargado el diseño, desplácese hacia abajo hasta que encuentre la sección de características en la página.

Eliminar filas existentes

Elimina las dos últimas filas que puedes encontrar en esta sección. Reemplazaremos el contenido de estas filas con nuestra lista de características / productos.

Agregar nueva fila debajo de la fila que contiene la fila

Estructura de la columna

Agregue una nueva fila a la sección usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de fila y modifique la configuración de tamaño en la pestaña de diseño.

• Hacer esta fila de ancho completo: Sí
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: Sí
• Ecualizar alturas de columna: Sí

Espaciado

Para asegurarnos de que este diseño se vea bien en todos los tamaños de pantalla, usaremos diferentes valores de margen y relleno personalizados:

• Margen superior: 100 px
• Margen inferior: 100 px
• Acolchado superior: 87px
• Relleno superior de la columna 1: 100 px (escritorio), 0 px (tableta y teléfono)
• Relleno superior de la columna 2: 100 px (escritorio), 0 px (tableta y teléfono)
• Relleno superior de la columna 3: 100 px (escritorio). 0px (tableta y teléfono)
• Relleno inferior de la columna 3: 50 px (tableta y teléfono)
• Columna 4 Relleno izquierdo: 10px (solo teléfono)
• Columna 4 Relleno derecho: 10px
• Columna 5 Relleno izquierdo: 5px (escritorio y tableta), 10px (teléfono)
• Columna 5 Relleno derecho: 5px (escritorio y tableta), 10px (teléfono)
• Columna 6 Relleno izquierdo: 10px
• Columna 6 Relleno izquierdo: 10px (solo teléfono)

Agregar módulo de texto a la columna 1

Agregar contenido

¡Es hora de comenzar a agregar módulos! Agregue un módulo de texto a la primera columna con un número.

Color de fondo predeterminado

Agregue un color de fondo a este módulo.

• Color de fondo: # 0f0f0f

Colocar el cursor sobre el color de fondo

Y cambia el color de fondo al pasar el mouse.

• Color de fondo: # ff5400

Imagen de fondo

También puede agregar una de las imágenes de iconos, que puede encontrar en su Biblioteca de medios, al fondo:

• Tamaño de la imagen de fondo: tamaño real
• Posición de la imagen de fondo: Centro
• Repetición de imagen de fondo: sin repetición

Configuración de texto predeterminada

Continúe modificando la configuración del texto.

• Fuente de texto: Muli
• Peso de la fuente del texto: Ligero
• Color del texto: #ffffff
• Tamaño del texto: 80 px (escritorio y teléfono), 40 px (teléfono)
• Altura de la línea de texto: 1em

• Color de la sombra del texto: ## ffffff
• Orientación del texto: izquierda

Espaciado predeterminado

Agregue un poco de relleno personalizado para crear un cuadrado.

• Relleno superior: 200 px
• Relleno izquierdo: 50px (solo teléfono)
• Relleno derecho: 50px (solo teléfono)

Espaciado de desplazamiento

Modifique la configuración de espaciado al pasar el mouse.

• Relleno izquierdo: 100px

Frontera

Para que coincida con la página de inicio del kit de interfaz de usuario, también estamos agregando algunas esquinas redondeadas sutiles. Agrega '20px' a cada una de las esquinas.

Sombra de la caja

Use la siguiente sombra de cuadro para agregar algo de color al módulo también:

• Posición horizontal de la sombra del cuadro: 20px
• Posición vertical de la sombra del cuadro: -50px
• Fuerza de propagación de la sombra de caja: 17px
• Color de sombra: # 593aff

Animación

Por último, pero no menos importante, agregue una animación de diapositiva muy sutil al Módulo de texto.

• Estilo de animación: diapositiva
• Dirección de animación: Derecha
• Intensidad de animación: 3%

Agregar módulo divisor a la columna 2

Visibilidad

El siguiente módulo que necesitaremos es un módulo divisor. Continúe y agregue uno a la segunda columna. Asegúrese de que la opción 'Mostrar divisor' esté habilitada.

• Mostrar divisor: Sí

Color

A continuación, cambie el color del divisor.

• Color: #ffffff

Espaciado

Para superponer el módulo de texto en la primera columna, usaremos algunos valores de margen personalizados que ajustaremos de acuerdo con los diferentes tamaños de pantalla.

• Margen superior: 30 px
• Margen izquierdo: -200px (escritorio y tableta), 0px (teléfono)
• Margen derecho: 200 px (escritorio y tableta), 0 px (teléfono)

Agregue el módulo de texto n. ° 1 a la columna 3

Agregar contenido

¡A la siguiente columna! Aquí, el primer módulo que necesitaremos es un título Módulo de texto. Continúe y agregue el título de su primera característica o producto.

Configuración del texto del encabezado

Luego, vaya a la configuración del texto del encabezado y realice algunos cambios para que coincidan con el paquete de diseño del kit de interfaz de usuario.

• Título 3 Fuente: Muli
• Peso de fuente del encabezado 3: Ligero
• Color del texto del encabezado 3: #ffffff
• Tamaño del texto del encabezado 3: 30 px (escritorio y tableta), 18 px (teléfono)

Espaciado

Para empujar este módulo hacia la izquierda, usaremos algunos valores de espaciado personalizados.

• Margen superior: 20px
• Margen inferior: 20px
• Margen izquierdo: -180 px (escritorio y tableta), 0 px (teléfono)
• Relleno izquierdo: 20 px (escritorio y tableta), 50 px (teléfono)
• Relleno derecho: 20px (escritorio y tableta), 50px (teléfono)

Agregue el módulo de texto n. ° 2 a la columna 3

Agregar contenido

El siguiente módulo que necesitaremos es un módulo de texto descriptivo. Continúe e ingrese la descripción de su función o producto.

Configuración de texto

A continuación, cambie la configuración de texto.

• Color del texto: rgba (255,255,255,0.5)
• Altura de la línea de texto: 2.2em

Espaciado

Empuje este módulo hacia la izquierda también usando algunos valores de espaciado personalizados.

• Margen izquierdo: -180 px (escritorio y tableta), 0 px (teléfono)
• Relleno izquierdo: 20 px (escritorio y tableta), 50 px (teléfono)
• Relleno derecho: 20px (escritorio y tableta), 50px (teléfono)

Módulo de botón Clonar y colocar en la columna 3

El último módulo que necesitaremos en la columna 3 es un módulo de botones. Para ahorrar tiempo, vamos a clonar un botón existente en la página y colocar el duplicado justo debajo de los otros dos módulos que hemos agregado.

Cambiar contenido

Cambie el contenido del módulo de botones.

Cambiar espaciado

También estamos empujando este módulo hacia la izquierda. Como puede observar, todos los módulos de la columna 3 ocupan el espacio de dos columnas. Este tipo de enfoque nos permite crear otra estructura de columnas que coincida con el resultado que queremos.

• Margen superior: 50px
• Margen izquierdo: -160 px (escritorio y tableta), 50 px (teléfono)
• Margen derecho: 50px (solo teléfono)

Agregar módulo de imagen a la columna 4

Cargar imagen

¡A la siguiente columna! Agregue un módulo de imagen a la columna 4 y cargue una imagen de su elección. Para este ejemplo, hemos utilizado dimensiones de imagen de 500 × 500, pero siéntase libre de jugar con otros tamaños de imagen también.

Sombra de la caja

Agregue una sombra de cuadro sutil a este módulo.

• Color de sombra: #ffffff

Animación

Y para colmo, agregue una animación de diapositiva a la imagen también.

• Estilo de animación: diapositiva
• Dirección de animación: izquierda
• Retraso de animación: 100 ms
• Intensidad de animación: 3%

Agregue el módulo de texto n. ° 1 a la columna 4

Agregar contenido

Justo debajo del Módulo de imagen, continúe y agregue un título Módulo de texto con algún contenido de su elección.

Color de fondo predeterminado

Cambie el color de fondo de este módulo.

• Color de fondo: # 0f0f0f

Colocar el cursor sobre el color de fondo

Y use otro color de fondo al pasar el mouse.

• Color de fondo: # 593aff

Configuración del texto del encabezado

Continúe cambiando la configuración del texto del encabezado para que coincida con la página de inicio del kit de interfaz de usuario.

• Título 4 Fuente: Muli
• Peso de fuente del encabezado 4: Ligero
• Color del texto del título 4: #ffffff
• Tamaño del texto del encabezado 4: 23px (escritorio y tableta), 18px (teléfono)

Espaciado predeterminado

A continuación, agregue algunos valores de espaciado personalizados.

• Relleno superior: 50px
• Relleno izquierdo: 30px
• Relleno derecho: 30px

Espaciado de desplazamiento

Y cambie estos valores al pasar el mouse para crear una transición agradable.

• Margen inferior: 50px
• Acolchado superior: 20px
• Acolchado inferior: 20px

Agregue el módulo de texto n. ° 2 a la columna 4

Agregar contenido

El segundo y último módulo que necesitaremos en la columna 4 es un módulo de texto descriptivo. Ingrese algún contenido de su elección.

Color de fondo

A continuación, cambie el color de fondo.

• Color de fondo: # 0f0f0f

Configuración de texto

Y modifica la configuración del texto.

• Color del texto: rgba (255,255,255,0.5)
• Altura de la línea de texto: 2.2em

Espaciado

Para crear una apariencia limpia, agregue algo de relleno personalizado a este módulo.

• Acolchado inferior: 50px
• Relleno izquierdo: 30px
• Relleno derecho: 30px

Frontera

Por último, pero no menos importante, agregue '20px' a las dos esquinas inferiores del módulo.

Clonar todos los módulos en la columna 4 dos veces y colocarlos en las columnas restantes

Cambiar imagen y contenido

Ahora que tiene todos los módulos que necesita en la columna 4, puede continuar y clonar todos estos módulos dos veces y colocar los duplicados en las dos columnas restantes. Cambie el contenido y las imágenes para crear variedad.

Clonar fila tantas veces como desee (según el número de elementos de la lista)

¡Terminamos nuestro primer elemento de la lista! Ahora puede seguir adelante y clonar esta fila tantas veces como desee, según la cantidad de funciones y / o productos que desee exhibir.

Cambiar el contenido del clon

Para cada uno de los duplicados, deberá cambiar el contenido.

Buscar y reemplazar color

También puede utilizar la función Buscar y reemplazar de Divi para cambiar rápidamente la paleta de colores de un elemento de la lista.

Cambiar el color de fondo de desplazamiento

Asegúrese de que una vez que cambie la paleta de colores, también cambie el color de fondo de desplazamiento del módulo de texto numérico.

• Color de fondo: # 593aff

Cambiar imagen de fondo

Por último, pero no menos importante, también puede elegir otro icono en la lista según la función y / o el producto que está permitiendo que aparezca.

Pensamientos finales

Este caso de uso es parte de nuestro Black Friday Deal, donde compartimos 6 páginas de inicio de edición limitada GRATIS con clientes y miembros vitalicios del Black Friday. Al unirse a nuestra comunidad empoderada durante estos días y convertirse en miembro, obtendrá:

• 25% DE DESCUENTO EN TODO
• Las 6 páginas de destino de forma gratuita
• Acceso a nuestros increíbles temas y complementos
• Premios de bonificación

¡Aprovecha la oportunidad y conviértete en miembro hoy!