Cómo crear una barra lateral de empuje deslizante en Divi

Las barras laterales pueden ser geniales, pero también pueden ser una pérdida de espacio. Es por eso que crear una barra lateral de empuje deslizante puede ser una opción perfecta para aquellos que buscan tener una barra lateral que no distraiga al usuario del contenido principal de la página. Además, este tipo de barra lateral le da al usuario la opción de ver u ocultar la barra lateral cuando lo desee.

El efecto de empuje deslizante es único en el sentido de que la barra lateral se desliza desde el lado izquierdo de la página mientras empuja (o aprieta) simultáneamente el contenido principal de la página para ajustar la barra lateral en la ventana gráfica. En resumen, desliza la barra lateral y empuja la página.

Una vez que la barra lateral está construida, se convierte en una herramienta versátil para todo tipo de aplicaciones, incluidos menús y formularios.

¡Hagámoslo!

Vistazo

Aquí hay un vistazo rápido al diseño que crearemos en este tutorial.

Descarga el diseño GRATIS

Para poner sus manos en el diseño de la barra lateral de empuje deslizante de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

Para importar el diseño de la sección a su Biblioteca Divi, navegue hasta la Biblioteca Divi.

Haga clic en el botón Importar.

En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.

Luego haga clic en el botón Importar.

Una vez hecho esto, el diseño de la sección estará disponible en Divi Builder.

Para agregarlo a una página o plantilla, deberá agregar una nueva sección y elegir el diseño de la sección de la biblioteca.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

1. Si aún no lo ha hecho, instale y active Divi Theme.
2. Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (constructor visual).
3. Elija la opción "Elegir un diseño prefabricado".
   
4. Elija el paquete de diseño de eventos y haga clic para usar el diseño de la página de inicio del evento.
   

Cómo crear una barra lateral de empuje deslizante en Divi

Para crear la barra lateral de empuje deslizante, necesitaremos usar una nueva sección regular. Dimensionaremos y colocaremos la sección para que se convierta en una barra lateral fija que se abre al hacer clic en un botón, presionando (y apretando) el área de contenido principal a la derecha para dejar espacio para la barra lateral.

Construyendo la Sección

Primero, agreguemos una nueva sección regular a la página.

Luego, mueva la sección en la parte superior de la página.

Configuración de la sección

Abra la configuración de la sección y actualice la posición que se fijará de la siguiente manera:

• Posición: fija
• Índice Z: 9999

En la pestaña de diseño, actualice el tamaño y el espaciado de la siguiente manera:

• Ancho: 350px (escritorio y tableta), 100% (teléfono)
• Altura: 100%
• Relleno: 100 px arriba, 0 px abajo

El relleno sirve para dejar espacio para el encabezado en la parte superior de la página.

A continuación, en la pestaña avanzada, asigne a la sección una clase CSS:

• Clase CSS: et-push-sidebar

Una vez que la clase css esté en su lugar, dé a la sección un color de fondo:

• Color de fondo: # 1a1e36

Para crear una separación más notable, vuelva a la pestaña de diseño y agregue un borde derecho.

• Ancho del borde derecho: 2px
• Color del borde derecho: #eeeeee

Eso se encarga de la sección que sirve como contenedor principal para nuestra barra lateral. Ahora es el momento de comenzar a construir los dos botones que usaremos para abrir y cerrar la barra lateral.

Creación de los botones de alternancia de la barra lateral

Se utilizarán dos botones para alternar la barra lateral. El primer botón será un icono "X" que cerrará la versión móvil de la barra lateral después de que se abra. La "X" se construirá utilizando un módulo de propaganda. El segundo es el botón de alternancia principal que crearemos utilizando un módulo de propaganda que se gira con texto vertical y se coloca absolutamente adyacente a la barra lateral / sección.

Hagámoslo.

Crear la fila para los botones

Cree una nueva fila de una columna dentro de la sección / barra lateral.

Abra la configuración de la fila y actualice lo siguiente:

• Ancho de la canaleta: 1
• Ancho: 100%
• Relleno: 0px arriba, 0px abajo

