Documentación de Divi - El módulo Portfolio por filtros

Divi - Documentación en español

Actualizada v3.28

El módulo Portfolio por filtros

El Portfolio por filtros le permite mostrar sus proyectos más recientes con una estructura estándar o en grilla. Este portfolio se ve igual al del módulo Portfolio, salvo por cargar los nuevos proyectos usando peticiones de Ajax, y por incluir la opción de filtrar los 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.

Divi - Módulo "Portfolio por filtros"

Cómo añadir un módulo Portfolio por filtros en una página

Antes de poder añadir un módulo Portfolio por filtros, deberá abrir el constructor de Divi. Una vez instalado el tema en su sitio, notará en la parte superior del editor que se ha añadido un botón morado Usar el constructor de Divi. Este botón estará presente en cada página o entrada nueva. Haga clic en este botón para activar el constructor de Divi, con el cual tendrá acceso a los módulos. A continuación haga clic en el botón azul Usar constructor visual para iniciar el el constructor en su modalidad visual. También puede hacer clic en el botón Activar constructor visual al navegar en la interfaz de usuario de su sitio si ha iniciado sesión en WordPress.

Una vez que haya entrado en el constructor visual, puede hacer clic en el botón + para añadir un nuevo módulo en la página. Los módulos nuevos solo pueden agregarse dentro de las filas. Si está construyendo una página de cero, no olvide añadir una fila primero. Tenemos algunos muy buenos tutoriales sobre cómo usar los elementos de las filas y secciones de Divi.

Divi - Insertar módulo Portfolio por filtros

Localice el módulo Portfolio por filtros dentro de la lista de módulos y haga clic sobre el botón gris para añadirlo a la página. La lista de módulos tiene un motor de búsqueda, lo cual significa que también puede escribir “portfolio” y pulsar enter para encontrar el módulo más rápidamente. Cuando haya agregado el módulo aparecerá la ventana de ajustes correspondientes. Estos ajustes son opciones que están separadas en tres grupos principales: Contenido, Diseño y Avanzado.

Sistema de ayuda de Divi

Dentro de cada pestaña de los ajustes de módulos, filas y secciones, a continuación de las opciones, se incluye un enlace al sistema de ayuda de Divi, que incluye más de 70 vídeos completos con instrucciones de configuración y uso del constructor. Este sistema único les da a usted y a sus clientes la ayuda que necesiten, permitiéndoles aprender al mismo tiempo que crean sus sitios.

Sistema de ayuda de Divi

Los vídeos individuales de cada lista de reproducción se pueden abrir en una ventana emergente, fuera del cuadro de ayuda, lo cual le permite redimensionar o mover la interfaz del vídeo por toda la pantalla para que encuentre la mejor ubicación. El vídeo permanece abierto y anclado a su posición mientras usted explora el constructor, siguiendo el tutorial y construyendo la página. Puede visitar uno por uno los vídeos de la lista, cerrar el vídeo y volver a la lista de reproducción en cualquier momento. Los vídeos solo están disponibles en inglés.

Filtros de búsqueda de opciones

Dentro de todas las ventanas de ajustes de los modulos está disponible un botón de Filtros. Los filtros limitan la visibilidad de muchas opciones disponibles que aparecen dentro de cada ventana. Estos filtros incluyen: Estilos modificados, Contenido / Estilos adaptables, Contenido / Estilos al pasar el cursor y Contenido activo.

Divi - Filtro de búsqueda en módulos

Ver más información aquí.

Opciones de contenido

Dentro de la pestaña Contenido encontrará todos los elementos de contenido del módulo, tales como el número de entradas, las categorías y el fondo. Todo aquello que controla lo que aparece en el módulo siempre se encontrará en esta pestaña.

Contenido
  • Número de entradas – Defina el número de proyectos que desea mostrar. Necesitará tener proyectos creados para que aparezcan dentro de este módulo.
  • Categorías incluidas – Seleccione las categorías que desea incluir en la lista de proyectos. Todas las categorías de proyectos que haya creado se mostrarán aquí y podrá seleccionarlas o deseleccionarlas.
