¿Le gustaría utilizar el módulo de Portafolio Filtrable de Divi y no sabes que diseño elegir?

El modulo « Portafolio Filtrable "Para Divi le ofrece dos opciones de diseño para elegir. Ambas opciones tienen ventajas y funcionan muy bien para ciertos propósitos. 

En este artículo, compararemos los diseños de ancho completo y de cuadrícula de este módulo para ayudarlo a decidir qué necesita para su Sitio web

También personalizaremos ambos diseños para ver cómo funcionan en un solo diseño. Divi.

Vamos a empezar!

vista

Primero, veamos qué vamos a crear en este tutorial.

Versión de escritorio del diseño de cuadrícula

utilice el módulo de cartera filtrable de Divi

Descarga DIVI ahora!!!

Versión de teléfono del diseño de cuadrícula

Cuadrícula Artículo de cartera Teléfono

Versión de escritorio del diseño de ancho completo

utilice el módulo de cartera filtrable de Divi

Lea también: Divi: cómo usar los efectos de sombra y desplazamiento para crear contenido interactivo

Versión de teléfono del diseño de ancho completo

Número de teléfono de artículo de cartera de diseño de ancho completo

Cómo cambiar el diseño del módulo de cartera filtrable

De forma predeterminada, el módulo "Portafolio filtrable" muestra el diseño en todo su ancho. Puede cambiar el diseño para mostrar elementos en una cuadrícula. Primero, abra el parámetros del módulo.

Cómo cambiar el diseño

Luego selecciona la pestaña Diseño. La primera opción es Disposición. Tiene una lista desplegable con algunas opciones. Selecciónalo para elegir entre Ancho total et Cuadrícula.

Cómo cambiar el diseño

Si elige la opción que no está seleccionada actualmente, el módulo volverá a cargar y mostrará los elementos de la cartera en este diseño. El siguiente ejemplo muestra el diseño de la cuadrícula.

Cómo cambiar el diseño

Comparación de diseño de módulos de cartera filtrable

Los dos diseños son muy diferentes, pero tienen algunas similitudes. Ambos muestran el filtro en la parte superior del módulo, el título y meta debajo de las imágenes del elemento y la paginación en la parte inferior del módulo.

Aquí hay un vistazo a cómo son diferentes.

Diseño de ancho completo

Ancho completo muestra una imagen grande con un elemento de cartera que ocupa todo el ancho del área de cartera. Las imágenes se muestran en su forma original y se expanden para ajustarse al ancho disponible. 

No agrega mucho espacio entre los elementos de la billetera. Recomendamos limitar el número de publicaciones a unas pocas. El siguiente ejemplo muestra el diseño de ancho completo con 2 publicaciones.

Diseño de ancho completo

Diseño de cuadrícula

El diseño de cuadrícula muestra hasta 4 elementos en una fila. Añade más espacio entre los elementos. Las imágenes se recortan para crear miniaturas del mismo tamaño, independientemente del tamaño y la forma de la imagen.

Diseño de cuadrícula

Para este, limitamos el módulo a mostrar cuatro publicaciones para mostrar la paginación.

Diseño de cuadrícula

Cuándo usar cada diseño del módulo Portafolio filtrable

Ambos arreglos tienen sus ventajas. Aquí hay algunos consejos sobre cuándo usar cada diseño.

Diseño de ancho completo

Utilice el diseño de ancho completo cuando solo tenga unos pocos elementos para mostrar o desee centrarse en unos pocos elementos. 

Utilice también este diseño cuando desee resaltar o llamar la atención sobre las imágenes destacadas.

Diseño de cuadrícula

Utilice el diseño de cuadrícula cuando desee mostrar muchos elementos o cuando desee que un diseño muestre más elementos en un espacio más pequeño.

Cómo personalizar diseños de módulos de cartera filtrables

Ahora que hemos visto cómo seleccionar diseños, cómo funcionan y cuándo usarlos, veamos cómo personalizar estos dos diseños. 

Usaremos la página Portafolio del Paquete de diseño de pintor gratis disponible en divi. Aquí está la página original.

Cómo diseñar diseños

Reemplazaremos el portafolio con el módulo de Portafolio filtrable y usaremos las mismas imágenes y títulos. 

