• Saltar a la navegación principal
  • Saltar al contenido principal
Código Genesis

Código Genesis

Tutoriales de WordPress y Genesis Framework

  • Empieza aquí
  • Cuenta
    • Suscripción
    • Perfil
    • Actualizar tarjeta
    • Favoritos
    • Salir
  • Suscribirse
  • Acceder

Conseguir que un bloque ocupe el ancho completo en Revolution Pro

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.

ancho completo por defecto tema Revolution Pro
Revolution Pro con contenido de ancho restringido.

Este sería el resultado final:

ancho completo personalizado tema Revolution Pro
Revolution Pro con contenido de ancho completo.

¿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 1803 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 te leo en los comentarios. Y si quieres dejarme una sugerencia para futuros tutoriales, envíamela a través del formulario de contacto.

Todo ventajas de ser suscriptor. 😉

Ancho completo CSS Genesis Framework Revolution Pro

Nahuai Badiola

Desarrollador web especializado en WordPress y Genesis Framework. CEO de Código Genesis y cofundador de OsomPress (temas y plugins para WordPress).

Para dejar dudas o preguntas sobre este código, puedes login o suscribirte.

  • Empieza aquí
  • Sobre Código Genesis
  • Preguntas frecuentes
  • Contacto

Aviso legal · Política de privacidad · Política de cookies · Condiciones de contratación
Copyright © 2023 · Código Genesis

¿Has olvidado tu contraseña?