Antes de poder agregar un módulo de resumen a su página, primero debe acceder a Divi Builder. Una vez el Tema divi instalado en su Sitio web, notarás un botón Utilice Divi Builder encima del editor de publicaciones cada vez que crea una página nueva. Al hacer clic en este botón, activa Divi Builder, que le da acceso 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 puede hacer clic en el botón Use Visual Builder cuando navegas por tu Sitio web aguas arriba si ha iniciado sesión en su panel de WordPress.

Una vez 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 filas. Si está comenzando una nueva página, recuerde agregar una fila a su página primero.

Busque el módulo Resumen en la lista de módulos y haga clic en él para agregarlo a su página. La lista de módulos se puede buscar, lo que significa que también puede escribir la palabra "Resumen" y luego hacer clic en Intro para buscar y agregar automáticamente el módulo de texto descriptivo. Una vez que se agrega el módulo, será recibido con la lista de opciones del módulo. Estas opciones se dividen en tres grupos principales: Contenido , diseño et Avanzado .

caso de uso para enumerar los servicios de la empresa en la página de inicio

Dado que el módulo Resumen combina imágenes y texto para mostrar ciertas características, puede usarlo para agregar una lista de los servicios de su empresa a su página de inicio. El módulo Blurb también le permite convertir su imagen / icono y título en un enlace a su página de servicio. Para este ejemplo, usaré el módulo Blurb para agregar cuatro servicios destacados a una página de inicio.

Para agregar los cuatro Blurbs a su página, use el generador visual para agregar una sección estándar con una fila de cuatro columnas. Luego agregue un módulo Blurb a la primera columna de su fila.

Actualice la configuración de Blurb con lo siguiente:

Opciones de contenido

Título: [ingrese el título del servicio]
Contenido: [ingrese una breve descripción del servicio]
URL: [agregar una URL a la página de servicio]
Utilice el icono: SI
Icono: [seleccione un icono que ilustre su servicio]

Opciones de diseño

Color del icono: # 42bb99 (haga el color que complementa el diseño del sitio)
Utilice el icono Tamaño de fuente: SÍ
Tamaño de fuente del icono: 68 px (ajusta el tamaño del icono)
Orientación del texto: Centro -
Tamaño de fuente de la cabeza: 24px
Tamaño de fuente: 18px
Altura de la línea del cuerpo: 1.5em

Ahora su primer texto introductorio está terminado.

Ahora duplique el módulo Resumen que acaba de crear tres veces y arrastre cada uno de los resúmenes duplicados a las otras tres columnas. Dado que su configuración de diseño se ha integrado en sus módulos duplicados, todo lo que necesita hacer es modificar la contenido (cabecera, contenido, icono, URL, etc.) y modifica los colores para adaptarlos a cada uno de tus servicios.

Opciones de resumen de contenido

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 estará en esta pestaña.

Título

¡Pruébalo! ¡Pruébalo! La opción URL ubicada debajo del campo Título le permitirá convertir su título en un hipervínculo.

Contenido

Este campo es donde puede ingresar el contenido del cuerpo de su texto. Blurb Text también cubrirá todo el ancho de su columna hasta 550px.

Enlance

Coloque una URL web válida en este campo para convertir su título de Blurb en un enlace. Si deja este campo en blanco, dejará su título como un elemento estático.

Abrir URL

Aquí puede elegir si su enlace se abrirá o no en una nueva ventana.

Icono de uso

Al usar Blurbs, puede optar por utilizar un icono o una imagen con su texto. Si selecciona "Sí" para la opción "Usar icono", se le ofrecerán las siguientes opciones para personalizar su icono. No importa si lo está esperando.

icono

Si ha elegido "Sí" para la configuración "Usar icono", aparecerá esta opción. Esta opción le presenta una lista de iconos disponibles que puede usar con su propaganda. Simplemente haga clic en el icono que desea usar y aparecerá en su texto.

Imagen

Si no eligió utilizar un icono, aparecerá esta configuración. Coloque una URL de imagen válida aquí, o elija / cargue una imagen a través de la biblioteca de medios de WordPress. Las imágenes del módulo Resumen siempre aparecen centradas en sus columnas y abarcan todo el ancho de la columna hasta 550 px. Sin embargo, su imagen nunca será más grande que su tamaño de carga original. La altura de la imagen de presentación está determinada por la relación de aspecto de su imagen original. Por lo tanto, es recomendable colocar todas las imágenes de su presentación a la misma altura si las coloca una al lado de la otra.

