Cómo agregar el módulo Portfolio de ancho completo de Divi a tu página

Antes de comenzar, necesitarás agregar algunos Proyectos a tu sitio web de WordPress. Consulta esta guía para aprender cómo se pueden agregar proyectos.

También se recomienda revisar esta guía para familiarizarte con los conceptos básicos del Divi Builder.

• Agrega una nueva página o edita una página existente.

• Por defecto, el Editor estándar Gutenberg se carga siempre que se añade una nueva entrada o página en WordPress.

• Haz clic en el botón púrpura debajo del título de la página. Usa El Constructor Divi.

---

Cómo agregar el módulo Portfolio de ancho completo de Divi a tu página

Una vez hecho clic, la página se recargará con el Divi Visual Builder.

Al recargar la página, notarás tres opciones:

• Construir desde cero

• Elegir un diseño prediseñado

• Construir con IA

Construir desde cero

Esta opción carga el Divi Builder con un diseño de página en blanco. Elige esta opción si quieres comenzar el diseño de tu página desde cero.

Elegir un diseño prediseñado

Esta opción te permite elegir entre nuestra amplia biblioteca de diseños Divi prediseñados. Puedes elegir diseños prediseñados por Divi, los que hayas diseñado y guardado en tu Biblioteca Divi, y páginas existentes en tu sitio web que puedes clonar.

Construir con IA

Esta opción te permite crear un diseño de página completo usando Divi AI. Utilizando tu texto y la información sobre tu sitio web, puedes crear el esquema perfecto de la página, construirla y llenarla con contenido e imágenes, dando vida a todo en muy poco tiempo.

Agregar el Módulo Portfolio de ancho completo de Divi

Dado que el Módulo Portfolio de ancho completo solo puede existir en secciones de ancho completo, primero debemos agregar una nueva sección de ancho completo.

Para agregar una sección de ancho completo a tu página, haz clic en el ícono + y luego en la pestaña Ancho completo para añadir la sección.

Agregar el Módulo Portfolio de ancho completo de Divi

Una vez hecho clic, aparecerá la biblioteca de módulos de ancho completo. Desplázate hasta Portfolio de ancho completo y haz clic para agregarlo a tu página, o usa la barra de búsqueda para localizar el módulo Portfolio de ancho completo.

Opciones explicadas de todos los módulos Portfolio de ancho completo de Divi

Una vez que hayas agregado el módulo portfolio, automáticamente aparecerán las configuraciones. Aquí es donde se configura el contenido y los estilos de diseño del módulo. Estas configuraciones están organizadas en tres grupos mediante las pestañas en la parte superior del módulo: Contenido, Diseño y Avanzado.

Pestaña Contenido

Dentro de esta pestaña encontrarás las opciones de contenido para el módulo Portfolio de ancho completo de Divi.

Contenido

En este grupo de configuraciones puedes agregar un título para el portfolio, elegir qué categorías de proyectos deseas mostrar y cuántos proyectos quieres.

• Título del portfolio – Si quieres mostrar un título para el portfolio encima de las imágenes, escribe el título aquí.

• Categorías incluidas – Elige qué categorías de proyectos quieres incluir en el portfolio. Por defecto, se muestran todas las categorías. Puedes elegir una categoría, varias o todas.

• Cantidad de proyectos – Define el número de proyectos que quieres mostrar en el portfolio escribiendo un valor numérico.

Elementos

Cuando pasas el cursor sobre un proyecto del portfolio, se muestra su título y fecha por defecto. Aquí puedes mostrar u ocultar el título y/o la fecha del proyecto al pasar el cursor.

• Mostrar título – Activa o desactiva esta opción para mostrar u ocultar el título del proyecto que aparece al pasar el cursor sobre la imagen.

• Mostrar fecha – Activa o desactiva esta opción para mostrar u ocultar la fecha del proyecto al pasar el cursor sobre la imagen.

Enlace

