Cómo crear un sitio web con desplazamiento de página completa en Elementor

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

Creación de sitios web con desplazamiento en 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: cargar fullPage.js

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

Se debe agregar el siguiente código 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 existen varios complementos que pueden agregar código a nuestro encabezado, descubrí que este es el más fácil de usar.

Seleccione Agregar HTML personalizado en CSS y JS personalizados en el Panel de WordPress después de instalar el complemento. Ahora, pega el código antes mencionado, asegurándote de colocarlo tanto en el encabezado como en la interfaz.

El siguiente paso es incluir algunos JS únicos. Para inicializar fullPage.js y configurar sus opciones y procedimientos, debemos utilizar jQuery. A continuación se presentan 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 de la interfaz.

También configuramos 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 responsivo, repasaré más alternativas. Visite la documentación oficial para obtener más detalles sobre sus opciones.

Paso 2: configurar la página 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 método más sencillo para 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 widget HTML a esta columna. Este widget, que incluye códigos cortos 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 tenga el ancho completo. Además, como 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 poder utilizar códigos cortos. Ha llegado el momento de comprarlo si aún no has pensado en hacerlo. Tiene todas las herramientas que necesita para crear un sitio web con Elementor. ¡No es necesario comprar siempre un tema nuevo!

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

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úrate de que cada plantilla contenga una parte como máximo. Para crear un diseño único, puede utilizar 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 repite este procedimiento para cada diapositiva que tengas. Cada plantilla debe tener un área con una altura ajustada para que coincida con la pantalla.

Terminando

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