Saltar al contenido principal

Tutorial Divi: Cómo usar el módulo contador de números

Divi: el tema de WordPress más fácil de usar

Divi: ¡el mejor tema de WordPress de todos los tiempos!

más 600.000 descargas, Divi es el tema de WordPress más popular en el mundo. Es completo, fácil de usar y viene con más de plantillas gratuitas 62. [Recomendado]

El módulo de contador de números en el tema Divi de WordPress es una excelente manera de mostrar los números de una manera divertida y atractiva. Este módulo se usa comúnmente para mostrar estadísticas sobre usted o su negocio. Por ejemplo, mostrar su número de clientes o seguidores en Facebook es una excelente manera de presentar evidencia social.

número de pantalla divi wordpress.png

Cómo agregar el módulo Número de contador de Divi

Antes de que pueda agregar un módulo contador a su página, primero debe saltar al Divi Builder. Una vez que el tema Divi esté instalado en su sitio web, notará un botón Utilice Divi Builder encima del editor cada vez que crea una nueva página. Haga clic en este botón para activar Divi Builder y acceder a todos los módulos de Divi Builder. Luego haga clic en el botón Use Visual Builder para iniciar el generador en modo visual. También puedes hacer clic en el botón Use Visual Builder cuando navega por su sitio web en primer plano si está conectado a su panel de WordPress.

constructor divi

Una vez que haya ingresado en Visual Builder, puede hacer clic en el botón gris más para agregar un nuevo módulo a su página. Los nuevos módulos solo se pueden agregar dentro de las líneas. Si comienza una nueva página, no olvide agregar primero una línea a su página.

divi.png contador de números

Localice el módulo contador de números en la lista de módulos y haga clic en él para agregarlo a su página. Se puede buscar en la lista de módulos, lo que significa que también puede escribir la palabra "contador de números", luego hacer clic en "Enter" para buscar automáticamente y agregar el módulo de contador de números. Una vez que se agrega el módulo, la lista de opciones lo recibirá. Estas opciones se separan en tres grupos principales: Contenido , diseño et Avanzado .

Ejemplo de caso de uso: uso del módulo de contador digital para ver los resultados del proyecto

Una excelente manera de usar el módulo de contador de números es ilustrar las estadísticas de los estudios de caso. Simplemente etiquete cada contador con un número para que el usuario pueda ver fácilmente el éxito del proyecto. En este ejemplo, uso el módulo contador digital para mostrar cuatro resultados del proyecto.

Como puede ver, la parte superior de la página incluye los tres objetivos del proyecto utilizando el módulo " Barra de bar Y la parte inferior de la página incluye los resultados del estudio de caso utilizando los módulos de medidor digital.

ejemplo compteur.gif

La sección de la página que muestra los resultados del estudio de caso utilizando módulos digitales requiere el uso de una sección especializada. Con Visual Builder, agregue una sección especializada a la página y seleccione el siguiente diseño:

sección personalizada divi.png

Seleccione un diseño de columna 1 para el lado derecho de la sección e ingrese el título y el texto requeridos para los resultados del estudio de caso.

rango de inserción divi.png

Inserte un diseño de columnas 2 directamente debajo del diseño de columna 1 en el lado derecho de la sección.

columna dividida divi.png

Ahora agregue su primer módulo contador de números a la columna izquierda.

agregue un número de sección divi.png

Actualice los parámetros de los contadores numéricos de la siguiente manera:

Opciones de contenido

Título: Nuevos visitantes
Número: 54210
Porcentaje de señal: desactivado

Cree fácilmente su sitio web con Elementor

Elementor le permite crear fácilmente cualquier diseño de sitio web con un aspecto profesional. Deja de pagar caro por lo que puedes hacer tú mismo. [Gratis]

Opciones de diseño

Color del texto: oscuro
Fuente del título: predeterminado
Tamaño de fuente del título: 20px
Color del texto del título: # 405c60
Altura de la línea del título: 1em
Número de caracteres: Predeterminado, Negrita
Número de caracteres: 60px
Color de texto numérico: # e07a5e
Altura de línea numérica: 72px

número de sección de contenido divi.png

Guardar configuración

Duplique el módulo Contadores de números, arrástrelo a la columna derecha adyacente y actualice las opciones Título y Número.

