Tutorial de Divi: cómo usar el módulo de cartera de ancho completo

El Portafolio filtrable en Divi le permite mostrar sus proyectos más recientes en modo Cuadrícula o Estándar. La cartera filtrable se parece al módulo de cartera normal, excepto que carga nuevos proyectos mediante una solicitud Ajax e incluye opciones para filtrar la lista de proyectos por categorías. Cuando se selecciona una categoría en particular, la lista de proyectos se regenera instantáneamente con una nueva lista de proyectos de la categoría seleccionada.

Cómo agregar un módulo de cartera filtrable a su página

Antes de que pueda agregar un módulo de cartera filtrable a su página, primero debe saltar 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 Habilitar 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 cartera filtrable 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 "cartera de pantalla completa" y luego hacer clic en "Entrar" para buscar y agregar automáticamente el módulo de cartera filtrable. 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: agregar un módulo de cartera filtrable a una página de cartera

Para este ejemplo, le mostraré cómo agregar un módulo de cartera filtrable a una página de cartera.

Vamos a empezar.

Utilice el generador visual para agregar una sección normal con una fila de ancho completo (1 columna) debajo del encabezado de la página. Luego agregue un módulo de cartera filtrable a la fila.

Actualice la configuración de la cartera filtrable de la siguiente manera:

Opciones de contenido

Número de artículos: 8

Opciones de diseño

Diseño: Cuadrícula Zoom Color del icono: #ffffff Color de superposición flotante: rgba (224,153,0,0.58) Fuente del título: Predeterminado, Negrita, mayúscula Tamaño de la fuente del título: 14px Espacio entre letras del título: 1px Filtro de fuente: Predeterminado, Negrita, mayúscula Tamaño de fuente de filtro: 14px Espaciado entre letras de filtro: 1px Tamaño de fuente meta: 12px Espaciado entre letras meta: 1px

Opciones avanzadas (CSS personalizado)

Filtro de cartera activo: color: # e09900; Título del portafolio: text-align: center; Meta del mensaje de la cartera: alineación del texto: centro; Página activa de paginación: color: # e09900! Importante;

Es todo !

Opciones de contenido de cartera filtrable

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.

Número de puestos

Elija cómo ver las publicaciones que desea ver antes de paginar la lista.

Incluir categorías

Seleccione las categorías que desea mostrar. Las publicaciones de las categorías que no están seleccionadas no aparecerán en la lista de publicaciones generadas.

Mostrar título

Ingrese un título, si lo desea, que se colocará encima de la lista de proyectos.

Mostrar categorías

Elija si desea mostrar la categoría debajo de cada artículo en el área de metadatos.

Ver paginación

Esta opción habilita / deshabilita la paginación. Si la paginación está deshabilitada, solo se mostrará una página de proyecto para cada categoría.

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 de configuración. Las imágenes de fondo aparecerán encima de los colores de fondo, lo que significa que el color de fondo no será visible cuando se aplique una imagen de fondo.

Etiqueta de administración

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 portafolio filtrable

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.

Provisión

Elija el estilo de diseño para su cartera. "Fullwidth" muestra un mensaje por fila, mientras que "Grid" muestra sus proyectos en una cuadrícula en mosaico con varios proyectos por fila.

Color del texto

Aquí puede elegir si su texto 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 ser oscuro.

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 letra 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 de filtro

Puede cambiar la fuente de su texto de filtro 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 filtro

Aquí puede ajustar el tamaño de su texto de filtro. 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.

Filtrar el color del texto

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 filtro, elija el color deseado en el selector de color usando esta opción.

Espaciado de letras de filtro

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

Altura de la línea de filtro

La altura de la fila afecta el espacio entre cada fila de su texto de filtro. 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 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.

Meta Font

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 letra Meta

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 meta

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 entre letras y metar

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 línea Meta

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.

Opciones avanzadas de cartera filtrable

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]

Tutorial de Divi: Cómo usar el módulo de billetera de ancho completo