En este tutorial exclusivo de OV DIVI aprenderás a realizar un menú fijo inferior tipo app móvil con ventanas emergentes. La funcionalidad consiste en que al hacer click (o tap) en cada una de las opciones se nos abre una ventana emergente o pop up con la información correspondiente.
El menú de este ejercicio está adaptado a una tienda en línea con woocommerce dónde mostramos las siguientes opciones: Inicio, categoría, buscar, carrito y menú. Pero obviamente tú podrás adaptarlo a tu proyecto y a tus necesidades.
Hola hola bienvenido bienvenida a otro nuevo tutorial. Este tutorial será muy breve y hasta cierto punto sencillo pero realmente útil ya que es algo que me han solicitado mucho y todavía no se puede realizar con divi por defecto. Estoy hablando de cambiar o reemplazar el logotipo en divi al hacer scroll o desplazarnos.
Esto es algo realmente necesario por ejemplo cuando diseñamos una sección transparente para nuestro menú pero al hacer scroll dicha sección cambia a un color de fondo, esto es necesario porque si no usamos la combinación adecuada de colores nuestro logotipo puede perderse con el fondo.
Si bien sabemos, con las nuevas opciones sticky de divi podemos hacer que los elementos de una sección cambien sus propiedades o estilos al hacer scroll, cómo por ejemplo, podemos cambiar tamaños de tipografía, de rellenos, de márgenes incluso podemos cambiar el color de cualquier elemento, pero aún sigue faltando la característica para reemplazar un logotipo o imagen al desplazarnos. Por lo tanto en este tutorial te enseñaré de forma muy práctica como lograr esta funcionalidad.
Solo vamos a requerir de este fragmento de código jquery:
Por defecto diseñar el sub menú desplegable (o dropdown menu) en divi no es posible con los ajustes del módulo divi, para personalizar o cambiar los estilos de este submenu debemos recurrir a un poco de código CSS. Si bien, el sub menú que viene por defecto con divi no es para nada feo, considero que es muy común en los sitios web creados con divi que podríamos descubrir si un sitio está hecho con divi o no gracias a este menú por defecto que viene con este tema.
Por lo tanto, el objetivo de este tutorial es enseñarte a cambiar la apariencia de este sub menú con un poco de código CSS, sin complicaciones.
Para realizar este ejercicio vamos a usar el menú que creamos en el tutorial anterior, si no lo haz visto sería genial que primero le dieras un vistazo. Aunque si tu menú tiene otra composición no hay problema, puedes ver este tutorial y de todas formas vas a lograr cambiar los estilos del sub menú.
Por otra parte, si te urge y no quieres perder mucho tiempo viendo este tutorial, a continuación te dejo el código CSS para que solo lo copies y pegues en el personalizador de temas / CSS personalizado, de esta manera en menos de 1 minuto ya tendrás tu submenu con estilos completamente personalizados.
@media only screen and (min-width: 981px) {
/*** Estilos sub menu divi ***/
.et_pb_menu .sub-menu {
margin-top: 12px;
border-radius: 6px; /* borde redondeado */
border-top: none;
box-shadow: 0px 2px 16px rgb(0 0 0 / 20%);
padding: 12px 0 !important;
}
#page-container .et_pb_menu_0_tb_header.et_pb_menu .nav li ul {
background-color: #ffffff!important; /* color de fondo sub menu */
}
.et_pb_menu .sub-menu li {
padding: 0;
line-height: 1.3;
width: 100%;
}
.et_pb_menu .sub-menu li a {
width: 100%;
padding: 14px 25px;
}
.et_pb_menu .sub-menu li a:hover {
color: #ff6923 !important; /* color enlace hover */
background-color: #f9f9f9; /* color fondo hover */
opacity: 1;
}
/* Icono marcador arriba del submenu */
.et_pb_menu nav > ul > li > .sub-menu:after {
position: absolute;
content:'';
left: 36px;
top: -26px;
border-style: solid;
border-width: 14px;
border-color: transparent transparent #ffffff;
}
}
/* Icono indicador sub menu */
.et-menu .menu-item-has-children>a:first-child:after {
content: "\43";
}
.et-menu li ul .menu-item-has-children>a:first-child:after {
content: "\45" !important;
}
Por el contrario si quieres aprender a modificar los estilos del sub menú con un poco de código CSS no esperes más y dale play al video.
Hola en este tutorial aprenderás a diseñar un menú fijo que se hará más pequeño al desplazarnos sobre la página, es decir, los elementos de nuestro header o encabezado se encogerán una vez hagamos scroll hacía abajo.
Este es un efecto que por defecto lo podemos hacer con el personalizador de temas de divi, pero en esta ocasión lo haremos con el divi theme builder o el generador de temas de divi ya que de esta manera tenemos más libertad a la hora de diseñar nuestros encabezados personalizados.
La verdad me esperé mucho para realizar este tutorial ya que Nick Roach (fundador de divi) hace semanas comentó que una de las próximas actualizaciones de divi serían los «Divi Sticky» y con esta nueva actualización vamos a poder realizar este tipo de efectos de forma más práctica con divi. Ésta es la principal razón por la que no me animaba a grabar este tutorial a pesar de que muchos de ustedes me lo habían estado pidiendo.
Pero ya esperé tanto que llegué a desesperarme y mejor decidí grabar este tutorial de una vez sin importar que en un futuro podamos realizar este efecto con el divi builder por defecto. De todas formas en este tutorial vamos a realizar otros truquitos sobre la marcha que seguro te servirán en tus proyectos, así que no hay nada de desperdicio. ¡Qué disfrutes este video!
A continuación te dejo los fragmentos de código que vamos a utilizar en este tutorial para que solo copies y pegues.
Fragmento para centrar verticalmente los elementos dentro de la fila:
Fragmento jQuery para no superponer el menú fijo sobre la sección:
// No superponer el menu fijo
jQuery(function($){
var headerSection = $('.seccion-menu');
headerSection.wrap('<div class="header-placeholder"></div>');
var headerWrap = $('.header-placeholder');
var headerHeight = headerSection.outerHeight();
headerWrap.css('height', headerHeight);
$(window).resize(function() {
headerHeight = headerSection.outerHeight();
headerWrap.css('height', headerHeight);
});
});
Fragmento jQuery para reducir los elementos de la sección menú al hacer scroll:
// Reducir elementos de la sección menú al hacer scroll
jQuery(document).ready(function( $ ) {
$(window).scroll(function(){
var scroll = jQuery(window).scrollTop();
if (scroll >= 80) {
$(".seccion-menu").addClass("seccion-menu-scroll");
}
else{
$(".seccion-menu").removeClass("seccion-menu-scroll");
}
});
});
Estilos CSS para la sección menú:
/* Estilos menu ov divi */
.seccion-menu, .seccion-menu .et_pb_image img,
.seccion-menu .et_pb_menu ul li a,
.seccion-menu .et_pb_button {
transition: all .3s ease;
}
.seccion-menu.seccion-menu-scroll {
box-shadow: 0px 1px 35px 0px rgba(0,0,0,0.3)!important;
padding-top: 10px !important;
padding-bottom: 10px !important;
transition: all .3s ease;
}
@media only screen and (min-width: 768px) {
.seccion-menu.seccion-menu-scroll .et_pb_image img {
height: 40px !important;
transition: all .3s ease;
}
.seccion-menu.seccion-menu-scroll .et_pb_menu ul li a {
font-size: 16px !important;
transition: all .3s ease;
}
body #page-container .seccion-menu.seccion-menu-scroll .et_pb_button {
background-color: #ff8e60 !important;
color: #ffffff !important;
padding-top: 10px!important;
padding-bottom: 10px!important;
}
}
/* Estilos botón llamada a la acción menú hamburguesa */
body #page-container .btn-principal {
margin: 14px 10px 10px 10px;
}
body #page-container .btn-principal a {
color: #ffffff !important;
border-color: #ff8e60 !important;
background: #ff8e60 !important;
border-radius: 100px;
letter-spacing: 1px;
text-transform: uppercase!important;
padding: 12px 25px 10px 25px;
}
Estilos CSS para algunos ajustes en el menú móvil:
/* Ajustes responsive menú móvil */
@media only screen and (min-width: 981px) {
.btn-principal {
display: none !important;
}
}
@media only screen and (max-width: 980px) {
.seccion-menu .et_pb_menu__wrap {
justify-content: flex-end !important;
}
}
.et_mobile_menu {
margin-top: 10px;
width: 200%;
margin-left: -100%;
}
/* Cambiar icono hamburguesa a "X" cuando esta abierto */
.mobile_nav.opened .mobile_menu_bar:before {
content: '\4d';
}
Hola qué tal bienvenido, bienvenida a otro tutorial exclusivo de ovdivi.
Anteriormente ya hemos diseñado un bonito menú hamburguesa con desplazamiento lateral pero en esta ocasión te voy a enseñar a diseñar un perfecto menú hamburguesa fullpage o a pantalla completa totalmente responsive, obviamente lo diseñaremos con el generador de temas de divi más conocido como divi theme builder.
Lo increíble de este tutorial (y de todos los tutoriales exclusivos de ov divi) es que no necesitamos complementos o plugins costosos y muchas veces malos que venden en el mercado. Este menú lo vamos a diseñar completamente con el divi builder y al final solamente agregaremos un pequeño fragmento de código css y js para agregar los estilos del icono hamburguesa y la funcionalidad del mismo.
Esto quiere decir que tú podrás darle el diseño que quieras a tu menú con secciones, filas, columnas y módulos, podrás crear la composición que desees y la que más se adapte a las necesidades de tu proyecto. La verdad lo que nos hará falta es creatividad. 🤪
Recuerda que el acceso a este tutorial y muchos más es por sólo $6.00 USD al mes (puedes cancelar cuando quieras). Aquí te dejo el enlace por si quieres formar parte de OV DIVI PRO: ¡Vuélvete pro haciendo click aquí!