counter number example construction.png

Duplique la línea que contiene los dos módulos de contador de números para que se muestren dos contadores de números más a continuación.

digital counter duplication divi.png

Luego actualice las opciones de Título y Número para ellos. Ahora tiene los cuatro contadores de marcación completa.

No olvide agregar la imagen 667 x 320 en la columna izquierda / lateral de la sección especializada.

Se acabó ! La combinación de contadores de números y contadores de barras en esta página de estudio de caso realmente hace que el contenido sea atractivo.

Módulo de realización final compteur.png

Opciones de contenido de contador digital

En la pestaña de contenido, encontrará todos los elementos de contenido del módulo, como texto, imágenes e iconos. Todo lo que controla lo que aparece en su módulo siempre se encontrará en esta pestaña.

área seleccionada contenido wordpress divi.png

Título

Ingrese un título para el medidor. Esto se mostrará debajo del número en un texto más pequeño.

Nombre

Este es el número que contará el contador. Cuando se desplaza hacia abajo en la página y llega al mostrador, el número cuenta atrás rápidamente desde 0 hasta que alcanza el número que estableció aquí. Aquí solo se pueden colocar valores numéricos.

Signo de porcentaje

Aquí puede elegir si el signo de porcentaje debe agregarse después del número definido anteriormente.

Color de fondo

Establezca un color de fondo personalizado para su módulo o déjelo en blanco para usar el color predeterminado.

¿Estás buscando los mejores temas y complementos de WordPress?

Descarga los mejores complementos y temas de WordPress en Envato y crea fácilmente tu sitio web. Ya más de las descargas de 49.720.000. [EXCLUSIVO]

Imagen de fondo

Si se establece, esta imagen se utilizará como fondo para este módulo. Para eliminar una imagen de fondo, simplemente elimine la URL del campo de configuración. Las imágenes de fondo aparecerán sobre los colores de fondo, lo que significa que el color de fondo no será visible cuando se aplique una imagen de fondo.

Etiqueta de administrador

Esto cambiará la etiqueta del módulo en el constructor para una fácil identificación. Cuando usa la vista WireFrame en Visual Builder, estas etiquetas aparecen en el bloque de módulos de la interfaz Divi Builder.

Opciones de diseño (estilo) del medidor digital

En la pestaña Diseño, encontrará todas las opciones de estilo del módulo, como fuentes, colores, tamaño y espaciado. Esta es la pestaña que usará para cambiar la apariencia de su módulo. Cada módulo Divi tiene una larga lista de parámetros de diseño que puede usar para cambiar cualquier cosa.

contador de diseño de zona divi.png

Color del texto

Puede elegir aquí si el texto de su título debe ser claro u oscuro. Si está trabajando en un fondo oscuro, su texto debe ser claro. Si su fondo es claro, su texto debe estar oscuro.

Título de fuente

Puede cambiar la fuente del texto del título seleccionando la fuente deseada en el menú desplegable. Divi viene con docenas de fuentes grandes con tecnología de Google Fonts. Por defecto, Divi usa la fuente Open Sans para todo el texto de su página. También puede personalizar el estilo de su texto utilizando las opciones en negrita, cursiva, mayúscula y subrayada.

Tamaño de fuente del título

Aquí puede ajustar el tamaño del texto del título. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño de su texto, o ingresar el valor del tamaño de texto deseado directamente en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Color del texto del título

Por defecto, todos los colores de texto Divi aparecen en blanco o gris oscuro. Si desea cambiar el color del texto del título, elija el color deseado en el selector de color con esta opción.

Espaciado de letras de título

El espaciado de las letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra en el texto del título, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Altura de la línea de título

La altura de la línea afecta el espacio entre cada línea del texto del título. Si desea aumentar el espacio entre cada línea, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada ubicado a la derecha del cursor. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Fuentes del número

Puede cambiar la fuente de su texto seleccionando la fuente deseada del menú desplegable. Divi viene con docenas de fuentes grandes con tecnología de Google Fonts. Por defecto, Divi usa la fuente Open Sans para todo el texto de su página. También puede personalizar el estilo de su texto utilizando las opciones en negrita, cursiva, mayúscula y subrayada.

Tamaño de fuente del número

