El módulo de Navegación de Entradas de Divi te permite navegar entre las entradas del blog o proyectos usando enlaces de anterior y siguiente.

Esta guía demostrará cómo usar el módulo de navegación de entradas en una plantilla de página de entrada de blog diseñada con el Divi Theme Builder y el editor visual front-end de sitio completo.

Ver una demostración en vivo de este módulo

Cómo agregar el módulo de Navegación de Entradas de Divi

Navegar al Divi Theme Builder

El Divi Theme Builder es donde puedes diseñar encabezados personalizados, pies de página y plantillas de página para tu sitio web.

Si aún necesitas diseñar una plantilla personalizada para páginas de entradas de blog, aprende cómo hacerlo aquí. Para saber más sobre el Divi Theme Builder, haz clic aquí.

• Ve a Escritorio de WordPress → Divi → Theme Builder.
  Esto te llevará al tablero del Theme Builder, donde se encuentran todas las plantillas personalizadas para tu sitio web.

Editar el cuerpo personalizado de la plantilla de entradas de blog

Haz clic en el ícono de lápiz junto a Custom Body para editar la parte del cuerpo de esa plantilla de página. Esto cargará la plantilla de página con la interfaz de arrastrar y soltar del Divi Visual Builder, donde podremos comenzar a diseñar el módulo de navegación de entradas.

Si aún necesitas crear una plantilla de página de entradas de blog, puedes aprender cómo hacerlo aquí.

Agregar el módulo de Navegación de Entradas de Divi

Haz clic en el ícono gris de + para cargar la biblioteca de módulos.

Desplázate hasta Post Navigation y haz clic para cargar el módulo.

La biblioteca de módulos también es buscable. Usa la barra de búsqueda en la parte superior para escribir el nombre del módulo que estás buscando.

Editar plantillas de página con edición front-end de sitio completo

Con la última actualización de Divi, puedes editar encabezados globales, pies de página y plantillas de página en el front-end de tu sitio web usando el Visual Builder y editarlos usando el Theme Builder.

Nota: Al crear nuevas plantillas de página, es mejor crearlas usando el Theme Builder (como se demostró arriba).

Sin embargo, una vez que la plantilla esté creada y haya contenido en tu sitio, puedes editar esas plantillas en el front-end usando el Visual Builder, lo que te permite ver los cambios que haces en tiempo real.

Aprende más sobre la edición front-end de sitio completo aquí.

Explicación de todas las opciones del módulo de Navegación de Entradas de Divi

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

Pestaña Contenido

Aquí puedes editar el contenido del módulo de Navegación de Entradas de Divi.

Texto

• Enlace Anterior - Escribe el texto que quieres que muestre el enlace anterior. Ejemplo: Prev o Previous, etc. Si se deja en blanco, el texto predeterminado es el título de la entrada de blog o proyecto anterior.

• Enlace Siguiente - Escribe el texto que quieres que muestre el enlace siguiente. Ejemplo: Next. Si se deja en blanco, el texto predeterminado es el título de la siguiente entrada de blog o proyecto.

Categorías

• Navegar dentro de la categoría actual
  Activa esta opción para que los enlaces anterior y siguiente solo naveguen dentro de la misma categoría que la entrada o proyecto actual.

Déjalo en no si quieres que los enlaces anterior y siguiente naveguen cronológicamente a través de las entradas o proyectos.

El campo Nombre de taxonomía personalizada aparece cuando esta opción está activada. Si usas este módulo en una entrada o proyecto, deja este campo vacío. De lo contrario, escribe el nombre de la taxonomía en el campo para que la opción En la misma categoría funcione correctamente.

Navegación

• Mostrar enlace a entrada anterior - Activa o desactiva para mostrar u ocultar el enlace a la entrada anterior.

• Mostrar enlace a entrada siguiente - Activa o desactiva para mostrar u ocultar el enlace a la siguiente entrada.

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 de cubo de pintura.

Haz clic en Agregar color de fondo y elige uno desde la paleta de colores de tu sitio o usa el ícono de 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 de la paleta de tu sitio o usa el cuentagotas para elegir un nuevo color. Los puntos de parada permiten agregar más colores al degradado. Haz clic en cualquier lugar del deslizador para agregar un nuevo punto.

Opciones de degradado de fondo

• Tipo de degradado - Puedes cambiar el tipo de degradado seleccionando la opción deseada en el menú desplegable.

• Dirección del degradado - Puedes cambiar la dirección arrastrando el deslizador o escribiendo un valor numérico.