Elementos
  • Mostrar título – Escriba un título, si lo desea, el cual se mostrará en la parte superior de la lista de proyectos.
  • Mostrar categorías – Elija si desea mostrar o no las categorías debajo de los proyectos, en el área de metadatos de entrada.
  • Mostrar paginación – Esta opción activa/desactiva la paginación. Si la paginación está desactivada, se mostrará solo una página de proyectos para cada categoría.
Enlace
  • URL del enlace del módulo – Escriba una URL válida en este campo para convertir el módulo entero en un enlace. No se creará un enlace si se deja el campo en blanco.
  • Destino del enlace del módulo – Elija si el enlace se abre en la misma ventana o no.
Fondo
  • Fondo – Aquí puede definir un fondo para el módulo. Las opciones son las mismas que para los demás fondos: color, degradado, imagen y vídeo.
Etiqueta de administración
  • Etiqueta de administración – De manera predeterminada, este módulo aparecerá con el nombre Portfolio por filtros en el constructor. La etiqueta de administración le permite cambiar el nombre para identificar el módulo más fácilmente. Cuando use la vista de estructura, estas etiquetas aparecerán dentro del bloque del módulo en la interfaz del constructor.

Opciones de diseño

Dentro de la pestaña Diseño encontrará todas las opciones de estilo del módulo, tales como fuente, color, tamaño y espaciado. Esta es la pestaña que usará para cambiar la apariencia del módulo. Cada módulo de Divi tiene una larga lista de ajustes de diseño con los cuales podrá modificar casi todo.

Diseño
  • Diseño – Elija el estilo deseado para el portfolio. Ancho completo mostrará un proyecto por fila, en tanto Grilla mostrará todos los proyectos en una grilla con cuatro proyectos por fila.
Superposición
  • Color del icono de zoom – Si usa el diseño en Grilla, verá este ajuste. Puede elegir un color personalizado para este icono del selector.
  • Color de superposición al pasar el cursor – Si usa el diseño en Grilla, verá este ajuste. Aquí puede definir un color personalizado para la superposición sobre la imagen al pasar el cursor del ratón.
  • Selector de icono al pasar el cursor – Si usa el diseño en Grilla, verá este ajuste. Cuando se pasa el cursor del ratón sobre un elemento del portfolio, aparece un icono de superposición. Aquí puede definir un icono personalizado.
Imagen
  • Imagen Esquinas redondeadas – Aquí puede controlar el radio de la esquina de la imagen de este módulo. Active el icono del enlace para controlar las cuatro esquinas a la vez, o desactívelo para definir un valor personalizado para cada una.
  • Imagen Estilos del borde – Esta opción controla de manera individual la apariencia de los cuatro bordes: izquierdo, derecho, superior e inferior.
  • Imagen Ancho del borde – De manera predeterminada, los bordes tienen un ancho de 0 (sin borde). Puede aumentar este valor arrastrando el selector de rango o escribirlo en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, vh, vw, etc.
  • Imagen Color del borde – Esta opción afecta al color del borde de la imagen de este módulo. Elija un color personalizado del selector para aplicarlo.
  • Imagen Estilo del borde – Los bordes incluyen ocho estilos diferentes: sólido, punteado, rayado, doble, surco, cresta, interior y exterior. Seleccione el estilo que desee del menú desplegable para aplicarlo.
  • Sombra de imagen – Use estos ajustes para añadir una sombra en la imagen de este módulo. Podrá controlar la posición axial y la fuerza de la sombra asignando valores en píxeles; cambiar el color con el selector, y la posición respecto del borde (interior o exterior).
  • Filtros – Seleccione aquí el tipo de filtro para aplicar a la imagen del módulo: podrá controlar valores de Tonalidad, Saturación, Brillo, Contraste, Invertir, Sepia, Opacidad y Desenfoque. También podrá definir el modo de mezcla con la imagen o color de fondo que haya elegido para este módulo, con las siguientes opciones: Normal, Multiplicar, Pantalla, Superposición, Oscurecer, Aclarar, Sobreexposición de color, Subexposición de color, Luz fuerte, Luz suave, Diferencia, Exclusión, Tonalidad, Saturación, Color y Luminosidad.
