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 poner un botón (o destacar una pestaña) en el menú de Divi

Lo primero es que vayas a APARIENCIA > MENÚ y en la pestaña que quieras destacar le pongas la palabra cta en el campo CLASES CSS.

Si en el desplegable del MENU que quieres destacar no ves el campo CLASES CSS ve a la parte superior derecha de tu pantalla y pulsa en OPCIONES DE PANTALLA para activarlo.

Una vez hecho eso te vas a DIVI > OPCIONES DEL TEMA y en la caja de CSS pegas este código


/*------------------------------------------------*/
/*--DESTACAR CON UN FONDO EN UN ENLACE DEL MENU---*/
/*------------------------------------------------*/

.cta {border-radius: 0px;}
.cta a {color: #284775!important;}
li.cta {
background-color:#dd9933;
font-weight: 700;
padding: 8px 8px 10px 10px!important;
border-radius: 5px;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;}
li.cta:hover {background-color:#dd9933;}

/* fixed header button text color */
.et-fixed-header #top-menu .cta a {
color: #fff!important;}
.cta li.current-menu-ancestor > a, .cta li.current-menu-item > a {
color: #fff !important;}

 
@media only screen and (min-width : 981px) {
li.cta {height: 33px;}}

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

<!-- wp:paragraph -->
<p>/<em>------------------------------------------------</em>/<br>/<em>--DESTACAR CON UN FONDO EN UN ENLACE DEL MENU---</em>/<br>/<em>------------------------------------------------</em>/</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>.destacado-menu &gt; a {<br>background-color: #E09900;<br>color: #fff;<br>padding-top: 10px;<br>margin-top: -5px;<br>margin-bottom: 3px;<br>padding-left: 5px;<br>padding-right: 5px;<br>border-radius: 4px;<br>}</p>
<!-- /wp:paragraph -->

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

Aquí debes pergar 2 códigos:

  1. El primero es CSS y debes pegarlo en: Divi > Opciones del Tema > General > La caja de abajo de CSS
  2. El segundo es Javascript y 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 del cabecera

CÓDIGO CSS:

/*-----------------------------------------------------------------------------------------------*/
/*--CSS COLASPSAR O PLEGAR MENU EN EL MOVIL - TAMBIÉN HAY JAVASCRIPT EN EL HEAD DE INTEGRACION---*/
/*-----------------------------------------------------------------------------------------------*/

.et_pb_menu .et_mobile_menu .menu-item-has-children > a,
#main-header .et_mobile_menu .menu-item-has-children > a {
    background-color: transparent;
    position: relative;
}

.et_pb_menu .et_mobile_menu .menu-item-has-children > a:after, #main-header .et_mobile_menu .menu-item-has-children > a:after {
    font-family: 'ETmodules';
    text-align: center;
    speak: none;
    font-weight: 600;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    position: absolute;
    font-size: 18px;
    content: '\4c';
    top: 11px;
    right: 13px;
}

.et_pb_menu .et_mobile_menu .menu-item-has-children.visible > a:after,
#main-header .et_mobile_menu .menu-item-has-children.visible > a:after {
    content: '\4d';
}

.et_pb_menu .et_mobile_menu ul.sub-menu,
#main-header .et_mobile_menu ul.sub-menu,
.et-db #et-boc .et-l .et_pb_menu .et_mobile_menu li ul.sub-menu {
    display: none !important;
    visibility: hidden !important;
    transition: all 1.5s ease-in-out;
}

.et_pb_menu .et_mobile_menu li.visible > ul.sub-menu,
#main-header .et_mobile_menu li.visible > ul.sub-menu,
.et-db #et-boc .et-l #main-header .et_mobile_menu li.visible > ul.sub-menu,
.et-db #et-boc .et-l .et_pb_fullwidth_menu .et_mobile_menu li.visible > ul.sub-menu,
.et-db #et-boc .et-l .et_pb_menu .et_mobile_menu li.visible > ul.sub-menu {
    display: block !important;
    visibility: visible !important;
}

CÓDIGO JAVASCRIPT:

<!-- COLAPSAR MO PLEGAR MENU MOVIL - TAMBIÉN HAY OTRA PARTE EN EL CSS -->
<script>
jQuery(document).ready(function($){
    function ds_setup_collapsible_submenus() {
        var $menu = $('.et_mobile_menu'),
        top_level_link = '.et_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');
                });
            }
        });
    }
    setTimeout(function() {
        ds_setup_collapsible_submenus();
    }, 700);
 });

   
</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" />
¿Qué puntuación le das?
[Total: 1 Media: 5]

No te vayas sin tu regalo, es gratis.

Mis 10 secretos para crear webs de éxito

+ 5 CURSOS GRATIS

Tengo regalitos
para ti 😉

Responsable de los datos: Gonzalo de la Campa Marinas
Finalidad: Enviarte información. | Legitimación: Consentimiento

Destinatarios: Mailchimp y ProfesionalHosting | Duración: hasta que te des de baja.

Derechos e información adicional: Puedes ver todos los detalles en la política de privacidad

Dime dónde te envío la clase

de Lanzamientos Automatizados

Responsable de los datos: Gonzalo de la Campa Marinas
Responsable: Gonzalo de la Campa | Finalidad: Enviarte información. 

Legitimación: Consentimiento | Destinatarios: Mailchimp y ProfesionalHosting  Duración: hasta que te des de baja. | Derechos e información adicional: Puedes ver todos los detalles en la política de privacidad

Dime dónde te envío el vídeo

(pon tu mejor email porfa)

Responsable de los datos: Gonzalo de la Campa Marinas
Finalidad: Enviarte información. | Legitimación: Consentimiento

Destinatarios: Mailchimp y ProfesionalHosting | Duración: hasta que te des de baja.

Derechos e información adicional: Puedes ver todos los detalles en la política de privacidad

Dime dónde te envío

tus regalos

Responsable de los datos: Gonzalo de la Campa Marinas
Responsable: Gonzalo de la Campa | Finalidad: Enviarte información. 

Legitimación: Consentimiento | Destinatarios: Mailchimp y ProfesionalHosting  Duración: hasta que te des de baja. | Derechos e información adicional: Puedes ver todos los detalles en la política de privacidad

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.
Ir al contenido