Color de fondo

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

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 Configuración. Las imágenes de fondo aparecerán encima de los colores de fondo, lo que significa que su 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 generador para una fácil identificación. Al usar la vista WireFrame en Visual Builder, estas etiquetas aparecerán en el bloque de módulo de la interfaz Divi Builder.

Resumen de opciones de diseño del módulo

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

Color del icono

Si ha elegido "Sí" para la configuración "Usar icono", aparecerá esta opción. Esta opción le permite personalizar el color de su icono. De forma predeterminada, los iconos están configurados con el color de acento de su tema.

Icono de círculo

Si ha elegido "Sí" para la configuración "Usar icono", aparecerá esta opción. Esta opción le permite colocar su icono en un círculo de color. Si selecciona "sí" para esta configuración, se le ofrecerán opciones adicionales para personalizar el color y el borde de su círculo.

Color del círculo

Si elige "Sí" para la configuración "Icono de círculo", aparecerá esta opción. Aquí puede elegir un color para usar en su círculo. Este color es independiente del color de su icono previamente seleccionado. Su icono, en su color, aparecerá dentro de un círculo con el color que seleccione aquí.

Mostrar el borde del círculo

Si elige "Sí" para la configuración "Icono de círculo", aparecerá esta opción. Esta opción le permite activar un borde para su círculo. Si se selecciona esta opción, aparecerá una opción adicional para seleccionar el color de su borde.

Color del borde del círculo

Si elige "Sí" para la configuración "Mostrar borde del círculo", aparecerá esta opción. Aquí puede ajustar el color del borde del círculo.

Ubicación de la imagen / icono

Aquí puede elegir la ubicación de su imagen/icono. Puede aparecer encima del texto o a la izquierda del texto. Al colocar la imagen/icono a la izquierda de su texto, la imagen será más pequeña que si se colocara encima.

Usar tamaño de fuente del icono

Si esta opción está habilitada, puede ingresar un tamaño personalizado para el ícono que se muestra arriba o dos a la izquierda de su propaganda.

Color del texto

Si su propaganda se coloca sobre un fondo oscuro, el color del texto debe establecerse en "Oscuro". Por el contrario, si su propaganda se coloca sobre un fondo claro, el color del texto debe establecerse en "Claro".

Orientación del texto

Este menú desplegable le permite especificar la orientación de su texto para que esté justificado a la izquierda, centrado o justificado a la derecha.

Fuente de encabezado

Puede cambiar la fuente de su encabezado seleccionando la fuente deseada en el menú desplegable. Divi viene con docenas de fuentes increíbles con tecnología de Google Fonts. De forma predeterminada, Divi usa la fuente Open Sans para todo el texto de su página. También puede personalizar el estilo de su texto usando las opciones de negrita, cursiva, mayúsculas y subrayado.

Tamaño de fuente del encabezado

Aquí puede ajustar el tamaño del texto de su encabezado. Puede arrastrar el control deslizante de intervalo para aumentar o disminuir el tamaño de su texto, o puede ingresar directamente el valor de tamaño de texto 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 introducir "px" o "em" según su tamaño para cambiar el tipo de unidad.

Color del texto del encabezado

De forma predeterminada, todos los colores del texto en Divi aparecen en blanco o gris oscuro. Si desea cambiar el color de su encabezado, elija su color preferido en el selector de color usando esta opción.

Espaciado entre letras del encabezado

El espaciado de letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra del texto del encabezado, use el control deslizante de intervalo 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 introducir "px" o "em" según su tamaño para cambiar el tipo de unidad.

Altura de la fila del encabezado

La altura de la fila afecta el espacio entre cada fila del texto del encabezado. Si desea aumentar el espacio entre cada fila, 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 cursor. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede introducir "px" o "em" según su tamaño para cambiar el tipo de unidad.

Fuente del cuerpo

