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

Un diseño de navegación único puede darle a cualquier sitio web una ventaja. La navegación fija de 4 esquinas, por ejemplo, es una buena manera de brindar 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 de 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

Estilo # 2

Suscríbete 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.

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

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

2. Cree 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 del mismo tamaño.

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, verifique dos veces que la sección no tenga color de fondo o fondo degradado.

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

Incrementar el índice Z

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

• Índice Z: 10

3. Ajustar el tamaño de la fila

A continuación, necesitamos 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ón personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar alturas de columna: No
• Ancho: 100%
• Ancho máximo: 100%

Eliminar el relleno predeterminado de la fila

Para asegurarse de que no quede ningún 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.

Agregue módulos a las columnas.

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

• Columna n. ° 1: imagen
• Columna # 2: Botón
• Columna n. ° 3: Seguimiento en redes sociales
• Columna # 4: Botón

4. Aplicar estilo a cada columna

Columna n. ° 1 - Módulo de imagen

Agregar un logotipo de empresa

Abra el Módulo de imagen en la columna # 1. Sube tu logo (ancho de 220px y alto de 100px). Asegúrese de que sea una imagen transparente donde el logotipo esté centrado.

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.

• Alineación: izquierda

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;

Columna n. ° 2 - Botón

Agregar un botón

Ahora, en la columna n. ° 2, agregue un módulo de botones.

Estilo del botón

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

• Contenido-Texto: mío para Bitcoin

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

• Alineación: izquierda

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; 25px, Tableta: 20px, Teléfono: 20px
  • 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 del botón: Cono de tráfico
  • Color del icono del botón: blanco, #ffffff
  • Ubicación del icono del botón: Derecha

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;

Columna n. ° 3 - Seguimiento en 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.

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

• 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; 25px, Tableta: 20px, Teléfono: 20px
• Antecedentes: Ninguno

Copiar y pegar los estilos de los elementos

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

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;

Columna n. ° 4 - Botón

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

Para que el botón del Módulo # 4 tenga exactamente el mismo aspecto que el botón del Módulo # 2, usaremos la opción 'Copiar estilos de módulo'. Primero, haga clic con el botón 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.

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"

Luego, cambie la alineación de botones.

• Alineación: de izquierda a derecha

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

• Cambie el código a:

position: fixed; 
bottom: 0; 
right: 0;

Salir

5. Cambie el CSS personalizado para lograr el segundo estiloEjemplo

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 las esquinas 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

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 crear 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!