Cómo crear diseños personalizados "Volver al principio" con Divi


Cada semana, le proporcionamos paquetes de diseño Divi nuevos y gratuitos que puede usar para su próximo proyecto. Para uno de los paquetes de diseño, también compartimos un caso de uso que lo ayudará a llevar su sitio web al siguiente nivel.

Esta semana, como parte de nuestra iniciativa de diseño de Divi en curso, le mostraremos cómo crear diseños personalizados de regreso a los mejores con Divi y el paquete de diseño de energía verde. Esta técnica lo ayudará a mejorar la experiencia del usuario en sus páginas mientras aprovecha las opciones integradas de Divi en el lado del diseño. ¡Esperamos que este tutorial lo inspire a crear sus propios diseños alternativos y utilizarlos en su próximo sitio web!

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado de este tutorial.

GIF

volver arriba

Ejemplo 1

volver arriba

Ejemplo # 2

volver arriba

Ejemplo # 3

volver arriba

1. Agregar desplazamiento suave al HTML de la página

Cargue la página de aterrizaje de Green Energy en una nueva página

Lo primero que tendrá que hacer es crear una nueva página y cargar la página de inicio del Green Energy Layout Pack.

volver arriba

Abrir configuración de página

Abra la configuración de la página haciendo clic en el icono marcado en la pantalla de impresión a continuación:

volver arriba

Agregar desplazamiento suave al cuadro CSS personalizado

Pase a la pestaña avanzada y agregue un comportamiento de desplazamiento suave a toda la página agregando el siguiente código CSS al cuadro CSS personalizado:

html {
scroll-behavior: smooth;
}

volver arriba

2. Agregar ID de CSS a la sección de héroe

Open Hero Section

El diseño de arriba hacia arriba redirigirá a los visitantes a la sección de héroes. Para lograrlo, primero debes abrir la configuración de la sección de héroe.

volver arriba

Agregar ID de CSS

Luego, vaya a la pestaña avanzada y agregue una ID de CSS a la sección. Más adelante en esta publicación, agregaremos un enlace de anclaje que llevará a los visitantes a esta sección.

  • ID de CSS: sección-1

volver arriba

3. Agregue una nueva sección a la parte inferior de la página con el diseño "Volver al principio"

Pasos generales

Agregar nueva sección regular a la parte inferior de la página

Como puede observar en la vista previa de esta publicación, vamos a recrear tres ejemplos de diseño diferentes. Para agilizar el proceso, comenzaremos con algunos pasos generales primero y nos centraremos en cada ejemplo de diseño individualmente más adelante en la publicación. Agregue una nueva sección regular al final de su página.

volver arriba

Espaciado

Abra la configuración de la sección y elimine todos los rellenos superiores e inferiores predeterminados.

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

volver arriba

Agregar nueva fila

Estructura de columna

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

volver arriba

Añadir enlace de anclaje

Tan pronto como alguien haga clic en toda la fila, queremos que se redirija a la parte superior de la página. Para hacer eso, agregaremos un enlace que redirige a la sección de héroe de la página.

  • URL del enlace de fila: yourwebsite.com/page/#section-1

volver arriba

Alineación de fila

También estamos colocando la fila en el lado derecho del contenedor de la sección.

  • Alineación de fila: derecha

volver arriba

Posición fija

A continuación, arreglaremos toda la fila yendo a la pestaña avanzada de la fila y actualizando las siguientes opciones de posición:

  • Posición: fija
  • Desplazamiento vertical: 30px
  • Desplazamiento horizontal: 30px
  • Índice Z: 99

Además de arreglar la fila, nos aseguramos de que la fila se superponga a todo el contenido de la página aumentando el índice z.

volver arriba

Recrear Diseño Ejemplo # 1

volver arriba

Configuración de fila

Cambiar estructura de columna

Ahora que hemos seguido todos los pasos generales, vamos a recrear los tres ejemplos diferentes que pudo ver al principio de esta publicación. ¡Comencemos con el primero! Cambiar la estructura de la columna de la fila:

volver arriba

Color de fondo

Continúe abriendo la configuración de la fila y agregue un color de fondo blanco.

  • Color de fondo: #ffffff

volver arriba

Dimensionamiento

Pase a la pestaña de diseño y cambie la configuración de tamaño.

  • Usar ancho de canal personalizado: 1
  • Ancho: 9vw (escritorio), 23vw (tableta), 35vw (teléfono)

volver arriba

Espaciado

Agregue algunos valores de relleno personalizados también.

  • Relleno superior: 2.5vw (escritorio), 6vw (tableta), 10vw (teléfono)
  • Acolchado inferior: 2.5vw (escritorio), 6vw (tableta), 10vw (teléfono)
  • Acolchado izquierdo: 1vw (escritorio), 2vw (tableta), 4vw (teléfono)
  • Relleno derecho: 1vw (escritorio), 2vw (tableta), 4vw (teléfono)

volver arriba

Frontera

Continúe agregando '10px' a cada una de las esquinas en la configuración del borde.

volver arriba

Sombra de la caja

Y agregue una sombra de cuadro usando la siguiente configuración:

  • Caja Shadow Blur Fuerza: 80px
  • Color de sombra: rgba (0,0,0,0.3)

