Cómo poner una sección a pantalla completa en Elementor

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:

  1. Edita la sección
  2. Abre los ajustes de la sección
  3. Ve a la pestaña Disposición y, primero, extiende la sección
  4. En el selector de Alto, elige en el desplegable la opción Ajustar a la pantalla.
  5. 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 ...

FlojitoNo está malEstá bienMe ha servidoFantástico (5 votos, promedio: 5,00 de 5)
Cargando…

Autor: Fernando

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran. Autor del libro WordPress - La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad

Al dejar un comentario se solicitan datos como tu correo y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad y la del servicio externo Disqus que las gestiona y almacena.

8 comentarios

  1. 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.

    Publica una respuesta
  2. 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.

    Publica una respuesta
    • Hola Jesús, un grupo de columnas tienen todas el mismo alto por defecto, o no he entendido…

      Publica una respuesta
      • 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

        Publica una respuesta
        • 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.

          Publica una respuesta
  3. 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.

    Publica una respuesta

Envía un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Pin It on Pinterest