Cómo Hacer un Sidebar Oculto con Divi

Te voy a mostrar cómo hacer con Divi y WordPress una mostrador vecino o sidebar que permanece oculto hasta que hacemos clic en una pestaña. Y de la misma forma es posible abrirlo y cerrarlo a satisfacción del favorecido.

Este tipo de memorial es muy útil para hacer que cierta información destacada se encuentre siempre al difusión del favorecido, aunque éste siga navegando por la página.

En el ejemplo tenemos la página de invitación a un evento donde se da mucha información sobre el evento y al hacer clic en una pestaña accedemos a los datos más importantes como ser: ubicación, horario, etc.

Cómo Hacer un Sidebar Oculto con Divi

Vamos a insertar en la página una nueva sección que conformará el sidebar y la vamos a mover hasta la parte superior de la página.

Dentro de está sección vamos a ir creando los principios como ser: pestaña de transigencia y cerrojo, cruz de cerrojo para dispositivos móviles, contenido, etc.

Recursos necesarios

Para crear el sidebar oculto con Divi vamos a usar las siguientes herramientas:

• Divi. Actualizado a la última interpretación. Consíguelo aquí.
• Módulo Anuncio de Divi. Vamos a usar este módulo para crear la pestaña de transigencia y cerrojo y demás principios del contenido del sidebar.
• Módulo Código de Divi. Nos va a permitir insertar el código que hará la atractivo.
• Herramienta de posición de Divi. Nos va a permitir ubicar correctamente los distintos principios.
• Herramienta Transformar de Divi. Nos va a permitir situar la pestaña y cruz de cerrojo.

Paso a paso

En el subsiguiente video te muestro paso a paso cómo crear un sidebar que permanece oculto y se abre al hacer clic en una pestaña con Divi.

Paso 1 – Sección para el sidebar

Lo primero que tenemos que hacer es añadir una nueva sección a la página y arrastrarla hasta la parte superior. Lugo le asignamos los siguientes formatos:

PUESTO:

• Posición: Fijo, Izquiera y Arriba
• Indice Z: 100

SEPARACIÓN:

• Ancho: 350px (escritorio y table), 100% (teléfono)
• Altura: 100%
• Relleno: 100px superior, 0px cojín.

ID y CLASES CSS:

• Clase CSS: et-push-sidebar

FONDO:

BORDE:

• Espesor del Borde Derecho: 2px
• Color del Borde Derecho: #eeeeee

Paso 2 – Fila para los principios de transigencia y cerrojo

Ahora que ya configuramos la sección o sidebar vamos a insertar una primera fila para colocar los principios de transigencia y cerrojo.

TAMAÑO:

• Uso personalizado del canalón de orgulloso: Sí
• Espacio entre columnas: 1
• Ancho: 100%

SEPARACIÓN:

• Relleno: 0px Superior, 0px Base

PUESTO:

• Posición: Absoluto.
• Indice Z: 1

Paso 3 – Módulo Anuncio para la cruz de cerrojo

Dentro de la fila insertamos un módulo Anuncio de Divi para crear la cruz de cerrojo para dispositivos móviles.

IMAGEN E ICONO (Pestaña Contenido):

IMAGEN E ICONO (Pestaña Diseño):

• Color del ícono: #eeeeee
• Posición de la Imagen/Icono: Izquierda
• Usar Tamaño de Fuente para el Ícono: Sí
• Tamaño de Fuente para el Ícono: 40px

TAMAÑO:

TRANSFORMAR:

• Desplazamiento X : 50px
• Desplazamiento Y : -10px

VISIBILIDAD:

• Desactivar en: Escritorio y Tableta.

ID y CLASE CSS:

• Clase CSS: et-slide-push-close

PUESTO

• Posición: Fixed.
• Ubicación: Arriba a la Derecha.

Paso 4 – Módulo Anuncio para la pestaña de transigencia y cerrojo

Ahora vamos a insertar un segundo módulo Anuncio para crear la pestaña de transigencia y cerrojo.

TEXTO:

• Título: Información del Evento

IMAGEN E ICONO:

• Usar ícono: Sí
• Icono: flecha debajo

FONDO:

IMAGEN E ICONO (Diseño):

• Color del ícono: #1a1e36
• Image/Icon Placement: Izquierda
• Usar Tamaño de Fuente para el Ícono: Sí
• Tamaño de Fuente para el Ícono: 25px

TEXTO DEL TITULO:

• Fuente del título: Overpass
• Peso del título: Bold
• Estilo del título: TT
• Color del título: #1a1e36
• Espacio entre cultura del título: 1px
• Altura de cadena del título: 1.2em

SEPARACIÓN:

• Relleno: 0.6em Superior, 1em Izquierda, 1em Derecha

BORDE:

• Redondeo de Esquinas: 5px ambas esquinas inferiores.

TRANSFORMAR:

• Desplazamiento Y : 100px
• Rotación : -90deg
• Origen: Arriba a la derecha

ID y CLASE CSS:

• Clase CSS: et-slide-push-toggle

PUESTO:

• Posición: Absoluto.
• Ubicación: Derecha y Centro.

Paso 5 – Módulo Código para hacer la atractivo

Y por extremo agregamos un módulo Código de Divi para insertar el código que se va a habitar de rasgar y cerrar el sidebar cuando hagamos clic.

Pegamos en el interior el subsiguiente 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>

Paso 6 – Fila para añadir contenido

Y ahora insertamos una segunda fila en la que vamos a poner todo el contenido que queramos incluir en este sideba oculto.

La configuramos de la subsiguiente forma.

TAMAÑO:

SEPARACIÓN:

• Relleno: 5% Superior, 5% Base, 5% Izquierda, 5% Derecha.

Paso 7 – Añadir contenido al sidebar

Ahora ya podemos sumar el contenido que necesitamos mostrar en el sidebar oculto. Cualquier módulo que queramos tiene que ir en la Fila 2.

Déjame debajo un comentario contándome que te pereción esta posibilidad de Divi y ayudame compartiéndolo para que más personas puedan estudiar todo lo que se puede hacer con Divi.