Agregar fullPage.js al elemento (sin complemento)

En este tutorial, agregaremos fullPage.js al elemento, una biblioteca JavaScript única que le permite desplazarse automáticamente entre las secciones de la página en la pantalla completa. Esto puede agregar un aspecto profesional a su sitio de elementos y es una de las bibliotecas JavaScript más populares por este motivo. Hemos creado esta guía para mostrarle una forma simple de incorporar fullpage.js en su sitio usando nada más que el bloque de elementos HTML. Tenga en cuenta que hay un complemento premium de WordPress que cuesta $ 39.00 que le permite incorporar fullpage.js directamente a su sitio web de Elementor.
Esencialmente, la biblioteca FullPage.js es necesaria y establece las cosas automáticamente, lo que le brinda una interfaz de usuario bastante gráfica. Nuestro efecto final, previamente vista del editor primario. ¡No hay complementos caros! Aquí, discutiremos el modo manual más barato. Este tutorial se crea para alguien que no está familiarizado con JS, pero si esto pasa por encima de su cabeza, considere verificar el complemento.
Tome el archivo de plantilla elemental para echar un vistazo al código exacto y cómo lo integré en el generador de página. [Compra_link text = “comprar”] Instale fullPage.js en Elementor Como su nombre lo indica, esta biblioteca JavaScript le permite desplazarse entre las secciones del elemento en la pantalla completa. Mientras se desplaza con el mouse hacia abajo, la pantalla va a la siguiente sección. Aquí hay un ejemplo en acción: en este ejemplo, parece bastante simple, pero en una implementación real, un diseñador de sitios web probablemente utilizaría animaciones y transiciones complejas para mostrar contenido como la biblioteca de página completa. Ver ventana. Si está buscando inspiración, aquí hay una colección de sitios web que usan esta biblioteca JavaScript: una cosa para recordar: si tiene la intención de usar este anuncio, necesitará una licencia comercial. Comienza en 9 libras (solo una vez), por lo que no es tan malo. También es gratuito para proyectos de código abierto que son compatibles con LPLV3. Ahora que sabemos lo que hace la biblioteca y cómo funciona, trabajamos para incorporarla en un sitio web elemental sin usar el complemento. Esto no solo nos ahorrará dinero, sino que nos dará más flexibilidad y poder. Configure primero la página elemental, configure la página elemental. Para nuestro ejemplo, agregamos tres secciones individuales elementales, estableciendo la altura para que sea igual a la ventana. Puede agregar cuántas secciones desea, solo asegúrese de que tengan la misma altura que la ventana. Después de todo, FullPage.js está hecho para páginas completas; sin esta configuración, la integración sería inútil.
En cada sección, coloque su contenido. Este ejemplo no va demasiado lejos en casos prácticos de uso para esta biblioteca, pero generalmente llena cada página con contenido mínimo que indica subpagins. Por ejemplo, si tiene un sitio web de la agencia, puede usar fullPage.js en la página principal, cada sección individual mostrando la cartera, los servicios, el héroe, el formulario de contacto y más. A medida que su usuario ejecute la página, será recibido con elementos que ingresan a la ventana de visualización a través de animaciones CSS o Paralax. Ambos efectos se incluyen en cualquier instalación nativa de Elementor y Elementor Pro. Esto se hace accediendo a “avanzado” en el editor primario y configurando la clase allí. Una vez que su página está configurada, es hora de instalar efectivamente la biblioteca JavaScript en el sitio web de Elementor. Agregue fullPage.js y fullPage.css al elemento Esta biblioteca JavaScript también debe tener una hoja de estilo CSS incluida. Ambos están cargados en nuestra página elemental usando un CDN. Recomendamos esta ruta, porque no necesita mantener la base de código. Cuando se trata de incorporar bibliotecas JavaScript en el elemento, tiene dos opciones. El método más permanente sería agregar
Este código es JavaScript Pure y controla todos los aspectos del efecto de la página completa en su sitio elemental. La primera parte del código inicializa la biblioteca JavaScript y aplica el efecto de sus secciones elementales. Si puede ver, “.-Element-Inner” aplica este efecto a todo el contenido creado por el elemento. Esta clase incluye todas las secciones y contenido, por lo que se usa. También es estándar a través de sitios de elementos, lo que hace que este código funcione con todo y todas las instalaciones. La segunda parte del código controla muchos aspectos diferentes con respecto a la biblioteca. Puede consultar la documentación para averiguar exactamente qué secciones desea manejar para personalizar este efecto para que se ajuste a su sitio de elementos. Los aspectos importantes son: // selectores personalizados SectionSectector: ‘Elementor-Section’, Slideselector: ‘.Slide’, LazyLoading: Verdadero, estas líneas aplican el efecto individual de cada sección elemental. También se aplica a LazyLoading, lo que ayuda al rendimiento del sitio.