Texto
  • Alineación del texto – Esto controla la alineación del texto dentro de este módulo: izquierda, derecha, centrada o justificada.
  • Color de texto – Aquí puede elegir el contraste del texto. Si el módulo se muestra sobre un fondo claro, el color del texto debería ser oscuro. Si se muestra sobre un fondo oscuro, el color del texto debería ser claro.
  • Sombra de texto – Elija un estilo de sombra de texto para activar en este elemento. Una vez activado, podrá personalizar aún más el estilo de la sombra del texto. Para desactivar el estilo personalizado de sombra de texto, elija la opción Ninguna.
  • Posición horizontal de sombra de texto – La distancia horizontal de la sombra respecto del texto. Un valor negativo colocará la sombra a la izquierda del texto.
  • Posición vertical de sombra de texto – La distancia vertical de la sombra respecto del texto. Un valor negativo colocará la sombra arriba del texto.
  • Fuerza de desenfoque de sombra de texto – Cuanto mayor sea el valor, mayor será el desenfoque; la sombra se hace más amplia y clara.
  • Color de sombra de texto – Elija el color de la sombra del selector.
Título Texto
  • Nivel de encabezado Título – Seleccione aquí la etiqueta HTML de encabezado que se usará para este elemento.
  • Fuente de Título – Puede cambiar la fuente del texto del módulo Carrusel, seleccionándola del menú desplegable. Divi incluye docenas de hermosas fuentes proporcionadas por Google Fonts. De manera predeterminada, Divi usa la fuente Open Sans para todos los textos de la página. También puede personalizar el estilo del texto con las opciones de negrita, itálica, mayúsculas y subrayado.
  • Título Peso de fuente – Esto controla el peso de la fuente del texto del título. Las opciones son: Claro (fino), Estándar, Semi Negrita, Negrita y Ultra Negrita.
  • Título Estilo de fuente – Esto controla el estilo de la fuente del texto del título. Las opciones son: Itálica, Mayúsculas, Versales, Subrayado y Tachado.
  • Alineación del texto de Título – Esto controla la alineación del texto del título: izquierda, derecha, centrada o justificada.
  • Color de texto de Título – Si desea cambiar el color de texto del título, elija el color del selector en esta opción.
  • Tamaño de texto de Título – Aquí puede ajustar el tamaño del texto del título. Puede arrastrar el selector de rango para aumentarlo o disminuirlo, o puede escribir el valor de tamaño del texto que desee en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, em o pt.
  • Espacio entre letras de Título – El espacio entre letras es la separación entre cada uno de los caracteres del texto del título. Si desea aumentar esa separación, use el selector de rango para ajustarlo o escriba el valor de espaciado en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
  • Altura de línea de Título – La altura de línea afecta el espacio entre cada una de las líneas de texto del título. Si desea aumentar ese espacio, use el selector de rango para ajustarlo o escriba el valor en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
  • Sombra de texto de Título – Elija un estilo de sombra para activar en el texto del título. Una vez activado, podrá personalizar aún más el estilo (controlar la posición axial y la fuerza de la sombra asignando valores en píxeles, y cambiar el color con el selector). Para desactivar el estilo personalizado de sombra de texto, elija la opción Ninguna.
