Cómo crear una página de inicio de navegación con Divi

Hay un montón de enfoques que puede aplicar en su página de inicio, pero si desea agregar ese toque extra a su sitio web, optar por una página de navegación como su página de inicio podría ser el camino a seguir. No lo verá con tanta frecuencia y les brinda a sus visitantes una visión clara de lo que pueden esperar de su sitio web. Además, también ayudará a sus visitantes a navegar visualmente a través de las diferentes páginas llenas del increíble contenido que usted proporciona.

Para mostrarte cómo puedes hacerlo con Divi, de una manera elegante y con estilo, hemos creado un diseño que te mostraremos cómo recrear en esta publicación. Habrá dos versiones; la versión de escritorio y la que es adecuada para tableta y teléfono. Antes de sumergirnos en el tutorial, echemos un vistazo al resultado final.

Resultado en el escritorio

El resultado que vamos a recrear se ve así en el escritorio:

Resultado en el móvil

El resultado en dispositivos móviles es ligeramente diferente y se ve así:

Cómo crear una página de inicio de navegación con Divi

Suscríbete a nuestro canal de Youtube

Recrear versión de escritorio

Vamos a crear dos versiones de la página de navegación; una versión de escritorio y una versión para tableta y teléfono. De esa manera, nos aseguraremos de que la página de navegación se vea bien en todos los dispositivos. Como de costumbre, comenzaremos creando la versión de escritorio.

Agregar nueva sección

Empiece por crear una nueva página y agregarle una sección regular. Para este tutorial, solo usaremos una sección que incluirá todas las filas con el contenido que necesitaremos (tanto para la versión de escritorio como para la versión móvil). Sin embargo, también puede optar por separar la versión de escritorio y la versión móvil en dos secciones.

Recrear la primera fila de navegación

Como puede observar en la vista previa de resultados anterior, cada uno de los elementos de navegación tiene más o menos el mismo diseño con algunos detalles diferentes. La mayoría de las configuraciones para cada uno de los elementos de navegación que desea crear son las mismas. Es por eso que le mostraremos cómo puede crear la primera fila en detalle y luego le mostraremos cómo puede realizar las modificaciones para los otros elementos de navegación que desea agregar a la página también.

Estructura de la columna

En primer lugar, elija una columna de ancho completo para la fila que acaba de agregar. Antes de agregarle módulos, nos aseguraremos de que la configuración de la fila esté en su lugar, así que continúe y abra la configuración de la fila.

Imagen de fondo

Mientras estamos en la pestaña Contenido, lo primero que haremos es agregar una imagen de fondo a su fila. Recomendamos usar una imagen que tenga un ancho de '1400px' y una altura de '934px' ya que conducirá al mejor resultado. Además, asegúrese de poner la imagen en 'no repetir'.

Alineación

Luego, pase a la pestaña Diseño y agregue una alineación correcta a su fila. Al hacer esto, creará suficiente espacio en el lado izquierdo de su pantalla para agregar la descripción y el enlace.

Dimensionamiento

A continuación, abra la subcategoría Tamaño, habilite la opción 'Usar ancho personalizado' y use un ancho porcentual de '100%'.

Espaciado

Continuando, queremos agregar un poco de espacio en blanco entre cada elemento de navegación, por eso vamos a agregar un margen superior e inferior de '5px' a la fila.

Visibilidad

Por último, pero no menos importante, queremos deshabilitar esta fila en el teléfono y la tableta, ya que crearemos otra fila que coincidirá con la tableta y el teléfono más adelante en esta publicación.

Módulo de texto para descripción de página

Configuración de texto

Una vez que haya terminado la configuración de la fila, puede agregar un primer módulo de texto a la columna de la fila y usar la siguiente configuración para la subcategoría Texto en la pestaña Diseño:

• Fuente de texto: Andika
• Peso de la fuente del texto: Regular
• Tamaño del texto: 13px
• Color del texto: # 000000
• Altura de la línea de texto: 1.1em
• Orientación del texto: izquierda

Dimensionamiento

Desplácese hacia abajo, abra la subcategoría Tamaño y agregue un ancho de '18% '. Este ancho asegurará que nuestro módulo de texto no cruce la imagen de fondo de nuestra fila una vez que le agreguemos el margen izquierdo negativo.

Espaciado

