Cómo crear una página de navegación con íconos receptivos con div Div

Al crear un sitio web de WordPress, puede elegir la primera página en cualquier momento en que las personas visiten su sitio directamente. La mayoría de los creadores de sitios web envían visitantes a la página inicial de inmediato. Pero también puede elegir otro enfoque que permita a los visitantes elegir la primera página en su sitio web agregando una página de navegación de iconos como página de inicio. Después de que las personas hacen clic en su página, nuevamente tendrán la experiencia normal del sitio web con una barra de menú en la parte superior de la página, lo 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 después de haber pasado después de la primera interacción.
En este tutorial, le mostraremos cómo crear una página inicial moderna y 100% receptiva para íconos que se verán bien en todo el tamaño de la pantalla. También lo ayudaremos a hacer esta página de inicio del sitio web y eliminar la barra de menú principal y el sótano en la primera interacción. ¡Vamos a eso! Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla.

Cree una nueva página que se suscribiera a nuestro canal de YouTube Agregue una nueva página Inicie agregando una nueva página a su sitio de WordPress.

Déle a su página un título y publique. Obtenga el título de su página y publique la página de inmediato.

Establezca la página como una página de inicio para acceder a la configuración de lectura del sitio web luego, acceda a la configuración de lectura de su sitio web.

Establezca la nueva página como página de inicio aquí, seleccionaremos la nueva página de navegación de iconos como una página de inicio del sitio web. Dé la barra y el sótano del menú principal en la página de navegación de iconos Regresar a la página de navegación de iconos y activar Visual Builder para dividir 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 creó y muévase a Visual Builder of Div.

Después de hacer esto, obtendrá tres posibilidades. Puede comenzar a construir desde cero, elegir un aspecto prefabricado o clonar una página existente. Elija la primera opción.

Agregue CSS personalizado para ocultar la barra y el sótano del menú principal solo en esta página porque esta es una página de navegación, queremos que el énfasis se ponga en los elementos del menú que creamos manualmente. Por lo tanto, ocultaremos la barra de menú principal y el sótano de esta página. Una vez que las personas continúen accediendo al sitio web, recibirán la barra de menú principal y el sótano. #Header principal, #-Footer principal {

Pantalla: ninguno;}
¡Comencemos a diseñar! Agregue la sección no. ¡Comencemos a crear nuestro diseño receptivo con Div! Agregue la primera sección regular.


Agregue la fila La estructura de la columna Continúe agregando una nueva fila utilizando la siguiente estructura de columnas:

Dimensión sin agregar módulos, abra la configuración de línea y active la opción “Hacer esta fila FullWidth” en la configuración de tamaño.

Haga esta fila ancho completo: sí
Agregue un módulo de imagen Cargar el primer módulo del logotipo de la empresa que necesitamos en esta fila es un módulo de imagen. Cargue el logotipo de su empresa para que las personas sepan que han alcanzado el sitio correcto. Alineación Entonces, cambie la alineación de la imagen en la pestaña Diseño. Asegúrese de deshabilitar la opción “Centring Mobile Image”.

Alineación de imágenes: izquierda

Espacio agregue algunos bordes inferiores personalizados.
La parte inferior: 10 VW (escritorio), 20VW (tableta y teléfono)

Agregue un módulo de texto Agregar contenido H1 La siguiente manera que necesitamos es un módulo de texto. Agregue contenido H1 a su elección.
Configuración de texto H1 Continúe cambiando la configuración de texto H1 en la pestaña Diseño.

Fuente del título: Didact Gothic

Título Fuente de peso: Bold
Alineación del texto del encabezado: izquierda
Text Pre -Text: # 333333
Encabezado de texto de tamaño: 5VW (escritorio), 6VW (tableta), 7VW (teléfono)
Altura de la línea de dirección: 0.8em
La dimensión cambia la configuración de dimensionamiento adicional.
Ancho: 68% (escritorio), 80% (tableta), 88% (teléfono)

Alineación del módulo: izquierda
Agregue un módulo de visibilidad La siguiente y última manera que necesitamos en esta fila es un módulo divisor. Asegúrese de que se active la opción “Muestra el divisor”.
Divisor del espectáculo: si

Colorear luego acceda a la pestaña de diseño y cambie el color del icono.
Color: # 333333

Dimensión Modifique la configuración de dimensionamiento del módulo.
Peso del divisor: 10 PX

Ancho: 8% (escritorio), 20% (tableta), 25% (teléfono)
Alineación del módulo: izquierda
Agregue la sección no. 1 Vaya a la siguiente sección! Agregue una sección regular debajo de la anterior.
Agregue la estructura de la columna, continúe agregando una nueva fila a la sección. Dimensión sin agregar módulos, abriendo la configuración de la fila y modifique la configuración del tamaño.