Criterios de filtro Texto
  • Fuente de Criterios de filtro – Puede cambiar la fuente del texto del filtro, seleccionándola del menú desplegable. Divi incluye docenas de hermosas fuentes proporcionadas por Google Fonts. De manera predeterminada, Divi usa la fuente Open Sans para todos los textos de la página. También puede personalizar el estilo del texto con las opciones de negrita, itálica, mayúsculas y subrayado.
  • Criterios de filtro Peso de fuente – Esto controla el peso de la fuente del texto del filtro. Las opciones son: Claro (fino), Estándar, Semi Negrita, Negrita y Ultra Negrita.
  • Criterios de filtro Estilo de fuente – Esto controla el estilo de la fuente del texto del filtro. Las opciones son: Itálica, Mayúsculas, Versales, Subrayado y Tachado.
  • Color de texto de Criterios de filtro – Si desea cambiar el color de texto del filtro, elija el color del selector en esta opción.
  • Tamaño de texto de Criterios de filtro – Aquí puede ajustar el tamaño del texto del filtro. Puede arrastrar el selector de rango para aumentarlo o disminuirlo, o puede escribir el valor de tamaño del texto que desee en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, em o pt.
  • Espacio entre letras de Criterios de filtro – El espacio entre letras es la separación entre cada uno de los caracteres del texto del filtro. Si desea aumentar esa separación, use el selector de rango para ajustarlo o escriba el valor de espaciado en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
  • Altura de línea de Criterios de filtro – La altura de línea afecta el espacio entre cada una de las líneas de texto del filtro. Si desea aumentar ese espacio, use el selector de rango para ajustarlo o escriba el valor en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
  • Sombra de texto de Criterios de filtro – Elija un estilo de sombra para activar en el texto del filtro. Una vez activado, podrá personalizar aún más el estilo (controlar la posición axial y la fuerza de la sombra asignando valores en píxeles, y cambiar el color con el selector). Para desactivar el estilo personalizado de sombra de texto, elija la opción Ninguna.
Sección meta Texto
  • Fuente de Sección meta – Puede cambiar la fuente del texto de la sección meta (categorías), seleccionándola del menú desplegable. Divi incluye docenas de hermosas fuentes proporcionadas por Google Fonts. De manera predeterminada, Divi usa la fuente Open Sans para todos los textos de la página. También puede personalizar el estilo del texto con las opciones de negrita, itálica, mayúsculas y subrayado.
  • Sección meta Peso de fuente – Esto controla el peso de la fuente del texto de la sección meta. Las opciones son: Claro (fino), Estándar, Semi Negrita, Negrita y Ultra Negrita.
  • Sección meta Estilo de fuente – Esto controla el estilo de la fuente del texto de la sección meta. Las opciones son: Itálica, Mayúsculas, Versales, Subrayado y Tachado.
  • Alineación del texto de Sección meta – Esto controla la alineación del texto de la sección meta: izquierda, derecha, centrada o justificada.
  • Color de texto de Sección meta – Si desea cambiar el color de texto de la sección meta, elija el color del selector en esta opción.
  • Tamaño de texto de Sección meta – Aquí puede ajustar el tamaño del texto de la sección meta. Puede arrastrar el selector de rango para aumentarlo o disminuirlo, o puede escribir el valor de tamaño del texto que desee en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, em o pt.
  • Espacio entre letras de Sección meta – El espacio entre letras es la separación entre cada uno de los caracteres del texto de la sección meta. Si desea aumentar esa separación, use el selector de rango para ajustarlo o escriba el valor de espaciado en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
  • Altura de línea de Sección meta – La altura de línea afecta el espacio entre cada una de las líneas de texto de la sección meta. Si desea aumentar ese espacio, use el selector de rango para ajustarlo o escriba el valor en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
  • Sombra de texto de Sección meta – Elija un estilo de sombra para activar en el texto de la sección meta. Una vez activado, podrá personalizar aún más el estilo (controlar la posición axial y la fuerza de la sombra asignando valores en píxeles, y cambiar el color con el selector). Para desactivar el estilo personalizado de sombra de texto, elija la opción Ninguna.
