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.
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.
Para crear el sidebar oculto con Divi vamos a usar las siguientes herramientas:
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.
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:
SEPARACIÓN:
ID y CLASES CSS:
FONDO:
BORDE:
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:
SEPARACIÓN:
PUESTO:
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):
IMAGEN E ICONO (Pestaña Diseño):
TAMAÑO:
TRANSFORMAR:
VISIBILIDAD:
ID y CLASE CSS:
PUESTO
Ahora vamos a insertar un segundo módulo Anuncio para crear la pestaña de apertura y cierre.
TEXTO:
IMAGEN E ICONO:
FONDO:
IMAGEN E ICONO (Diseño):
TEXTO DEL TITULO:
SEPARACIÓN:
BORDE:
TRANSFORMAR:
ID y CLASE CSS:
PUESTO:
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 ; } /* * 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 ; 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>
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:
SEPARACIÓN:
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.
Al momento de activar el constructor Divi se crea una nueva opción en el menú…
Divi es un constructor para WordPress que se instala como un si fuera un tema…
En esta guía te muestro paso a paso cómo crear una caja con información del…
En esta guía te muestro cómo cambiar el encabezado de la página home para que…
En esta guía vamos a ver cómo asignar con Divi un diseño diferente a entradas…
En esta guía te muestro paso a paso cómo crear un CV digital con WordPress…