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 simultáneamente empuja (o aprieta) el contenido principal de la página para encajar la barra lateral en la ventana gráfica. En resumen, desliza la barra lateral y empuja la página.
Una vez que se crea la barra lateral, se convierte en una herramienta versátil para todo tipo de aplicaciones, incluidos menús y formularios.
¡Hagámoslo!
Aquí hay un vistazo rápido al diseño que construiremos en este tutorial.
Descarga el diseño GRATIS
Para poner sus manos en el diseño de la barra lateral deslizante de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
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:
- Si aún no lo has hecho, instala y activa el tema Divi .
- Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
- Elija la opción «Elegir un diseño prefabricado».
- Elija el paquete de diseño del evento y haga clic para usar el diseño de la página de inicio del evento.
Para crear la barra lateral de empuje deslizante, necesitaremos usar una nueva sección regular. Ajustaremos el tamaño y la posición de 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 hacer 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.
Ajustes de 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: 350 px (computadora de escritorio y tableta), 100 % (teléfono)
- Altura: 100%
- Relleno: 100 px arriba, 0 px abajo
El relleno es para hacer 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-barra lateral
Una vez que la clase css esté en su lugar, asigne 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 ocupa 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.
Se utilizarán dos botones para alternar la barra lateral. El primer botón será un ícono «X» que cerrará la versión móvil de la barra lateral después de abrirla. La «X» se construirá utilizando un módulo de publicidad. El segundo es el botón de alternar principal que construiremos usando un módulo de publicidad 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 del canalón: 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: Absoluta
- Índice Z: 1
Creación del icono de cierre «X»
Para crear el icono de cierre «X», agregue un módulo de publicidad a la fila. Puede ser más fácil agregar un nuevo módulo usando el modal Capas porque será un poco difícil hacer clic en las cosas.
Contenido
Luego abra la configuración de publicidad. En la pestaña de contenido, elimine el título y el contenido del cuerpo y agregue el ícono X a la propaganda.
- Icono de uso: 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 la imagen: Izquierda
- Usar tamaño de fuente del icono: SÍ
- Tamaño de fuente del icono: 40px
- Ancho: 50px
A continuación, baje un poco el ícono agregando la siguiente propiedad transform translate:
- Transformar Traducir X: 100px
- Transformar Traducir Y: -10px
Avanzado
En la pestaña Avanzado, deshabilite la publicidad en la tableta y el escritorio para que solo la veamos en la pantalla del teléfono.
- Deshabilitar en: tableta y escritorio
Luego agregue una Clase CSS a la publicidad y asígnele una posición fija para que permanezca a la vista cuando se desplace 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 ocupa del botón Cerrar icono «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 publicidad debajo de la publicidad 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
- Icono de uso: 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
- Colocación de imagen/icono: Izquierda
- Usar tamaño de fuente del icono: SÍ
- Tamaño de fuente del icono: 25 px
- Fuente del título: Overpass
- Peso de la fuente del título: Negrita
- Estilo de fuente del título: TT
- Color del texto del título: #1a1e36
- Espaciado entre letras del título: 2px
- Altura de la línea del título: 1,2 em
- Acolchado: 0.6em arriba, 1em izquierda, 1em derecha
- Esquinas redondeadas: 5px en las dos esquinas inferiores
Para posicionar y rotar la propaganda fuera de la sección, use las opciones de transformación de la siguiente manera:
- Transformar Traducir Y: 100px
- Transformar Rotar Z: -90 grados
- Transformar Origen: arriba a la derecha
Avanzado
En la pestaña Avanzado, actualice lo siguiente:
- Clase CSS: et-slide-push-toggle
- Posición: Absoluta
- Ubicación: centro derecho
Adición de 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.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
<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> |
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 fila
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)
Ahora que su barra lateral está lista, todo lo que necesita hacer es agregar cualquier módulo a la segunda fila de la barra lateral según sea necesario. Para este ejemplo, solo copio módulos del diseño de la página de inicio del evento y los pego en la columna de la fila.
Resultado final
Mira el resultado final en la página en vivo.
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 usó para crear la barra lateral en 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 y cree una nueva plantilla y asigne esa plantilla a todas las páginas.
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.
Siguiente clic para. cree una nueva sección encima de la sección de ancho completo. A continuación, haga clic en la pestaña Agregar de la biblioteca y seleccione el diseño de la sección Barra lateral deslizante de la biblioteca.
Una vez hecho esto, puede editar la barra lateral como lo necesite 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 sus páginas tendrán la barra lateral.
Pensamientos finales
Una barra lateral de empuje deslizante es una opción perfecta para aquellos que buscan lo mejor de ambos mundos: una barra lateral que se mantiene 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 de correo electrónico, menús y mucho más.
Espero escuchar de usted en los comentarios.
¡Salud!