En la pestaña Avanzado, actualice las opciones de posición de la siguiente manera:

• Posición: Absoluto
• Índice Z: 1

Creación del icono de cierre "X"

Para crear el icono de cierre "X", agregue un módulo de propaganda a la fila. Puede ser más fácil agregar un nuevo módulo usando el modal de Capas porque será un poco difícil hacer clic en las cosas.

Contenido

Luego abre la configuración de la propaganda. Debajo de la pestaña de contenido, saque el título y el contenido del cuerpo y agregue el ícono X a la propaganda.

• Usar icono: SÍ
• Icono: x (ver captura de pantalla)

Diseño

En la pestaña de diseño, actualice lo siguiente:

• Color del icono: #eeeeee
• Ubicación del icono de imagen: izquierda
• Usar tamaño de fuente de icono: SÍ
• Tamaño de fuente del icono: 40px
• Ancho: 50px

A continuación, baje un poco el icono agregando la siguiente propiedad transform translate:

• Transformar Traducir X: 100px
• Transformar Traducir Y: -10px

Avanzado

En la pestaña Avanzado, desactive la propaganda en la tableta y el escritorio para que solo la veamos en la pantalla del teléfono.

• Desactivar en: tableta y escritorio

Luego, agregue una clase CSS a la propaganda y asígnele una posición fija para que permanezca a la vista cuando se desplaza por el contenido de la barra lateral en la pantalla del teléfono.

• Clase CSS: et-slide-push-close
• Posición: fija
• Ubicación: arriba a la derecha

Eso se encarga del botón de icono de cierre "X".

Creación del botón de alternancia de la barra lateral principal

Para crear el botón de alternancia de la barra lateral principal, agregue un módulo de propaganda debajo de la propaganda del icono "X" existente.

Contenido

Actualice el título y haga clic para usar el icono de flecha hacia abajo.

• Título: Información del evento
• Usar icono: SÍ
• Icono: flecha hacia abajo (ver captura de pantalla)

A continuación, agregue un color de fondo a la propaganda.

• color de fondo: #eeeeee

Diseño

En la pestaña de diseño, actualice lo siguiente:

• Color del icono: # 1a1e36
• Ubicación de la imagen / icono: Izquierda
• Usar tamaño de fuente de icono: SÍ
• Tamaño de fuente del icono: 25px
• Fuente del título: paso elevado
• Peso de la fuente del título: negrita
• Estilo de fuente del título: TT
• Color del texto del título: # 1a1e36
• Espaciado de letras de título: 2px
• Altura de la línea de título: 1.2em
• Acolchado: 0.6em arriba, 1em a la izquierda, 1em a la derecha
• Esquinas redondeadas: 5px en las dos esquinas inferiores

Para colocar y rotar la propaganda fuera de la sección, use las opciones de transformación de la siguiente manera:

• Transformar Traducir Y: 100px
• Transformar Girar Z: -90deg
• Transformar origen: arriba a la derecha

Avanzado

En la pestaña Avanzado, actualice lo siguiente:

• Clase CSS: et-slide-push-toggle
• Posición: Absoluto
• Ubicación: Centro Derecha

Agregar código personalizado con un módulo de código

Una vez que los dos botones estén completos, estamos listos para agregar el código personalizado que proporcionará la funcionalidad de empuje deslizante que necesitamos para la barra lateral.

Para agregar el código, primero, agregue un módulo de código a la misma columna.

Luego pegue el siguiente código en el módulo de código.

<style>
  #page-container, #et-main-area, .et-push-sidebar, .et-slide-push-toggle .et-pb-icon {
    transition: all 300ms !important;
  }
/*
 * use if using blank template with no header or footer
 * 
  #page-container.et-push-sidebar-active {
    margin-left: 350px;
  }
*/  
  #page-container.et-push-sidebar-active #et-main-area {
    margin-left: 350px;
  }  
  .et-push-sidebar {  
    transform: translateX(-100%);
  }
  .et-fb .et-push-sidebar {  
    transform: translateX(0%);
  }
  .et-push-sidebar-active .et-push-sidebar {
    transform: translateX(0%);
  }
  .et-slide-push-toggle, .et-slide-push-close {
    cursor:pointer;
  }
  .et-push-sidebar-active .et-slide-push-toggle .et-pb-icon {
    transform: rotate(180deg);
  }
