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:

/*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):

/* 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:

/* 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:

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

Simple. Oculta la cabecera cuando hacemos scroll.

 

  • Ocultar la cabecera totalmente:

/* 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:

/* 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: ,


Suscríbete para acceder a la zona privada

Suscribiéndote a la lista de correo de El Taller del Bit conseguirás entrar a la zona privada de descargas con materiales exclusivos (ebooks, artículos privados, plugins, descargas de exámenes resueltos ...)

Gracias. Te has suscrito con éxito!