Saltar al contenido principal

Tutorial de Divi: Cómo usar el módulo de billetera con filtro

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

¿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]

El módulo Divi Theme Fullwidth Portfolio funciona igual que el módulo monedero normal, excepto que muestra su proyecto en un impresionante modo Fullwdth. También viene con algunas nuevas características únicas: cuadrícula y carrusel. El módulo funciona mostrando una lista de sus proyectos más recientes, y puede ser utilizado por diseñadores y artistas que desean mostrar una galería de sus trabajos más recientes.

módulo de porfolio de ancho completo divi.png

Cómo agregar un módulo de Portafolio de ancho completo a su página

Antes de que pueda agregar un módulo de cartera completo a su página, primero debe ingresar a Divi Builder. Una vez que el tema Divi está instalado en su sitio web, verá un botón Utilice Divi Builder sobre el editor cada vez que creas 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 haz 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 explora su sitio web en primer plano si está conectado a su tablero 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. Tenemos excelentes tutoriales sobre el uso de elementos de línea y sección Divi.

puerto filtrable.png

Ubique 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 filtrable" y luego hacer clic en "Entrar" para buscar automáticamente y agregar 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 están separadas 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 presentar una cartera en una página de cartera que cubra todo el ancho de la página.

cartera en una página completa divi.jpg

Vamos a empezar.

Utilice el constructor visual para agregar una sección de ancho completo debajo del encabezado de página. A continuación, agregue un módulo de cartera filtrable.

agregar una cartera filtrable divi.jpg

Actualice la configuración del portafolio filtrable de la siguiente manera:

Opciones de contenido

Número de mensajes: 8 Mostrar paginación: NO

Opciones de diseño

Diseño: rejilla icono de zoom color: # 000000 la recuperación de la libración de color: #ffffff título de letra: Por defecto, negrita, mayúsculas tamaño de letra: Título tamaño 14px Título espaciado letras 1px Meta Fuente: 12px Meta espaciado letras: 1px

módulo de cartera filtrable divi.png

¡Es todo!

Opción de contenido del módulo de cartera

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

módulo de cartera filtrable divi content section.png

Título de la cartera

Ingrese un título que se muestra encima de la cartera, o déjelo vacío para que no use un título.

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]

Incluir categorías

Elija las categorías que desea mostrar. Los proyectos de categorías que no están seleccionadas no aparecerán en la lista de proyectos.

Número de puestos

Verifique el número de proyectos que se muestran. Déjelos vacíos o use 0 para evitar limitar la cantidad.

Mostrar título

Elija si el título de cada proyecto se muestra o no cuando pase el puntero sobre el elemento del proyecto.

Mostrar fecha

Elija si la fecha de publicación de cada proyecto se muestra o no cuando pase el puntero sobre el elemento del proyecto.

Color de fondo

Establezca 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 usará 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 estará 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 utiliza la vista WireFrame en Visual Builder, estas etiquetas aparecen en el bloque de módulos de la interfaz de Divi Builder.

Opciones de diseño de billetera de ancho total

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.

módulo de diseño divi.png

Provisión

Elija el diseño que desea usar. "Cuadrícula" mostrará todos sus elementos en un diseño de varias columnas y varias filas. El carrusel muestra sus elementos en una sola fila de imágenes en mosaico que se deslizan para revelar elementos adicionales en la lista.

Zoom Color Icon

Al pasar el cursor sobre un elemento en el módulo de billetera, aparece un icono de superposición. Puede ajustar el color utilizado desde este icono usando el selector de color en esta configuración.

Superposición de colores de desplazamiento

Cuando pasa el mouse sobre un elemento en el módulo de cartera, aparece un color de superposición en la parte superior de la imagen y debajo del icono de texto y título de la cartera. Por defecto, se usa un color blanco semitransparente. Si desea usar un color diferente, puede ajustar el color con el selector de color en esta configuración

Selector de icono de desplazamiento

Aquí puede elegir un icono personalizado para mostrar cuando un visitante sobrevuela los elementos del portafolio en el módulo.

