Crear páginas de desplazamiento a pantalla completa en Elementor también es muy fácil y conveniente. Para lograrlo, vamos a utilizar un complemento llamado fullPage.js . Existen otros métodos para lograr este efecto, como el desplazamiento de CSS o los complementos de Elementor . Sin embargo, fullPage.js ofrece la mejor solución en cuanto a compatibilidad, capacidad de respuesta y facilidad de uso.

Creación de sitios web de desplazamiento de pantalla completa en Elementor

Ahora vamos a demostrar el proceso de creación de un sitio web de desplazamiento de página completa en Elementor.

Paso 1: cargando fullPage.js

Para usar las funciones del complemento fullPage.js , primero debemos cargarlo.

El siguiente código debe agregarse al encabezado de nuestro sitio web para que se cargue correctamente:

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.extensions.min.js"></script>

Necesitamos un complemento para ejecutar este código porque Elementor actualmente no ofrece un medio para agregar código al encabezado del sitio. Aunque hay varios complementos que pueden agregar código a nuestro encabezado, he descubierto que este es el más fácil de usar.

Seleccione Agregar HTML personalizado en CSS personalizado & JS en el panel de WordPress después de instalar el complemento. Ahora, pegue el código mencionado anteriormente, asegurándose de colocarlo tanto en el encabezado como en la parte delantera.

El siguiente paso es incluir algunos JS únicos. Para inicializar fullPage.js y establecer sus opciones y procedimientos, debemos utilizar jQuery. Estas son algunas opciones fundamentales que se aplican a todos los sitios con desplazamiento vertical.

jQuery(document).ready(function($) {
    $('#fullpage').fullpage({
        //options here
        scrollingSpeed: 1000,
        navigation: true,
        slidesNavigation: true
    });
    //methods
    $.fn.fullpage.setAllowScrolling(true);
});

Asegúrese de incluir este código en el pie de página del front-end.

También establecemos nuestra configuración de página completa en esta fase. El ejemplo anterior incluye puntos de navegación, que aparecerán en el lado derecho de nuestro sitio de desplazamiento, así como el mínimo de opciones necesarias para un sitio de desplazamiento de página completa. Cuando modifiquemos nuestro diseño para que sea receptivo, repasaré más alternativas. Visite la documentación oficial para obtener más detalles sobre sus opciones.

Paso 2: configurar la página de Elementor

fullPage.js requiere el siguiente marcado para nuestra página de desplazamiento.

<div id="fullpage">
    <div class="section">Section 1</div>
    <div class="section">
        <div class="slide">Slide 2.1</div>
        <div class="slide">Slide 2.2</div>
        <div class="slide">Slide 2.3</div>
    </div>
    <div class="section">Section 3</div>
</div>

Los divs individuales de nuestra página de desplazamiento con la sección de clase serán secciones de pantalla completa. Utilizar plantillas es el enfoque más simple para hacer que esto funcione con Elementor.

Primero configuremos nuestra página real. Cree una nueva página en Pages, asígnele un título y una URL adecuados, y luego edítela con Elementor.

Cree una sección con una columna en Elementor ahora. Queremos agregar un HTML-Widget a esta columna. Este widget, que incluye códigos abreviados para cada diapositiva individual, servirá como marco de nuestra página. Queremos agregar el siguiente código:

<div id="fullpage">
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
</div>

Verifique que la sección sea de ancho completo. Además, debido a que no queremos el relleno que Elementor agrega de forma predeterminada a las columnas, establezca el relleno de la sección y la columna en 0.

Después de crear las diapositivas reales en los pasos posteriores, modificaremos la identificación de la plantilla de Elementor a su valor correcto.

Paso 3: Configurar secciones

El último paso es crear y guardar por separado cada sección como una plantilla.

Necesitará Elementor Pro para usar códigos cortos. Ha llegado el momento de comprarlo si aún no has pensado en hacerlo. Tienes todas las herramientas que necesitas para construir un sitio web usando Elementor. ¡No es necesario comprar siempre un tema nuevo!

Cree una nueva sección yendo a Plantillas - Agregar nuevo.

Ahora se creará la primera diapositiva de nuestro sitio de desplazamiento de página completa. Cree una nueva sección en Elementor y establezca su altura en "Ajustar a la pantalla". Ahora que ha agregado su material, puede diseñarlo. Solo asegúrese de que cada plantilla contenga una parte como máximo. Para crear un diseño único, puede usar tantas columnas y columnas internas como desee.

Guarde su diapositiva cuando haya terminado, luego regrese a sus Plantillas de Elementor. La plantilla que desarrolló recientemente debería aparecer ahora en la lista. Tome la identificación de esta plantilla y péguela en la página que creamos en el Paso 2 copiándola.

Ahora repita este procedimiento para cada diapositiva que tenga. Cada plantilla debe tener un área con una altura que se ajuste para que coincida con la pantalla.

Terminando

¡Eso es todo, entonces! Esta es la forma más sencilla de crear páginas de desplazamiento a pantalla completa con fullPage.js en Elementor . Espero que esto pueda ayudarlo a diseñar un sitio web sencillo y minimalista para sus futuras empresas.