Crearemos dos versiones: una con un diseño de ancho completo y otra con un diseño de cuadrícula.

Cómo personalizar el diseño de cuadrícula del módulo de cartera filtrable

Comenzaremos con el diseño de la cuadrícula. Usaré los colores y fuentes del diseño original.

Contenido

Abrirlos parámetros del módulo e ingrese 4 para el Recuento de entradas. Seleccionar todo categorías que desea mostrar en el módulo.

  • Número de publicaciones: 4
  • Categorías incluidas: seleccionar categorías
Cómo dar estilo a un elemento de la cartera de cuadrícula

Provisión

Luego selecciona la pestaña Diseño y elige Cuadrícula en las opciones de diseño.

  • Diseño: Cuadrícula
Cómo dar estilo a un elemento de la cartera de cuadrícula

Imagen

Desplazarse hasta Imagen y elige la opción Sombra de la caja. Cambialo color de sombra en rgba(0,0,0,0.05).

  • Sombra de la caja: 4ème opción
  • Color de sombra: rgba (0,0,0,0.05)
Cómo dar estilo a un elemento de la cartera de cuadrícula

textos

Luego, desplácese hacia abajo hasta textos y modificar el alineación en el centro. Esto centra el filtro, el título, el meta y la paginación.

  • Alineación de texto: Centro
Cómo dar estilo a un elemento de la cartera de cuadrícula

Texto del título

Luego, desplácese hacia abajo hasta Texto del título y cambie los siguientes ajustes.

  • Fuente del título: Merriweather
  • Color del texto del título: #000000
Cómo dar estilo a un elemento de la cartera de cuadrícula

Cambiar el tamaño de la policía a 26 px para computadoras de escritorio, 20 px para tabletas y 18 px para teléfonos.

  • Tamaño del texto del título: escritorio 26 px, tableta 20 px, teléfono 18 px
Cómo dar estilo a un elemento de la cartera de cuadrícula

Filtrar texto de criterio

Luego, desplácese hacia abajo hasta Texto de criterios de filtro y cambie la siguiente configuración:

  • Criterios de filtro:
    • Fuente: Montserrat
    • Peso de fuente: Negrita
    • Estilo: TT
    • Color del texto: #fd6927
    • Tamaño del texto: 12px
Cómo dar estilo a un elemento de la cartera de cuadrícula

metatexto

Luego, desplácese hacia abajo hasta Meta texto. Cambialo policía en Montserrat y el los colores en #fd6927.

  • Tamaño del metatexto: Montserrat
  • Color del metatexto: #fd6927
Cómo dar estilo a un elemento de la cartera de cuadrícula

Selecciona el taille en 12 píxeles, elespaciado de letras en 2 píxeles y el altura de línea en 1,2 em.

  • Tamaño del texto: 12px
  • Espaciado entre letras meta: 2px
  • Altura de línea Meta: 1,2 cm
Cómo dar estilo a un elemento de la cartera de cuadrícula

Texto de paginación

Finalmente, desplácese hacia abajo hasta Texto de paginación y cambiarlo policía en Montserrat, y puso el los colores fuente en negro. Cierre el módulo y guarde su configuración.

  • Fuente de paginación: Montserrat
  • Color del texto de paginación: #000000
Cómo dar estilo a un elemento de la cartera de cuadrícula

Cómo personalizar el módulo de cartera filtrable en un diseño de ancho completo

Ahora, configuremos el módulo en un diseño de ancho completo. 

Usaremos las mismas claves de diseño que el diseño de cuadrícula, pero haremos algunos cambios que funcionan bien para este diseño. Usaremos algunos CSS simples para hacer algunos ajustes menores.

Contenido

Abrirlos parámetros del módulo y cambiar el número de publicaciones a 2. Esto mantiene la página más pequeña y manejable con imágenes grandes. Seleccionar todo categorías que desea mostrar en el módulo.

  • Número de publicaciones: 2
  • Categorías incluidas: Elija categorías
Cómo Aplicar Estilo a un Elemento de Portafolio de Diseño de Ancho Completo

Elementos

Desplazarse hasta Elements y desactivar Mostrar categorías. Deje los demás habilitados. Las categorías seguirán estando habilitadas para el filtro, pero no se mostrarán con el título.

  • Mostrar Categorías: NO