• Repetir degradado - Activa esta opción para que el degradado se repita.

• Unidad de degradado - Cambia cómo se calculan los puntos de parada del degradado desde el menú desplegable.

• Colocar degradado sobre imagen de fondo - Si hay una imagen de fondo aplicada, activa esta opción para colocar el degradado encima de la imagen.

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 Parallax - Aplica un efecto parallax a la imagen (la imagen se desplaza más rápido que el contenido en primer plano, dando ilusión 3D). Activa o desactiva esta opción. Por defecto, está desactivada.

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

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

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

• Mezcla de imagen de fondo - Elige cómo la imagen de fondo se mezcla con otras capas del módulo desde el menú desplegable.

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 ambos formatos porque no todos los navegadores soportan WebM. Subir ambos asegura compatibilidad en todos los dispositivos.

• 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 se reproduzca - Activa esta opción para pausar el video de fondo si otro video está en reproducción. Por defecto, el video se pausa cuando no está en vista. Para que siga reproduciéndose, desactiva esta opción.

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 que deseas desde el menú desplegable.

Opciones de patrón de fondo

• Color del patrón - Selecciona un color desde la paleta de colores de tu sitio o usa el cuentagotas para seleccionar un nuevo color.

• Transformar patrón - Transforma el patrón horizontal o verticalmente, rota o invierte.

• Tamaño del patrón - Selecciona el tamaño: tamaño real, cubrir, ajustar, estirar o tamaño personalizado. Si eliges tamaño personalizado, aparecerán las opciones de ancho y alto, que puedes ajustar con el deslizador o escribiendo valores numéricos.

• Origen de repetición del patrón - Selecciona el origen desde donde el patrón se repetirá.

• Desplazamiento horizontal y vertical del patrón - Ajusta los desplazamientos horizontal y vertical.

• Repetición del patrón - Define cómo se repite el patrón (horizontal, vertical, etc.)

• Modo de mezcla del patrón - Define cómo la capa del patrón interactúa con las capas debajo. Selecciona entre 16 modos de mezcla disponibles en el menú desplegable.
  

Cómo agregar una máscara de fondo

1. Haz clic en la sexta pestaña, el ícono de Máscara.
   
2. Haz clic en Agregar máscara de fondo.

Selecciona el tipo de máscara que deseas mediante el menú desplegable.

Opciones de máscara de fondo

• Color de la máscara – Elige el color de la máscara desde la paleta de colores de tu sitio, o usa el ícono del cuentagotas para encontrar un nuevo color.

• Transformar máscara – Transforma la máscara horizontal o verticalmente, gírala o inviértela.

• Relación de aspecto de la máscara – Establece la relación de aspecto de la máscara. La relación de aspecto de una imagen es la proporción entre su ancho y su alto.

• Tamaño de la máscara – Selecciona el tamaño de la máscara: tamaño real, cubrir, ajustar, estirar para llenar o tamaño personalizado. Si eliges tamaño personalizado, aparecerán las siguientes opciones: ancho y alto de la máscara. Arrastra el control deslizante o escribe un valor numérico para definirlas.

• Modo de fusión de la máscara – Define cómo la capa de la máscara interactúa con las capas debajo de ella. Selecciona uno de los 16 modos de fusión disponibles en el menú desplegable.

---

Etiqueta de administrador

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

---

Pestaña Diseño

Dentro de esta pestaña encontrarás las opciones de estilo y diseño para el módulo de navegación de publicaciones Divi.

---

Texto de los enlaces

• Fuente de los enlaces – Elige la fuente que quieres para el texto del enlace. La fuente predeterminada se selecciona automáticamente; sin embargo, puedes elegir una fuente diferente o subir una fuente personalizada haciendo clic en el menú desplegable.

• Peso de la fuente de los enlaces – Selecciona el grosor del texto del enlace.

• Estilo de fuente de los enlaces – Elige el estilo de la fuente del texto del enlace:

  • Cursiva

  • Mayúscula inicial

  • Versalitas

  • Subrayado

  • Tachado

• Color del texto de los enlaces – Elige un color específico para el texto del enlace. Selecciona de la paleta de colores de tu sitio o haz clic en el ícono del cuentagotas para encontrar un nuevo color.

• Tamaño del texto de los enlaces – Elige el tamaño de la fuente del texto del enlace arrastrando el control deslizante o escribiendo un valor numérico.

• Espaciado entre letras de los enlaces – Elige el espaciado entre letras arrastrando el control deslizante o escribiendo un valor numérico. El espaciado entre letras es el espacio entre cada letra. A mayor número, más espacio.

