Cómo crear una barra lateral deslizante en la división

Las barras laterales pueden ser excelentes, pero también pueden ser un desperdicio de espacio. Por lo tanto, crear una barra lateral deslizante puede ser una opción perfecta para aquellos que desean tener una barra lateral que no distraiga al usuario al 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 por el hecho de que la barra lateral se desliza desde el lado izquierdo de la página mientras empuja (o exprime) el contenido principal de la página para que se ajuste a la barra lateral a la ventana de vista. En resumen, desliza la barra lateral y empuja la página.
Una vez que se construye la barra lateral, se convierte en una herramienta versátil para todo tipo de aplicaciones, incluidos menús y formularios. ¡Vamos a eso! Él saca la vista con un vistazo rápido al diseño que construiremos en este tutorial. Descargue su aspecto gratuito para poner sus manos en el aspecto deslizante de la barra lateral Push en este tutorial, primero deberá descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Para importar la aparición de la sección en la Biblioteca de la Divica, navegue en la Biblioteca de la Divica.
Haga clic en el botón Importar. En la ventana de portabilidad emergente, seleccione la pestaña Importar y elija el archivo de descarga en su computadora. Luego haga clic en el botón Importar.
Después de haber terminado, la aparición 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 la apariencia de la sección en la biblioteca.

Pasemos al tutorial, ¿no? ¿Qué tienes que comenzar a comenzar? Deberás hacer lo siguiente:

Si aún no lo ha hecho, instale y active el tema de Div.
Cree una nueva página en WordPress y use Divi Builder para editar la página principal (Visual Builder).
Elija la opción “Elija un aspecto prefabricado”.
Elija el paquete de eventos y haga clic para usar la página de inicio del evento.

Cómo crear una barra lateral deslizante en la división para crear la barra lateral deslizante, necesitaremos usar una nueva sección regular. Dimensionaremos y colocaremos la sección para convertirse en una barra lateral fija que se abre cuando haga clic en un botón, presionando (y apretando) la zona de contenido principal para dejar espacio para la barra lateral. Una nueva sección habitual en 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 el puesto que se corregirá de la siguiente manera:

Posición: fijo

IND ÍNDICE: 9999
En la pestaña Diseño, actualice el tamaño y el espacio de la siguiente manera:
Ancho: 350 PX (escritorio y tableta), 100% (teléfono)

Altura: 100%
Forro: 100 px arriba, 0 px abajo
El forro es para dejar espacio para el encabezado en la parte superior de la página. Luego, en la pestaña avanzada, le dé a la sección una clase CSS:
Clase CSS: ET-Push-Sidebar

Una vez que la clase CSS esté en su lugar, déle a la sección un color de fondo:
Color de fondo: # 1A1E36

Para crear una separación más visible, regrese a la pestaña de diseño y agregue un borde recto.
El ancho del borde recto: 2 PX

El color del borde derecho: #EEEEEE
Se encarga de la sección que sirve como el contenedor principal para nuestra barra lateral. Ahora es el momento de comenzar a construir los dos botones que usaremos para abrir la barra lateral y luego cerrarse. Crear los botones de conmutación de la barra lateral serán dos botones utilizados para cambiar 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 haya abierto. “X” se construirá usando un módulo de propaganda. El segundo es el botón de conmutación principal que construiremos utilizando un módulo de rotación que se gira con texto vertical y se coloca absolutamente adyacente a la barra / sección lateral. Creación de la fila para los botones Cree una nueva fila con una sola columna en la sección / barra lateral.
Abra la configuración de la fila y actualice lo siguiente:

El ancho de la canaleta: 1
Ancho: 100%

Forro: 0 px arriba, 0 px abajo
En la pestaña avanzada, actualice las opciones de posición de la siguiente manera:
Posición: Absoluto
IND ÍNDICE: 1

Creando el icono de cierre “X” para crear el icono de cierre “X”, agregue un módulo de propaganda en una fila. Puede ser más fácil agregar un nuevo módulo usando las capas, porque las cosas serán un poco difíciles de hacer clic.
Contenido luego abra la configuración de la propaganda. En la pestaña Contenido, elimine el título y el contenido del cuerpo y agregue el icono X al propaganda.
Usa el icono: si

Icono: x (ver captura de pantalla)

Diseño en la pestaña Diseño, actualice lo siguiente:
Icono de color: #EEEEEE
Imagen-Pictograma: Izquierda

Use el tamaño de fuente de iconos: sí
Icono de tamaño de fuente: 40 PX
Ancho: 50 PX
Luego, levante el icono ligeramente agregando la siguiente propiedad de traducción del transformador: Turn X X: 100 PX
Giro Y: -10px
Avanzado en la pestaña avanzada, apague la propaganda de la tableta y el escritorio para que solo podamos verla en la pantalla del teléfono.

Desactivar: tableta y escritorio

Luego agregue una clase CSS a la propaganda y déle una posición fija para que permanezca visible cuando ejecute el contenido de la barra lateral en la pantalla del teléfono.
Clase CSS: ET-Slide-Push-Close

Posición: fijo
Ubicación: a la derecha a la derecha

Esto se encarga del icono de cierre del botón “X”. Creando el botón de conmutación principal de la barra lateral para crear el botón de conmutación de la barra lateral principal, agregue un módulo de propaganda debajo del desenfoque del icono existente.
Contenido actualiza el título y haga clic para usar el icono de flecha hacia abajo.
Título: Información del evento
Usa el icono: si

