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 hagan clic en la página que elijan, 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 permitirá navegar a otras páginas. Esto significa que no tendrán que volver a esta página de navegación de íconos 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 íconos moderna y 100% receptiva que se verá bien en todos los tamaños de pantalla. También lo ayudaremos a que esta sea la página de inicio de su sitio web y eliminaremos 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.

página de navegación de iconos

Crear nueva página

(incrustar) https://www.youtube.com/watch?v=GXgEB_tex14 (/ incrustar)

Suscríbete a nuestro canal de Youtube

Agregar nueva página

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

página de navegación de iconos

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

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

página de navegación de iconos

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.

página de navegación de iconos

Establecer nueva página como página de inicio

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

página de navegación de iconos

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 Visual Builder de Divi

Ahora que hemos seleccionado la página de inicio, podemos empezar a crear nuestra página de navegación de iconos. Vuelva a la página que ha creado y cambie a Visual Builder de Divi.

página de navegación de iconos

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.

página de navegación de iconos

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 los usuarios accedan al sitio web, recuperarán la barra de menú principal y el pie de página.

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

página de navegación de iconos

página de navegación de iconos

¡Empecemos a diseñar!

Agregar sección # 1

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

página de navegación de iconos

Añadir fila

Estructura de columna

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

página de navegación de iconos

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de 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í

página de navegación de iconos

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. Suba el logotipo de su empresa para que las personas sepan que llegaron al sitio web correcto.

página de navegación de iconos

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

página de navegación de iconos

Espaciado

Agregue un margen inferior personalizado a continuación.

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

página de navegación de iconos

Agregar módulo de texto

Agregar contenido H1

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

página de navegación de iconos

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

página de navegación de iconos

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

página de navegación de iconos

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í

página de navegación de iconos

Color

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

  • Color: # 333333

página de navegación de iconos

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

página de navegación de iconos

Agregar sección # 1

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

página de navegación de iconos

Añadir fila

Estructura de columna

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

página de navegación de iconos

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 del canal: 1

página de navegación de iconos

Espaciado

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

  • Acolchado inferior: 0.2vw
  • Relleno 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

página de navegación de iconos

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;

página de navegación de iconos

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.

página de navegación de iconos

Seleccionar icono

Luego, seleccione un icono de su elección.

página de navegación de iconos

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

página de navegación de iconos

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%

página de navegación de iconos

Imagen de fondo

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

página de navegación de iconos

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

página de navegación de iconos

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 de icono: Sí
  • Tamaño de fuente del icono: 4vw (escritorio), 6vw (tableta), 8vw (teléfono)

página de navegación de iconos

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

página de navegación de iconos

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)

página de navegación de iconos

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.

página de navegación de 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

página de navegación de iconos

Cambiar fondos degradados de Blurb

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

  • Color 1: # f9f9f9

página de navegación de iconos

  • Color 1: # ff445d

página de navegación de iconos

Cambiar colores de icono y 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

página de navegación de iconos

Clonar toda la fila

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

página de navegación de iconos

Clonar módulo Blurb en la columna 2

Clona el módulo Blurb en la columna 2.

página de navegación de iconos

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.

página de navegación de iconos

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.

página de navegación de iconos

Quitar el módulo restante de Blurb

Y elimine el módulo Blurb restante.

página de navegación de iconos

Cambiar el contenido de Blurb

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

página de navegación de iconos

Cambiar iconos de propaganda

Junto con los iconos.

página de navegación de iconos

Cambiar enlaces de Blurb

Y los enlaces también.

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

página de navegación de iconos

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

página de navegación de iconos

Avance

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

página de navegación de iconos

Pensamientos finales

En esta publicación, le mostramos cómo crear una página de navegación de íconos 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 haga 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!