Muchos de mis alumnos me preguntan cómo hago esto o lo de más allá en mi web y algunas de las cosas que hay están hechas con código CSS u otros códigos.

Uso poco CSS porque como puedes leer en este artículo no soy muy amigo de meter CSS ni código en mis webs ni la de mis clientes, pero te dejo aquí las que uso y dónde coloco cada código por si tú quieres hacer cosas parecidas a las mías.

Todos los códigos CSS que uso los pongo en Divi > Opciones del tema > En la caja de CSS de abajo. Si usas otro tema diferente a Divi tendrás que ponerlo en dónde proceda en el tema que uses.

Código CSS para Ocultar VER CARRITO en la página de CAJA de WooCommerce

Si usas Divi, pega esto en Divi > Opciones del tema > En la caja para CSS de abajo.

/* Ocultar VER CARRITO en la página de CAJA de WooCommerce */
.woocommerce .woocommerce-message {
display: none;
}

Código CSS para quitar el teléfono en el menú secundario o Top en Divi

Si usas Divi, pega esto en Divi > Opciones del tema > En la caja para CSS de abajo.

/* Quita teléfono en el menú secundario o superior de Divi */
et-info-phone { display:none !important }

Código CSS para destacar con un fondo (o convertir en botón) un enlace del menú en Divi

Si usas Divi, pega esto en Divi > Opciones del tema > En la caja para CSS de abajo. Y después ve a Apariencia > Menús y en Opciones de Pantalla (arriba a la derecha) activa Clases CSS y luego en el texto del menú que quieras destacar pon: destacado-menu

/————————————————/
/–DESTACAR CON UN FONDO EN UN ENLACE DEL MENU—/
/————————————————/

.destacado-menu > a {
background-color: #E09900;
color: #fff;
padding-top: 10px;
margin-top: -5px;
margin-bottom: 3px;
padding-left: 5px;
padding-right: 5px;
border-radius: 4px;
}

Código CSS para hacer más ancho el menú desplegable en Divi

Si usas Divi, pega esto en Divi > Opciones del tema > En la caja para CSS de abajo.

/————–ANCHO MENU DESPLEGABLE————/
/————————————————/
top-menu li li a {
width: 460px;
}
.nav li ul {
width: 480px;
}

Código CSS para poner sombras en los menús al pasar con el ratón en Divi

Si usas Divi, pega esto en Divi > Opciones del tema > En la caja para CSS de abajo.

/------------------------------------------------/
/-------------[GQ - FLOATING SHADOW]-------------/
/------------------------------------------------/
#top-menu li {
    padding-right: 5px;}

#top-menu > li > a {
    padding: 15px 15px!important;
    margin-bottom: 15px;}

#top-menu .menu-item-has-children > a:first-child:after {
    display:none;}

#top-menu-nav > ul > li > a {
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    background: #ffffff;
    color: #E28A0D;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;}

#top-menu-nav > ul > li > a:before {
    pointer-events: none;
    position: absolute;
    z-index: -1;
    content: '';
    top: 100%;
    left: 5%;
    height: 10px;
    width: 90%;
    opacity: 0;
    background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, transparent 80%);
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, transparent 80%);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform, opacity;
    transition-property: transform, opacity;}

#top-menu-nav > ul > li > a:hover, 
#top-menu-nav > ul > li > a:focus, 
#top-menu-nav > ul > li > a:active {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    opacity: 1;
    background: #154575;}

#top-menu-nav > ul > li > a:hover:before, 
#top-menu-nav > ul > li > a:focus:before, 
#top-menu-nav > ul > li > a:active:before {
    opacity: 1;
    -webkit-transform: translateY(5px);
    transform: translateY(5px);}

Código CSS para cambiar el tamaño de los H2 en los móviles

Si usas Divi, pega esto en Divi > Opciones del tema > En la caja para CSS de abajo.