Aquí puede ajustar el tamaño de su texto digital. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño de su texto, o ingresar el valor del tamaño de texto deseado directamente en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Color del texto digital.

Por defecto, todos los colores de texto Divi aparecen en blanco o gris oscuro. Si desea cambiar el color de su texto digital, elija el color que desee en el selector de color con esta opción.

Espaciado de letras digitales

El espaciado de las letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra en su texto numérico, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Altura de la línea del número

La altura de la línea afecta el espacio entre cada línea de su texto digital. Si desea aumentar el espacio entre cada línea, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada ubicado a la derecha del cursor. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Usa el borde

Habilitar esta opción colocará un borde alrededor de su módulo. Este borde se puede personalizar utilizando los siguientes parámetros condicionales.

Color del borde

Esta opción afecta el color de su borde. Seleccione un color personalizado en el selector de color para aplicarlo a su borde.

Ancho del borde

Por defecto, los bordes tienen un ancho de píxel 1. Puede aumentar este valor arrastrando el control deslizante de rango o ingresando un valor personalizado en el campo de entrada a la derecha del control deslizante. Se admiten unidades de medida personalizadas, lo que significa que puede cambiar la unidad predeterminada de "px" a otra, como em, vh, vw, etc.

Estilo del borde

Los bordes admiten ocho estilos diferentes: sólido, punteado, punteado, doble, ranura, cresta, incrustación y comienzo. Seleccione su estilo deseado en el menú desplegable para aplicarlo a su borde.

Crea fácilmente tu tienda en línea

Descargue gratis WooCommerce, los mejores complementos de comercio electrónico para vender sus productos físicos y digitales en WordPress. [Recomendado]

Relleno personalizado

Relleno es el espacio agregado dentro de su módulo, entre el borde del módulo y sus elementos internos. Puede agregar valores de relleno personalizados a uno de los cuatro lados del módulo. Para eliminar el margen personalizado, elimine el valor agregado del campo de entrada. Por defecto, estos valores se miden en píxeles, pero puede ingresar unidades de medida personalizadas en los campos de entrada.

Opciones avanzadas de contador de números

En la pestaña Avanzado, encontrará opciones que los diseñadores web más experimentados pueden encontrar útiles, como los atributos personalizados CSS y HTML. Aquí puede aplicar CSS personalizado a uno de los muchos elementos del módulo. También puede aplicar clases personalizadas e ID de CSS al módulo, que se pueden usar para personalizar el módulo en el archivo style.css de su tema secundario.

digital counter section design.png

ID de CSS

Ingrese un identificador CSS opcional para usar para este módulo. Se puede usar una ID para crear un estilo CSS personalizado o para crear enlaces a secciones particulares de su página.

Clase de CSS

Ingrese las clases de CSS opcionales que se utilizarán para este módulo. Se puede usar una clase CSS para crear un estilo CSS personalizado. Puede agregar varias clases, separadas por un espacio. Estas clases se pueden usar en su tema secundario Divi o en la hoja de estilo CSS personalizada que agrega a su página o sitio web mediante las opciones de tema Divi o la configuración de la página Divi Builder.

CSS personalizado

El CSS personalizado también se puede aplicar al módulo y a uno de los elementos internos del módulo. En la sección CSS personalizado, encontrará un campo de texto en el que puede agregar hojas de estilo CSS personalizadas directamente a cada elemento. Las entradas CSS en estos parámetros ya están envueltas en las etiquetas de estilo. Tan solo ingrese las reglas CSS separadas por punto y coma.

visibilidad

Esta opción le permite controlar los dispositivos en los que aparece su módulo. Puede elegir deshabilitar su módulo en tabletas, teléfonos inteligentes o computadoras de escritorio de forma individual. Esto es útil si desea utilizar diferentes módulos en diferentes dispositivos, o si desea simplificar el diseño móvil al eliminar ciertos elementos de la página.

Otros tutoriales de Divi

Este artículo contiene los comentarios 0

Dejar un comentario

Su dirección de correo electrónico no será publicada. Los campos necesarios están marcados con *

Este sitio usa Akismet para reducir los no deseados. Obtenga más información sobre cómo se utilizan sus datos de comentarios.

Volver arriba
11 acciones
cuota4
Tweet1
Siguiente 6