Paginación Texto
  • Fuente de Paginación – Puede cambiar la fuente de la paginación, seleccionándola del menú desplegable.
  • Paginación Peso de fuente – Esto controla el peso de la fuente del texto de la paginación. Las opciones son: Claro (fino), Estándar, Semi Negrita, Negrita y Ultra Negrita.
  • Paginación Estilo de fuente – Esto controla el estilo de la fuente del texto de la paginación. Las opciones son: Itálica, Mayúsculas, Versales, Subrayado y Tachado.
  • Alineación del texto de Paginación – Esto controla la alineación de la paginación: izquierda, derecha, centrada o justificada.
  • Color de texto de Paginación – Si desea cambiar el color de texto de la paginación, elija el color del selector en esta opción.
  • Tamaño de texto de Paginación – Aquí puede ajustar el tamaño del texto de la paginación. Puede arrastrar el selector de rango para aumentarlo o disminuirlo, o puede escribir el valor de tamaño del texto que desee en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, em o pt.
  • Espacio entre letras de Paginación – El espacio entre letras es la separación entre cada uno de los caracteres del texto de la paginación. Si desea aumentar esa separación, use el selector de rango para ajustarlo o escriba el valor de espaciado en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
  • Altura de línea de Paginación – La altura de línea afecta el espacio entre cada una de las líneas de texto de la paginación. Si desea aumentar ese espacio, use el selector de rango para ajustarlo o escriba el valor en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
  • Sombra de texto de Paginación – Elija un estilo de sombra para activar en el texto de la paginación. Una vez activado, podrá personalizar aún más el estilo (controlar la posición axial y la fuerza de la sombra asignando valores en píxeles, y cambiar el color con el selector). Para desactivar el estilo personalizado de sombra de texto, elija la opción Ninguna.
Tamaño
  • Ancho – De manera predeterminada, los elementos se ampliarán al ancho completo de su elemento contenedor. Si desea establecer un ancho estático personalizado, puede hacerlo con esta opción.
  • Ancho máximo – Si se establece un ancho máximo, se evitará que el elemento sobrepase el valor de ancho definido. El ancho máximo se puede usar en combinación con el ajuste estándar de ancho. El ancho máximo reemplaza el valor de ancho normal.
  • Alineación del módulo – Aquí puede elegir la posición del módulo en caso de que haya modificado el ancho en el ajuste anterior: alineado a la izquierda, al centro o a la derecha.
  • Altura mínima – Cuando se establece una altura mínima, el elemento siempre tendrá una altura de al menos la cantidad definida. Esto reemplaza los valores de altura estática más pequeños. A diferencia de la altura, la altura mínima no da como resultado un desbordamiento de contenido y permitirá que la altura del elemento permanezca dinámica.
  • Altura – Esto establece un valor de altura estática para el elemento. Una vez establecida, la altura del elemento ya no será determinada por su contenido interno. El contenido que supere la altura estática del elemento desbordará el contenedor del elemento.
  • Altura máxima – Si se establece una altura máxima, se evitará que el elemento sobrepase el valor de altura definido. A medida que el contenido del módulo aumenta y supera la altura máxima, desbordará el contenedor del elemento.
Espaciado
  • Margen personalizado – El margen es el espacio que se agrega fuera del módulo, entre sus extremos y los elementos contiguos (arriba, abajo, a la izquierda o a la derecha). Puede añadir valores personalizados de margen a cualquiera de los cuatro lados del módulo. Para eliminar el margen personalizado, borre el valor agregado del campo de entrada. De manera predeterminada, estos valores se miden en píxeles, pero puede usar unidades de medida personalizadas.
  • Relleno personalizado – El relleno es el espacio que se agrega dentro del módulo, entre sus extremos y los elementos internos. Puede añadir valores personalizados de relleno a cualquiera de los cuatro lados del módulo. Para eliminar el relleno personalizado, borre el valor agregado del campo de entrada. De manera predeterminada, estos valores se miden en píxeles, pero puede usar unidades de medida personalizadas.
Borde
  • Esquinas redondeadas – Aquí puede controlar el radio de la esquina de este módulo. Active el icono del enlace para controlar las cuatro esquinas a la vez, o desactívelo para definir un valor personalizado para cada una.
  • Estilos del borde – Esta opción controla de manera individual la apariencia de los cuatro bordes: izquierdo, derecho, superior e inferior.
  • Ancho del borde – De manera predeterminada, los bordes tienen un ancho de 0 (sin borde). Puede aumentar este valor arrastrando el selector de rango o escribirlo en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, vh, vw, etc.
  • Color del borde – Esta opción afecta al color del borde. Elija un color personalizado del selector para aplicarlo.
  • Estilo del borde – Los bordes incluyen ocho estilos diferentes: sólido, punteado, rayado, doble, surco, cresta, interior y exterior. Seleccione el estilo que desee del menú desplegable para aplicarlo.