Haga esta fila ancho completo: sí

Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1
Extienda luego, acceda a la configuración de espaciado y realice algunos cambios en diferentes tamaños de pantalla.
Revestimiento inferior: 0.2VW
ENLIZACIÓN IZQUIERDA: 4VW (escritorio), 2VW (tableta), 1VW (teléfono)

Revestimiento derecho: 25VW (escritorio), 2VW (tableta), 1VW (teléfono)
Columna 1 Revelaje derecho: 0.2VW
Columna 2 Reinicio izquierdo: 0.1VW
Columna 2 Reinicio recto: 0.1VW
Columna 3 Junta izquierda: 0.2VW
CSS personalizado Nos aseguramos de que todas las columnas aparezcan una al lado de la otra, incluso en la tableta y el teléfono, agregando una sola línea de código CSS al elemento principal en la pestaña avanzada. Pantalla: Flex;
Agregue los módulos de blurb a la columna 1 Agregar título ¡Ahora podemos comenzar a agregar nuestros módulos! Agregue un nuevo modo de propaganda a la primera columna e ingrese un título.
Seleccione el icono y luego, seleccione un icono de su elección.


Agregue un enlace a un enlace al módulo. Asegúrese de usar la URL correcta, lo que dirigirá a los visitantes a la página que desean visitar.

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

El fondo de gradiente agrega un fondo degradado adicional.

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 el escritorio:
Y úselo en combinación con la siguiente configuración de fondo:
Posición de la imagen de fondo: Centrando la imagen de fondo: sin repetición

Continuar la configuración del icono cambiando la configuración del icono de la pestaña de diseño.

Icono de color: #ffffff
Colocando iconos: arriba
Use el icono del tamaño de la fuente: sí

Icono de tamaño de fuente: 4VW (escritorio), 6VW (tableta), 8VW (teléfono)
Configuración de texto de título Modificar y configuración para el texto del título.
Título de la fuente: Didact Gothic
Alineación del texto del título: Centro
Color de texto del título: #ffffff

Título Tamaño del texto: 2VW (escritorio), 3VW (tableta), 4VW (teléfono)
Cartas de espacio Título: -2px
Altura de la línea de título: 0em
Espacio y agregue algunos valores de llenado personalizados hacia arriba y hacia abajo para diferentes tamaños de pantalla.
Revelaje superior: 9VW (escritorio y tableta), 12VW (teléfono)
Bajo forro: 9VW (escritorio y tableta), 12VW (teléfono)
Clone el módulo de la propaganda dos veces y coloque los duplicados en las columnas restantes después de haber terminado de cambiar el módulo de la propaganda en la columna 1, puede continuar el módulo dos veces. Coloque los duplicados en las columnas restantes de la fila.

Cambie el contenido de la propaganda, por supuesto, deberá cambiar los títulos de cada duplicado.
Cambie los íconos de la propaganda con los íconos.
Cambie los enlaces de propaganda coinciden con los nuevos módulos de blurb con una URL única que conduce a la página correcta.

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

Cambie los fondos de gradiente de la propaganda, luego cambie los primeros colores de los fondos de gradiente duplicados.

Color 1: # F9F9F9

Color 1: # FF445D
Cambie los colores del icono y el texto del módulo de la propaganda en la columna 2 y se adapte a los módulos de icono de propaganda y los colores del texto con el nuevo fondo de gradiente.

Color de texto del título: # 000000
Clon toda la fila Después de haber completado la fila, puede clonarla por completo.

Clon el módulo de la propaganda en la columna 2 Clon el módulo de la propaganda en la columna 2.

Coloque los módulos de propaganda en el fondo abierto en la columna 1 y la columna 3 y coloque los módulos de propaganda abiertos en la columna 1 y 3.
Coloque el módulo de blurbs de la parte posterior de color en la columna 2 Mueva uno de los módulos de la propaganda al fondo de color al segundo columna.
Retire el módulo de desenfoque de descanso Elimine el módulo de propaganda restante.

Cambie el contenido de la propaganda nuevamente, deberá cambiar los títulos de cada módulo de propaganda.

Cambie los íconos de la propaganda con los íconos.

Cambie los enlaces y enlaces de la propaganda.

Dirección de URL del módulo: https://www.yourwebsite.com/shop

Cambie el fondo de gradiente del módulo de la propaganda en la columna 2, no menos importante, cambie el primer color del fondo de gradiente del módulo de propaganda en la columna 2.

Color 1: # 000000

Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla.