Agregar FullPage.JS a Elementor (sin complemento)

En este tutorial, agregaremos Fullpage.js a Elementor , una biblioteca de JavaScript única que le permite desplazarse automáticamente entre las secciones de la página de pantalla completa. Esto puede agregar una apariencia profesional a su sitio web Elementor y es una de las bibliotecas de JavaScript más populares que existen por eso.

Creamos esta guía para mostrarle una forma sencilla de incorporar Fullpage.js en su sitio web utilizando nada más que el bloque de elementos HTML. Tenga en cuenta que hay un complemento premium de WordPress que cuesta $ 39.00 y le permite incorporar Fullpage.js directamente en su sitio web Elementor.

Esencialmente, toma la biblioteca Fullpage.js y configura las cosas automáticamente, ofreciéndole una interfaz de usuario bastante gráfica.

Aquí, vamos a discutir la forma manual más barata. Este tutorial está creado para alguien que no esté familiarizado con JS, pero si esto se le pasa por la cabeza, considere revisar el complemento.

Instalar FullPage.JS en Elementor

Como su nombre indica, esta biblioteca de JavaScript le permite desplazarse entre las secciones de la página de Elementor en pantalla completa. A medida que desplaza el mouse hacia abajo, la pantalla pasa a la siguiente sección. Aquí hay un ejemplo de eso en acción:

En este ejemplo, parece bastante simple, pero en una implementación real, un diseñador de sitios web probablemente usaría animaciones y transiciones complejas para mostrar el contenido como la página completa. La biblioteca JS ajusta la sección a la ventana gráfica.

Si está buscando inspiración, aquí hay una colección de sitios web que usan esta biblioteca de JavaScript:

Una cosa a tener en cuenta: si planea usar este comercial, necesitará una licencia comercial. Esto comienza en 9 libras (una vez), por lo que no es tan malo. También es gratuito para proyectos de código abierto que sean compatibles con GPLv3.

Ahora que sabemos qué hace la biblioteca y cómo funciona, trabajemos para incorporarla en un sitio web de Elementor sin usar el complemento. Esto no solo nos ahorrará dinero, sino que también nos dará más flexibilidad y poder.

Configurar la página de Elementor

Primero, configure su página de Elementor.

Para nuestro ejemplo, agregamos tres secciones individuales de Elementor, estableciendo la altura para que sea igual a la ventana gráfica. Puede agregar tantas secciones como desee, solo asegúrese de que tengan la misma altura que la ventana gráfica. Después de todo, FullPage.JS está hecho para páginas completas; sin esta configuración, la integración no tendría sentido.

Dentro de cada sección, coloque su contenido. Este ejemplo no profundiza demasiado en los casos de uso práctico de esta biblioteca, pero normalmente llenaría cada página con un contenido mínimo que apunta a subpáginas. Por ejemplo, si tiene un sitio web de agencia, puede usar Fullpage.js en la página de inicio, con cada sección individual mostrando su cartera, servicios, héroe, formulario de contacto y más.

A medida que su usuario se desplaza hacia abajo en la página, será recibido con elementos que ingresan a la ventana gráfica a través de animaciones CSS o paralaje. Ambos son efectos que se incluyen en cualquier instalación nativa de Elementor y Elementor Pro.

Finalmente, asigne a cada sección una clase CSS personalizada de ” .slide “. Esto se hace yendo a “Avanzado” en el editor de Elementor y configurando la clase allí.

Una vez que su página está configurada, es hora de instalar la biblioteca JavaScript en el sitio de Elementor.

Agregue Fullpage.JS y Fullpage.css a Elementor

Esta biblioteca de JavaScript también necesita tener una hoja de estilo CSS incluida. Ambos se cargan en nuestra página de Elementor mediante el uso de un CDN. Recomendamos esta ruta ya que no necesita mantener el código base usted mismo.

Cuando se trata de incorporar bibliotecas de JavaScript en Elementor, tiene dos opciones. El método más permanente sería agregar las etiquetas <script> al encabezado de su sitio web de WordPress a través de PHP. Si desea aprender cómo hacerlo, siga este artículo.

https://isotropic.co/add-code-to-wordpress-head/

En nuestro ejemplo, integramos los dos archivos en nuestro sitio web sirviéndolos a través de un CDN y usando un bloque HTML para agregarlos a nuestra página. Si solo estuviera usando esta biblioteca en una página individual, o un rango de páginas, este método podría ser mejor porque no necesita llamar a la CDN para cada página, que es lo que sucedería si lo agregara al encabezado de su sitio web de WordPress (Esto hace que Elementor se cargue más rápido ).

Toma un bloque HTML e insértalo en tu página de Elementor. Luego, agregue los archivos fullpage.min.css y fullpage.min.js a su sitio.

El código debería verse así:

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

Utilice este servicio como su archivo CDN. Puede copiar y pegar los enlaces directamente desde este sitio web y, al hacerlo, se asegurará de tener la versión más actualizada de los archivos.

En este punto, cuando cargue su página en la interfaz, tanto la hoja de estilo CSS en el archivo JavaScript se cargará en el período de la página. Ahora es el momento de inicializar JavaScript y aplicarlo a cada sección individual, obteniendo el efecto de desplazamiento rápido. que viene con fullpage.js.

Inicializar Fullpage.JS en Elementor

Para hacer esto, simplemente agregaremos otra colección de código al elemento HTML que ya está en su página.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.extensions.min.js"></script>
<script>
var myFullpage = new fullpage('.elementor-inner', {
    
    	//Navigation
	menu: '#menu',
	lockAnchors: false,
	anchors:['firstPage', 'secondPage'],
	navigation: false,
	navigationPosition: 'right',
	navigationTooltips: ['firstSlide', 'secondSlide'],
	showActiveTooltip: false,
	slidesNavigation: false,
	slidesNavPosition: 'bottom',

    //Scrolling
    css3: true,
    scrollingSpeed: 700,
    autoScrolling: true,
    fitToSection: true,
    fitToSectionDelay: 1000,
    scrollBar: false,
    easing: 'easeInOutCubic',
    easingcss3: 'ease',
    loopBottom: false,
    loopTop: false,
    loopHorizontal: true,
    continuousVertical: false,
    continuousHorizontal: false,
    scrollHorizontally: false,
    interlockedSlides: false,
    dragAndMove: false,
    offsetSections: false,
    resetSliders: false,
    fadingEffect: false,
    scrollOverflow: false,
    scrollOverflowReset: false,
    scrollOverflowOptions: null,
    touchSensitivity: 15,
    bigSectionsDestination: null,

    //Accessibility
    keyboardScrolling: true,
    animateAnchor: true,
    recordHistory: true,

    //Design
    controlArrows: true,
    verticalCentered: true,
    paddingTop: '3em',
    paddingBottom: '10px',
    fixedElements: '#header, .footer',
    responsiveWidth: 0,
    responsiveHeight: 0,
    responsiveSlides: false,
    parallax: false,
    parallaxOptions: {type: 'reveal', percentage: 62, property: 'translate'},
    cards: false,
    cardsOptions: {perspective: 100, fadeContent: true, fadeBackground: true},

    //Custom selectors
    sectionSelector: '.elementor-section',
    slideSelector: '.slide',

    lazyLoading: true,

    //events
    onLeave: function(origin, destination, direction){},
    afterLoad: function(origin, destination, direction){},
    afterRender: function(){},
    afterResize: function(width, height){},
    afterReBuild: function(){},
    afterResponsive: function(isResponsive){},
    afterSlideLoad: function(section, origin, destination, direction){},
    onSlideLeave: function(section, origin, destination, direction){}
});

</script>

Este código es JavaScript puro y controla todos los aspectos del efecto Fullpage.js en su sitio web Elementor. La primera parte del código inicializa la biblioteca de JavaScript y aplica el efecto a sus secciones de Elementor. Si puede ver, el “.Elementor-inner” está aplicando este efecto a todo el contenido creado por Elementor.

Esta clase envuelve todas las secciones y el contenido, por eso se usa. También es estándar en los sitios de Elementor, lo que hace que este código funcione con todas y cada una de las instalaciones.

La segunda parte del código controla muchos aspectos diferentes relacionados con la biblioteca. Puede consultar la documentación para averiguar exactamente qué secciones desea manipular para personalizar este efecto y adaptarlo a su sitio web Elementor. Los aspectos importantes son:

   //Custom selectors
    sectionSelector: '.Elementor-section',
    slideSelector: '.slide',
    lazyLoading: true,

Estas líneas aplican el efecto individual a cada sección de Elementor. También aplica LazyLoading que ayuda con el rendimiento del sitio web.

Vista previa Fullscreen.JS en Elementor

Después de modificar las opciones dentro de JavaScript para que se adapten a su sitio web, guarde la página y obtenga una vista previa en la interfaz. El JavaScript debería inicializarse cuando se carga la página, y debería poder desplazarse entre cada sección con un efecto similar al del vídeo anterior.

Si vuelve a cargar el editor de back-end, JavaScript también se inicializará allí, lo que significa que también puede obtener una vista previa del efecto de desplazamiento desde el editor de Elementor de back-end.

Y eso es todo. Si este tutorial le resultó útil, no dude en compartirlo en las redes sociales. Si esto está muy por encima de su cabeza, considere desembolsar $ 39.00 y comprar el complemento Elementor fullpage.JS que está diseñado para hacer este proceso mucho más fácil.

Básicamente, toma todo lo que acabamos de hacer, lo automatiza y le brinda una interfaz visual para controlar todas las opciones de JavaScript, visibles en la segunda parte del código agregado a nuestro sitio web.

Si está interesado en obtener una vista previa de la página de demostración que creamos para este tutorial, no dude en descargarla. Puede importarlo como una plantilla en su sitio web de Elementor y obtener acceso a todas las secciones, el código y la estructura que componen el sitio.

Muchos de nuestros lectores encuentran esto útil, ya que pueden ver exactamente cómo está hecha la página y concentrarse en recrearla en su propio sitio web. También puede utilizar esta plantilla como base para crear un sitio web fullpage.JS Elementor a partir de.