Sombra
  • Sombra – Use estos ajustes para añadir una sombra en el módulo. Podrá controlar la posición axial y la fuerza de la sombra asignando valores en píxeles; cambiar el color con el selector, y la posición respecto del borde (interior o exterior).
Filtros
  • Filtros – Seleccione aquí el tipo de filtro para aplicar al módulo: podrá controlar valores de Tonalidad, Saturación, Brillo, Contraste, Invertir, Sepia, Opacidad y Desenfoque. También podrá definir el modo de mezcla con la imagen o color de fondo que haya elegido para este módulo, con las siguientes opciones: Normal, Multiplicar, Pantalla, Superposición, Oscurecer, Aclarar, Sobreexposición de color, Subexposición de color, Luz fuerte, Luz suave, Diferencia, Exclusión, Tonalidad, Saturación, Color y Luminosidad.
Transformación
  • Transformación – Con estos controles puede realizar ajustes visuales mediante una combinación de configuraciones de escala, traslación, rotación, sesgo y origen. Esto le permite crear efectos de diseño avanzados sin necesidad de un programa de diseño gráfico independiente.
Animación
  • Estilo de la animación – Elija un estilo de animación para activar las animaciones en este elemento. Las opciones son: Desvanecer, Diapositiva, Rebotar, Zoom, Voltear, Plegar o Rodar. Una vez activado, podrá personalizar aún más el estilo de animación. Para desactivar las animaciones, elija la opción Ninguna.
  • Repetición de la animación – De manera predeterminada, las animaciones solo se ejecutarán una vez. Si desea que la animación se repita continuamente puede elegir aquí la opción Repetir.
  • Dirección de la animación – Esta opción está disponible para todos los estilos de animación, excepto Desvanecer. Elija una de las cinco direcciones de animación diferentes, cada una de las cuales ajustará la posición inicial y final del elemento animado: Centrada, Derecha, Izquierda, Arriba, Abajo.
  • Duración de la animación – Aumente o disminuya la velocidad mediante el ajuste de duración de la animación. Las unidades son en milisegundos y la duración predeterminada de la animación es de un segundo.
  • Retardo de la animación – Si desea añadir un retardo antes de ejecutar la animación puede designar aquí ese retraso en milisegundos. Esto puede ser útil si usa varios módulos animados juntos.
  • Intensidad de la animación – Esta opción está disponible para todos los estilos de animación, excepto Desvanecer y Rebotar. La intensidad afecta la suavidad o fuerza de la animación. Si baja la intensidad, la animación será más suave y sutil. Si la aumenta, la animación será más agresiva y ágil.
  • Opacidad inicial de la animación – Si aumenta la opacidad inicial, puede reducir o eliminar el efecto de desvanecido que es aplicado a todos los estilos de animación.
  • Curva de velocidad de la animación – Aquí puede ajustar el método de atenuación de la animación. Las opciones son: Atenuación de entrada y salida, Atenuación, Atenuación de entrada y Atenuación de salida. Atenuar la entrada o salida de la animación creará un efecto más suave en comparación con una curva de velocidad lineal.

Opciones avanzadas

Dentro de la pestaña Avanzado encontrará opciones que podrían ser útiles para diseñadores web más experimentados, tales como los atributos CSS y HTML. Aquí puede aplicar código CSS personalizado al módulo, y también puede aplicar clases CSS e ID personalizadas, las cuales pueden ser usadas para personalizar el módulo dentro de la hoja de estilos del tema hijo.

Clases & ID CSS
  • ID CSS – Escriba una ID CSS opcional para usar en este módulo. Puede usar una ID para aplicarle estilos o usarla como anclaje de enlace.
  • Clase CSS – Escriba una o varias clases CSS opcionales para usar en este módulo. Una clase CSS puede ser usada para aplicar estilos.
CSS personalizado

Introduzca en los campos disponibles los códigos CSS personalizados para aplicar en el módulo.