Color del texto

Aquí puede elegir si su texto debe ser claro u oscuro.

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. [GRATIS]

módulo de portafolio filtrable de diseño de opciones divi.png

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 fuentes grandes con la tecnología de Google Fonts. Por defecto, Divi usa la fuente Open Sans para todo el texto en su página. También puede personalizar el estilo de su texto usando las opciones en negrita, cursiva, mayúscula y subrayada.

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 del 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 del texto de título, use el control deslizante de rango para ajustar el espacio o introduzca 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 de texto en su título, si se desea aumentar el espacio entre cada línea, utilice el control deslizante para ajustar el rango de espacio o introduzca el tamaño de separación deseada 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.

filterable portfolio divi module section metadonnee.png

Meta Font

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

Tamaño de letra Metas

Aquí puede ajustar el tamaño de su meta-texto. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño del 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 meta

Por defecto, todos los colores de texto 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 las letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra de su meta-texto, utilice el control deslizante para ajustar el rango de espacio o introduzca el tamaño de separación deseada en el campo de entrada 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.

Altura de la línea Meta

La altura de la línea afecta el espacio entre cada línea de su meta-texto Si desea aumentar el espacio entre cada línea, utilice el control deslizante para ajustar el rango de espacio o introduzca el tamaño de separación deseada 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 1 píxeles. 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 cosa, como em, vh, vw, etc.

Estilo del borde

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

Opciones de cartera avanzada de ancho completo

En la pestaña avanzada, encontrará opciones que los diseñadores web más experimentados pueden encontrar útiles, como los atributos CSS y HTML personalizados. 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 puede usar para personalizar el módulo en el archivo style.css del tema secundario.

divi módulo de cartera filtrable forward.png sección

ID de CSS

Ingrese un identificador CSS opcional para usar en este módulo. Una ID puede usarse 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 para usar en este módulo. Una clase CSS se puede usar para crear un estilo CSS personalizado. Puede agregar varias clases, separadas por un espacio. Estas clases se pueden utilizar en su tema infantil Divi o en la hoja de estilo CSS personalizada que agregue a su página o sitio web utilizando las opciones de Divi tema o la configuración de la página de Divi Builder.

CSS personalizado

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 de CSS en estos parámetros ya están incluidas en las etiquetas de estilo. Así que solo ingrese las reglas CSS separadas por punto y coma.

Carrusel automático

Si se selecciona la opción de diseño de carrusel y desea que el carrusel se deslice automáticamente sin que el visitante tenga que hacer clic en el siguiente botón, active esta opción y ajuste la velocidad de rotación a continuación si lo desea.

Velocidad de carrusel automático

Aquí puede ingresar la velocidad de rotación del carrusel, si la opción "Rotación automática del carrusel" está activada arriba. Cuanto mayor es el número, más larga es la pausa entre cada rotación. (Ej. 1000 = 1 sec)

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 individualmente. Esto es útil si desea utilizar diferentes módulos en diferentes dispositivos, o si desea simplificar el diseño de dispositivos móviles eliminando ciertos elementos de la página.

Otros tutoriales de Divi

Este artículo contiene los comentarios 4
  1. Hola,

    Gracias por tu artículo muy completo.
    Me las arreglo para mostrar un porftolio de ancho completo o una cartera que se puede filtrar pero con márgenes significativos.
    ¿Sabes si divi puede mostrar un portafolio filtrable de ancho completo?
    ¿O para mostrar un portafolio filtrable sin márgenes significativos?

    gracias

  2. Hola, disfruté tu artículo, pero cuando intento reproducir este tipo de diseño, tengo grandes espacios entre mis imágenes. Hubiera preferido tener las imágenes adjuntas como en su ejemplo. ¿Cómo configurar el módulo para eso?

    ¡Gracias!

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.

Temas geniales de WordPress que encontré en
¡Y hay más temas y modelos 50 000 para elegir!

Volver arriba
12 acciones
cuota2
Tweet2
Siguiente 8
WhatsApp