@media all and (max-width: 767px) {
  .et-push-sidebar-active .et-push-sidebar {
    overflow: scroll !important;
    overscroll-behavior: contain;
  }
  #page-container.et-push-sidebar-active #et-main-area, #page-container.et-push-sidebar-active {
    margin-left: 0px;
  }  
}  
</style>
<script>
(function($) {
  $(document).ready(function(){
    $('.et-slide-push-toggle').click(function(){
      $('#page-container').toggleClass('et-push-sidebar-active');
    });
    $('.et-slide-push-close').click(function(){
      $('#page-container').removeClass('et-push-sidebar-active');
    });    
  });
})( jQuery );   
</script>

Creación de la fila de contenido de la barra lateral

La primera fila que creamos fue para los botones y el código que hacen que la barra lateral funcione. La siguiente fila será para el contenido de la barra lateral.

Para crear la fila de contenido de la barra lateral, agregue una nueva fila de una columna debajo de la primera fila en la barra lateral / sección.

Configuración de filas

Abra la configuración de la nueva fila y actualice lo siguiente:

• Ancho: 100%
• Altura: 100%
• Relleno: 5% arriba, 5% abajo, 5% izquierda, 5% derecha

En la pestaña Avanzado, actualice las opciones de desbordamiento de la siguiente manera:

• Desbordamiento horizontal: desplazamiento (escritorio y tableta), automático (teléfono)
• Desbordamiento vertical: desplazamiento (escritorio y tableta), automático (teléfono)

Llenar la barra lateral con contenido / módulos

Ahora que su barra lateral está lista, todo lo que necesita hacer es agregar cualquier módulo a la segunda fila en la barra lateral según sea necesario. Para este ejemplo, solo estoy copiando módulos del diseño de la página de inicio del evento y pegándolos en la columna de la fila.

Resultado final

Vea el resultado final en la página en vivo.

Adición de la barra lateral de inserción deslizante a una plantilla de página

Si desea utilizar esta barra lateral en todas sus páginas de forma predeterminada, deberá agregar la barra lateral / sección a una plantilla de página utilizando Divi Theme Builder.

Guardar el diseño de la sección en la biblioteca Divi

Para hacer esto, primero, guarde la sección que se utilizó para crear la barra lateral de la Biblioteca Divi. Puede hacer esto haciendo clic en los tres puntos en la barra lateral en el modal de capas, agregue el nombre del diseño y guardándolo en la biblioteca.

Crear una nueva plantilla de página

A continuación, vaya al generador de temas, cree una nueva plantilla y asigne esa plantilla a todas las páginas.

Agregar la barra lateral deslizante a la plantilla de página

A continuación, haga clic para editar la plantilla de página.

Dentro del editor de diseño de plantillas, agregue una nueva sección de ancho completo.

Luego inserte un módulo de contenido de publicación de ancho completo en la sección.

Luego haga clic en. cree una nueva sección sobre la sección de ancho completo. Luego haga clic en la pestaña Agregar desde la biblioteca y seleccione el diseño de la sección Barra lateral de inserción deslizante de la biblioteca.

Una vez hecho esto, puedes editar la barra lateral como necesites usando el editor de diseño del cuerpo.

Guardar la configuración del generador de temas

Asegúrese de guardar los cambios en el generador de temas.

Ahora todas tus páginas tendrán la barra lateral.

Pensamientos finales

Una barra lateral de empuje deslizante es una opción perfecta para aquellos de ustedes que buscan lo mejor de ambos mundos: una barra lateral que permanece a la vanguardia sin quitar (o distraer) el contenido principal de la página. Siéntase libre de usarlo para todo tipo de cosas, como formularios de registro, suscripción por correo electrónico, menús y mucho más.

Espero tener noticias tuyas en los comentarios.

¡Salud!