La mayoría de los sitios web necesitan una sección de características bien diseñada para mostrar las características de los productos o servicios. Entonces, en este tutorial, te mostraré cómo crear una sección de características únicas en Divi . Para hacer esto, vamos a ponernos un poco creativos con el módulo Contador de círculos de Divi para agregar animación a sus íconos publicitarios. Y al usar un espacio personalizado, le mostraré cómo puede colocar fácilmente sus anuncios publicitarios para que coincidan muy bien con un fondo divisor. El diseño final es limpio y único. Y con algunos toques menores, puede ser una gran adición a su próximo proyecto.
¡Empecemos!
Aquí hay un pequeño adelanto del diseño y el gif para ayudar a ilustrar el elemento de animación.
Creación de una nueva página e implementación del Visual Builder
Para comenzar, vaya a su Panel de WordPress y vaya a Páginas> Agregar nuevo. Luego, asigne un título a su página y haga clic para usar Divi Builder. Luego haga clic para usar Visual Builder. Se le pedirá con tres opciones. Elija la opción «Construir desde cero».
¡Tu lienzo en blanco te espera!
Crear el encabezado de la sección de características
El encabezado superior de la sección de características es bastante simple. El elemento único es la sutil sombra del cuadro que se muestra debajo para dar un poco de profundidad al diseño.
Para crearlo, inserte una fila de una columna en su sección habitual.
Luego agregue un módulo de texto a la fila y actualice la configuración de la siguiente manera:
Contenido:
|
01
02
|
<h1>Our Features</h2>Everything you need. |
Fuente del texto: Montserrat
Peso de la fuente del texto:
Texto semi negrita Tamaño del texto: 22 px
Orientación del texto: Encabezado central
Peso de la fuente: Ultra negrita Tamaño
del texto del encabezado: 6vw (escritorio), 50 px (tableta), 30 px (teléfono inteligente)
Ahora guarde su configuración y salte a la configuración de la sección y agregue una sombra de cuadro de la siguiente manera:
Sombra de cuadro: ver captura de pantalla
Posición vertical de sombra de cuadro: 19 px
Fuerza de desenfoque de sombra de cuadro: 80 px
Fuerza de propagación de sombra de cuadro: -16 px
Color de sombra: rgba (136,150,171,0.13)
Guardar ajustes.
Cosas bastante simples. Ahora vayamos a la parte divertida.
Creación de la sección de características principales y el diseño de fondo
Necesitamos agregar una nueva sección para mantener nuestras funciones. Normalmente, podría simplemente agregar una nueva fila a la sección anterior, pero en este caso necesitamos agregar un fondo de divisor que está disponible en el elemento Sección.
Continúe y agregue una nueva sección directamente debajo de la sección que acaba de terminar. Luego agregue un diseño de cuatro columnas a la fila.
Agregaremos notas publicitarias a estas columnas, pero por ahora actualicemos la configuración de nuestra sección.
Para esta sección, debemos darle un ancho máximo personalizado. Esto es importante para mantener el diseño en su lugar en navegadores de mayor tamaño. También necesitamos agregar un Divisor de sección para que sirva como fondo que coincida con la disposición de nuestros anuncios publicitarios (más sobre esto más adelante).
Vaya a la sección de configuración y actualice lo siguiente:
Ancho: 1080 px
Alineación de la sección: Centro
Divisores: Superior
Estilo del divisor: vea la captura de pantalla
Color del divisor: rgba (136,150,171,0.07)
Altura del divisor: 52 %
Guardar ajustes.
Dar a la sección un ancho personalizado (o ancho máximo) de 1080 px es básicamente cómo se configuran las filas de forma predeterminada dentro de una sección. Entonces, esencialmente, estamos haciendo que toda nuestra sección tenga el tamaño de una fila predeterminada.
Agregando Blurbs a la Fila de Cuatro Columnas
En este punto, podemos continuar y comenzar a agregar nuestras notas publicitarias a cada una de las cuatro columnas. Haga clic en el ícono gris en la primera columna para agregar su primera propaganda. Actualice el contenido en el cuadro para incluir menos texto (2 oraciones), luego elija usar un ícono en lugar de una imagen (elegí el ícono de imagen).
En la pestaña de diseño, actualice lo siguiente:
Color del icono: #974450
Icono del círculo: SÍ
Color del círculo: rgba(255,255,255,0.5)
Usar tamaño de fuente del icono: SÍ
Tamaño de fuente del icono: 48px
Orientación del texto: Centro
Guardar ajustes.
Ahora copie y pegue el módulo de publicidad en cada una de las columnas restantes para que tenga una publicidad en cada columna.
Puede regresar y actualizar los íconos si lo desea en este punto, pero no es necesario.
Agregue contadores circulares para superponer iconos de Blurb
Para agregar la animación a nuestros íconos publicitarios, superpondremos cada ícono con un contador circular que tiene un valor numérico diferente. Esto hará que la animación del círculo aumente gradualmente con cada ícono para mostrar la progresión. Sin embargo, puede usar cualquier valor numérico que desee con cada contador de círculo.
Haga clic en el ícono gris «Agregar nuevo módulo» debajo del módulo publicitario en la primera columna y luego agregue el módulo de contador.
Antes de comenzar a editar la configuración del módulo circular, continúe y arrástrelo sobre el módulo publicitario. Ahora puede actualizar la configuración de contenido de la siguiente manera:
Eliminar el texto en el cuadro de título
Número: 25
Luego actualice la configuración de la pestaña de diseño de la siguiente manera:
Color de fondo de la barra: #974450 (mismo color que los íconos de la publicidad)
Color del texto del número: rgba(0,0,0,0) (esto es completamente transparente para ocultar el número)
Tamaño del texto del número: 0px (para deshacerse de cualquier espacio de texto no deseado dentro del círculo)
Ancho: 109 px (esto se configuró en función del tamaño del icono que se superpondrá)
Alineación del módulo: Centro
Margen inferior: -102 px (esto se superpondrá perfectamente al icono)
Guardar ajustes.
Ahora todo lo que necesita hacer es copiar y pegar el módulo de contador de círculos en cada una de las columnas restantes y luego arrastrarlo a la parte superior de cada propaganda. Una vez que los contadores de círculos duplicados estén en su lugar, actualice el segundo contador de círculos a 50, el tercer contador a 75 y el cuarto contador a 100. El resultado debería tener este aspecto después de completar la animación.
Utilice el relleno de filas para colocar los iconos de modo que coincidan con el divisor
El último paso de este diseño es colocar los íconos para que coincidan con el arco del fondo del divisor. Para hacer esto, necesitamos agregar un relleno personalizado en la fila. Abra la configuración de la fila y actualice lo siguiente:
Hacer esta fila de ancho completo: SÍ
Columna 2 Relleno personalizado: 9 % superior (escritorio), 0 % superior (tableta)
Columna 3 Relleno personalizado: 9 % superior (escritorio), 0 % superior (tableta)
¡Eso es todo!
Mira el resultado final.
Observe cómo los íconos ahora están animados por el contador circular con valores numéricos variables. Y los iconos coinciden con el fondo del divisor.
Cómo se ve la sección de características en dispositivos móviles
A continuación se muestra cómo se ve el diseño en las pantallas de tabletas y teléfonos inteligentes.
Pensamientos finales
Los elementos únicos de este diseño de sección de características son ligeros y sutiles, lo que debería facilitarle la incorporación en sus propios diseños con algunos ajustes menores. Y si las animaciones del contador de círculos no son lo tuyo, no dudes en omitirlas y simplemente usa el icono de círculo del módulo de publicidad. O puede optar por usar solo los contadores circulares con los valores numéricos visibles para un diseño creativo para presentar estadísticas. En todo caso, espero que esto le dé algunas ideas para explorar por su cuenta.
Espero escuchar de usted en los comentarios.
¡Salud!