Visibilidad
  • Desactivar en – Esta opción le permite controlar en qué dispositivos aparecerá el módulo. Puede elegir desactivarlo de manera individual en tablets, teléfonos móviles o en equipos de escritorio. Esto es especialmente útil si desea usar módulos distintos para cada dispositivo, o si desea simplificar el diseño para móviles al eliminar ciertos módulos de la página.
  • Desbordamiento horizontal – Aquí puede controlar el desbordamiento de elementos en el eje X. Si se establece en Desplazar, el contenido que desborda los anchos o alturas estáticos activará una barra de desplazamiento del navegador. Si se establece en Oculto, se recortará el desbordamiento de contenido
  • Desbordamiento vertical – Aquí puede controlar el desbordamiento de elementos en el eje Y. Si se establece en Desplazar, el contenido que desborda los anchos o alturas estáticos activará una barra de desplazamiento del navegador. Si se establece en Oculto, se recortará el desbordamiento de contenido.
  • z-index – Aquí puede controlar la posición del elemento en el eje Z. Los elementos con valores de índice z más altos se colocarán encima de los elementos con valores de índice z inferiores.
Transiciones
  • Duración de la transición – Esto controla la duración de la transición de la animación al pasar el cursor.
  • Retardo de transición – Esto controla el retardo de la transición de la animación al pasar el cursor.
  • Curva de velocidad de transición – Esto controla la curva de velocidad de transición de la animación al pasar el cursor.

Ver demostración en vivo del módulo

Facebook
WhatsApp
Twitter
LinkedIn
Pocket
Reddit
Enviar por correo
Imprimir