Puede cambiar la fuente de su cuerpo seleccionando la fuente deseada en el menú desplegable. Divi viene con docenas de fuentes increíbles con tecnología de Google Fonts. De forma predeterminada, Divi usa la fuente Open Sans para todo el texto de su página. También puede personalizar el estilo de su texto usando las opciones de negrita, cursiva, mayúsculas y subrayado.

Tamaño de letra del cuerpo

Aquí puede ajustar el tamaño de su cuerpo de texto. Puede arrastrar el control deslizante de intervalo para aumentar o disminuir el tamaño de su texto, o puede ingresar directamente el valor de tamaño de texto 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 introducir "px" o "em" según su tamaño para cambiar el tipo de unidad.

Color del texto del cuerpo

De forma predeterminada, todos los colores del texto en Divi aparecen en blanco o gris oscuro. Si desea cambiar el color del texto de su cuerpo, elija el color deseado en el selector de color usando esta opción.

Espaciado de letras corporales

El espaciado de letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra del texto del cuerpo, use el control deslizante de intervalo 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 introducir "px" o "em" según su tamaño para cambiar el tipo de unidad.

Altura de la línea del cuerpo

La altura de la línea afecta el espacio entre cada línea del cuerpo del texto. Si desea aumentar el espacio entre cada fila, use el control deslizante de intervalo 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 introducir "px" o "em" según su tamaño para cambiar el 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 del selector de color para aplicarlo a su borde.

Ancho del borde

De forma predeterminada, los bordes tienen 1 píxel de ancho. 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. Admite unidades de medida personalizadas, lo que significa que puedes cambiar la unidad predeterminada de "px" a algo más como em, vh, vw, etc.

Estilo del borde

Los bordes admiten ocho estilos diferentes, que incluyen: sólido, punteado, punteado, doble, surco, cresta, recuadro e inicio. Seleccione el estilo que desee del menú desplegable para aplicarlo a su borde.

Ancho máximo de imagen

La aplicación de un valor de ancho máximo aquí limitará el ancho de la imagen de presentación. Esto solo afecta a los anuncios que no están en modo icono.

Margen personalizado

El margen es el espacio agregado al exterior de su módulo, entre el módulo y el siguiente elemento arriba, abajo o a la izquierda y derecha de él. Puede agregar valores de margen personalizados a cualquiera de los cuatro lados del módulo. Para eliminar un margen personalizado, elimine el valor agregado del campo de entrada. De forma predeterminada, estos valores se miden en píxeles, pero puede ingresar unidades de medida personalizadas en los campos de entrada.

Relleno Personalizado

El 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 cualquiera de los cuatro lados del módulo. Para eliminar un margen personalizado, elimine el valor agregado del campo de entrada. De forma predeterminada, estos valores se miden en píxeles, pero puede ingresar unidades de medida personalizadas en los campos de entrada.

Opciones avanzadas Módulo resumen

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

ID de CSS

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

Clase de CSS

Ingrese las clases de CSS opcionales para usar en 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 utilizar en su Tema divi Niño o en el CSS personalizado que agregas a tu página o a tu Sitio web usando las opciones del tema Divi o la configuración de la página Divi Builder.

CSS personalizado

También se puede aplicar CSS personalizado al módulo y a cualquiera de los elementos internos del módulo. En la sección CSS personalizado, encontrará un campo de texto donde puede agregar CSS directamente a cada elemento. Las entradas CSS en esta configuración ya están incrustadas con etiquetas de estilo. Así que solo tienes que ingresar reglas CSS separadas por punto y coma.

Animación de imagen / icono

Esto controla la dirección de la animación de carga diferida.

Texto ALT de la imagen

Si no eligió utilizar un icono, aparecerá esta configuración. Otro texto proporciona la información necesaria si la imagen no se carga, no se muestra correctamente o en cualquier otra situación en la que un usuario no puede ver la imagen. También permite que los motores de búsqueda lean y reconozcan la imagen.

visibilidad

Esta opción le permite controlar los dispositivos en los que aparece su módulo. Puede optar por desactivar su módulo en tabletas, teléfonos inteligentes o computadoras de escritorio individualmente. Esto es útil si desea utilizar diferentes mods en diferentes dispositivos o si desea simplificar el diseño móvil eliminando ciertos elementos de la página.

Eso es todo por este tutorial. Esperamos haberle mostrado cómo utilizar el módulo de resumen en Divi.