volver arriba

Monitor

Para asegurarnos de que las columnas permanecen una al lado de la otra en todos los tamaños de pantalla, agregaremos una línea adicional de código CSS al elemento principal de la fila.

display: flex;

volver arriba

Agregar módulo de texto a la columna 1

Agregar contenido

¡Es hora de comenzar a agregar módulos! Agregue un módulo de texto a la primera columna con algún contenido de su elección.

volver arriba

Configuraciones de texto

Pase a la pestaña de diseño y cambie la configuración de texto en consecuencia:

  • Fuente de texto: Arial
  • Peso de fuente de texto: negrita
  • Alineación de texto: derecha
  • Color del texto: # 000000
  • Tamaño del texto: 1.1vw (escritorio), 3vw (tableta), 4.4vw (teléfono)
  • Espaciado entre letras de texto: -1px
  • Altura de la línea de texto: 1em

volver arriba

Agregar módulo de texto a la columna 2

Agregar símbolo

Pase a la segunda columna y agregue un Módulo de texto allí también. Agregue el símbolo ‘▲’ al cuadro de contenido.

volver arriba

Configuraciones de texto

Por último, pero no menos importante, vaya a la pestaña de diseño y cambie la configuración del texto.

  • Fuente de texto: Open Sans
  • Alineación de texto: centro
  • Color del texto: # 000000
  • Tamaño del texto: 3vw (escritorio), 8vw (tableta), 12vw (teléfono)
  • Altura de la línea de texto: 0.6em

volver arriba

Recrear Diseño Ejemplo # 2

volver arriba

Configuración de fila

Dimensionamiento

¡Al segundo ejemplo! Abra la configuración de la fila y cambie el ancho de la fila.

  • Ancho: 7%

volver arriba

Espaciado

Pase a la configuración de espaciado y elimine todos los rellenos superiores e inferiores predeterminados.

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

volver arriba

Agregar módulo de texto a columna

Agregar símbolo

Continúe agregando un Módulo de texto a la fila e ingrese el símbolo "↑".

volver arriba

Configuraciones de texto

Vaya a la pestaña de diseño y cambie la configuración del texto.

  • Fuente de texto: Open Sans
  • Alineación de texto: centro
  • Color del texto: # 000000
  • Tamaño de texto: 56 px
  • Altura de la línea de texto: 1em

volver arriba

Espaciado

A continuación, agregaremos algunos rellenos superiores e inferiores personalizados.

  • Relleno superior: 30px
  • Relleno inferior: 50px

volver arriba

Frontera

Pase a la pestaña de diseño y agregue '50vw' a cada una de las esquinas. Agregue un borde también con la siguiente configuración:

  • Ancho del borde: 3px
  • Color del borde: # 000000

volver arriba

Recrear Diseño Ejemplo # 3

volver arriba

Configuración de fila

Dimensionamiento

¡En el siguiente y último ejemplo! Abra la configuración de la fila y modifique el ancho.

  • Ancho: 4% (escritorio), 10% (tableta), 15% (teléfono)

volver arriba

Espaciado

Elimine el relleno superior e inferior predeterminado a continuación.

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

volver arriba

Sombra de la caja

Agregue una sombra de cuadro personalizado a la fila con la siguiente configuración:

  • Box Shadow Spread Strength: 4px
  • Color de sombra: rgba (0,0,0,0.3)

volver arriba

Agregar módulo de texto a columna

Agregar símbolo

El único módulo que necesitamos para este ejemplo de diseño es un Módulo de texto. Agregue ‘^’ al cuadro de contenido.

volver arriba

Configuraciones de texto

Pase a la pestaña de diseño y cambie la configuración de texto en consecuencia:

  • Fuente de texto: Open Sans
  • Peso de fuente de texto: Ultra negrita
  • Alineación de texto: centro
  • Color del texto: # 4359e9
  • Tamaño de texto: 56 px
  • Altura de la línea de texto: 1em

volver arriba

  • Color de sombra de texto: # 35d764

volver arriba

Espaciado

Continúe yendo a la configuración de espaciado y agregando algunos rellenos superiores e inferiores personalizados.

  • Relleno superior: 30px
  • Relleno inferior: 20px

volver arriba

Frontera

Por último, pero no menos importante, agregue un borde al Módulo de texto y listo.

  • Ancho del borde: 3px
  • Color del borde: # 4359e9

volver arriba

Avance

Ahora que hemos pasado por todos los pasos, echemos un vistazo final al resultado.

GIF

volver arriba

Ejemplo 1

volver arriba

Ejemplo # 2

volver arriba

Ejemplo # 3

volver arriba

Pensamientos finales

En este tutorial de casos de uso, le mostramos cómo crear diseños personalizados de vuelta al principio con Divi. Agregamos un desplazamiento suave a nuestras páginas, asignamos una ID de sección a la sección de héroe y vinculamos una fila fija a la sección de héroe. Este tutorial es parte de nuestra iniciativa de diseño Divi en curso, donde intentamos poner algo extra en su caja de herramientas de diseño cada semana. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!

Si está ansioso por aprender más sobre Divi y obtener más regalos Divi, asegúrese de Suscríbete a nuestro boletín de correo electrónico y Canal de Youtube así que siempre serás una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.