Aquí puedes aplicar un enlace a todo el módulo, pero no se recomienda hacerlo porque los visitantes no podrán hacer clic en cada ítem del portfolio individualmente. Aplicar un enlace a todo el módulo sobreescribe el contenido interno.

• URL del enlace del módulo – Pega la URL a la que deseas que dirija el enlace aplicado a este módulo. Esto hará que todo el módulo sea clickeable y redirija a la URL pegada.

• Destino del enlace del módulo – Define si el enlace se abre en una nueva pestaña o en la misma ventana:

  • En la misma ventana

  • En una nueva pestaña

Fondo

En el grupo de opciones de fondo, se pueden configurar:

• Color de fondo

• Degradado de fondo

• Imagen de fondo

• Video de fondo

• Patrón de fondo

• Máscara de fondo

Cómo agregar un color de fondo

• Haz clic en la primera pestaña, el ícono del balde de pintura.

• Haz clic en Agregar color de fondo y elige uno del paleta de colores de tu sitio, o usa el icono cuentagotas para seleccionar un nuevo color.

Cómo agregar un degradado de fondo

• Haz clic en la segunda pestaña, el ícono de degradado.

• Haz clic en Agregar degradado de fondo.

• Para cambiar los colores del degradado, haz clic en los puntos de parada del degradado y selecciona un color del paleta de colores o usa el cuentagotas para elegir uno nuevo. Los puntos de parada te permiten agregar más colores al degradado. Haz clic en cualquier lugar de la barra deslizante para agregar un nuevo punto.

• Tipo de degradado – Cambia el tipo desde el menú desplegable.

• Dirección del degradado – Cambia la dirección arrastrando la barra o escribiendo un valor numérico.

• Repetir degradado – Activa esta opción para repetir el degradado.

• Unidad de degradado – Cambia la unidad que determina cómo se calculan los puntos de parada.

• Colocar degradado sobre la imagen de fondo – Si hay una imagen de fondo, puedes colocar el degradado encima activando esta opción.

Cómo agregar una imagen de fondo

• Haz clic en la tercera pestaña, el ícono de imagen.

• Haz clic en el ícono gris + para abrir la Biblioteca de medios, donde puedes seleccionar una foto ya subida o subir una nueva.

Opciones de imagen de fondo:

• Usar efecto paralaje – Aplica un efecto paralaje donde la imagen se desplaza más rápido que el contenido en primer plano para crear un efecto 3D. Por defecto está desactivado.

• Tamaño de la imagen de fondo – Elige el tamaño desde el menú desplegable.

• Posición de la imagen de fondo – Elige la posición desde el menú desplegable.

• Repetición de la imagen de fondo – Elige si y cómo se repite la imagen desde el menú desplegable.

• Mezcla de la imagen de fondo – Elige cómo se mezcla la imagen con otras capas dentro del módulo.

Cómo agregar un video de fondo

• Haz clic en la cuarta pestaña, el ícono de video.

• Haz clic en el ícono gris + para abrir la Biblioteca de medios, donde puedes seleccionar un video ya subido o subir uno nuevo.

Opciones de video de fondo:

• Mp4 vs WebM – Se recomienda subir ambas versiones porque no todos los navegadores soportan WebM. Subir ambos formatos garantiza compatibilidad.

• Ancho del video de fondo – Define el ancho escribiendo un valor numérico.

• Alto del video de fondo – Define el alto escribiendo un valor numérico.

• Pausar video cuando otro video esté reproduciéndose – Si quieres que el video de fondo se pause cuando otro video esté activo, activa esta opción. Por defecto, el video se pausa cuando no está en vista. Si quieres que continúe, desactívala.

Cómo agregar un patrón de fondo

• Haz clic en la quinta pestaña, el ícono de patrón.

• Haz clic en Agregar patrón de fondo.

• Elige el tipo de patrón desde el menú desplegable.

Opciones de patrón de fondo:

• Color del patrón – Selecciona un color del paleta de colores o usa el cuentagotas para elegir otro.

