Vamos a ver unas cuantas personalizaciones del header en Divi, esa fantástica plantilla para WordPress.

 

Divi WordPress Theme
   
 

 
  •  

    Cambiar el color de fondo, de sólido a semi-transparente cuando se hace scrolling:

1
2
3
4
5
/*Estado original*/
#main-header {background-color: rgba(31,31,31,1);}
 
/*Estado de Scrolling*/
#main-header.et-fixed-header {background-color: rgba(31,31,31,0.5);}

 

El efecto de este tip CSS será el siguiente:

 
 

 

Así se verá el header al cargar la página, se verá solido :

header solido divi

 

Y así se verá el header (semi-transparente) cuando hagamos scrolling en la página:

header divi efecto solido a semi-transparente

 

Por supuesto podemos cambiar el color del fondo RGB y la opacidad deseada.

 

  •  

    Cambiar el tamaño de fuente del teléfono y el email en la barra superior de la cabecera Divi (Top header):

1
2
3
4
/* top header */
   #et-info-phone { font-size:130% } /* phone number */
   #et-info-email { font-size:130% } /* email address */
   #et-info { font-size:130% } /* both at once */

 

El efecto de este tip CSS será el siguiente:

 

Tamaño por defecto del teléfono y el email antes de aplicar el tip CSS:

 cambiar tamaño fuente telefono y email en header divi

 

Tamaño más grande del teléfono y el email, tras aplicar el tip CSS:

cambiar tamaño fuente telefono y email en header

 

  • Aplicar a la cabecera Divi un borde inferior grueso:

1
2
/* header bottom border */
    #main-header {border-bottom: 10px solid #f7ead9;}

 

Efecto de este tip CSS:

Aplicar a la cabecera Divi un borde inferior grueso

 

Como podemos ver, el borde inferior grueso es de color azul. Podemos elegir el color adecuado en hexadecimal y el tamaño de borde en píxeles, para personalizar nuestro borde inferior grueso.

 

  • Ocultar la cabecera cuando hacemos scroll hacia abajo:

1
2
/* hide header on scroll */
  .et-fixed-header { display:none; }

Simple. Oculta la cabecera cuando hacemos scroll.

 

  • Ocultar la cabecera totalmente:

1
2
3
/* hide header */
  #main-header { display:none; }
  #page-container { padding-top:0px !important } /* moves rest of the page up */

Igual, pero elimina la cabecera totalmente.

 

  • Eliminar la sombra gris bajo la cabecera:

1
2
3
4
5
/* hide header shadow */
  #main-header{ 
   -webkit-box-shadow:none!important; 
   -moz-box-shadow:none !important; 
   box-shadow:none !important;}

 

Origen de esta entrada: Divi Snippets and Hacks
 


Etiquetas del articulo: ,


Centro de preferencias de privacidad

Cookies imprescindibles

Se usan para saber si ya aceptaste nuestras políticas y para servir más rápidos los contenidos.

gpdr,wpSGCacheBypass

Cookies de terceros

Usamos cookies de terceros en las que se almacenan externamente para conocer tus usos de navegación, si ya estás suscrito al boletín y los elementos compartidos en redes sociales.

1P_JAR, AID, DSID, IDE, NID, JCS_INENREF, JCS_INENTIM, __cfduid, _ga, _gat, _gat_gtag_UA_16843793_11, _gid,_wpss_h_, _wpss_p_, gadwp_wg_default_dimension, gadwp_wg_default_metric, gadwp_wg_default_swmetric