El módulo Fullwidth Wallet de la Tema divi, funciona como el módulo de Portafolio normal, excepto que muestra su proyecto en un hermoso modo Fullwdth. También viene con algunas configuraciones nuevas únicas: Cuadrícula y Carrusel. El módulo funciona al mostrar una lista de sus proyectos más recientes y puede ser utilizado por diseñadores y artistas que desean mostrar una galería de su trabajo más reciente.
Cómo agregar un módulo Portfolio Fullwidth a tu página
Antes de que pueda agregar un módulo de cartera completo a su página, primero debe saltar a Divi Builder. Una vez el Tema divi instalado en su Sitio web, notarás un botón Utilice Divi Builder encima del editor de publicaciones cada vez que crea 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 haga 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 navegas por tu Sitio web en primer plano si ha iniciado sesión en su panel de WordPress.
Una vez que haya ingresado a 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 filas. Si está comenzando una nueva página, recuerde agregar una fila a su página primero. Tenemos excelentes tutoriales sobre el uso de elementos de línea y sección de Divi.
Busque el módulo de billetera 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 y agregar automáticamente 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 se dividen 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 cubre todo el ancho de la página.
Vamos a empezar.
Utilice el constructor visual para agregar una sección de ancho completo debajo del encabezado de la página. Luego agregue un módulo de portafolio filtrable.
Actualice la configuración de la cartera filtrable de la siguiente manera:
Opciones de contenido
Número de mensajes: 8 Paginación de pantalla: NO
Opciones de diseño
Diseño: Grid Zoom Color del icono: # 000000 Color de superposición de desplazamiento: #ffffff Fuente del título: Predeterminado, Negrita, Todo en mayúsculas Tamaño de la fuente del título: 14px Espaciado entre letras del título: 1px Tamaño de fuente meta: 12px Espaciado meta letras: 1px
¡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 iconos. Todo lo que controla lo que aparece en su módulo siempre se encontrará en esta pestaña.
Título de la cartera
Ingrese un título que se muestra arriba de la cartera, o déjelo vacío para que no use un título.
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
Controle el número de proyectos mostrados Déjelo en blanco o use 0 para no limitar la cantidad.
Mostrar título
Elija si el título de cada proyecto se muestra o no cuando pasa el mouse sobre el elemento del proyecto.
Mostrar fecha
Elija si se muestra o no la fecha de publicación de cada proyecto cuando se desplaza sobre el elemento del proyecto.
Color de fondo
Defina 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 utilizará 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 encima de los colores de fondo, lo que significa que el color de fondo no será 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 usa la vista WireFrame en Visual Builder, estas etiquetas aparecen en el bloque de módulo de la interfaz 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 configuraciones de diseño que puede usar para cambiar cualquier cosa.
Provisión
Elija el diseño que desea utilizar. "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
Cuando pasa el cursor sobre un elemento en el módulo de cartera, aparece un icono superpuesto. Puede ajustar el color utilizado desde este icono utilizando el selector de color en esta configuración.
Superposición de colores de desplazamiento
Cuando pasa el cursor sobre un elemento del módulo de cartera, aparece una superposición de color en la parte superior de la imagen y debajo del texto y el icono del título de la cartera. De forma predeterminada, se utiliza un color blanco semitransparente. Si desea utilizar 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 que se muestre cuando un visitante se desplaza sobre los elementos de la cartera en el módulo.
Color del texto
Aquí puede elegir si su texto debe ser claro u oscuro.
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 excelentes fuentes con tecnología de Google Fonts. De forma predeterminada, Divi usa la fuente Open Sans para todo el texto de su página. También puede personalizar el estilo de su texto usando las opciones de negrita, cursiva, mayúsculas y subrayado.
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 de su texto o ingresar directamente el valor de tamaño de texto 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 introducir "px" o "em" según el valor de su tamaño para cambiar el tipo de unidad.
Color del texto del título
De forma predeterminada, todos los colores del texto en Divi aparecen en blanco o gris oscuro. Si desea cambiar el color del texto de su título, elija el color deseado en el selector de color usando esta opción.
Espaciado de letras de título
El espaciado de letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra en el texto del título, use el control deslizante de rango para ajustar el espacio o ingrese 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" según el 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 del texto del título. Si desea aumentar el espacio entre cada línea, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado 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 introducir "px" o "em" según el valor de su tamaño para cambiar el tipo de unidad.
Meta Font
Puede cambiar la fuente de su meta texto seleccionando la fuente deseada en el menú desplegable. Divi viene con docenas de fuentes geniales impulsadas por Google Fonts. De forma predeterminada, Divi usa la fuente Open Sans para todo el texto de su página. También puede personalizar el estilo de su texto utilizando las opciones de negrita, cursiva, mayúsculas y subrayado.
Tamaño de fuente Metas
Aquí puede ajustar el tamaño de su metatexto. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño de su texto o ingresar directamente el valor de tamaño de texto 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" según el valor de su tamaño para cambiar su tipo de unidad.
Color del texto meta
De forma predeterminada, todos los colores del texto en 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 letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra en su meta-texto, use el control deslizante de rango para ajustar el espacio o ingrese 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" según el 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 en su meta-texto. Si desea aumentar el espacio entre cada línea, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado 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" según el 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 del selector de color para aplicarlo a su borde.
Ancho del borde
De forma predeterminada, los bordes tienen 1 píxel de ancho. 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 algo más como em, vh, vw, etc.
Estilo del borde
Los bordes admiten ocho estilos diferentes: sólido, punteado, punteado, doble, surco, cresta, superpuesto e inicio. Seleccione el estilo que desee en el menú desplegable para aplicarlo a su borde.
Opciones avanzadas de cartera de ancho completo
En la pestaña avanzada, encontrará opciones que los diseñadores web más experimentados pueden encontrar útiles, como los atributos personalizados de CSS y HTML. Aquí puede aplicar CSS personalizado a cualquiera de los muchos elementos del módulo. También puede aplicar clases e ID de CSS personalizados al módulo, que se pueden usar para personalizar el módulo en el archivo style.css de su tema secundario.
ID de CSS
Ingrese un ID de CSS opcional para usar en este módulo. Se puede usar una identificación para crear un estilo CSS personalizado o para vincular a secciones particulares de su página.
Clase de CSS
Ingrese las clases CSS opcionales que se usarán en este módulo. Se puede utilizar una clase CSS para crear estilos CSS personalizados. Puede agregar varias clases, separadas por un espacio. Estas clases se pueden usar en su tema secundario Divi o en la hoja de estilo CSS personalizada que agregue a su página o sitio web. Sitio web usando las opciones del tema Divi o la configuración de la página Divi Builder.
CSS personalizado
También se puede aplicar CSS personalizado al módulo y a cualquiera de los componentes internos del módulo. En la sección CSS personalizado, encontrará un campo de texto donde puede agregar hojas de estilo CSS personalizadas directamente a cada elemento. Las entradas CSS en esta configuración ya están envueltas en etiquetas de estilo. Así que simplemente ingrese las reglas CSS separadas por punto y coma.
Carrusel automático
Si se elige 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 botón siguiente, habilite esa opción y ajuste la velocidad de giro a continuación si lo desea.
Velocidad de carrusel automático
Aquí puede indicar la velocidad de rotación del carrusel, si la opción "Rotación automática del carrusel" está activada arriba. Cuanto mayor sea el número, mayor será la pausa entre cada rotación. (Ej. 1000 = 1 segundo)
visibilidad
Esta opción le permite controlar los dispositivos en los que aparece su módulo. Puede optar por desactivar su módulo en tabletas, teléfonos inteligentes o computadoras de escritorio individualmente. Esto es útil si desea utilizar diferentes mods en diferentes dispositivos o si desea simplificar el diseño del móvil eliminando ciertos elementos de la página.
[vc_row center_row=”sí”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DESCARGAR TEMA DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/filiales/idevfiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DESCARGAR EL TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]
Otros tutoriales de Divi
- 5 sitios web para su uso restaurante temático Divi
- Cómo agregar texto en un producto Divi WooCommerce
- Cómo cambiar el color del menú entre páginas Divi
- Cómo personalizar las cuadrículas de un blog con Divi
- Cómo utilizar la función de editor Divi en WordPress
- Cómo crear un control deslizante Divi a pantalla completa
- Cómo cambiar el color de los menús entre páginas Divi
- Características que probablemente no conozcas sobre Divi
- Cómo usar Divi Builder en WordPress
- Cómo usar el módulo de desplazamiento de video Divi
- Cómo usar el módulo Divi Builder Flip
- Cómo agregar un módulo testimonial en Divi Builder
- Cómo usar el módulo de texto Divi
- Cómo crear un control deslizante en Divi
- Cómo editar un rol de usuario Divi
- Cómo usar el módulo de Divi Social Media
- Cómo usar el módulo de tienda en el tema WordPress Divi
- Cómo usar el módulo de la barra lateral Divi
- Cómo usar el Módulo Divi Price Table
- Cómo usar el módulo de título de las publicaciones de Divi
- Cómo agregar un módulo de video de Divi
- Cómo usar el módulo de navegación del artículo
- Cómo usar el módulo de búsqueda Divi
- Cómo usar el módulo Divi wallet
- Cómo usar el módulo de persona en Divi Builder
- Cómo usar el módulo de billetera con filtro Divi
- Cómo usar el módulo deslizante de ancho completo
- Cómo usar el Módulo de imagen Divi Builder
- Cómo utilizar el módulo de navegación de ancho completo de Divi Builder
- Cómo usar el módulo de la galería de imágenes
- Cómo utilizar el módulo de tarjeta de ancho completo de Divi Builder
- Cómo utilizar el módulo de cartera de ancho completo de Divi
- Cómo usar el módulo de encabezado de ancho completo Divi
- Cómo usar el módulo Divi Counter
- Cómo usar el control deslizante de artículos en Divi Builder
- Cómo usar el módulo Divi Email Optin
Hola,
Me las arreglo para tener una billetera filtrable o una billetera de ancho completo, pero el ancho completo no se puede filtrar.
Me gustaría poder agregar el título del proyecto en cuestión a las imágenes de mi portafolio filtrables, como es el caso de los portafolios “clásicos”. Sabes como hacerlo ?
Hola !
Acabo de ir a Divi y me tropiezo en el camino para crear una página de "Anuncios" en la que mis nuevos anuncios aparecerían en pequeñas miniaturas / minutos uno al lado del otro como en los sitios de agencias inmobiliarias. Para obtener información, ya he creado mi página de ANUNCIOS y algunos artículos (un artículo para un anuncio) que asocio con la categoría ANUNCIOS…. pero aparecen en gran formato. ¡Espero haberme explicado bien en mi problemática! Mientras espera sus sugerencias, ¡gracias de antemano por sus explicaciones y consejos! Buenas tardes !! Atentamente - Jerome
Hola, si está utilizando el módulo de blog, deberá agregar CSS específico que se aplique a este módulo. Desafortunadamente, este molde no ofrece muchas opciones de personalización.
Hola,
Gracias por tu artículo muy completo.
Consigo mostrar un porftolio de ancho completo o un portafolio filtrable pero con grandes márgenes alrededor.
¿Sabe si divi le permite mostrar un portafolio filtrable de ancho completo?
¿O mostrar una cartera filtrable sin los márgenes importantes?
Merci
Hola Delphine,
Nunca he probado, pero me pondré en contacto con usted si tengo una respuesta.
Hola, disfruté mucho tu artículo pero cuando trato de reproducir este tipo de diseño tengo grandes espacios entre mis imágenes. Hubiera preferido tener las imágenes unidas como en tu ejemplo. ¿Cómo configurar el módulo para esto?
¡Gracias!
Hola Valerie,
¿Ha intentado deshabilitar todos los complementos solo para ver si mejora la visualización?