• Transformar patrón – Puedes transformar el patrón horizontal o verticalmente, rotarlo o invertirlo.

• Tamaño del patrón – Selecciona tamaño real, cubrir, ajustar, estirar para llenar o tamaño personalizado. Si eliges personalizado, aparecerán opciones para ancho y alto del patrón que puedes ajustar.

• Origen de repetición del patrón – Selecciona desde dónde se repite el patrón.

• Desplazamiento horizontal y vertical – Ajusta el desplazamiento horizontal y vertical del patrón.

• Repetición del patrón – Elige cómo se repite (horizontal, vertical, etc.)

• Modo de mezcla del patrón – Define cómo se mezcla la capa del patrón con las capas inferiores, elige entre 16 modos disponibles.

Cómo agregar una máscara de fondo

• Haz clic en la sexta pestaña, el ícono de máscara.

• Haz clic en Agregar máscara de fondo.

• Selecciona el tipo de máscara desde el menú desplegable.

Opciones de máscara de fondo:

• Color de la máscara – Selecciona un color del paleta o usa el cuentagotas.

• Transformar máscara – Transforma la máscara horizontal o verticalmente, rota o invierte.

• Relación de aspecto de la máscara – Define la relación ancho/alto de la máscara.

• Tamaño de la máscara – Selecciona tamaño real, cubrir, ajustar, estirar para llenar o tamaño personalizado. Si eliges personalizado, aparecerán opciones para ancho y alto.

• Modo de mezcla de la máscara – Define cómo se mezcla la capa de máscara con las capas inferiores, con 16 modos para elegir.
  

Etiqueta de administración

La Etiqueta de administración es donde puedes darle un nombre al módulo que solo será visible para ti, para ayudarte a mantener todo organizado y fácil de entender en el backend. Por defecto, la etiqueta de administración será el nombre del módulo. Puedes cambiar el texto de la etiqueta para reflejar lo que desees.

---

---

Pestaña Diseño

Todos los estilos y configuraciones de diseño para el Módulo de Portafolio de Ancho Completo Divi están en esta pestaña.

---

---

Diseño

Puedes elegir el diseño en el que quieres que tu módulo de portafolio se muestre: como cuadrícula o ancho completo.

• Carrusel - Selecciona esta opción si quieres que el portafolio se muestre en un carrusel con los proyectos uno tras otro.

• Cuadrícula - Selecciona esta opción si deseas que tu portafolio se muestre como una cuadrícula. Por defecto, se muestra en una cuadrícula de 4 columnas.

---

---

Superposición

Cuando el cursor pasa sobre una imagen, aparece una superposición y un ícono de superposición. En esta pestaña, puedes especificar qué color quieres para la superposición y el ícono.

• Color del ícono de superposición - Elige el color del ícono aquí. Selecciona un color de la paleta del sitio o haz clic en el ícono del cuentagotas para encontrar un nuevo color. Para hacer el ícono transparente, haz clic en el círculo transparente a la derecha con la línea roja. Esto hará que el ícono no sea visible y solo se muestre el color de fondo de la superposición.

• Color de fondo de superposición - Elige el color de fondo de la superposición aquí. Selecciona un color de la paleta del sitio o usa el cuentagotas para elegir un nuevo color. Si no quieres que se muestre ningún color de superposición, haz clic en el círculo transparente con la línea roja.

• Ícono de superposición - Selecciona el ícono que quieres usar aquí.

---

Imagen

Aquí puedes estilizar las imágenes del portafolio.

• Esquinas redondeadas de la imagen - Para redondear las esquinas de la imagen, escribe un valor numérico. Mientras más alto sea el número, más redondeadas serán las esquinas. Los valores de las esquinas están vinculados automáticamente (como se muestra con el ícono de cadena azul resaltado en el medio); si deseas tener valores diferentes para cada esquina, haz clic en la cadena azul para desvincularlos. Si están vinculados, todos los valores serán iguales y se actualizarán automáticamente si cambias uno.

