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

Cuando crea un sitio web con WordPress, siempre puede elegir qué página aparece primero cuando las personas visitan su sitio web directamente. La mayoría de los creadores de sitios web envían a los visitantes de inmediato a su página de inicio. Pero también puede elegir otro enfoque que permita a los visitantes elegir a qué página de su sitio web van primero agregando una página de navegación de iconos como su página de inicio. Una vez que las personas hacen clic en la página de su elección, volverán a tener la experiencia normal del sitio web con una barra de menú en la parte superior de la página que les permite navegar a otras páginas. Esto significa que no tendrán que volver a esta página de navegación de iconos una vez que la hayan pasado después de la primera interacción.

En este tutorial, le mostraremos cómo crear una página de inicio de navegación de iconos moderna y 100% sensible que se verá bien en todos los tamaños de pantalla. También lo ayudaremos a hacer de esta la página de inicio de su sitio web y eliminar la barra de menú principal y el pie de página en la primera interacción.

¡Hagámoslo!

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Crear nueva página

Suscríbete a nuestro canal de Youtube

Agregar nueva página

Comience agregando una nueva página a su sitio web de WordPress.

Dale un título a tu página y publica

Dale un título a tu página y publícala de inmediato.

Establecer página como página de inicio

Ir a la configuración de lectura del sitio web

Luego, vaya a la configuración de lectura de su sitio web.

Establecer nueva página como página de inicio

Aquí, vamos a seleccionar la nueva página de navegación de iconos como la página de inicio de nuestro sitio web.

Ocultar la barra de menú principal y el pie de página en la página de navegación de iconos

Regrese a la página de navegación de iconos y habilite el Visual Builder de Divi

Ahora que hemos seleccionado la página de inicio, podemos comenzar a construir nuestra página de navegación de iconos. Regrese a la página que ha creado y cambie al Visual Builder de Divi.

Una vez que lo hagas, tendrás tres posibilidades. Puede comenzar a construir desde cero, elegir un diseño prediseñado o clonar una página existente. Elija la primera opción.

Agregue CSS personalizado para ocultar la barra de menú principal y el pie de página solo en esta página

Debido a que esta es una página de navegación, queremos que el foco esté en los elementos del menú que creamos manualmente. Es por eso que ocultaremos la barra de menú principal y el pie de página en esta página. Una vez que las personas continúan en el sitio web, recuperarán la barra de menú principal y el pie de página.

#main-header, #main-footer {
display: none;}

¡Empecemos a diseñar!

Agregar la sección n. ° 1

¡Comencemos a crear nuestro diseño receptivo con Divi! Agrega la primera sección regular.

Añadir fila

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y habilite la opción 'Hacer esta fila de ancho completo' en la configuración de tamaño.

• Hacer esta fila de ancho completo: Sí

Agregar módulo de imagen

Subir el logotipo de la empresa

El primer módulo que necesitamos en esta fila es un módulo de imagen. Sube el logotipo de tu empresa para que la gente sepa que ha llegado al sitio web correcto.

Alineación

Luego, cambie la alineación de la imagen en la pestaña de diseño. Asegúrese de deshabilitar la opción "Centrar siempre la imagen en el móvil".

• Alineación de imagen: izquierda

Espaciado

Agregue un margen inferior personalizado a continuación.

• Abajo: 10vw (escritorio), 20vw (tableta y teléfono)

Agregar módulo de texto

Agregar contenido H1

El siguiente módulo que necesitamos es un módulo de texto. Agregue un poco de contenido H1 de su elección.

Configuración de texto H1

Continúe modificando la configuración de texto H1 en la pestaña de diseño.

• Fuente de encabezado: Didact Gothic
• Peso de la fuente del encabezado: negrita
• Alineación del texto del encabezado: izquierda
• Color del texto del encabezado: # 333333
• Tamaño del texto del encabezado: 5vw (escritorio), 6vw (tableta), 7vw (teléfono)
• Altura de la línea de rumbo: 0.8em

Dimensionamiento

A continuación, modifique la configuración de tamaño.

• Ancho: 68% (escritorio), 80% (tableta), 88% (teléfono)
• Alineación del módulo: izquierda

Agregar módulo divisor

Visibilidad

El siguiente y último módulo que necesitamos en esta fila es un módulo divisor. Asegúrese de que la opción 'Mostrar divisor' esté habilitada.

• Mostrar divisor: Sí

Color

Luego, vaya a la pestaña de diseño y cambie el color del icono.

• Color: # 333333

Dimensionamiento

Modifique también la configuración de tamaño del módulo.

• Peso del divisor: 10px
• Ancho: 8% (escritorio), 20% (tableta), 25% (teléfono)
• Alineación del módulo: izquierda

Agregar la sección n. ° 1

¡A la siguiente sección! Agregue una sección regular debajo de la anterior.

Añadir fila

Estructura de la columna

Continúe agregando una nueva fila a la sección.

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de fila y modifique la configuración de tamaño.

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

Espaciado

Luego, vaya a la configuración de espaciado y realice algunos cambios en diferentes tamaños de pantalla.

