Te voy a mostrar cómo hacer con Divi y WordPress una barra lateral o sidebar que permanece oculto hasta que hacemos clic en una pestaña. Y de la misma forma es posible abrirlo y cerrarlo a gusto del usuario.
Este tipo de recurso es muy útil para hacer que cierta información destacada se encuentre siempre al alcance del usuario, 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 elementos como ser: pestaña de apertura y cierre, cruz de cierre 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 versión. Consíguelo aquí.
- Módulo Anuncio de Divi. Vamos a usar este módulo para crear la pestaña de apertura y cierre y demás elementos del contenido del sidebar.
- Módulo Código de Divi. Nos va a permitir insertar el código que hará la magia.
- Herramienta de posición de Divi. Nos va a permitir ubicar correctamente los distintos elementos.
- Herramienta Transformar de Divi. Nos va a permitir situar la pestaña y cruz de cierre.
Paso a paso
En el siguiente 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. Luego 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 base.
ID y CLASES CSS:
- Clase CSS: et-push-sidebar
FONDO:
- Color de Fondo: #1a1e36
BORDE:
- Espesor del Borde Derecho: 2px
- Color del Borde Derecho: #eeeeee
Paso 2 – Fila para los elementos de apertura y cierre
Ahora que ya configuramos la sección o sidebar vamos a insertar una primera fila para colocar los elementos de apertura y cierre.
TAMAÑO:
- Uso personalizado del canalón de ancho: 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 cierre
Dentro de la fila insertamos un módulo Anuncio de Divi para crear la cruz de cierre para dispositivos móviles.
IMAGEN E ICONO (Pestaña Contenido):
- Usar ícono: Sí
- Icon: x
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:
- Ancho: 50px
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 apertura y cierre
Ahora vamos a insertar un segundo módulo Anuncio para crear la pestaña de apertura y cierre.
TEXTO:
- Título: Información del Evento
IMAGEN E ICONO:
- Usar ícono: Sí
- Icono: flecha abajo
FONDO:
- Color del fondo: #eeeeee
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 letras del título: 1px
- Altura de línea 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 magia
Y por último agregamos un módulo Código de Divi para insertar el código que se va a ocupar de abrir y cerrar el sidebar cuando hagamos clic.
Pegamos dentro el siguiente 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 sidebar oculto.
La configuramos de la siguiente manera.
TAMAÑO:
- Ancho: 100%
- Altura: 100%
SEPARACIÓN:
- Relleno: 5% Superior, 5% Base, 5% Izquierda, 5% Derecha.
Paso 7 – Añadir contenido al sidebar
Ahora ya podemos agregar el contenido que necesitamos mostrar en el sidebar oculto. Cualquier módulo que queramos tiene que ir en la Fila 2.
Dejame debajo un comentario contándome que te pareció esta posibilidad de Divi y ayudame compartiéndolo para que más personas puedan aprender todo lo que se puede hacer con Divi.
Hola Jorge.
Excelente aporte, funcionar perfecto en PC´s.
He puesto visibilidad en tablet y celular; pero, no funciona. ¿Cómo puedo hacer para que el código funcione también en celulares y tablets?
Gracias por tu respuesta.