Cuando está creando 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 ir primero agregando una página de navegación de íconos 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 í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 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!
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 publícala
Asigne un título a su página y publíquela de inmediato.
Establecer página como página de inicio
Ir a la configuración de lectura del sitio web
Luego, ve a la configuración de lectura de tu sitio web.
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.
Ahora que hemos seleccionado la página de inicio, podemos comenzar a construir nuestra página de navegación de íconos. Regrese a la página que ha creado y cambie a Divi y su Visual Builder.
Una vez que lo hagas, obtendrás tres posibilidades. Puede comenzar a crear desde cero, elegir un diseño prefabricado o clonar una página existente. Elige la primera opción.
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úen en el sitio web, volverán a la barra de menú principal y al pie de página.
|
01
02
|
#main-header, #main-footer {display: none;} |
¡Comencemos a diseñar!
Añadir Sección #1
¡ Comencemos a crear nuestro diseño receptivo con Divi! Agregue 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 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
Cargar el logotipo de la empresa
El primer módulo que necesitamos en esta fila es un módulo de imagen. Cargue el logotipo de su empresa para que las personas sepan que llegaron al sitio web correcto.
Alineación
Luego, cambie la alineación de la imagen en la pestaña de diseño. Asegúrate 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 algo 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 del título: Didact Gothic
- Peso de la fuente del encabezado: Negrita
- Alineación del texto del título: 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 encabezado: 0,8 em
Dimensionamiento
Modifique la configuración de tamaño a continuación.
- 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, ve a la pestaña de diseño y cambia 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
Añadir Secció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 del canalón: 1
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
- Relleno izquierdo de la columna 2: 0.1vw
- Columna 2 Relleno derecho: 0.1vw
- Relleno izquierdo de la columna 3: 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.
|
01
|
display: flex; |
Agregue el módulo Blurb a la columna 1
Añadir título
¡Ahora podemos comenzar a agregar nuestros módulos! Agregue un nuevo módulo de 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 remitirá a los visitantes a la página que desean visitar.
- URL del enlace del módulo: https://www.yourwebsite.com/homepage
Fondo degradado
Agregue un fondo degradado a continuación.
- Color 1: #4b42ff
- Color 2: rgba (255.255.255,0)
- Tipo de gradiente: 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 la 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: superior
- Usar tamaño de fuente de 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 entre letras del 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 (computadora de escritorio y tableta), 12vw (teléfono)
- Acolchado inferior: 9vw (computadora de escritorio y tableta), 12vw (teléfono)
Clonar módulo Blurb dos veces y colocar duplicados en las columnas restantes
Una vez que haya terminado de modificar el módulo de 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 Blurb
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 los colores del ícono y 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
Clone el Módulo de Blurb en la columna 2.
Coloque módulos de desenfoque 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 Color-Background Blurb en la columna 2
Mueva uno de los módulos de Blurb con fondo de color a la segunda columna.
Eliminar el módulo de Blurb restante
Y elimine el Módulo de Blurb restante.
Cambiar el contenido de Blurb
Nuevamente, deberá cambiar los títulos de cada módulo de Blurb.
Cambiar iconos de Blurb
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 con íconos y usarla como su página de inicio. Este enfoque permite a sus visitantes elegir a qué página navegar 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!