Icono: flecha hacia abajo (ver captura de pantalla)

Luego agregue un color de fondo a la propaganda.
El color del fondo: #EEEEEE
Diseño en la pestaña Diseño, actualice lo siguiente:
Icono de color: # 1A1E36

Colocación de la imagen / icono: izquierda
Use el tamaño de fuente de iconos: sí

Icono de tamaño de fuente: 25 PX
Fuente del título: paso elevado
Título Fuente de peso: Bold
Título del estilo de fuente: TT
Color de texto del título: # 1A1E36
Cartas de título Espaciado: 2 PX
Altura de la línea de título: 1.2em
Revestimiento: 0.6em arriba, 1em a la izquierda, 1em a la derecha
Esquinas redondeadas: 5 px en las dos esquinas inferiores
Para colocar y rueda el pedido fuera de la sección, use las opciones de transformación de la siguiente manera:
Giro Y: 100 PX
Transformación de rotación z: -90 grados
Transforme el origen: derecho sostenido en la pestaña Avanzada, actualice lo siguiente:

Clase CSS: ET-Slide-Push-Toggle
Posición: Absoluto
Ubicación: Centro a la derecha
Agregando un 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 función Push 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 al módulo de código.
#Page-Container, #et-Main-rea, .et-Push-sidebar, .et-slide-push-toggle .et-pb-icon {
Transición: ¡todos los 300 ms! Importantes;
}

/*

* Uso del uso de templăt en blanco sin escucha ni pie de página
*
#Page-container.et-Push-sidebar-active {
Margen-izquierda: 350px;
}
*/
#Page-container.et-Push-sidebar-Activi #et-Main-rea {
Margen-izquierda: 350px;
}
.et-empush-sidebar {
Transform: traduceX (-100%);
}
.ET-FB .ET-Push-SideBar {
Transform: traduceX (0%);
}
.Et-Push-SideBar-Active .et-Push-SideBar {
Transform: traduceX (0%);
}
.Et-Slide-Push-Toogle, .et-deslide-Push-Close {
Cursor: puntero;
}
.Et-Push-SideBar-Active .ET-Slide-Push-Togle .et-Pb-icon {
Transformación: rotado (180 grados);
}
@Media All y (Max-Width: 767px) {
.Et-Push-SideBar-Active .et-Push-SideBar {
Desbordamiento: ¡desplazamiento! Importante;
Sobre-scroll-behavior: contener;
}
#Page-Container.et-Push-SideBar-Active #et-Main-Rea, #Page-container.et-Push-sidebar-active {
Margen-izquierda: 0px;
}
}

(función ($) {
$ (documento) .Ready (function () {
$ (‘. Et-slide-Push-toggle’). Click (function () {
ps
});
$ (‘. ET-Slide-Push-Close’). Click (function () {
$ (‘#Page-Container’). RemoveClass (‘et-Push-sidebar-active’);});
});
}) (JQuery);

Crear la fila de contenido de la barra lateral La primera fila que creé fue para los botones y el código que hace la barra lateral. 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 con una columna debajo de la barra / sección lateral.
Configuración de fila Abra la nueva configuración de fila e ingrese lo siguiente:
Ancho: 100%
Altura: 100%
Revestimiento: 5% más, 5% inferior, 5% izquierda, 5% derecho
En la pestaña Avanzada, actualice las opciones de superación de la siguiente manera:

Overflow Horizontal: desplazamiento (escritorio y tableta), automóvil (teléfono)

Desbordamiento vertical: desplazamiento (escritorio y tableta), automóvil (teléfono)
Llenar la barra lateral con contenido / módulos ahora que la barra lateral está lista, todo lo que tiene que hacer es agregar cualquier módulo a la segunda fila, según sea necesario. Para este ejemplo, solo copio módulos de la apariencia de la página de inicio y los pego en la columna de fila.
Resultado final Verifique el resultado final en la página en vivo. Agregar la barra lateral deslizante a una plantilla de página si desea usar esta barra lateral en todas sus páginas. Guarde la apariencia de la sección en el DIV para esta biblioteca, primero, guarde la sección que se usó para crear la barra lateral en el DIV. Puede hacer esto haciendo clic en los tres puntos en la barra lateral en las capas modales, agregar el aspecto y guardarlo en la biblioteca.
Cree una nueva plantilla de página Luego, vaya al generador de temas y cree una nueva plantilla y asigne la plantilla respectiva a todas las páginas. Entregando la barra del lado deslizante, luego haga clic para editar la plantilla de página.

En el editor de diseño de las plantillas, agregue una nueva sección de ancho completo.
Luego ingrese un módulo de contenido de publicación de ancho completo en la sección.
Luego haga clic. Cree una nueva sección sobre la sección de ancho completo. Luego haga clic en la pestaña Agregar en la biblioteca y seleccione la sección deslizante de la barra lateral de Push en la biblioteca.

Después de que haya terminado, puede editar la barra lateral, sin embargo, necesita usar el editor de atención corporal.

Guarde 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 deslizante es una opción perfecta para aquellos de ustedes que buscan lo mejor de ambos mundos, una barra lateral que permanece en primer plano sin eliminar (o distraer) el contenido principal de la página. Siéntase libre de usarlo para todo tipo de cosas, como formularios de registro, opciones de correo electrónico, menús y más. Espero tener noticias suyas en los comentarios. ¡Suerte!