• Estilos del borde de la imagen - Aquí puedes añadir un borde a tus imágenes del portafolio. Puedes añadir un borde a todos los lados o a lados individuales (arriba, derecha, abajo y izquierda).

• Ancho del borde de la imagen - Aquí defines el ancho del borde. Para un borde más grueso, aumenta el número. El ancho debe ser al menos 1px para que se muestre.

• Color del borde de la imagen - Aquí puedes elegir el color del borde. Puedes seleccionar un color de la paleta por defecto del sitio o usar el cuentagotas para elegir un nuevo color.

• Estilo del borde de la imagen - Aquí puedes seleccionar el estilo del borde: sólido, punteado, discontinuo, doble, ranurado (groove), relieve (ridge), incrustado (inset), sobresaliente (outset) o ninguno.

• Sombra de caja de la imagen - Aquí puedes controlar la posición horizontal y vertical de la sombra, la fuerza del desenfoque y la expansión de la sombra. También puedes elegir el color de la sombra desde la paleta o usando el cuentagotas. Puedes seleccionar la posición de la sombra: sombra externa o sombra interna.

• Tono de la imagen - Puedes ajustar el tono arrastrando el control deslizante o escribiendo un valor numérico.

• Saturación de la imagen - Ajusta la saturación arrastrando el control deslizante o escribiendo un valor numérico.

• Brillo de la imagen - Ajusta el brillo arrastrando el control deslizante o escribiendo un valor numérico.

• Contraste de la imagen - Ajusta el contraste arrastrando el control deslizante o escribiendo un valor numérico.

• Invertir imagen - Invierte los colores de la imagen arrastrando el control o escribiendo un valor numérico.

• Opacidad de la imagen - Ajusta la opacidad arrastrando el control deslizante o escribiendo un valor.

• Desenfoque de la imagen - Ajusta el desenfoque arrastrando el control o escribiendo un valor numérico.

• Modo de mezcla de la imagen - Selecciona el modo de mezcla desde el desplegable: normal, multiplicar, pantalla, superponer, oscurecer, aclarar, color dodge, color burn, luz fuerte, luz suave, diferencia, exclusión, tono, saturación, color o luminosidad.

---

---

Texto

Esto establece los estilos generales de texto para este módulo.

• Alineación del texto - Permite elegir la alineación del texto: izquierda, centro, derecha o justificado.

• Color del texto - Selecciona la paleta de color del texto predeterminada para este módulo: claro u oscuro. Las paletas claras y oscuras predeterminadas se configuran en las Opciones del Tema Divi.

• Sombra del texto - Puedes agregar una sombra al texto en el módulo. Hay opciones para ajustar la longitud horizontal, vertical, la fuerza del desenfoque y el color de la sombra.

---

Texto del título

Configuraciones específicas para el estilo y configuración del texto del título del portafolio únicamente.

• Nivel del encabezado del título - Elige el nivel de encabezado asignado a este texto: h1, h2, h3, h4, h5 o h6.

• Fuente del título - Elige la fuente para el texto del título. La fuente predeterminada se selecciona automáticamente, pero puedes elegir otra o subir una personalizada desde el desplegable.

• Peso de la fuente del título - Selecciona el grosor de la fuente del título.

• Estilo de la fuente del título - Define el estilo del texto del título:

  • Cursiva

  • Mayúscula inicial

  • Versales pequeñas

  • Subrayado

  • Tachado

• Alineación del texto del título - Elige la alineación solo para el texto del título:

  • Izquierda

  • Centro

  • Derecha

  • Justificado

• Color del texto del título - Elige un color específico para el texto del título. Selecciona de la paleta del sitio o usa el cuentagotas.

• Tamaño del texto del título - Ajusta el tamaño de fuente del título arrastrando el control o escribiendo un valor numérico.

• Espaciado entre letras del título - Ajusta el espacio entre letras. Más alto es el número, más espacio habrá.

• Altura de línea del título - Ajusta el espacio entre líneas del texto del título.

• Sombra del texto del título - Agrega sombra al texto del título y configura la dirección (horizontal y vertical), fuerza del desenfoque y color de la sombra.

---

---

Texto del título del ítem del portafolio

Configuraciones específicas para el estilo y configuración del texto del título del ítem del portafolio únicamente.

• Nivel del encabezado del título del ítem - Elige h1, h2, h3, h4, h5 o h6.

• Fuente del título del ítem - Elige la fuente para el texto del título del ítem, o sube una personalizada.

• Peso de la fuente del título del ítem - Selecciona el grosor de la fuente.

• Estilo de la fuente del título del ítem:

  • Cursiva

  • Mayúscula inicial

  • Versales pequeñas

  • Subrayado

  • Tachado

• Alineación del texto del título del ítem:

  • Izquierda

  • Centro

  • Derecha

  • Justificado

• Color del texto del título del ítem - Elige un color específico.

• Tamaño del texto del título del ítem - Ajusta el tamaño de fuente.

• Espaciado entre letras del título del ítem - Ajusta el espacio entre letras.

• Altura de línea del título del ítem - Ajusta el espacio entre líneas.

• Sombra del texto del título del ítem - Agrega sombra y configura dirección, fuerza y color.

---

---

Texto Meta

Configuraciones para el estilo y configuración específica del texto meta que muestra la fecha del proyecto.

• Fuente Meta - Elige la fuente para el texto meta, o sube una personalizada.

• Peso de la fuente Meta - Selecciona el grosor de la fuente meta.

• Estilo de la fuente Meta:

  • Cursiva

  • Mayúscula inicial

  • Versales pequeñas

  • Subrayado

  • Tachado

• Alineación del texto Meta:

  • Izquierda

  • Centro

  • Derecha

  • Justificado

• Color del texto Meta - Elige un color específico.

• Tamaño del texto Meta - Ajusta el tamaño de fuente.

• Espaciado entre letras Meta - Ajusta el espacio entre letras.

• Altura de línea Meta - Ajusta el espacio entre líneas.

• Sombra del texto Meta - Agrega sombra y configura dirección, fuerza y color.

---

---

Dimensionamiento

• Ancho - Define el ancho del módulo. Para más información, consulta la documentación oficial.

• Ancho máximo - Define el ancho máximo del módulo.

• Alineación del módulo - Si se define un ancho o ancho máximo, la alineación del módulo puede configurarse con estas tres opciones:

  • Alineado a la izquierda

  • Centrado

  • Alineado a la derecha

• Altura mínima - Define el valor mínimo para la altura del módulo.

• Altura - Define la altura del módulo.

• Altura máxima - Define la altura máxima que puede tener el módulo.
  

Espaciado

Puedes agregar márgenes o espaciados a este módulo escribiendo valores numéricos.

• Margen agrega espacio fuera del módulo, y relleno (padding) agrega espacio dentro del módulo.

• Para bloquear las proporciones y mantener los valores iguales, haz clic en el ícono de eslabón de cadena entre los valores que quieras que siempre sean idénticos (ej. arriba y abajo).

• Los valores predeterminados de margen para el módulo son 0.

• Los valores predeterminados de relleno para el módulo son 0.

---

Borde

Agrega un borde al módulo. Puedes añadir un borde completo o solo a uno de los lados del módulo. Ajusta el ancho con el deslizador y selecciona un color. Elige un estilo de borde haciendo clic en el desplegable.

• Esquinas redondeadas - Escribe un valor numérico para redondear las esquinas del borde. Cuanto mayor sea el número, más redondeadas serán las esquinas. Los valores de las esquinas están enlazados automáticamente (como se ve en el ícono de cadena azul resaltado en el medio); sin embargo, si deseas tener valores diferentes para cada esquina, haz clic en el ícono azul para desvincularlos. Si los valores están vinculados, siempre tendrán el mismo valor y se actualizarán automáticamente si cambias uno.

