Cómo Hacer un Sidebar Oculto con Divi

[et_pb_dmb_breadcrumbs _builder_version=»4.16″ _module_preset=»6bf26f01-8d85-4787-879c-b67019428900″ module_alignment=»center» global_colors_info=»{}»][/et_pb_dmb_breadcrumbs]

WordPress es Mejor con Divi

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.

Jorge B.

Jorge B.

En 2013 fundé Aventura Digital para ayudar a profesionales y emprendedores independientes a tener su sitio web profesional con WordPress.

Curso Gratis de WordPress con Divi

WordPress es Mejor con Divi

Algunos de los enlaces que hay en esta página son enlaces de afiliado. Ésto significa que si haces clic en el enlace y compras el producto recibo una pequeña comisión que me ayuda a seguir generando nuevos contenidos.

1 Comentario

  1. Martin

    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.