¿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
Descarga DIVI ahora!!!
Versión de teléfono del diseño de cuadrícula
Versión de escritorio del diseño de ancho completo
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
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.
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.
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.
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 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.
Para este, limitamos el módulo a mostrar cuatro publicaciones para mostrar la paginación.
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.
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
Provisión
Luego selecciona la pestaña Diseño y elige Cuadrícula en las opciones de diseño.
- Diseño: 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)
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
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
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
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
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
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
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 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
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
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
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)
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
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
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
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
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
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
Resultados
Versión de escritorio del diseño de cuadrícula
Versión de teléfono del diseño de cuadrícula
Descarga DIVI ahora!!!
Versión de escritorio del diseño 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
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.
...