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.
Valora este artículo para mejorar la calidad del blog ...
(5 votos, promedio: 5,00 de 5)
Cargando…
6 abril, 2018
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.
6 abril, 2018
Sí, pero no en la misma página
Un saludo
6 abril, 2018
Gracias por la rápida respuesta. 🙂
7 abril, 2018
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.
7 abril, 2018
Hola Jesús, un grupo de columnas tienen todas el mismo alto por defecto, o no he entendido…
8 abril, 2018
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
8 abril, 2018
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.
7 abril, 2018
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.