Cómo crear una navegación fija de 4 esquinas con Divi


Un diseño de navegación único puede dar un poco de ventaja a cualquier sitio web. La navegación fija de 4 esquinas, por ejemplo, es una buena manera de ofrecer a los espectadores más opciones para interactuar con el diseño de su sitio web. De hecho, agrega otra capa a su diseño UX en todo el sitio.

En esta publicación, le mostraremos cómo crear su propia navegación fija de 4 esquinas. Explicaremos cómo crear dos estilos ligeramente diferentes, pero estos son solo la punta del iceberg. Dado que la navegación se crea con los elementos integrados de Divi, las posibilidades de personalización son infinitas.

Esperamos que esta idea lo inspire a crear increíbles diseños de navegación fija de 4 esquinas para sus próximos proyectos Divi.

Empecemos.

Vistas previas

Echemos un vistazo rápido a la navegación de 4 esquinas que crearemos hoy. El primer estilo coloca los botones en el borde de la pantalla, y el otro tiene un flotador interior.

Estilo # 1

GIF de navegación de 4 esquinas con esquinas al ras

Estilo # 2

GIF de navegación de 4 esquinas con flotador interior

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

Suscríbase a nuestro canal de Youtube

Crear una nueva página en blanco

Abra una nueva página y antes de editar con Divi, seleccione "Página en blanco" en los Atributos de la página. Una vez hecho esto, habilite Divi Builder.

captura de pantalla de los atributos de la página Divi - Página en blanco

Subir diseño de página de destino de criptomonedas

Una vez en Divi Visual Builder, suba la página de inicio del Paquete de diseño de criptomonedas desde la pestaña Diseños prefabricados.

captura de pantalla de los paquetes Divi Layout - Criptomoneda

captura de pantalla del paquete de diseño Divi Cryptocurrency

2. Crear una nueva sección con una fila de 4 columnas

Agregar una nueva sección regular con fila de 4 columnas

Para crear los 4 elementos de navegación, necesitamos una nueva sección con una fila de 4 columnas. Desplácese hasta el final de la página y agregue una nueva sección regular. Luego, elija una fila con 4 columnas de igual tamaño.

captura de pantalla del constructor divi

Elige las cuatro columnas

Eliminar el relleno predeterminado de la sección

Antes de agregar módulos, asegúrese de eliminar el relleno de la sección agregando "0px" en la parte superior e inferior. Además, haga doble clic en la sección que no tiene color de fondo o fondo degradado.

  • Relleno superior: 0px
  • Relleno inferior: 0px

captura de pantalla del generador de divi: ajuste el relleno en la sección

Aumentar el índice Z

Queremos que esta sección esté por encima de todas las demás a medida que avanzamos. Es por eso que necesitamos aumentar el valor del Índice Z de la sección. Para hacerlo, abra la pestaña Avanzado y vaya a la configuración de visibilidad y aumente el Índice Z.

  • Índice Z: 10

captura de pantalla de divi builder. índice z

3. Ajuste el tamaño de la fila

A continuación, debemos ajustar la configuración de tamaño de la fila. Abra la pestaña de diseño y ajuste la configuración en consecuencia:

  • Usar ancho de canal personalizado: sí
  • Ancho de canal: 1
  • Igualar alturas de columna: No
  • Ancho: 100%
  • Ancho Máx .: 100%

captura de pantalla del generador de divi - Configuración de fila

Eliminar el relleno predeterminado de la fila

Para asegurarse de que no quede espacio en la parte inferior de nuestra página, elimine el relleno predeterminado de la fila. En la pestaña Diseño, cambie las entradas de Espaciado a "0px" para el relleno superior e inferior.

eliminar el relleno de la fila

Agregar módulos a las columnas.

Ahora es el momento de agregar algunos módulos a cada columna, comenzando de izquierda a derecha.

  • Columna # 1: Imagen
  • Columna # 2: Botón
  • Columna # 3: Seguimiento de redes sociales
  • Columna # 4: Botón

captura de pantalla del constructor divi. Fila de 4 columnas

4. Diseñe cada columna

Columna # 1 – Módulo de imagen

Agregar un logotipo de la empresa

Abra el Módulo de imagen en la columna # 1. Cargue su logotipo (ancho de 220 px y alto de 100 px). Asegúrese de que sea una imagen transparente donde se centra el logotipo.

Agregar un logotipo al módulo de imagen

Alinear el módulo

Queremos que el logotipo se coloque en la esquina superior izquierda de nuestra página, por lo que debemos alinear el módulo a la izquierda. Abra la pestaña Diseño en el Módulo de imagen y seleccione Alineación de imagen izquierda.

  • Alineamiento: izquierda

captura de pantalla del generador de divi - configuración de imagen

Agregue CSS personalizado para arreglar la posición del módulo

Para asegurarse de que la posición del módulo permanezca fija, vaya a la pestaña Avanzado y agregue CSS personalizado al Elemento principal.

position: fixed;
top: 0;
left: 0;

CSS personalizado para imagen de logotipo

Columna # 2 – Botón

Agregar un botón

Ahora, en la Columna # 2, agregue un Módulo de botones.

Dale estilo al botón