• Estilos de borde - Aquí puedes agregar un borde a todos los lados del módulo o solo a lados individuales (arriba, derecha, abajo, izquierda).

• Color del borde - Aquí puedes elegir el color del borde. Puedes seleccionar un color del paleta de colores predeterminada de tu sitio o hacer clic en el ícono del cuentagotas para encontrar un color nuevo.

• Estilo del borde - Aquí puedes seleccionar el estilo de borde que prefieras: sólido, punteado, rayado, doble, ranura, relieve, inserto, saliente, o ninguno.

---

Sombra de caja

Aquí puedes agregar una sombra proyectada a todo el módulo.

Una vez que seleccionas un estilo de sombra, puedes personalizar las siguientes opciones:

• Posición horizontal de la sombra - Define la posición horizontal de la sombra proyectada.

• Posición vertical de la sombra - Define la posición vertical de la sombra proyectada.

• Fuerza de desenfoque de la sombra - Define la fuerza del desenfoque de la sombra. Mientras mayor sea el valor, más grande, difusa y ligera será la sombra.

• Fuerza de expansión de la sombra - Define la expansión del desenfoque. Incrementar esta fuerza aumenta la densidad de la sombra. Mayor densidad implica una sombra más intensa.

• Color de la sombra - Define el color de la sombra.

• Posición de la sombra - Define si la sombra está dentro (inset) o fuera (outer) del módulo.

Filtros

Ajusta los filtros del módulo:

• Tono - Define el ángulo del tono de un color.

• Saturación - Define la intensidad de la saturación del color.

• Brillo - Define qué tan brillantes deben ser los colores.

• Contraste - Define qué tan distinto debe ser el contraste entre áreas claras y oscuras.

• Invertir - Invierte el tono, saturación y brillo según el valor especificado.

• Sepia - Da una apariencia más cálida, amarilla/marrón.

• Opacidad - Define cuán transparente u opaco debe ser el fondo (color, degradado, imagen, etc.).

• Desenfoque - Define la cantidad de desenfoque gaussiano aplicado al módulo.

El Modo de Mezcla se refiere a cómo se mezcla el módulo con las capas debajo. Por defecto, está seleccionado “normal”.

---

Transformar

• Escalar

• Trasladar

• Rotar

• Inclinar

• Puntos de origen

Navega por las opciones con tabulador. Configura cada opción introduciendo valores numéricos o arrastrando y expandiendo la caja o círculo.

Puedes bloquear estos valores para que siempre sean idénticos haciendo clic en el ícono de cadena en la parte inferior derecha.

---

Animación

Aquí puedes aplicar animación al módulo. Una vez elijas un estilo, puedes ajustar:

• Duración de la animación - Define el tiempo que tarda una animación en completar un ciclo.

• Retraso de la animación - Define cuánto tiempo esperar desde aplicar la animación hasta que comience. Puede empezar más tarde, inmediatamente, o parcialmente durante la animación.

• Opacidad inicial de la animación - Define el valor inicial de opacidad.

• Curva de velocidad de la animación - Define el método de suavizado para la animación, para que sea más fluida que una velocidad lineal.

• Repetición de la animación - Por defecto, las animaciones se reproducen una vez. Para que se repita continuamente, elige la opción “Bucle”.

---

Pestaña Avanzada

Dentro de la pestaña Avanzada encontrarás opciones útiles para diseñadores web más experimentados, como CSS personalizado.

Aquí puedes aplicar CSS personalizado a tu módulo. También puedes asignar clases e IDs CSS para personalizar estilos con propiedades CSS avanzadas o aplicar código CSS usando la clase CSS del módulo.

---

ID y Clases CSS

Asigna un ID o clase CSS específica a este módulo. Esto es útil para aplicar CSS personalizado utilizando la hoja de estilos de tu tema hijo.

---

CSS Personalizado