35 comentarios en “El módulo Portfolio por filtros”

  1. Hola, sería posible que el menú de las imágenes saliera, en lugar de arriba de las imágenes en tu lateral. Por ejemplo,
    ponto que dividimos la página en tres columnas, la primera el menú de navegación del portfolio, y en las otras dos, las imágenes.

    Gracias,
    Guillermo

  2. Hola, muy buena la explicación del modulo portfolio.
    Mi duda es la siguiente: seleccionamos uno de los filtros del portfolio y entramos en uno de los artículos (misma pestaña), cuando volvemos pulsando atrás, ¿no podemos mantener el filtro seleccionado?.
    Mediante código php podríamos? Necesito orientación.
    Gracias.

  3. hola buenas tardes, muy útil todo.
    Mi pregunta es la siguiente, el modulo de portfolio filtrable quiero que sea de tres columnas.
    He probado unos cuantos codigos css y no me funciona ninguno, cual puede ser el problema ?? o es que tengo algo que no permite actuar a los codigos??
    muchas gracias.

    1. Hola, Eduardo.

      Gracias por tu comentario.

      ¿Probaste agregar el código en los ajustes de la página que contiene el módulo? Y tendrías que revisar que no están siendo sobrescritos en el CSS personalizado del tema o en el archivo style.css del tema hijo (si lo hubiera).

      Saludos.

    1. Hola, Martín.

      Perdón por la demora.

      Si te referís a los elementos del menú, se agregan desde Apariencia > Menús, pero el estilo siempre va a depender del tema en uso.

      Saludos.

      1. Muchas gracias por su aporte. El código proporcionado funciona perfectamente, y mejor aún la actualización que aporta el usuario @benjaminlately permite que el filtro alfabético solo se vea en el frontend, y no afecte el backend. Saludos y gracias por ayudar a la comunidad Divi

  4. Hola, me gustaria saber si puedo personalizar las pestañas para no dejar el diseño que trae por dejecto, solo me deja cambiar colo y estilo de tipografia pero me gustaria tambien cambiar el fondo

    1. Hola, Edgar.

      Tendrías que usar CSS personalizado (en los ajustes de la página). Este es el código:

      .et_pb_portfolio_filters li a {
          background: #000 !important;
          border: 1px solid #000 !important;
      }
      

      Cambiá los valores de color por los que necesites.

      Saludos.

  5. Hola,
    Quería preguntar si es posible poner el título del proyecto con efecto hover, o sea que aparezca solo al pasar el ratón en el Portafolio Filtrable. El efecto se puede hacer en el Portafolio no filtrable, pero al poner el filtro no consigo poner este efecto.
    Gracias

    1. Hola, Kaixo.

      Fijate si este código te sirve. Podés pegarlo en los Ajustes de página > Avanzado > CSS adicional:

      .et_pb_portfolio_item h2 {
          position: absolute;
          top: 5%;
          width: 100%;
          text-align: center;
          display:none;
          transform: translate3d(0px, 0px, 0px);
          transition: all 0.3s ease 0s;
      }
      .et_pb_portfolio_item:hover h2 {
          display: block;
          z-index: 3;
      }
      

      Saludos.

  6. Hola,
    Me gustaría poder cambiar la palabra «Todos», en las categorías del menú filtrable. Pero no encuentro la manera…
    @Aye ya comentó el CSS para editar el fondo y el borde de las pestañas:

    .et_pb_portfolio_filters li a {
    background: #000 !important;
    border: 1px solid #000 !important;
    }

    Me gustaria poder cambiar la palabra «Todos». Y si pudiera ser además tener opciones de alineado general de la caja y espaciado entre las categorías.
    ¡Mil gracias de antemano!

    1. Hola, Jordi.

      Gracias por tu comentario.

      Para cambiar la palabra Todos, pegá el siguiente código en Opciones del tema > Integración > Añadir código al <body>:

      <script>
       jQuery(document).ready(function($){
       $('.et_pb_portfolio_filter_all a.active').text('Otro texto');
      });
      </script>
      

      Reemplazá Otro texto por el que necesites.

      Para alinear al centro la caja, en el CSS personalizado de los ajustes de la página:

      .et_pb_portfolio_filters li a {
          text-align: center;
      }
      @media (min-width: 578px) {
      .et_pb_portfolio_filters li {
          width: 25% !important; /* cambiar valor por el que corresponda */
      }
      }
      

      Depende de cuántas categorías tengas, dividí 100 por la cantidad y te dará el porcentaje para width.

      Saludos.

    1. Hola, Antonio.

      Probá con este código en Divi > Opciones del tema > Integración > Añadir código al <body>:

      <script>
      jQuery(document).ready(function($){
      $('.et_pb_portfolio_item a').attr('target','_blank');
      });
      </script>
      

      Saludos.

      1. Muchas gracias Aye!
        Lo acabo de probar pero no me funciona

        ¿Puedes ser que haya que escribir «un código» dentro de la Portafolio Filtrable, Clase ID?

        He estado probando con diversas etiquetas, pero no me sale

        class=»et_overlay et_pb_inline_icon»
        .et_pb_portfolio_image_item
        .et_pb_portfolio_image_item

        La página en cuestión:
        https://www.thankiu.es/antoniodmarketing

        De lograrlo creo que es una funcionalidad muy útil para toda la comunidad !

        Muchas gracias de antemano

  7. hola a todos, necesito poner un botón al menú principal y que vaya directamente a una de las opciones de porfolio filtrable (la opción genérica donde salen todas las categorías) se que lo tendría que hacer con ID pero no como hacerlo.

    Saludos

    1. Hola, Juan.

      Existe este código, que podés añadir en Divi > Opciones del Tema > Integración > Añadir código al <body>:

      <script type="text/javascript">
      (function($){
      $(window).load(function(){
      // find the hash in the URL and removes the #
      var et_hash = window.location.hash.substr(1);
      var et_filter = $( '.et_pb_portfolio_filter a[data-category-slug="' + et_hash + '"]' );
      
      if(window.location.hash && et_filter.length) {
      // if it finds a hash and the filter exists, then add the active class
      $(et_filter).addClass('active')
      
      // removes the active class from the all filter
      $( '.et_pb_portfolio_filter a[data-category-slug="all"]' ).removeClass('active')
      }
      });
      })(jQuery)
      </script>
      

      De esta manera podrás usar la ID (slug) de la categoría que corresponda a la pestaña que necesites mostrar activa al cargar la página. El enlace sería algo así: https://urldelsitio.com/proyectos/#slug-categoria

      Saludos.

  8. quería poder ordenar las categorías en un orden determinado, que no es ni orden alfabético, ni ascendente, ni nada de eso.
    Que solución hay?
    Muchas gracias

Responder a Kaixo Cancelar respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Scroll al inicio