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:

 

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

 

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:

 

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:

Simple. Oculta la cabecera cuando hacemos scroll.

 

  • Ocultar la cabecera totalmente:

Igual, pero elimina la cabecera totalmente.

 

  • Eliminar la sombra gris bajo la cabecera:

 

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!