Cómo Aplicar Estilo a un Elemento de Portafolio de Diseño de Ancho Completo

Provisión

Seleccione la pestaña Diseño. Sous Disposición, deje el Diseño establecido en Ancho total, que es su configuración predeterminada.

  • Diseño: ancho completo
Cómo Aplicar Estilo a un Elemento de Portafolio de Diseño de Ancho Completo

Imagen

Luego, desplácese hacia abajo hasta Imagen . Elige la opción Shadow Box y cambiarlo los colores sombra en rgba (0,0,0,0.05).

  • Sombra de la caja: 4ème opción
  • Color de sombra: rgba (0,0,0,0.05)
Cómo Aplicar Estilo a un Elemento de Portafolio de Diseño de Ancho Completo

textos

Luego, desplácese hacia abajo hasta Texto. Cambiar el alineación en el centro. El filtro, título y paginación estarán centrados con las imágenes.

  • Alineación de texto: Centro
Cómo Aplicar Estilo a un Elemento de Portafolio de Diseño de Ancho Completo

Texto del título

Luego, desplácese hacia abajo hasta Texto del título . Cambialo policía a Merriweather y cambiar el los colores en negro.

  • Fuente del título: Merriweather
  • Color del texto del título: #000000
Cómo Aplicar Estilo a un Elemento de Portafolio de Diseño de Ancho Completo

Cambiar el tamaño de la policía a 40 px para computadoras de escritorio, 20 px para tabletas y 18 px para teléfonos.

  • Tamaño del texto del título: escritorio 40 px, tableta 20 px, teléfono 18 px
Cómo Aplicar Estilo a un Elemento de Portafolio de Diseño de Ancho Completo

Filtrar texto de criterio

Luego, desplácese hacia abajo hasta Texto de criterios de filtro y cambie la siguiente configuración:

  • Criterios de filtro:
    • Fuente: Montserrat
    • Peso de fuente: Negrita
    • Estilo: TT
    • Color del texto: #fd6927
Cómo Aplicar Estilo a un Elemento de Portafolio de Diseño de Ancho Completo

Texto de paginación

Luego, desplácese hacia abajo hasta Texto de paginación. Cambialo policía en Montserrat, cambia el peso semi-negrita y establecer el color de fuente en #fd6927. Cierre el módulo y guarde su configuración.

  • Fuente de paginación: Montserrat
  • Color: #fd6927
  • Peso de fuente: semi negrita
Cómo Aplicar Estilo a un Elemento de Portafolio de Diseño de Ancho Completo

Texto del título CSS

Abre la pestaña Tecnología y desplázate hasta Título de la cartera. Seleccione el icono de Escritorio. Copie el código a continuación para diferentes tamaños de pantalla. Cierre el módulo y guarde su configuración.

Título de la cartera:

  • Ordenador de sobremesa
padding-bottom:40px
  • Tablet
padding-bottom:30px
  • Teléfono
padding-bottom:20px
Cómo Aplicar Estilo a un Elemento de Portafolio de Diseño de Ancho Completo

Resultados

Versión de escritorio del diseño de cuadrícula

utilice el módulo de cartera filtrable de Divi

Versión de teléfono del diseño de cuadrícula

Cuadrícula Artículo de cartera Teléfono

Descarga DIVI ahora!!!

Versión de escritorio del diseño de ancho completo

Escritorio de artículos de cartera de ancho completo

Ver también: Divi: cómo cambiar el degradado de un fondo al pasar el mouse

Versión de teléfono del diseño de ancho completo

utilice el módulo de cartera filtrable de Divi

Descarga DIVI ahora!!!

Conclusión

Esta es nuestra opinión sobre el uso de un diseño de ancho completo en lugar de una cuadrícula en el módulo Portafolio filtrable de divi. Elegir entre las dos opciones de diseño es fácil. 

Cada opción tiene ventajas y debe diseñarse de manera diferente para trabajar con su Sitio web. Simplemente haga algunos ajustes para asegurarse de que su módulo funcione bien con cualquier diseño Divi.

Esperamos que este tutorial lo inspire para sus próximos proyectos Divi. Si tienes alguna inquietud o sugerencia, encuéntranos en la sección de comentarios para discutirlo

También puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet.

No dudes en consultar también nuestra guía sobre la Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.

Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.

...