En la pestaña Contenido, agregue texto para su botón.

  • Texto de contenido: Mine for Bitcoin

captura de pantalla del constructor divi

A continuación, en la pestaña Diseño, elija Alineación del botón izquierdo.

  • Alineamiento: izquierda

captura de pantalla de divi builder

Después de eso, deslice los estilos de botones personalizados a sí y ajuste los valores en consecuencia:

  • Estilos de botones personalizados: sí
    • Tamaño del texto del botón: escritorio; 25 px, Tableta: 20 px, Teléfono: 20 px
    • Color del texto del botón: blanco, #ffffff
    • Color de fondo del botón: degradado
      • Color superior: # 1c076d, Color inferior: # 185475
      • Tipo de degradado: lineal
    • Radio del borde del botón: 7 px
    • Fuente del botón: Tantillium Web (igual que el diseño)
    • Mostrar icono de botón: Sí
    • Icono de botón: Cono de tráfico
    • Color del icono del botón: blanco, #ffffff
    • Colocación del icono del botón: derecha

captura de pantalla de estilos de botones

configuración de estilo de botón

Agregue CSS personalizado para arreglar la posición del módulo

Finalmente, abra la pestaña Avanzado y agregue CSS personalizado para fijar la posición del módulo en la esquina inferior izquierda de la página.

position: fixed;
bottom: 0;
left: 0;

captura de pantalla de estilos de botones

Columna # 3 – Seguimiento de redes sociales

Agregar un módulo de seguimiento de redes sociales

A la tercera columna. Esta vez, necesitaremos un módulo de seguimiento de redes sociales. Agregue tres redes sociales de su elección.

redes sociales

A continuación, en la pestaña Diseño, elija la Alineación correcta del módulo.

  • Alineamiento: derecho

captura de pantalla del constructor divi. alineación derecha

Estilo de los iconos de redes sociales

Abra la configuración individual de la primera red social, vaya a la pestaña de diseño y cambie la configuración del icono en consecuencia:

  • Color del icono: Blanco #ffffff
  • Usar tamaño de icono personalizado: sí
    • Tamaño de fuente del icono: escritorio; 25 px, Tableta: 20 px, Teléfono: 20 px
  • Antecedentes: ninguno

configuración de redes sociales

captura de pantalla de controles de fondo

Copiar y pegar los estilos de elementos

Regrese a la ventana principal Seguir a las redes sociales, haga clic con el botón derecho en el primer elemento y seleccione "Copiar estilos de elementos". Luego, haga clic con el botón derecho en las dos redes sociales restantes y pegue los estilos.

copiar estilos de imagen

pegar estilos de elementos

Agregar CSS personalizado al módulo

Finalmente, en la pestaña Avanzado, agregue el siguiente código CSS para que el módulo se adhiera a la esquina superior derecha de la página:

position: fixed; 
top: 0; 
right: 0;

agregar CSS personalizado

Columna # 4 – Botón

Copie los estilos del módulo del módulo n. ° 2 y ajuste

Para que el botón del Módulo 4 se vea exactamente igual al botón del Módulo 2, utilizaremos la opción "Copiar estilos de módulo". Primero, haga clic derecho en el Módulo de botones en la columna 2, haga clic en "Copiar estilos de módulo" y luego péguelo en el Módulo de botones en la columna 4.

copiar estilos de módulos

Ahora es el momento de cambiar la configuración en la pestaña Contenido. Primero, cambie el contenido del texto.

  • Texto: de "Mine for Bitcoin" a "Lea nuestro blog"

cambiar el contenido del botón

Luego, cambie la Alineación del botón.

  • Alineamiento: de izquierda a derecha

cambiar la alineación del módulo de botones

Finalmente, cambie el código CSS personalizado en la pestaña Avanzado:

  • Cambia el código a:
position: fixed; 
bottom: 0; 
right: 0;

cambiar css personalizado

Salir

GIF de navegación de 4 esquinas con esquinas al ras

5. Cambie el CSS personalizado para lograr el segundo ejemplo de estilo

En el primer ejemplo de estilo, las esquinas están pegadas a las esquinas. Para obtener el segundo estilo, solo tiene que ajustar el código CSS para que los módulos de esquina floten un poco hacia adentro.

Simplemente ajuste el CSS personalizado en la pestaña Avanzado de los cuatro módulos

Módulo 1

position: fixed; 
top: 1vw; 
left: 1vw;

Módulo # 2

position: fixed; 
bottom: 2vw; 
left: 2vw;

Módulo # 3

position: fixed; 
top: 3vw; 
left: 2vw;

Módulo # 4

position: fixed; 
bottom: 2vw; 
right: 2vw;

Resultado final

GIF de navegación de 4 esquinas con flotador interior

Conclusión

Este tutorial solo muestra la superficie de lo que puede hacer con la navegación fija de 4 esquinas usando Divi. En última instancia, puede elegir cualquier módulo para cada columna, siempre que mantenga el CSS personalizado que le proporcionamos. Esperamos que este tutorial creativo lo inspire a hacer su propia navegación fija de 4 esquinas. Si tiene alguna pregunta o sugerencia, asegúrese de dejar un comentario en la sección de comentarios a continuación.