• Acolchado inferior: 0.2vw
• Acolchado izquierdo: 4vw (escritorio), 2vw (tableta), 1vw (teléfono)
• Relleno derecho: 25vw (escritorio), 2vw (tableta), 1vw (teléfono)
• Columna 1 Relleno derecho: 0.2vw
• Columna 2 Relleno izquierdo: 0.1vw
• Columna 2 Relleno derecho: 0.1vw
• Columna 3 Relleno izquierdo: 0.2vw

CSS personalizado

Nos aseguramos de que todas las columnas aparezcan una al lado de la otra, incluso en tabletas y teléfonos, agregando una sola línea de código CSS al elemento principal en la pestaña avanzada.

display: flex;

Agregar módulo Blurb a la columna 1

Añadir título

¡Ahora podemos comenzar a agregar nuestros módulos! Agregue un nuevo módulo Blurb a la primera columna e ingrese un título.

Seleccionar icono

Luego, seleccione un icono de su elección.

Enlace

Agregue un enlace al módulo también. Asegúrese de utilizar la URL correcta que dirigirá a los visitantes a la página que desean visitar.

• URL del enlace del módulo: https://www.yourwebsite.com/homepage

Fondo degradado

A continuación, agregue un fondo degradado.

• Color 1: # 4b42ff
• Color 2: rgba (255,255,255,0)
• Tipo de degradado: radial
• Dirección radial: centro
• Posición inicial: 60%
• Posición final: 60%

Imagen de fondo

Junto con una imagen de fondo. Guarde la siguiente imagen en su escritorio:

Y utilícelo en combinación con las siguientes configuraciones de fondo:

• Posición de la imagen de fondo: Centro
• Repetición de imagen de fondo: sin repetición

Configuración de iconos

Continúe modificando la configuración del icono en la pestaña de diseño.

• Color del icono: #ffffff
• Ubicación del icono: Arriba
• Usar tamaño de fuente del icono: Sí
• Tamaño de fuente del icono: 4vw (escritorio), 6vw (tableta), 8vw (teléfono)

Configuración del texto del título

Cambie también la configuración del texto del título.

• Fuente del título: Didact Gothic
• Alineación del texto del título: centro
• Color del texto del título: #ffffff
• Tamaño del texto del título: 2vw (escritorio), 3vw (tableta), 4vw (teléfono)
• Espaciado de letras de título: -2px
• Altura de la línea de título: 0em

Espaciado

Y agregue algunos valores de relleno superior e inferior personalizados para los diferentes tamaños de pantalla.

• Acolchado superior: 9vw (escritorio y tableta), 12vw (teléfono)
• Acolchado inferior: 9vw (escritorio y tableta), 12vw (teléfono)

Clone el módulo de Blurb dos veces y coloque los duplicados en las columnas restantes

Una vez que haya terminado de modificar el módulo Blurb en la columna 1, puede continuar y clonar el módulo dos veces. Coloque los duplicados en las columnas restantes de la fila.

Cambiar el contenido de Blurb

Por supuesto, deberá cambiar los títulos de cada duplicado.

Cambiar iconos de propaganda

Junto con los iconos.

Cambiar enlaces de Blurb

Haga coincidir los nuevos módulos de Blurb con una URL única que lleve a la página correcta.

• URL del enlace del módulo: https://www.yourwebsite.com/about

Cambiar fondos degradados de Blurb

Luego, cambie los primeros colores de los fondos degradados de ambos duplicados.

• Color 1: # f9f9f9

• Color 1: # ff445d

Cambiar los colores del icono y del texto del módulo Blurb en la columna 2

Y haga coincidir el icono y los colores del texto del módulo Blurb con el nuevo color de fondo degradado.

• Color del icono: # 000000
• Color del texto del título: # 000000

Clonar toda la fila

Una vez que haya completado la fila, puede clonarla por completo.

Clonar módulo Blurb en la columna 2

Clona el módulo Blurb en la columna 2.

Coloque módulos de publicidad de fondo claro en la columna 1 y la columna 3

Y coloque los módulos Blurb de fondo claro en las columnas 1 y 3.

Coloque el módulo de publicidad en color de fondo en la columna 2

Mueva uno de los módulos Blurb de fondo de color a la segunda columna.

Quitar el módulo restante de Blurb

Y elimine el módulo Blurb restante.

Cambiar el contenido de Blurb

Nuevamente, deberá cambiar los títulos de cada módulo de Blurb.

Cambiar iconos de propaganda

Junto con los iconos.

Cambiar enlaces de Blurb

Y los enlaces también.

• URL del enlace del módulo: https://www.yourwebsite.com/shop

Cambiar el fondo degradado del módulo Blurb en la columna 2

Por último, pero no menos importante, cambie el primer color del fondo degradado del módulo Blurb en la columna 2.

• Color 1: # 000000

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Pensamientos finales

En esta publicación, le mostramos cómo crear una página de navegación de iconos y usarla como su página de inicio. Este enfoque permite a sus visitantes elegir la página a la que navegan antes de ver el contenido del sitio web. Una vez que alguien haya hecho clic en un elemento del menú, volverá a experimentar la navegación normal a través de la barra de menú principal. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!