• Altura de línea de los enlaces – Elige la altura de línea del texto del enlace arrastrando el control deslizante o escribiendo un valor numérico. La altura de línea es el espacio entre cada línea de texto. A mayor número, más espacio.

• Sombra del texto de los enlaces – Agrega una sombra al texto del enlace. Una vez seleccionado un estilo, puedes configurar la dirección de la sombra (horizontal y vertical), la intensidad del desenfoque y el color de la sombra.

---

Tamaño

• 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. Para más información, consulta la documentación oficial.

• Alineación del módulo – Si se establece un ancho o ancho máximo, la alineación del módulo puede definirse usando 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. Para más información, consulta la documentación oficial.

• Altura – Define la altura del módulo. Para más información, consulta la documentación oficial.

• Altura máxima – Define el valor máximo de altura que puede tener el módulo. Para más información, consulta la documentación oficial.

---

Espaciado

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

• El margen agrega espacio fuera del módulo, y el relleno agrega espacio dentro del módulo. Para bloquear proporciones y mantener los valores iguales, haz clic en el ícono de cadena entre los valores que quieres que siempre sean idénticos (por ejemplo, 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 agregar un borde completo o un borde a solo un lado del módulo. Ajusta el ancho mediante el control deslizante y selecciona un color. Elige un estilo de borde haciendo clic en el menú 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 vinculados automáticamente (como se muestra con la cadena azul resaltada); sin embargo, si quieres valores diferentes para cada esquina, haz clic en la cadena azul para desvincular los valores. Si están vinculados, siempre tendrán el mismo valor y se actualizarán automáticamente si cambias uno.

• Estilos de borde – Agrega un borde a todos los lados del módulo o a lados individuales (arriba, derecha, abajo, izquierda).

• Ancho del borde – Establece el ancho del borde. Para un borde más grueso, aumenta el número. El ancho del borde debe ser al menos 1px para que se muestre.

• Color del borde – Elige el color del borde. Puedes seleccionar un color de la paleta de colores predeterminada de tu sitio o hacer clic en el ícono del cuentagotas para encontrar un nuevo color.

• Estilo de borde – Selecciona el estilo de borde que prefieras: sólido, discontinuo, punteado, doble, surco, relieve, incrustado, sobresaliente o ninguno.

---

Sombra de caja

Agrega una sombra al módulo completo. Una vez seleccionado un estilo de sombra, puedes personalizar las siguientes opciones:

• Posición horizontal de la sombra – Define la posición horizontal de la sombra.

• Posición vertical de la sombra – Define la posición vertical de la sombra.

• Intensidad del desenfoque de la sombra – Define la intensidad del desenfoque de la sombra. A mayor valor, mayor desenfoque y la sombra será más amplia y clara.

• Intensidad de expansión de la sombra – Define la intensidad de la expansión del desenfoque. Aumentar la intensidad de expansión incrementa la densidad de la sombra. Más densidad resulta en 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 o fuera del módulo.

---

Filtros

Ajusta los filtros del módulo:

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

• Saturación – Define qué tan intensa debe ser la saturación del color.

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

• Contraste – Define qué tan marcadas deben ser las áreas claras y oscuras.

• Invertir – Invierte el tono, saturación y brillo por el valor especificado.

• Sepia – Define una apariencia más cálida, amarillenta/marrón.

• Opacidad – Define qué tan 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 fusión se refiere a cómo el módulo se mezcla con las capas debajo de él. Por defecto, está seleccionado “normal”.

---

Transformar

• Escalar

• Trasladar

• Rotar

• Sesgar

• Puntos de origen

Navega con la tecla Tab para acceder a cada opción. Configura cada opción ingresando valores numéricos o arrastrando y expandiendo el cuadro 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 que eliges un estilo, puedes ajustar las siguientes opciones:

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

• Retraso de animación – Define el tiempo que debe esperar desde que se aplica la animación antes de que empiece a ejecutarse. La animación puede comenzar después, inmediatamente al principio o inmediatamente y a mitad de la animación.

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

• Curva de velocidad de animación – Define el método de aceleración de la animación. Una aceleración suave crea un efecto más fluido que una velocidad lineal.

• Repetición de la animación – Por defecto, las animaciones solo se reproducen una vez. Si quieres que se repitan continuamente, elige la opción “Loop” (bucle).

---

Pestaña Avanzada

Dentro de la pestaña Avanzada, encontrarás opciones que los diseñadores web más experimentados podrían encontrar útiles, como CSS personalizado.

Aquí puedes aplicar CSS personalizado a tu módulo. También puedes agregar clases y IDs personalizados al módulo, que se pueden usar para personalizar los estilos del módulo con propiedades CSS más avanzadas o para aplicar código CSS personalizado usando la clase CSS del módulo.

CSS ID y Clases

Asigna un ID o una Clase CSS específica a este módulo. Esto es útil cuando aplicas CSS personalizado a un módulo usando la hoja de estilos de tu tema hijo.

---

CSS Personalizado

• CSS de forma libre – Escribe CSS de forma 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 a este módulo pegándolo en esta pestaña. Al hacer clic en la pestaña Elementos del Módulo, verás secciones individuales donde puedes añadir propiedades CSS personalizadas.

---

Condiciones

Las Condiciones de Visualización te permiten elegir cuándo mostrar este módulo basándote en un conjunto de condiciones, como por ejemplo si un usuario está visitando la página, si ya ha comprado antes en tu empresa, qué navegador está usando, qué sistema operativo usa, y más.

• Puedes añadir una o varias condiciones.

---

Visibilidad

• Desactivar en – Define la visibilidad del módulo. Puedes desactivarlo (ocultarlo) cuando la ventana de visualización sea Teléfono, Tableta o Escritorio marcando la casilla correspondiente.

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

  • Visible – El contenido se mostrará si desborda la altura del módulo.

  • Scroll – Si el contenido desborda la altura, se usará una barra de desplazamiento vertical para navegar el contenido.

  • Oculto – La parte del contenido que desborda será oculta.

  • Automático – El navegador decidirá si se muestra la barra de desplazamiento.

• Desbordamiento vertical – Define qué mostrar cuando el contenido desborda los bordes superior e inferior de un elemento de nivel bloque. Las opciones son las mismas que en el desbordamiento horizontal.
  

Transiciones

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

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

• Retraso de transición – Define el retraso de la transición de la animación (en milisegundos).

• Curva de velocidad de transición – Define la curva de velocidad de la animación al pasar el cursor.

---

Posición

Define la posición del módulo:

• Relativa (valor predeterminado) – El módulo se posiciona según el flujo normal del documento, y los valores de desplazamiento son relativos a sí mismo según los valores de desplazamiento vertical y horizontal. El desplazamiento no afecta la posición de otros elementos, por lo que el espacio asignado en el diseño de la página es igual que si la posición fuera estática.

• Absoluta – El módulo se elimina del flujo normal del documento y no crea espacio en el diseño. Se posiciona relativo a su ancestro posicionado más cercano (si hay alguno) o al bloque contenedor inicial. Las opciones de ubicación determinan su posición final.

• Fija – El módulo se elimina del flujo normal y no crea espacio en el diseño. Se posiciona en relación con la ventana del navegador, útil para crear un módulo fijo (sticky).

• Desplazamiento vertical – Define la posición vertical del módulo.

• Desplazamiento horizontal – Define la posición horizontal del módulo.

• Índice Z (Z-index) – Define el orden del módulo en el diseño de la página. Los módulos con un índice Z más alto se superponen a los que tienen un índice Z más bajo.

---

Efectos de Desplazamiento

Define el comportamiento del módulo cuando el usuario desplaza la página. Puedes hacer que el módulo sea sticky (fijo) en la parte superior, inferior, o en ambos, y decidir si el módulo debe transformarse al desplazarse.

• Puedes habilitar movimiento vertical para ajustar la velocidad de desplazamiento del elemento sin afectar a los elementos circundantes.

• La función de disparador de movimiento te permite elegir cuándo se activa el efecto de desplazamiento: cuando la parte superior, el medio o la parte inferior del elemento está visible.

---

Guarda Tu Diseño

Cuando termines de estilizar y configurar el módulo de navegación de publicaciones, haz clic en la flecha verde en la parte inferior derecha del módulo para guardar tu diseño. Si cierras el módulo sin guardar, perderás tu trabajo.

---

Guardar el Diseño de la Página

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

---

Salir del Visual Builder

Una vez que todos tus cambios estén guardados, haz clic en Salir del Visual Builder en la barra de administración en la parte superior para salir del Visual Builder.

---

---

Continuar Aprendiendo

• Cómo diseñar una plantilla de publicación de blog con el Theme Builder de Divi

• Cómo crear una barra de navegación fija para publicaciones en Divi

• Cómo usar un portafolio filtrable y la navegación de publicaciones para organizar estudios de caso con Divi