/————————————————/
/—TAMAÑO H2 EN MÓVILES—-/
/————————————————/
@media screen and (max-width:720px) {
h2 {
font-size: 30px !important;
}

Código para colapsar el Menú de Divi en el móvil y que aparezca el símbolo + en lugar de todos los submenús

Este código debes ponerlo en Divi > Opciones del Tema > Integración > Body (es la segunda caja) y en los botones de arriba debes tener activado: Activar código del cuerpo

<!-- COLAPSAR O PLEGAR el menú en el móvil -->


<style type="text/css">
#main-header .et_mobile_menu .menu-item-has-children > a { background-color: transparent; position: relative; }
#main-header .et_mobile_menu .menu-item-has-children > a:after { font-family: 'ETmodules'; text-align: center; speak: none; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; position: absolute; }
#main-header .et_mobile_menu .menu-item-has-children > a:after { font-size: 16px; content: '\4c'; top: 13px; right: 10px; }
#main-header .et_mobile_menu .menu-item-has-children.visible > a:after { content: '\4d'; }
#main-header .et_mobile_menu ul.sub-menu { display: none !important; visibility: hidden !important;  transition: all 1.5s ease-in-out;}
#main-header .et_mobile_menu .visible > ul.sub-menu { display: block !important; visibility: visible !important; }
</style>

<!-- JS para menú plegable móvil Divi -->

<script type="text/javascript">
(function($) {
      
    function setup_collapsible_submenus() {
        var $menu = $('#mobile_menu'),
            top_level_link = '#mobile_menu .menu-item-has-children > a';
             
        $menu.find('a').each(function() {
            $(this).off('click');
              
            if ( $(this).is(top_level_link) ) {
                $(this).attr('href', '#');
            }
              
            if ( ! $(this).siblings('.sub-menu').length ) {
                $(this).on('click', function(event) {
                    $(this).parents('.mobile_nav').trigger('click');
                });
            } else {
                $(this).on('click', function(event) {
                    event.preventDefault();
                    $(this).parent().toggleClass('visible');
                });
            }
        });
    }
      
    $(window).load(function() {
        setTimeout(function() {
            setup_collapsible_submenus();
        }, 700);
    });
 
})(jQuery);
</script>

Código para cambiar el color del menú en el navegador en el móvil

Este código debes pegarlo en Divi > Opciones del Tema > Integración > Head (es la primera caja) y en los botones de arriba debes tener activado: Activar código de cabecera

<!-- CAMBIAR EL COLOR DEL NAVEGADOR en el móvil -->
<meta name="theme-color" content="#284775" />
>> VALORA Y COMPARTE ESTE ARTÍCULO:
[Total: 1 Media: 5]

No te vayas sin tu regalo, es gratis.

Mis 10 secretos para crear webs de éxito

+ trucos y recursos gratis para Divi

Tengo regalitos
para ti 😉

Responsable de los datos: Gonzalo de la Campa Marinas
Finalidad de los datos: Enviarte información.
Almacenamiento de los datos: Base de datos alojada en Profesional Hosting (UE)
Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.

Dime dónde te envío el descuento cuándo saque el curso

Responsable de los datos: Gonzalo de la Campa Marinas
Finalidad de los datos: Enviarte información.
Almacenamiento de los datos: Base de datos alojada en Profesional Hosting (UE)
Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.

Dime dónde te debo contactar
si te toca el Pack

Responsable de los datos: Gonzalo de la Campa Marinas
Finalidad de los datos: Enviarte información.
Almacenamiento de los datos: Base de datos alojada en Profesional Hosting (UE)
Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.

Dime dónde te envío

tus regalos

Responsable de los datos: Gonzalo de la Campa Marinas
Finalidad de los datos: Enviarte información.
Almacenamiento de los datos: Base de datos alojada en Profesional Hosting (UE)
Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.

218813

¿Te vas sin tu regalo?

Mis secretos para crear una web de exito

+ trucos y recursos gratis para Divi

Responsable de los datos: Gonzalo de la Campa Marinas
Finalidad de los datos: Enviarte información.
Almacenamiento de los datos: Base de datos alojada en Profesional Hosting (UE)
Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.

Dime dónde te envío

el enlace al webinar

Responsable de los datos: Gonzalo de la Campa Marinas
Finalidad de los datos: Enviarte información.
Almacenamiento de los datos: Base de datos alojada en Mailchimp.
Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.

Abrir chat
1
1. ¿Quieres apuntarte a algún curso? Soy Gonzalo, cuéntame y te ayudo encantado.

2. Si eres ya alumno y tienes dudas de soporte debes escribirme a soporte@cursowordpress-online.com

3. Si no eres alumno y necesitas soporte no podré responderte salvo que contrates soporte en la web o te apuntes a alguno de mis 9 cursos con soporte.