Como se mencionó en el paso anterior, queremos que el módulo de texto aparezca en el lado izquierdo de nuestra fila sin superponer el fondo de la fila. También queremos tener algo de espacio entre la parte superior de la imagen de la fila y el inicio del Módulo de texto, por eso también estamos usando un margen superior.

• Margen superior: 150 px
• Margen izquierdo: -20px
• Acolchado superior: 10px
• Acolchado inferior: 10px

Módulo divisor

Visibilidad

A continuación, continúe y agregue un módulo Divisor justo debajo del Módulo de texto. Dentro de la subcategoría Visibilidad, habilite la opción 'Mostrar divisor'.

Color

Luego, pase a la pestaña Diseño y agregue '#FFFFFF' como color divisor.

Estilos

Continuando, elija 'Sólido' como Estilo de divisor y 'Superior' como Posición de divisor.

Dimensionamiento

Por último, haga que las siguientes configuraciones se apliquen a la subcategoría Tamaño:

• Peso del divisor: 5px
• Alto: 23px
• Ancho: 47%
• Alineación del módulo: izquierda

Módulo de texto para elemento de menú

Vincular texto en el cuadro de contenido

Una vez que haya terminado con el módulo divisor, continúe y agregue otro módulo de texto justo debajo. Este módulo de texto será nuestro elemento de navegación. Abra la configuración, ingrese el texto y agregue un enlace.

Color de fondo degradado

Mientras esté en la pestaña Contenido, use la siguiente configuración de fondo degradado:

• Primer color: #FFFFFF
• Segundo color: rgba (12,113,195,0.62)
• Tipo de degradado: lineal
• Dirección del gradiente: 108 grados
• Posición inicial: 31%
• Posición final: 21%

Configuración del texto del enlace

Luego, vaya a la pestaña Diseño y haga que las siguientes configuraciones se apliquen a la pestaña de enlace de la Subcategoría de texto:

• Fuente del enlace: Andika
• Peso de la fuente del enlace: negrita
• Estilo de fuente de enlace: mayúsculas y subrayado
• Estilo de subrayado de enlace: sólido
• Tamaño del texto del enlace: 100 px
• Color del texto del enlace: # 000000
• Altura de la línea de enlace: 1em

Espaciado

Este módulo de texto también deberá aparecer en el lado izquierdo de la pantalla, por eso estamos agregando el margen izquierdo. También queremos que el espacio entre el módulo divisor y este módulo de texto sea más pequeño, ahí es donde entra el margen superior negativo. Para crear esa alineación horizontal central, también agregaremos un margen inferior. Y, por último, queremos que el fondo degradado sea más grande, por eso estamos usando el relleno superior e inferior.

• Margen superior: -33px
• Margen inferior: 250 px
• Margen izquierdo: -20px
• Acolchado superior: 80px
• Acolchado inferior: 80px

Clonar la primera fila de navegación tantas veces como sea necesario

Los diferentes elementos de navegación en su página de navegación tendrán, más o menos, la misma configuración. Es por eso que recomendamos clonar la fila tantas veces como sea necesario y luego realizar las modificaciones detalladas. Hay tres cosas que necesitará cambiar, echemos un vistazo.

Cambiar el fondo de la fila

Lo primero que deberá hacer es cambiar las imágenes de fondo de los duplicados de su fila. Nuevamente, asegúrese de usar una imagen con un ancho de '1400px' y una altura de '943px' para obtener el mejor resultado.

Cambiar el módulo de texto para el elemento del menú

Cambiar enlace

Luego, abra el módulo de texto del elemento de navegación y cambie el texto junto con el enlace.

Cambiar el fondo degradado según la longitud del texto

Por último, también deberá cambiar el fondo degradado de este módulo de texto. Cambie el segundo color de degradado a 'rgba (224,43,32,0.62)' y cambie el valor de Posición de inicio de acuerdo con la longitud de su nuevo elemento de navegación. Si tiene un elemento de navegación que es bastante largo, querrá cambiar el porcentaje de Posición de inicio a un valor más alto hasta que vea que encaja en su lugar.

Recrear versión móvil

Ahora que hemos creado la versión de escritorio, también crearemos la versión para tableta y móvil. El estilo de los diferentes módulos es prácticamente el mismo que el de la versión de escritorio, pero detrás de escena, la estructura de nuestras filas es completamente diferente. Debido a las muchas modificaciones que tendría que hacer en cada módulo si tuviera que clonarlos, simplemente le mostraré cómo crearlo desde cero sin clonar ningún módulo de la versión de escritorio.

