La mayoría de los sitios web necesitan una sección de funciones bien diseñadas para mostrar las características de los productos o servicios. Entonces, en este tutorial, le mostraré cómo crear una sección de características únicas en la división. Para hacer esto, nos convertiremos en un poco creativos con el módulo de mostrador del círculo del duario, para agregar animación a sus íconos de propaganda. Y mediante el uso de espacios personalizados, le mostraré cómo puede posicionar fácilmente los borrones para coincidir con un fondo divisor. El diseño final es limpio y único. Y con algunos toques menores, puede ser un excelente complemento para su próximo proyecto.
¡Vamos a empezar! Pull with the Eye es un breve look sobre el diseño y el GIF para ilustrar el elemento de animación.


Crear una nueva página e implementar Visual Builder para iniciar cosas, acceder al tablero de WordPress y acceder a páginas> nueva adición. Luego dale un título a la página y haga clic para usar Divi Builder. Luego haga clic para usar Visual Builder. Se le pedirán tres opciones. Elija la opción “Construir desde cero”.

¡Tu lienzo vacío está esperando! Crear la sede de la sección de características El encabezado superior para la sección de características es bastante simple. El elemento único es la sombra sutil de la caja que se muestra a continuación para dar un poco de profundidad al diseño.
Para crearlo, ingrese una fila con una columna en la sección habitual.

Luego agregue un módulo de texto en fila y actualice la configuración de la siguiente manera: Contenido:

Nuestras características

Todo lo que necesitas.

Fuente Texto: Montserrat Peso del texto Fuente: Texto de texto semi en negrita: 22 PX Orientación de texto: Centro para la fuente del título: Ultra Bold Tamaño del texto: 6VW (escritorio), 50 PX (tableta), 30 PX (teléfono inteligente) Ahora guarde la configuración y mueva En la configuración de la sección y agregue una sombra de la caja de la siguiente manera: Box Sombra: Vea el cuadro Sombra de posición Vertical Caja: 19 PX Potencia de la sombra de la caja: 80 PX Potencia de la sombra de la caja: -16px Color de sombra : RGBA (136.150. 171,0.13)

Guarde la configuración. Cosas bastante simples. Ahora pasemos a la parte divertida. La creación de la sección de las características principales y el diseño del fondo debe agregar una nueva sección para mantener nuestras características. Normalmente, simplemente puede agregar una nueva línea a la sección anterior, pero en este caso debemos agregar un fondo divisor que esté disponible en el elemento de sección. Continúe y agregue una nueva sección directamente debajo de la sección que acaba de terminar. Luego agregue cuatro columnas en una fila.

Agregaremos borrones a estas columnas, pero por ahora actualizamos la configuración de nuestra sección.

Para esta sección, debemos ofrecer un ancho personalizado máximo. Esto es importante para mantener el diseño en su tamaño de lugar más grande. También debemos agregar una sección de divisor para servir como fondo que coincide con la disposición de nuestras borrones (más sobre esto más adelante). Acceda a la configuración de la sección y actualice lo siguiente: Ancho: 1080px Alineación de la sección: Dividor Centro: Estilo del divisor: Consulte Captura de pantalla Color Divisor: RGBA (136.150.171.0.07) Altura del divitor: 52%
Guarde la configuración. Dar la sección a un ancho personalizado (o máximo) de 1080px es prácticamente la forma en que sus líneas se configuran de forma predeterminada en una sección. Entonces, en esencia, hacemos nuestra sección completa del tamaño de una fila predeterminada. Bullbs, a su vez de las cuatro columnas en este momento, podemos ir más allá y comenzar a agregar borrones a cada una de las cuatro columnas. Haga clic en el icono gris en la primera columna para agregar su primera combinación. Actualice el contenido del cuadro para incluir menos texto (2 oraciones), luego elija usar un icono en lugar de una imagen (elegí el icono de la imagen).

En la pestaña Diseño, actualice lo siguiente: Color del icono: # 974450 Círculo de icono: Sí Color Circle: RGBA (255,255,25,0.5) Use el tamaño de la fuente del icono: Sí, icono de dimensión de fuente: 48 PX Orientación del texto: Centro
Guarde la configuración. Ahora copie y pegue el módulo de la propaganda en cada una de las columnas restantes, para que tenga una propaganda en cada columna.


Puede devolver y actualizar los iconos si lo desea en este momento, pero no tiene que hacerlo. Agregue medidores de círculo para superponer los iconos de la propaganda para agregar la animación a nuestros iconos, superpondremos cada icono con un medidor de círculo que tenga un valor de número 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 de Nubmer que desee con cada medidor de círculo.

Haga clic en el icono gris “Agregue un nuevo módulo” del módulo de propaganda en la primera columna y luego agregue el módulo del medidor.

Antes de comenzar a editar la configuración del módulo Circle, continúe y tírela sobre el módulo de la propaganda. Ahora puede actualizar la configuración de contenido de la siguiente manera: Elimine el texto en el número de cuadro Número de título: 25 y luego actualice la configuración de la hoja de diseño de la siguiente manera: Color de fondo de la barra: # 974450 (el mismo color que la propaganda de sus iconos) Color de texto: RGBA (0.0 , 0,0) (esto es completamente transparente, para ocultar el número) Tamaño del número de texto: 0 PX (para deshacerse de cualquier espacio de texto no deseado) Ancho: 109 PX (se estableció sobre la base del tamaño del icono sobre el cual se superpone) la alineación del módulo: el centro de margen inferior: -102px (esto se superpondrá perfectamente con el icono)
Guarde la configuración. Ahora todo lo que tiene que hacer es copiar y pegar el módulo del medidor de círculo en cada una de las columnas restantes y luego tírelo en la parte superior de cada columna. Después de que los medidores de círculo duplicados están en su lugar, actualizó el segundo número de metros de círculo en 50, el tercer número de metros a 75 y el cuarto número de metros a 100. El resultado debe mostrarse después de que se complete la animación.

Use el relleno RADD para colocar los íconos para que coincidan con el último paso a este diseño es el posicionamiento de los iconos para coincidir con el fondo del arco. Para hacer esto, debemos agregar algunos rellenos personalizados uno por uno. Abra la configuración de la fila y actualice lo siguiente:

Haga esta fila Ancho completo: DA Columna 2 Revelaje personalizado: 9% Up (escritorio), 0% Up (tableta) Columna 3 Reinicio personalizado: 9% anterior (escritorio), 0% arriba (tableta)

¡Eso es todo!Verifique el resultado final. Observe cómo los íconos ahora están animados por el medidor de círculo con diferentes valores de números.Y los íconos coinciden con el fondo del divisor.

Lo que se ve como se ve la sección de funciones en dispositivos móviles es cómo se ve el aspecto de diseño en tabletas y teléfonos inteligentes.
Pensamientos finales Los elementos únicos del diseño de esta sección característica son fáciles y sutiles, lo que debería facilitar su incorporación a sus propias estructuras con algunos ajustes menores.Y si las animaciones del medidor de círculo no son su taza de té, no dude en dejarlas fuera y simplemente use el icono del círculo del módulo de propaganda.O puede elegir usar solo medidores de círculo con valores numéricos visibles para un aspecto creativo para presentar estadísticas.En cualquier caso, espero que esto le dé algunas ideas para explorar por su cuenta.

Espero tener noticias suyas en los comentarios.¡Suerte!