• CSS Libre - Escribe CSS libre usando el selector keyword para apuntar a este módulo. Ejemplo: selector h1 {color: red;}

• Elementos del módulo - También puedes aplicar CSS personalizado pegándolo en esta pestaña. Al hacer clic en Elementos del módulo, verás secciones individuales para añadir propiedades CSS.

---

Condiciones

Esta pestaña te permite elegir cuándo mostrar este módulo según condiciones, como si un usuario ya ha comprado en tu empresa, qué navegador usa, sistema operativo, etc.

Puedes añadir una o múltiples condiciones.

Condiciones del Divi Fullwidth Portfolio

---

Visibilidad

• Desactivar en - Define la visibilidad del módulo. Puedes desactivarlo (ocultarlo) cuando la ventana de visualización sea un teléfono, tablet o escritorio marcando la casilla correspondiente.

• Desbordamiento horizontal - Define qué ocurre cuando el contenido desborda los bordes izquierdo y derecho de un elemento de bloque. Puede ser:

  • Visible: el contenido se muestra.

  • Scroll: aparece una barra de desplazamiento vertical.

  • Oculto: el contenido que desborda se oculta.

  • Auto: el navegador decide si mostrar barra de desplazamiento.

• Desbordamiento vertical - Igual que el horizontal, pero para bordes superior e inferior.

---

Transiciones

Controla la duración, retraso y curva de velocidad de la animación al pasar el cursor.

• Duración de la transición - Duración (en milisegundos) de la animación al pasar el cursor.

• Retraso de la transición - Retraso (en milisegundos) de la animación al pasar el cursor.

• Curva de velocidad de transición - Curva de velocidad de la animación al pasar el cursor.

---

Posición

Define la posición del módulo:

• Relativa (valor predeterminado) - Posicionado según el flujo normal del documento, con offsets relativos a sí mismo. No afecta posición de otros elementos, el espacio reservado es el mismo que en posición estática.

• Absoluta - Removido del flujo normal, sin espacio reservado. Posicionado respecto al ancestro posicionado más cercano o al bloque contenedor inicial. Las opciones de ubicación determinan la posición final.

• Fija - Removido del flujo normal, sin espacio reservado. Posicionado en relación a la ventana del navegador. Puede usarse para crear módulos adhesivos (sticky).

• Offset vertical - Define la posición vertical del módulo.

• Offset horizontal - Define la posición horizontal del módulo.

• Z-index - Define el orden en la página. Módulos con z-index mayor se superponen a módulos con z-index menor.

---

Efectos de desplazamiento 

Define cómo se comporta el módulo al hacer scroll. Puedes hacer el módulo sticky (pegajoso) en la parte superior, inferior, o ambos.

También puedes habilitar movimiento vertical, ajustando la velocidad a la que el elemento se desplaza sin afectar elementos cercanos.

El Disparador de movimiento permite elegir cuándo se activa el efecto: cuando la parte superior, media o inferior del elemento esté en vista.

Guardar tu diseño
Cuando termines de diseñar y configurar el módulo, haz clic en la flecha verde abajo a la derecha para guardar.

Si cierras sin guardar, perderás los cambios.

---

Guardar el diseño de la página

Para guardar la página, usa CMD + S en Mac o CTRL + S en PC. También puedes usar la barra inferior de Divi, haciendo clic en el ícono morado circular con tres puntos (…) para expandir y luego el botón verde Guardar abajo a la derecha.

---

Salir del Visual Builder

Cuando todo esté guardado, haz clic en “Salir del Visual Builder” en la barra de administración arriba para salir.

---

Recursos del Divi Fullwidth Portfolio

• Cómo crear una lista de navegación de portafolio fullwidth con efectos de desplazamiento en Divi.

• Cómo crear una plantilla dinámica de proyecto fullwidth con Divi y ACF.

• Cómo apilar hermosamente ítems de portafolio fullwidth con las opciones de transformación de Divi.

• 10 sitios Divi con páginas de portafolio fullwidth hermosas.