Header-inclinado-GeneratePress

Inclinar cabeceras personalizadas en GeneratePress

A veces he querido que las cabeceras personalizadas de GeneratePress tuvieran opciones de personalización respecto a las separaciones. Por ejemplo que pueda inclinar el header o añadir olas o relieves de separación.

Buscando un poco encontré la manera, por lo menos, de inclinar la separación del header a través de un poco de CSS. A continuación os lo cuento brevemente.

Primero de todo, pero, tenemos que crear un nuevo header personlizado y decidir donde queremos que se muestre. En mi caso he cogido una página concreta, pero seguramente lo más normal es establecer una norma que afecte a todas las páginas o, por ejemplo, sólo en la home.

Y lo más importante es etiquetar con una clase personalizada nuestro header. En mi caso lo he llamado inclinado. Así, después sólo tendremos que personalizar a través de un par de líneas de CSS nuestro header. Aquí las tenéis para que las podáis copiar:

/* Cabeceras personalizadas inclinadas */

.inclinado{
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-transform: skewY(-12deg);
    transform: skewY(-3deg);
    -webkit-transform-origin: 0;
    transform-origin: 0;
}

.inclinado h1{
    overflow: hidden;
    -webkit-transform: skewY(12deg);
    transform: skewY(3deg);
    -webkit-transform-origin: 0;
    transform-origin: 0;
	font-size: 50px;
}

No sé si esta es la forma más correcta de inclinar el header, pero en mi caso es el que mejor me ha funcionado. Si tiene alguna otra idea y la quiere compartir sería genial.

Video tutorial de cómo crear una separación inclinada en nuestros headers personalizados

Deja un comentario

Identifícate