Por defecto, al maquetar una página con Elementor, las secciones pueden ser de ancho completo o dentro de la caja, pero ¿se pueden poner también para que ocupen toda la pantalla del navegador, no solo a lo ancho?
Como ya imaginarás la respuesta es SÍ.
Me refiero básicamente a pasar de esto…
A esto otro…
¿Nos ponemos? Es un truco muy sencillo a la par de efectivo.
Poner a pantalla completa una sección de Elementor
Lo primero es, lógicamente, editar tu página con Elementor. Una vez abierto el maquetador haz los siguientes pasos:
- Edita la sección
- Abre los ajustes de la sección
- Ve a la pestaña Disposición y, primero, extiende la sección
- En el selector de Alto, elige en el desplegable la opción Ajustar a la pantalla.
- Publica los cambios.
Gráficamente sería así:
Como habrás visto es muy fácil, como casi todo con los maquetadores visuales, y en concreto con Elementor.
Nos vemos pronto con más trucos para Elementor.
(13 votos, promedio: 5) Valora este artículo
para ayudar a mejorar la calidad del blog
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
Buenos días Fernando!! Consulta de novato.
Puedes utilizar Elementor si tienes instalado Divi.
Nos vemos en la WordCamp Madrid. Contando los días…
Que tengas un excelente día.
Éxitos y prosperidad.
Sí, pero no en la misma página
Un saludo
Gracias por la rápida respuesta. 🙂
Hola Fernando, ¿existe alguna manera de igualar en alto dos o mas columnas elementor?, o ¿conoces algún extensión que lo haga?, esto es lo hace fácilmente visual composer pero no veo en elementor como hacerlo.
Hola Jesús, un grupo de columnas tienen todas el mismo alto por defecto, o no he entendido…
En visual composer , (soy de los antiguos), existe la una opción de igualar columnas, osea, coges una fila, la divides en dos o tres columnas, añades bloque de textos en cada una con textos diferentes, unos con más y otros una par de palabras, le pones un borde, si no marcas esta opción el borde se encaja al texto, si la marcas el borde de cada bloque tiene el mismo tamaño, y ya en cada bloque puedes poner el texto arriba, en medio …, no le doy el borde a la columna, (da problemas), doy el borde al bloque de texto, en elementor no vi esa opción y creo que es muy interante
Hola Jesús.
En Elementor consigues ese resultado añadiendo bordes o colores de fondo a las columnas, que son display:flex, y por tanto todas de la misma altura, y no debe dar problemas de bordes.
En Elementor contenedores no faltan (quizás sobran), por lo que las posibilidades son muchas.
Hola compañeros, buenos días.
Quería añadir varias puntualizaciones:
La propia documentación de Elementor no aconseja usar la opción de Extender sección a ancho completo usando Javascript, y tampoco es necesario para este ejemplo.
Lo suyo es que el tema ya incluya plantillas a ancho completo, pero de todas formas Elementor incluye una desde su reciente versión 2.
Para ajustar a la altura de pantalla es muy sencillo con Elementor, y también con las nuevas medidas vh y vw de CSS, que se refieren al viewport height y width. Para el 100% de alto usaremos height: 100vh.
Saludos.
Hola Fernando. Una consulta sobre esta opción. Al contrario que con Visual Composer y otras plantillas, al usar la opción «Ajustar a pantalla», si está el header arriba, la sección coge el 100% de alto de la pantalla, y no el 100% de alto disponible, por lo que si quiero un header + una sección que ocupe lo que sobra de alto de pantalla, no sé como hacerlo con Elementor, ya que se pasa de alto si tiene header… No se si hay forma de «restarlo»… Gracias!
Hola, muy buena la ayuda, tal vez sabes como puedo hacer lo mismo pero en movil y tablet, le pongo ajustar a pantalla y funciona bien en escritorio pero en movil y tablet se queda muy pequeño.
GENIO TOTAL!!!!!
Me has ayudado con este asunto que tenia mesessss sin poder resolverlo!
GRACIAS!
hola
quisiera saber si puedo poner una imagen al 100% en la pantalla pero sin bordes.
gracias