Recrear la primera fila de navegación

Comience agregando otra fila a la sección que hemos creado al comienzo de esta publicación.

Estructura de la columna

Esta columna, al igual que la versión de escritorio, también necesitará solo una columna.

Dimensionamiento

El tamaño de esta fila es el siguiente:

• Hacer esta fila de ancho completo: Sí
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1

Esta configuración asegurará que nuestra fila ocupe todo el ancho de la pantalla.

Visibilidad

Y, por último, deshabilite esta fila en el escritorio porque tenemos otras filas que se mostrarán en el escritorio.

Módulo de texto para descripción de página

Configuración de texto

Continúe y agregue el primer módulo de texto a la fila. Haga que las siguientes configuraciones se apliquen a la subcategoría Texto:

• Fuente de texto: Andika
• Peso de la fuente del texto: Regular
• Tamaño del texto: 13px
• Color del texto: # 000000
• Altura de la línea de texto: 1.1em
• Orientación del texto: centro

Dimensionamiento

Luego, abra la subcategoría Tamaño y use un ancho de '71% 'y una alineación de módulo central.

Espaciado

Por último, este módulo de texto necesitará un relleno superior e inferior de '10px'. Como puede notar, no hay necesidad de valores de margen en la versión para tableta y móvil porque estamos optando por una alineación central.

Módulo de texto para elemento de menú

Vincular texto en el cuadro de contenido

Para la versión móvil, no necesitamos un módulo divisor, por lo que vamos a omitir ese paso. En su lugar, inmediatamente agregaremos el módulo de texto del elemento de navegación justo debajo del módulo de texto anterior que hemos creado. Una vez hecho esto, agregue el texto con el enlace al Cuadro de contenido en la pestaña Contenido.

Color de fondo degradado

El fondo degradado que usaremos para este módulo de texto es el mismo que el de la versión de escritorio uno:

• Primer color: #FFFFFF
• Segundo color: rgba (12,113,195,0.62)
• Tipo de degradado: lineal
• Dirección del gradiente: 108 grados
• Posición inicial: 31%
• Posición final: 21%

Configuración del texto del enlace

Utilice la siguiente configuración para la subcategoría de texto:

• Fuente del enlace: Andika
• Peso de la fuente del enlace: negrita
• Tamaño del texto: 65px
• Color del texto: # 000000
• Altura de la línea de texto: 1em
• Orientación del texto: izquierda

Espaciado

Al igual que la versión de escritorio, este módulo de texto del elemento de navegación necesitará un relleno superior e inferior de '80px' para agrandar el fondo degradado.

Módulo de imagen

Cargar imagen

Por último, agregue un módulo de imagen como último módulo en su fila y cargue una imagen de su elección.

Clonar la primera fila de navegación tantas veces como sea necesario

Lo mismo cuenta para la versión móvil; puede clonar la fila que acaba de crear tantas veces como sea necesario para agregar los otros elementos de navegación también. Hay tres cosas que deberá modificar cada vez que agregue un nuevo elemento de navegación, echemos un vistazo.

Cambiar el módulo de texto para el elemento del menú

Cambiar enlace

Lo primero que deberá cambiar es el texto y el enlace dentro del Cuadro de contenido de la pestaña Contenido del Módulo de texto del elemento de navegación.

Cambiar el fondo degradado según la longitud del texto

Luego, también puede cambiar el segundo color de degradado a 'rgba (224,43,32,0.62)' y cambiar el valor de la posición inicial de acuerdo con la longitud de su texto.

Cambiar módulo de imagen

Por último, también puede cambiar la imagen del Módulo de imagen dentro de esa fila.

Resultado

Una vez que haya creado la versión de escritorio y móvil, tendrá una página de navegación impresionante que se verá bien en el escritorio, la tableta y el teléfono. Echemos un vistazo final al resultado.

Resultado en el escritorio

Resultado en el móvil

Pensamientos finales

La creación de una página de navegación como su página de inicio definitivamente dejará una marca en sus visitantes. No solo ayuda a sus visitantes a navegar de manera más visual, sino que también les permite ver un adelanto más elaborado de lo que su sitio web tiene para ofrecer. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!

¡Asegúrese de suscribirse a nuestro boletín informativo por correo electrónico y al canal de YouTube para que nunca se pierda un gran anuncio, un consejo útil o un obsequio de Divi!

Imagen destacada de LanKogal / shutterstock.com