Consigue con este tutorial que un bloque o sección del child theme de Genesis Revolution Pro ocupe el ancho completo.
Una de las ventajas de ser suscriptor de Código Genesis es que puedes proponer tutoriales.
El otro día, un suscriptor preguntó cómo se podía conseguir que una sección ocupara todo el ancho en el child theme de Genesis Revolution Pro.
Y es que, a pesar de que el tema está optimizado para el editor de bloques y ofrece las opciones de ancho amplio y ancho completo, por defecto este último no ocupa todo el ancho.
Este sería el resultado final:
¿A ti también te interesa? Entonces, sigue leyendo. 😉
Pasos para que una sección de Revolution Pro ocupe todo el ancho de página
1. Da una clase CSS a la sección
Como lo que quieres es que el ancho completo se aplique solo a una sección y no a toda la página, lo que tienes que hacer es añadir una clase CSS específica a dicho bloque o sección.
Puedes hacerlo seleccionando el bloque y añadiendo la clase true-alignfull en el apartado Clases CSS adicionales:
2. Aplica estilos a la clase CSS
Añade el siguiente fragmento al final del fichero style.css:
Para ver este código y los otros 1307 snippets de esta web,
identifícate o suscríbete aquí.
Con esto consigues:
- Fijar que el ancho máximo del contenido sea 1600px.
- Aumentar el margen negativo.
- Fijar un alto máximo de 800px a la imagen y usar object-fit: cover (para que no la deforme).
Esta segunda parte solo será necesaria si estás usando un bloque de imagen.
Obviamente, estos valores puedes cambiarlos a tu gusto.
Esto solo afectará a pantallas mayores de 1000px de ancho y bloques donde hayas elegido el diseño de ancho completo además de haber añadido la clase de CSS personalizada (paso 1).
Conclusión
Ahora sabes cómo hacer que una sección de Revolution Pro ocupe todo el ancho con solo modificar unas pocas líneas de CSS.
Si tienes alguna duda sobre este tutorial déjala en los comentarios.
¿Sugerencias para próximos snippets? Envíamelas con el formulario de contacto.
Todo ventajas de ser suscriptor.
