Paddings diferentes para las entradas individuales en GeneratePress

Margenes diferentes para las entradas individuales a Generatepress

Al personalizador de GeneratePress puedes modificar el padding (márgenes internos) de los contenedores. Basta con acceder a diseño de pantalla / contenedor / content padding. Pero qué pasa si necesitamos o queremos padding diferentes dependiendo de si nos encontramos en un artículo individual o en un listado de post?

En mi caso siempre prefiero aumentar los padding en los artículos individuales (puedes verlo en este diseño de página que estás leyendo ahora). Así hago que el artículo respire y sea más fácil de leer. En cambio en los archivos de post los márgenes pueden ser inferiores, sobre todo si los listados los haces en recuadros (con el clásico margen de color blanco). En este caso pues habrá que aplicar un poco de CSS.

En primer lugar elegiremos el padding que necesitamos en el archivos de post en el personalizador de GeneratePress (diseño de pantalla / contenedor / content padding).

En segundo lugar elegiremos el padding que queramos en los artículos individuales a partir de CSS. Este lo podemos insertar a través del propio personalizador (CSS adicional), a través de un plugin (simple CSS) o añadiendo a la nuestro archivo de CSS si hemos creado un Child theme.

El código CSS sería el siguiente:

body.single .inside-article {
	padding: 80px;
    }

En este caso, sólo será necesario modificar el número 80 por los pixels deseados. Así de fácil.

Y si quieres establecer padding diferentes a la derecha o a la izquierda, por encima y por debajo sólo habrá que crear diferentes padding. Os dejo debajo el ejemplo:

body.single .inside-article {
	padding-top: 40px;
	padding-bottom: 40px;
	padding-left: 20px;
	padding-right: 20px;
    }

Este padding en artículos individuales también se verá en los móviles. Esto puede hacer que sea demasiado exagerado los márgenes laterales. Para modificar los padding en el móvil tienes que usar las media queries. Por ejemplo puedes utilizar el código siguiente:

@media only screen and ( max-width: 767px ) {
body.single .inside-article {
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 15px;
	padding-right: 15px;
    }
}

Así, estos padding sólo se aplicarían en dispositivos inferiores a 767 pixels. Como en el caso de antes puedes modificar los parámetros cambiando los números.

Video tutorial de cómo establecer márgenes diferentes en los artículos individuales en GeneratePress

Y no sólo podemos establecer márgenes diferentes a las entradas individuales del bloque, sino que también podemos modificar los márgenes interiores de páginas, custom post types … Si os interesa sólo lo tienes que comentar. Nos vemos!

Deja un comentario

Identifícate