When using any of the paid plans that webflow provides you can make use of what they call custom code.
Go the the
Pages menu on the top left. Under our
Home page settings we’ll see the
Custom Code menu element.
If you followed the steps on the previous tutorial on how to use fullPage.js in Webflow you'll have some content in both, the
<head> porition and the
The content on the
</body> part should look similar to this:
Let's say I want to use the parallax extension for fullpage.js. We have to:
fullpage.extensions.min.jsas detailed in the fullPage.js documentation.
- Copy the content of our extension file (in this case,
fullpage.parallax.min.js) and paste it above the script including
- Use the fullPage.js option our extension requires. In this case
- Add our license key (don't do this before testing, as once activated it can't be refunded). In this case:
parallaxKey: 'OUR KEY'
- Add any other options our extension might require. In this case, the parallax extension depends on elements with the class
</body> block should look similar to this now:
And that's it! Now you have it working!
Most extensions only required a single option to be set to
true on the fullPage.js initialisation, but others might require extra elements or provide many more configurable options. In these cases you'll find more details on how to use them on their own specific documentation page.
Here's the documentation page for each of those extensions: