¿Le gustaría saber cómo personalizar los elementos de la grilla del módulo de Portafolio Filtrable de Divi ? Síguenos en este tutorial...
Tenga una zona en su Sitio web para mostrar su trabajo es importante. Si eres estilista, puedes crear varios proyectos en tu Sitio web WordPress para mostrar tus conceptos. Si eres un creador de marca, puedes usar un portafolio para mostrar tu trabajo. Además, incluso podemos ir más allá y agregar diferentes categorías para nuestros proyectos. Esta aquí ¿Qué hace el módulo de cartera filtrable de Divi? .
Con este módulo, podemos mostrar nuestro arduo trabajo de una manera fácil y organizada.
En el tutorial de hoy, personalizaremos los elementos individuales de la cuadrícula del módulo Portafolio filtrable. Usaremos diseños de paquetes de diseño gratuitos Conferencia Divi et Instructora de yoga en línea Divi proporcionado con cada compra de Divi .
Como con todo sobre Divi, tenemos la capacidad de personalizar este módulo para satisfacer nuestras necesidades y deseos. Sin embargo, antes de entrar en estilo, aprendamos un poco más sobre el módulo.
¿Qué es el módulo de cartera filtrable de Divi?
Los proyectos son parte de un tipo de publicación personalizada que funciona igual que las publicaciones. Puede encontrarlos en su panel de WordPress.
Aquí es donde creará sus proyectos individuales que completarán su módulo de Portafolio filtrable. El módulo nos da dos formas de mostrar nuestros proyectos: en un formato de cuadrícula ou en un formato de ancho completo. Para nosotros, usaremos y personalizaremos el formato de cuadrícula.
Con el módulo Portafolio Filtrable, podremos presentar nuestros proyectos más recientes. Los usuarios de nuestro sitio verán una barra de filtro en la parte superior de nuestra cuadrícula de cartera. Desde allí, pueden navegar a través de las diferentes categorías de cartera que permitimos mostrar en el módulo.
Aquí hay un ejemplo de configuración de cuadrícula del módulo con algunos proyectos de muestra:
Áreas a considerar al crear la cartera filtrable de Divi
como todas las modas Divi, el módulo Filterable Portfolio viene con una serie de características que podemos personalizar según nuestras necesidades y deseos. Por lo tanto, la mayoría de las funciones que vienen con el módulo se pueden modificar en la pestaña Diseño desde el modal de configuración del módulo. Podemos editar las siguientes áreas y más:
- Título del proyecto
- Categoría de proyecto
- Viñeta
- Filtrar texto
- Miniatura al pasar el mouse
- Paginación
¡Esta no es una lista completa, y ni siquiera hemos comenzado a hablar sobre cómo CSS agregó personalizaciones más profundas a este módulo!
Cómo personalizaremos el módulo de cartera filtrable de Divi
Como se mencionó anteriormente, para este tutorial usaremos dos diseños: Conferencia Divi et Instructora de yoga en línea Divi. A continuación puede obtener una descripción general del trabajo que vamos a hacer durante este tutorial.
Disposición de los elementos del diseño de la "Conferencia Divi"
Disposición de los elementos del diseño "Divi Online Yoga Instructor"
Puede descargar fácilmente ambos diseños desde Divi Constructor.
¡Ahora comencemos!
Ver también: Divi: elija entre la cuadrícula y el diseño de ancho completo del módulo de cartera filtrable
Personalización del módulo de cartera filtrable de Divi: "Divi Conference Edition"
Primero, necesitaremos instalar la plantilla de la página del evento del paquete de diseño de la conferencia Divi. Luego de crear tu nueva página en WordPress y activar el Divi Builder, ingresaremos a la Biblioteca Divi.
Ingrese a la biblioteca de diseño Divi
Haga clic en el ícono « Cargar desde biblioteca para ingresar a la biblioteca de diseños de Divi
Ubique el diseño en la biblioteca de diseño de Divi
Usando la función de búsqueda en la biblioteca de diseño de Divi, mirando la disposición " Página del evento de la conferencia".
Diseño de instalación
Una vez que haya seleccionado el diseño, haga clic en " Usar este diseño para instalar el diseño en su página.
Retire y reemplace el módulo de imagen
Eliminaremos el módulo Imagen que se muestra a continuación para dejar espacio para el módulo Portafolio filtrable que personalizaremos. Haga clic en el " Borrar después de pasar el cursor sobre la imagen para eliminar la foto.
Inserte el módulo de cartera filtrable de Divi
Con el módulo de imagen eliminado, ahora podemos dejar espacio para nuestro módulo de cartera filtrable. Vamos a hacer clic en el icono “ Agregar módulo (el signo más gris), luego seleccione el módulo en el cuadro modal del módulo que aparece.
Establecer el número de publicaciones y el diseño de la cartera
De forma predeterminada, este módulo presentará su trabajo en una sola columna. Sin embargo, usaremos el diseño de cuadrícula que viene por defecto con 4 columnas.
Por lo tanto, recomendamos elegir un múltiplo de 4 (4, 8, 12, 16, etc.) como número de publicaciones para su cartera.
Para este tutorial, usaremos 12 proyectos en nuestra grilla.
Comience a personalizar la cartera filtrable de Divi: título y metatexto
Ahora que nuestros proyectos se muestran en una cuadrícula, vinculemos algunos de los elementos de diseño de nuestra plantilla seleccionada. En este caso, utilizaremos el estilo provisto con el paquete de diseño de conferencia Divi en nuestro nuevo módulo.
Estilo de texto
- Alineación de texto: centrado
- Color del texto: oscuro
Estilo de texto del título
- Título Nivel de encabezado: H2
- Fuente del título: Krona One
- Color del texto: #000000
Estilo de metatexto
- Fuente Meta: Predeterminada (Open Sans)
- Color del metatexto: #ff6651
Ahora que tenemos nuestro estilo para los títulos en la cuadrícula de la cartera, hagamos algunos cambios en la forma real de las miniaturas del proyecto.
Cambiar el borde de la miniatura del proyecto y las esquinas redondeadas
En nuestro paquete Divi Conference Layout, utilizamos una combinación única de esquinas redondeadas para dar una forma única a algunos de los fotogramas clave del paquete. Apliquemos este estilo a las miniaturas de nuestro módulo.
Imagen
- Image:
- Esquinas redondeadas: 50px 50px 50px 0px
- Estilos de borde: todos
- Ancho del borde: 3px
- Color: #000000
- Estilo de borde: sólido
Esto le dará a nuestras miniaturas una forma que coincida con el resto de las otras imágenes en el paquete de diseño.
Personalización de la superposición de desplazamiento
Vayamos un paso más allá con nuestro estilo y hagamos un pequeño cambio en la superposición predeterminada que viene con este módulo. Cambiaremos el color, así como el icono que se utiliza nada más sacarlo de la caja.
Superposición
- Color del icono de zoom: #bcf5fd
- Color de superposición de desplazamiento: #ff6651
- Selector de icono flotante: Zoom
Como puede ver ahora, agregamos los colores de la marca para este diseño a la superposición, y también cambiamos el ícono que Divi proporciona de forma predeterminada para la función de superposición al pasar el mouse sobre este módulo.
Personalización de la paginación
Ahora comenzaremos a usar pequeños fragmentos de CSS para agregar personalización adicional a nuestro módulo Filterable Portfolio. Primero, personalizaremos la paginación de este módulo. A continuación, eliminaremos el borde que aparece encima con una sola línea de CSS
Texto de paginación
- Paginación:
- Fuente: Krona One
- Alineación de texto: centrado
- Color del texto: #ff6651, #000000 (pasar el cursor)
Para nuestro CSS, cambiaremos a la pestaña Tecnología de nuestro módulo. En segundo lugar, haremos clic en la pestaña CSS personalizado. A continuación, ingresaremos el siguiente fragmento de código para eliminar el borde sobre nuestra paginación, dándole un aspecto más limpio.
Paginación de cartera
border-top: 0px;
Uso de la configuración de Divi y CSS para personalizar el texto del filtro
Para el texto del filtro, lo mejoraremos un poco. Vamos a usar CSS para cambiar el fondo y los efectos de desplazamiento.
Queremos tener una continuidad perfecta entre el módulo recién agregado y el estilo del paquete de diseño. Primero, ingresemos nuestra configuración Divi para la fuente.
Texto de criterios de filtro
- Criterios de filtro:
- Fuente: Krona One
- Color de fuente: #ffffff, #000000 (pasar el cursor)
Tal como está, nuestro filtro parece haberse ido. De hecho, en su estado predeterminado, es texto blanco sobre fondo blanco. Sin embargo, cambiaremos esto con CSS personalizado en dos lugares.
Primero, agregaremos un fragmento de CSS en la configuración de la página que agregará un fondo al texto del filtro. En segundo lugar, personalizaremos el filtro de cartera activa usando la pestaña Tecnología du módulo.
Acceder configuración de la página, haga clic en los tres puntos en el medio de la pantalla. Después, seleccionar icono de engranaje que abrirá la configuración de la página. Entonces tú navega a la pestaña CSS personalizado e ingrese lo siguiente para agregar un fondo al texto del filtro.
CSS personalizado
En este fragmento de CSS, nos centramos en el color de fondo del filtro. También apuntamos y diseñamos su estado de desplazamiento. A continuación en la agenda, agreguemos más CSS al módulo y resaltemos nuestra pestaña Filtro activo.
/* Change background color of filters */
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
background: #000000;
}
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover {
background: #ffffff;
}
Estilo de pestaña activa del filtro de cartera
La pestaña activa de la ffiltro de cartera llama la atención de los usuarios sobre la categoría de cartera actual que están visitando. Actualmente este filtro tiene texto blanco y un fondo claro.
Iremos a la pestaña Tecnología del módulo Portafolio filtrable y agregue texto a los estados predeterminados y flotantes de esta función. Estas son las propiedades CSS que agregaremos en un estado predeterminado:
background: #ff6651;
color: #ffffff !important;
Estado al pasar el mouse
Al pasar el mouse, cambiaremos el fondo a negro.
color: #000000!important;
Aspecto final del diseño del portafolio filtrable de Divi con "Divi Conference"
¡Aquí está el look final!
Y ahora, ¡así es como se ve cuando te desplazas!
Personalización del módulo de cartera filtrable de Divi: "Divi Online Yoga Instructor"
Al igual que con Divi Conference Edition, encuentre su diseño en el paquete de diseño de instructor de yoga en línea dentro de Divi Builder.
Usaremos el diseño de la página de destino para este tutorial. Desplácese hacia abajo hasta la sección Clases de sección con el título Sección Todas las próximas clases.
Inserción del módulo de Portafolio Filtrable
A partir de aquí, eliminaremos las filas con las clases. Haga clic en el icono morado con tres puntos . Entonces, seleccione la vista de estructura alámbrica. Finalmente, eliminará las dos filas que contienen tres columnas.
Luego los reemplazaremos con una sola columna en la fila interior. Luego, agregaremos nuestro módulo de Portafolio Filtrable.
Como en el ejemplo anterior, usaremos el diseño de cuadrícula para este módulo con un múltiplo de 4 para el número de publicaciones.
Ahora hagamos algo un poco diferente con la información que presentamos en el mapa.
En la pestaña Contenido, navegar a Elementos y deseleccionar Mostrar categorías . Esto significa que el módulo Portafolio solo mostrará el nombre del proyecto sin el nombre de la categoría en la que se encuentra.
Personalización del texto de criterios de filtro, título del proyecto y texto de paginación
Definamos la base de estilo para las partes de texto de nuestro módulo. El cuerpo del texto de este diseño es Sin abiertas y la fuente utilizada para los encabezados principales es Cinzel. Por lo tanto, utilizaremos una combinación de estas dos fuentes durante todo el proceso de diseño.
textos
- Alineación de texto: centrado
- Color del texto: Claro
Texto del título
- Fuente del título: Cinzel
- Color del texto del título: #ffffff
Filtrar texto de criterios
- Criterios de filtro Peso de fuente: Negrita
- Criterios de filtro Color del texto: #ffffff
Texto de paginación
- Peso de fuente de paginación: Negrita
Así es como se ve nuestro módulo de cartera filtrable en este momento. No es mucho, ¡pero estamos llegando poco a poco!
Crear una superposición de desplazamiento translúcida
Inspirémonos en los diferentes módulos y hermosos degradados en este diseño. Para esto, crearemos una superposición de desplazamiento translúcido y personalizaremos el ícono que también aparece al pasar el mouse.
- Color del icono de zoom: #323741
- Color de superposición flotante: rgba (255 201 165, 0,85)
- Selector de icono de desplazamiento: busque una hoja y vea el icono de arriba
Agregar borde a los elementos de la cuadrícula de la cartera con CSS personalizado
Similar a nuestro primer ejemplo, ahora usaremos CSS para agregar más interés a nuestro módulo de Portafolio filtrable.
Ahora agregaremos un borde alrededor de cada elemento individual en la cuadrícula de la cartera. Use el fragmento de CSS a continuación en la parte CSS personalizada de la configuración de la página para agregar nuestro borde.
También usaremos "borde" como la clase CSS para este módulo.
- Clase CSS: borde
CSS personalizado
/* Border */
.border .et_pb_grid_item {
border: 2px solid #ffffff;
padding: 5px;
}
Aquí ahora tenemos nuestro módulo Filterable Portfolio con un bonito borde y relleno alrededor de cada elemento de la cuadrícula.
CSS agregado al borde de paginación de estilo
A diferencia de nuestro ejemplo anterior, agreguemos color al borde de nuestra paginación con CSS. Esto también irá en el área. Configuración > página CSS personalizada .
/* Pagination Styling */
.et_pb_filterable_portfolio .et_pb_portofolio_pagination {
border-top: 2px solid #adc6d9;
}Estilo de texto de criterios de filtro
Similar al estilo de nuestro módulo Divi Conference Portfolio, queremos agregar jazz a nuestros filtros de categoría. Nuevamente, queremos aprovechar el estilo que ya está presente en la plantilla que se nos proporcionó.
Aquí está el CSS que agregaremos en nuestra sección de CSS personalizado para apuntar al fondo y pasar el mouse sobre nuestra barra de filtro.
/* Change background color of filters */
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
background: none;
}
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover {
background: #ffffff;
color: #323741 !important;
}Con estas dos nuevas incorporaciones a nuestro CSS personalizado, así es como se perfila nuestro módulo Filterable Portfolio.
Sin embargo, observe cómo se pierde el filtro de cartera activa. Siempre tiene un fondo claro con texto blanco. Vayamos a la configuración del módulo y agreguemos algo de CSS para cambiar eso.
CSS personalizado
Filtro de cartera activa:
background: #ffffff;
color: #323741 !important;
Quitar animación de módulo
Para brindar una experiencia más limpia, eliminaremos la animación predeterminada que viene con el módulo Portafolio filtrable. Para esto, primero tendremos que volver a la configuración de nuestra página y agregar algo de CSS que apuntará a los elementos de la cuadrícula de la cartera y eliminará el transición deslizante eso sucede fuera de la caja.
CSS personalizado
/* Remove transition */
.et_pb_filterable_portfolio .et_pb_portfolio_item.active {
transition: none;
}
</code><code>
.et_pb_portfolio_item {
animation: none!important;
transition: none !important;
}Lea también: Divi: Cómo cambiar el número de columnas en un Blog
Cambiar la cuadrícula de la cartera de cuatro columnas a tres
Nuestra última adición de CSS será transformar nuestro módulo de Portafolio filtrable de cuatro columnas a tres. Esto nos dará más espacio para ver nuestros proyectos.
Además, agregaremos una línea adicional a nuestro módulo. También encontrará el último fragmento de CSS que puede usar para convertir sus columnas.
CSS personalizado
Para este último fragmento, agregaremos la ID de CSS #cuadrícula-de-tres-columnas a nuestro módulo. Todavía mantendremos intacta nuestra clase CSS de antes.
/* 4 to 3 Columns */
@media only screen and ( min-width: 768px ) {
#three-column-grid .et_pb_grid_item {
width: 28.333%;
margin: 0 7.5% 7.5% 0;
}
#three-column-grid .et_pb_grid_item:nth-child(3n) {
margin-right: 0;
}
#three-column-grid .et_pb_grid_item:nth-child(3n+1) {
clear: left;
}
#three-column-grid .et_pb_grid_item:nth-child(4n+1) {
clear: unset;
}
}
Descarga DIVI ahora!!!
Conclusión
Al igual que con la mayoría de los módulos Divi, la configuración que viene con Divi se puede desarrollar aún más con CSS. Mostrar su trabajo es una parte importante de la gestión de un negocio, blog o marca en línea.
Como tal, tener una forma organizada de mostrar su trabajo es esencial. Obtenga consejos que se compartieron hoy para participar en su propio viaje de diseño del módulo de cartera filtrable de Divi.
Con suerte, esta técnica agregará otra habilidad de diseño útil para proyectos futuros.
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.
...
