El módulo Cargo de Divi muestra el título de su publicación actual y, si corresponde, la imagen y los metadatos de la publicación de una manera elegante. Esto le permite crear publicaciones más exclusivas al crear sus publicaciones con Divi Builder.
Cómo agregar un módulo de Título de publicación a su página
Antes de que pueda agregar un módulo de título 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. 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 puede hacer clic en el botón Use Visual Builder cuando navegas por tu Sitio web en primer plano si ha iniciado sesión en su panel de WordPress.
Una vez que haya ingresado a 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 de título del artículo 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 "título de la publicación" y luego hacer clic en Intro para buscar y agregar automáticamente el módulo de título de la publicación. Una vez que se agrega el módulo, será recibido por la lista de opciones del módulo. Estas opciones se dividen en tres grupos principales: Contenido , diseño et Avanzado .
Ejemplo de caso de uso: formatear un módulo de título de publicación para una publicación de blog
Para este ejemplo, le mostraré lo fácil que es personalizar el título de una publicación para una publicación de blog.
Lo primero que debe hacer es ir a la página "Editar artículo" del panel de WordPress. En el área Configuración de publicaciones de Divi en la parte superior derecha, configure el diseño en Ancho completo y oculte el título del artículo.
Usando Visual Builder, agregue la Sección Regular con una fila de ancho completo (1 columna). Luego agregue el módulo Título de la publicación a la fila.
Actualice la configuración del título del mensaje de la siguiente manera:
Opciones de contenido
Ver categorías de publicaciones: NO Mostrar comentarios Número: NO Ver imagen destacada: SÍ Imagen destacada Ubicación: Título / Meta Imagen de fondo
Opciones de diseño
Orientación del texto: centro Color del texto: color claro del fondo Texto: SÍ Color del fondo del texto: rgba (0,0,0,0.35) Fuente del título: Roboto (negrita) Tamaño de la fuente del título: 50px Título Espacio entre letras: 2px título Altura de línea: 1em Meta Fuente: Raleway Light Meta Tamaño de fuente: 24px Meta Color de fuente: # e0ba67
Guardar configuración
Es todo. ¡Ahora nunca más tendrá que conformarse con otro título de trabajo aburrido!
Opciones de contenido para el título de la publicación
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.
Mostrar título
Aquí puede optar por mostrar o no el título del artículo.
Mostrar Meta
Aquí puede elegir si desea mostrar o no Post Meta.
Mostrar autor
Aquí puede elegir si desea mostrar o no el nombre del autor en Post Meta.
Mostrar fecha
Aquí puede elegir si desea mostrar la fecha o no.
Formato de la fecha
Aquí puede establecer el formato de fecha en Post Meta. El valor predeterminado es 'M j, Y'
Mostrar categorías de artículos
Aquí puede elegir si desea mostrar o no las categorías en Post Meta. Nota: esta opción no funciona con tipos de publicaciones personalizadas.
Ver comentarios
Aquí puede elegir si desea mostrar o no el número de comentarios en Post Meta.
Mostrar imagen destacada
Aquí puede elegir si desea mostrar o no la imagen seleccionada.
Colocación de imágenes destacadas
Aquí puede elegir dónde colocar la imagen seleccionada.
Color de fondo
Defina un color de fondo personalizado para su módulo o déjelo en blanco para usar el color predeterminado.
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ódulo de la interfaz Divi Builder.
Opciones de diseño de título de publicación
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 configuraciones de diseño que puede usar para cambiar cualquier cosa.
Usa el efecto Parallax
Si el posicionamiento de la imagen seleccionada se establece en "título / Meta imagen de fondo", puede elegir si desea utilizar o no el efecto de paralaje para la imagen seleccionada.
Método de paralaje
Aquí puede elegir qué método de paralaje utilizar para la imagen seleccionada: CSS o True Parallax.
Orientación del texto
Aquí puede elegir la orientación del título / meta texto.
Color del texto
Aquí puede elegir el color para el texto Título / Meta.
Usa el color de fondo del texto
Aquí puede elegir si desea utilizar o no el color de fondo para el título / meta-texto.
Color de fondo del texto
Si el color de fondo está activado, elija aquí el color de fondo deseado.
Título de letra
Puede cambiar la fuente del texto del título seleccionando la fuente deseada en el menú desplegable. Divi viene con docenas de excelentes fuentes 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 título
Aquí puede ajustar el tamaño del texto de su título. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño de su texto o 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 el valor de su tamaño para cambiar el tipo de unidad.
Color del texto del título
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 título, elija el color deseado en el selector de color usando esta opción.
Espaciado de letras de título
El espaciado de 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" según el 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 introducir "px" o "em" según el valor de su tamaño para cambiar el tipo de unidad.
Fuente metas
Puede cambiar la fuente de su meta texto seleccionando la fuente deseada en el menú desplegable. Divi viene con docenas de fuentes geniales impulsadas por 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 utilizando las opciones de negrita, cursiva, mayúsculas y subrayado.
Tamaño de fuente Metas
Aquí puede ajustar el tamaño de su metatexto. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño de su texto o 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 ingresar "px" o "em" según el valor de su tamaño para cambiar su tipo de unidad.
Color del texto de los datos de metas
De forma predeterminada, todos los colores del texto en Divi aparecen en blanco o gris oscuro. Si desea cambiar el color de su meta-texto, elija el color deseado en el selector de color usando esta opción.
Espaciado de letras de datos de metas
El espaciado de letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra en su meta-texto, 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" según el valor de su tamaño para cambiar su tipo de unidad.
Altura de la linea de metas
La altura de la línea afecta el espacio entre cada línea en su meta-texto. 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" según el 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 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. Se admiten unidades de medida personalizadas, lo que significa que puede cambiar la unidad predeterminada de "px" a algo más como em, vh, vw, etc.
Estilo del borde
Los bordes admiten ocho estilos diferentes: sólido, punteado, punteado, doble, surco, cresta, superpuesto e inicio. Seleccione el estilo que desee en el menú desplegable para aplicarlo a su borde.
Margen personalizado
El margen es el espacio que se agrega 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 el 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 el 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.
Mostrar opciones de título avanzadas
En la pestaña avanzada, encontrará opciones que los diseñadores web más experimentados pueden encontrar útiles, como los atributos personalizados de CSS y HTML. 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 CSS opcionales que se usarán en este módulo. Se puede utilizar una clase CSS para crear estilos CSS personalizados. 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 agregue a su página o sitio web. 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 componentes internos del módulo. En la sección CSS personalizado, encontrará un campo de texto donde puede agregar hojas de estilo CSS personalizadas directamente a cada elemento. Las entradas CSS en esta configuración ya están envueltas en etiquetas de estilo. Así que simplemente 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 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 del móvil eliminando ciertos elementos de la página.
[vc_row center_row=”sí”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DESCARGAR TEMA DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/filiales/idevfiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DESCARGAR EL TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]
Otros tutoriales de Divi
- 5 sitios web para su uso restaurante temático Divi
- Cómo agregar texto en un producto Divi WooCommerce
- Cómo cambiar el color del menú entre páginas Divi
- Cómo personalizar las cuadrículas de un blog con Divi
- Cómo utilizar la función de editor Divi en WordPress
- Cómo crear un control deslizante Divi a pantalla completa
- Cómo cambiar el color de los menús entre páginas Divi
- Características que probablemente no conozcas sobre Divi
- Cómo usar Divi Builder en WordPress
- Cómo usar el módulo de desplazamiento de video Divi
- Cómo usar el módulo Divi Builder Flip
- Cómo agregar un módulo testimonial en Divi Builder
- Cómo usar el módulo de texto Divi
- Cómo crear un control deslizante en Divi
- Cómo editar un rol de usuario Divi
- Cómo usar el módulo de Divi Social Media
- Cómo usar el módulo de tienda en el tema WordPress Divi
- Cómo usar el módulo de la barra lateral Divi
- Cómo usar el Módulo Divi Price Table
- Cómo usar el módulo de título de las publicaciones de Divi
- Cómo agregar un módulo de video de Divi
- Cómo usar el módulo de navegación del artículo
- Cómo usar el módulo de búsqueda Divi
- Cómo usar el módulo Divi wallet
- Cómo usar el módulo de persona en Divi Builder
- Cómo usar el módulo de billetera con filtro Divi
- Cómo usar el módulo deslizante de ancho completo
- Cómo usar el Módulo de imagen Divi Builder
- Cómo utilizar el módulo de navegación de ancho completo de Divi Builder
- Cómo usar el módulo de la galería de imágenes
- Cómo utilizar el módulo de tarjeta de ancho completo de Divi Builder
- Cómo utilizar el módulo de cartera de ancho completo de Divi
- Cómo usar el módulo de encabezado de ancho completo Divi
- Cómo usar el módulo Divi Counter
- Cómo usar el control deslizante de artículos en Divi Builder
- Cómo usar el módulo Divi Email Optin