# fullPage.js for Gutenberg - Documentation
Source: https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/
Plugin version: 4.1.0
Docs last updated: 2026-04-24

Create beautiful full screen scrolling web sites with **WordPress** and **Gutenberg**, fast and simple.

[![FullPage for Gutenberg](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/banner.png "FullPage for Gutenberg")](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/)

- [DEMO](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/demo/)
- [BUY](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/#pricing)
- [FAQ](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/#faq)

## Requirements

* WordPress version should be at least v6.8.
* PHP version should be at least v7.4.
* Gutenberg editor should be active on the WordPress site.

## Tutorial Video

[Video tutorial](https://www.youtube.com/watch?v=ofAoLMtGE20)

[Video tutorial](https://www.youtube.com/watch?v=No-92vhin2w)

## How To Install

* Login to your WordPress Dashboard.
* In your WordPress Admin Menu, go to **Plugins > Add Plugin**.
* Click on **Upload Plugin** button found on top left corner of page.
* Click on **Browse** button. Select the `mcw-fullpage-gutenberg.zip` file of your plugin in your computer, and click **Install Now** button.
* Active the plugin by clicking on **Activate Plugin** link to work with the plugin.

![How To Install FullPage for Gutenberg Plugin](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/g01-install.mp4 "How To Install FullPage for Gutenberg Plugin")

## License Key

The license key you obtained by buying the plugin can be entered at WordPress admin panel **FullPage** settings page.

![License Settings](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/s01-settings.png "License Settings")

After entering the license, press on **Activate License** button. This will activate the license.

![Activated License Settings](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/s02-settings-activated.png "Activated License Settings")

You can use the plugin without any limitations once your license is activated.

### License Deactivation

If you want to move your license to another domain, you will need to deactivate your license if activated. You can click the **Deactivate** link to deactivate your license.

![Deactivate License](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/g02-deactivate.mp4 "Deactivate License")

If you don't have access to your site, you can deactivate your license on the [deactivation page](https://www.meceware.com/server/deactivate-fullpage/).

### License Dashboard

If you want to see all your licenses, please visit the [dashboard](https://alvarotrigo.com/fullPage/dashboard/).

## Add FullPage Block With Gutenberg

* Create a new post/page or go to the post/page you would like to add the block.
* Find **FullPage** block on the Gutenberg blocks and add it to the page.

*Note: You can add only one **FullPage** block. You should not add any other blocks to the page (unless you know what you are doing) since only the contents inside **FullPage** block will be rendered and other content may break the page.*

![Add FullPage With Gutenberg](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/g03-add.mp4 "Add FullPage With Gutenberg")

### FullPage Setup Wizard

The Setup Wizard walks you through initial options. It appears automatically when you first add a **FullPage** block, but you can also access it later to adjust your settings.

If you are starting with an empty FullPage Wrapper, the wizard helps you build your page structure:

* **Sections:** Choose how many vertical sections (pages) you want to start with.

* **Horizontal Slides:** Toggle this on to automatically include a section that contains horizontal slides.

* **Theme Template:**

  * **Yes:** Keeps your theme's header and footer visible. You can provide the "CSS Selector" (like `header` or `.site-header`) so FullPage knows which parts of your theme to keep fixed or move.

  * **No:** Replaces everything with a clean, empty page dedicated to your FullPage content.

* **Navigation Bullets:** Enable this to show clickable dots on the side of the screen, helping users see which section they are currently on.

* **Slide Navigation:** If you have horizontal slides, you can choose to navigate them using **Bullets**, **Arrows**, or **Both**.

* **Vertical Alignment:** Decide if the content inside your sections should be at the **Top**, **Center**, or **Bottom**.

* **Scrollbar & Responsive Mode:**

  * **Visible Scrollbar:** Shows the browser's default scrollbar while keeping the snapping effect.

  * **Responsive Mode:** If the scrollbar is hidden, you can set a "Breakpoint" (in pixels). Below this screen width, FullPage will turn off and the page will scroll like a normal website.

## Enable FullPage

* Click on **FullPage** block. You will see its settings in the Gutenberg editor sidebar.
* Toggle **Enable FullPage** option.

## Sections

When **FullPage** block is added to the page, two sections are added by default.

![Add Sections](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/s03-section.png "Add Sections")

### Add Sections

Click the **+** icon and select **FullPage Section** at the bottom of **FullPage** block.

![Add Sections](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/g04-add-section.mp4 "Add Sections")

### Remove Sections

Select the section you want to remove and click the *More Options* menu dots in the block toolbar and click **Delete**.

![Remove Sections](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/g05-remove-section.mp4 "Remove Sections")

### Add Section Content

Click inside the **FullPage Section** block and add blocks inside.

### Section Options

![Section Options](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/s04-section-section.png "Section Options")

#### Section Behaviour

Controls the height behavior of the section.

When **Full Height** is selected (default), the height of the sections will be full screen.

When **Auto Height** is selected, the height of the section will take the height defined by your section/slide content.

When **Responsive Auto Height** is selected, sections will be full screen until the responsive mode gets fired. Then they'll take the size required by their content, which could be bigger or smaller than the viewport. Responsive mode is only enabled when [Responsive Width](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/#responsive-width) and [Responsive Height](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/#responsive-height) options are set.

#### Vertical Alignment

Sets the vertical alignment of the content per section. Available options are

* **Default** (default)

  When selected, the value from [Vertical Alignment](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/#vertical-alignment) from **FullPage** block is used.

* **Top**

  When selected, the content will be aligned to the top of the section.

* **Center**

  When selected, the content will be aligned to the center of the section.

* **Bottom**

  When selected, the content will be aligned to the bottom of the section.

#### Section Anchor

If you are using FullPage with anchor links for the sections, then you will be able to use anchor links also to navigate directly to a certain slide inside a section.

This would be an example of a link with an anchor: `http://yoursite.com/#secondPage` (which is the URL you will see once you access to that section manually) Notice the last part of the URL ends in `#secondPage`, if FullPage Anchor option for that section is set to `secondPage`.

*Note: FullPage Anchor should be a unique ID and should NOT be the same with any anchor ID on the page.*

#### Navigation Tooltip

Sets the tooltip text shown next to the navigation bullet for this section.

#### Disable Scroll Overflow

Prevents the in-section scrollbar from being created on this specific section or slide. Use this when [Scroll Overflow](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/#scroll-overflow) is enabled globally but you want to opt out here.

### Section Background Options

These group of options define the background color, background image and background video options for the selected section.

![Section Background Options](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/s06-section-background.png "Section Background Options")

#### Section Background Color

To choose the background color, click the color circle and choose the desired section background color. To clear the color, click the revert arrow icon next to the color circle. You can adjust the background color of the section for different devices.

![Section Background Color Options](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/g06-section-background-color.mp4 "Section Background Color Options")

#### Section Background Image

To choose the background image, click the **Background Image** button and select the image from media library. You can adjust the background image of the section for different devices.

![Section Background Image Options](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/g07-section-background-image.mp4 "Section Background Image Options")

Click the options button to choose the background image options.

![Section Background Image Options](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/s07-section-background-image.png "Section Background Image Options")

#### Section Background Video

To choose the background video, click the **Video** tab to see the video parameters. The background color indicates the video overlay color. Poster image is the image that is shown while the video is downloaded until playing the video.

![Section Background Video Options](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/s08-section-background-video.png "Section Background Video Options")

Enable **Enable Video On Mobile** option to play the video on mobile devices. If this option is disabled, the video will NOT be loaded on mobile devices. Only poster image will be displayed. Disabling this option is the best practice.

To loop the video, enable **Loop** option.

To mute the video sound, enable **Mute** option.

When **Auto Play** option is enabled, the video will be played as soon as it's playable.

When **Always Play** option is enabled, the video plays even if the section is not active. When disabled, the video only plays if the section is active, otherwise the video is paused.

To use a YouTube video, paste the video link into the **YouTube Video URL** option.

To use self-hosted videos, select **Self-Hosted** from the **Video Type** option and pick the *mp4*, *ogv/ogg* (optional), and *webm* (optional) videos from the media library.

![Section Self-Hosted Background Video Options](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/s09-section-background-video-self-hosted.png "Section Self-Hosted Background Video Options")

### Section Navigation Options

You can change the (left/right) navigation bullet colors for the active using these options. This will override the navigation colors only on the selected section.

![Section Background Options](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/s10-section-navigation.png "Section Navigations Options")

## Slides

Slides are the horizontal FullPage elements inside sections.

![Slides](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/s11-slide.png "Slides")

### Add Slides

Click the **+** icon and select **FullPage Slide Section** at the bottom of **FullPage** block.

![Add Slides](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/g08-add-slide.mp4 "Add Slides")

### Remove Slides

Select the slide you want to remove and click the *More Options* menu dots in the block toolbar and click **Delete**.

![Remove Slides](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/g09-remove-slide.mp4 "Remove Slides")

### Add Slide Content

Click inside the **FullPage Slide Section** block and add blocks inside.

### Slide Options

![Slide Options](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/s12-slide-options.png "Slide Options")

#### Vertical Alignment

Sets the vertical alignment of the content per slide. Available options are

* **Default** (default)

  When selected, the value from [Vertical Alignment](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/#vertical-alignment) from **FullPage** block is used.

* **Top**

  When selected, the content will be aligned to the top of the slide.

* **Center**

  When selected, the content will be aligned to the center of the slide.

* **Bottom**

  When selected, the content will be aligned to the bottom of the slide.

#### Slide Anchor

If a custom anchor is needed for a slide instead of its index, you can enter the new slide anchor to **Slide Anchor** option. If set, the anchor of the slide will be `#section_anchor/slide_anchor`. If this option is left empty, the anchor of the slide will be `#section_anchor/2` where 2 is the slide number.

### Slide Background Options

For Slide Background options, see [this section](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/#section-background-options).

### Slide Navigation Options

For Slide Navigation options, see [this section](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/#section-navigation-options).

## Navigation

Navigation section includes the options about section and slide navigation.

![FullPage for Gutenberg Navigation Options](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/s13-navigation.png "Navigation Options")

### Section Navigation

Section navigation includes the options of the navigation bar made up of small circles (bullets).

* **Off**: The navigation bullets for the section navigation will be hidden.

* **Left**: The navigation bullets for the section navigation will be shown at the left side of the page.

* **Right**: The navigation bullets for the section navigation will be shown at the right side of the page.

When navigation bullets are active, **Section Navigation Options** button will be activated. You can access the navigation options by clicking this button.

![FullPage for Gutenberg Section Navigation Options](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/s16-navigation-section-options.png "Section Navigation Options")

* **Style**: You can select the navigation bullet style with this option.
* **Show Active Tooltip**: When this option is enabled, the tooltip for the active section will be visible next to the navigation bullet.
* **Clickable Tooltip**: When this option is enabled, the tooltip clicks also go to the corresponding section.
* **Bigger Navigation**: You can enable this option to see bigger navigation bullets.

Responsive options can be configured for the selected device (desktop, tablet and mobile devices).

* **Show Bullets**: You can show or hide the navigation bullets with this option responsively.
* **Main Color**: You can choose the primary color of the bullets.
* **Hover Color**: You can choose the primary color of the bullets when mouse is on the bullets.
* **Active Color**: You can choose the primary color when the section bullet is active.
* **Tooltip Background Color**: You can choose the background of the tooltips.
* **Tooltip Text Color**: You can choose the text color of the tooltips.
* **Space**: You can specify the distance from left/right of navigation bullets using this option.

### Section Navigation Buttons

Section navigation buttons option adds previous/next buttons to the page.

When *Left* or *Right* is selected for **Section Navigation Buttons**, **Section Navigation Buttons Options** will be activated.

![FullPage for Gutenberg Section Navigation Buttons Options](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/s18-section-navigation-buttons-button.png "Section Navigation Buttons Options")

You can access the navigation buttons options when you click on **Section Navigation Buttons Options**.

![FullPage for Gutenberg Section Navigation Buttons Options](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/s19-section-navigation-buttons-options.png "Section Navigation Buttons Options")

* **Color**: You can choose the color of the buttons.
* **Background Color**: You can choose the background color of the buttons.

### Slide Navigation

Slide navigation includes the options of the navigation bar made up of small circles (bullets) for slides.

* **Off**: The navigation bullets for the slide navigation will be hidden.
* **Top**: The navigation bullets for the slide navigation will be shown at the top side of the section.
* **Bottom**: The navigation bullets for the slide navigation will be shown at the bottom side of the section.

When bullets are active, **Slide Navigation Options** button will be activated.

![FullPage for Gutenberg Slide Navigation Options](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/s22-navigation-slide-button.png "Slide Navigation Options")

You can access the bullet options when you click on **Slide Navigation Options** button.

![FullPage for Gutenberg Slide Navigation Options](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/s23-navigation-slide-options.png "Slide Navigation Options")

* **Style**: You can select the navigation bullet style with this option.
* **Bigger Navigation**: You can enable this option to see bigger navigation bullets.

Responsive options can be configured for the selected device (desktop, tablet and mobile).

* **Show Bullets**: You can show or hide the slide navigation bullets with this option responsively.
* **Main Color**: You can choose the primary color of the bullets.
* **Hover Color**: You can choose the primary color of the bullets when mouse is on the bullets.
* **Active Color**: You can choose the primary color when the slide bullet is active.
* **Space**: You can specify the distance from top/bottom of slide navigation bullets using this option.

### Control Arrows

Enables the left/right control arrows so users can move between slides.

![Control Arrows Options](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/s24-control-arrows.png "Control Arrows Options")

You can access the bullet options when you click on **Control Arrow Settings** button.

![Control Arrows Options](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/s25-control-arrows-options.png "Control Arrows Options")

* **Style**: The style of the control arrows.
* **Color**: The color of the control arrows.

### Lock Anchors

Controls whether URL anchors have any effect on fullPage navigation.

### Disable Anchors

Turns off all section anchors so URLs no longer update as the user scrolls.

### Animate Anchor

Controls the initial load behavior when the URL contains an anchor (#). When enabled, the page animates to the target section; when disabled, it loads directly there.

### Keyboard Scrolling

Enables keyboard navigation between sections and slides.

### Record History

Pushes each section/slide to the browser history, so the back and forward buttons move the user between them. When disabled, the URL still updates but the browser history stays put. Automatically disabled when [*Auto Scrolling*](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/#auto-scrolling) is off.

## Scrolling

Scrolling section includes the options about scrolling mechanism.

![FullPage for Gutenberg Scrolling Options](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/s26-scrolling.png "Scrolling Options")

### Auto Scrolling

Switches between automatic scrolling and the browser's native scrolling. It also affects how sections fit in the viewport on tablets and mobile phones.

### Fit To Section

Controls whether sections snap to fill the viewport. When enabled, the active section always takes the full screen. When disabled, users can stop halfway between sections.

### Scroll Bar

Enables a visible scrollbar alongside fullPage. [Auto Scrolling](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/#auto-scrolling) still works, users can also drag the scrollbar, and fullPage snaps to the nearest section when scrolling stops.

### Scroll Overflow

Adds an in-section scrollbar when a section or slide's content is taller than the viewport.

![Scroll Overflow Options](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/s27-scroll-overflow-options.png "Scroll Overflow Options")

**Mac Style Scroll Overflow** option enables a "mac style" for the scrollbar instead of the default one.

### Skip Intermediate Items

Skips the scroll animation when navigating between non-consecutive vertical sections or horizontal slides.

### Big Sections Destination

Controls how fullPage scrolls to a section that's taller than the viewport. By default, it scrolls to the top when coming from above, and to the bottom when coming from below. Possible values are **Default**, **Top** and **Bottom**.

### Continuous Vertical

Wraps vertical scrolling so the last section continues into the first, and scrolling up from the first section jumps to the last.

### Loop Bottom

Wraps scrolling down from the last section back to the first.

### Loop Top

Wraps scrolling up from the first section back to the last.

### Loop Slides

Wraps horizontal slide navigation so the last slide continues to the first and vice versa.

### Easing

Sets the transition effect used for vertical and horizontal scrolling, as either a CSS3 or a JS transition.

When **CSS Easing** option is enabled, CSS3 transition animations are used. It is highly recommended to use CSS3 easing options.

![CSS3 Easing Options](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/s28-easing.png "CSS3 Easing Options")

When **CSS Easing** option is disabled, JavaScript transition animations are used.

### Scrolling Speed

Speed in milliseconds for the scrolling transitions.

## Design

Design section includes options about the elements of fullpage.

![FullPage for Gutenberg Design Options](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/s29-design.png "Design Options")

### Vertical Alignment

Sets the vertical position of the content within sections and slides.

### Adjust on Nav Resize

Defines whether to adjust section height when the mobile navigation or address bar resizes or toggles visibility. If disabled, sections may not remain full-height when the bar shrinks or hides.

### Responsive Width

A normal scroll will be used under the defined width in pixels. A class `fp-responsive` is added to the body tag in case the user wants to use it for their own responsive CSS. For example, if set to `900`, whenever the browser's width is less than `900` the plugin will scroll like a normal site.

### Responsive Height

A normal scroll will be used under the defined height in pixels. A class `fp-responsive` is added to the body tag in case the user wants to use it for their own responsive CSS. For example, if set to `900`, whenever the browser's height is less than `900` the plugin will scroll like a normal site.

### Content Padding

Sets the padding inside sections and slides.

### Fixed Elements

Takes elements off the scrolling structure so they can stay fixed when the CSS3 option is in use. Accepts a string of JavaScript selectors for those elements (for example, `#element1, .element2`).

### Normal Scroll Elements

If you want to avoid the auto scroll when scrolling over some elements, this is the option you need to use. (useful for maps, scrolling elements etc.) It requires a string with the JavaScript selectors for those elements. (For example: `#element1, .element2`). This option should not be applied to any section/slide element itself.

### Custom CSS

You can add your custom CSS.

## Events

Events section includes JavaScript events for the plugin. Each event executes the provided code snippet when the event is fired.

![FullPage for Gutenberg Events](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/s30-events.png "Events")

When a user clicks on the "Add Event" button, a modal will open to add and modify the selected event.

![FullPage for Gutenberg Events Modal](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/s31-events-modal.png "Events")

### afterRender

Fires right after the page structure is generated. Use this for initializing other plugins or any code that needs the DOM to be ready, since fullPage rewrites the DOM during setup.

### afterResize

Fires after the browser window is resized, right after the sections have been resized.

### afterLoad

Fires once the sections have finished loading and scrolling has ended.

### beforeLeave

Fires right before leaving a section, just before the transition takes place. Returning `false` cancels the move.

### onLeave

Fires as the user leaves a section, during the transition to the new one. Returning `false` cancels the move.

### afterSlideLoad

Fires once a slide inside a section has finished loading and scrolling has ended.

### onSlideLeave

Fires as the user leaves a slide, during the transition to the next one. Returning `false` cancels the move.

### onScrollOverflow

Fires while scrolling inside a scrollable section, when [Scroll Overflow](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/#scroll-overflow) is enabled.

### afterResponsive

Fires whenever fullPage switches between normal and responsive mode.

### afterReBuild

Fires after fullPage is manually rebuilt via `fullpage_api.reBuild()`.

### Before FullPage

Fires right before fullpage.js initializes.

### After FullPage

Fires right after fullpage.js initializes.

## Extensions

Extensions section includes FullPage Extension options. The extensions can be purchased on [FullPage Extensions](https://alvarotrigo.com/fullPage/extensions/) page.

***Note: These options are only available if at least one extension is purchased. The plugin is not bundled with these extensions.***

***Note: After you purchase an extension, the extension can be installed using your extension license key and used without activation. Please note that, there is no deactivation or domain change for extensions.***

### Installing The Extension

* Go to **FullPage** settings page. You will see extension list.

![Extension List](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/s32-extension-settings.png "Extension List")

* Select the extension you want to install.

* Enter your *License Key* you've received via email upon the purchase for the corresponding extension.

![Extension List](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/s33-extension-parallax-pre-install.png "Extension List")

* Click on **Install Extension** button.

![Installing Extension](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/s34-extension-installing.png "Installing Extension")

* After a successfull installation, the page will refresh and the extension plugin should be installed.

### Activating The Extension

When you purchase an extension, you will need to activate your extension license for a domain. **Please note that, there is no deactivation or domain change for extensions**.

You can use the extension without activating it on a domain (for example, a staging/development domain). ***When a non-activated extension is used on a domain, a red box will appear but it will be removed upon activation***.

If you are on a staging/development domain, please ignore that message and do not activate for the development domain. **The extension domain cannot be changed (no deactivation) and once activated, refund for the extension would not be possible**. Once moved to the production domain, you can activate it and the red box will be disappeared automatically.

If this is the first time you are using the extension (*hence the extension license is not activated*), you will see a yellow warning box about the activation process after installing the extension plugin.

![Before Activation](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/s35-extension-no-activation.png "Before Activation")

If you are on the production domain and you want to activate your license, click on **Activate** button and follow the steps on the activation page.

![Extension Activation Page](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/s43-extension-activation-page.png "Extension Activation Page")

Once the activation process is completed, click on **Check Activation** button and the extension should be activated. ***The activation key is fetched automatically***.

![Extension Activated](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/s35-extension-activated.png "Extension Activated")

If you don't like the automatic activation process and you want to manually activate your license, go to the [activation web site](https://alvarotrigo.com/fullPage/extensions/activationKey.html) and follow the on-screen steps to choose your extension and enter your *License Key* you've received via email upon the purchase.

### Using The Extension

After the extension is installed,

- Enable **Enable Extensions** option under Extensions tab of FullPage options.

- You should see the extension. Enable the corresponding extension and adjust its option(s) as suitable.

![Extension Options](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/s36-extension-options.png "Extension Options")

### Removing the Extension

To remove the extension, go to your Plugins page and *Deactivate/Delete* the extension plugin.

## Customizations

![FullPage for Gutenberg Customizations](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/s37-customizations.png "Customizations")

### Video Autoplay

Plays videos inside sections/slides only while the section is in view, and pauses them on leave.

**Video Keep Playing** option will make the videos play all the time, even if the section/slide is not in the view.

### Remove Theme Margins

Strips the page wrapper margins so the FullPage block can fill the full viewport width.

### Force Fixed Theme Header

![Force Fixed Theme Header](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/s38-force-fixed-theme-header.png "Force Fixed Theme Header")

Pins the theme header to the top of the page and adjusts section content to account for it.

**Theme Header Selector** option is required as a JavaScript/CSS selector.

**Toggle Header** option enables header toggle, which the header is hidden when scrolling down, and the header is shown when scrolling up.

**Theme Header Padding** option sets the section header paddings with respect to header height.

### Show Theme Footer

![Show Theme Footer](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/s39-show-theme-footer.png "Show Theme Footer")

Moves the theme footer into a new auto-height section appended as the last section.

**Theme Footer Selector** option is required as a JavaScript selector.

### Hide Content Before FullPage

When this option is enabled, an empty content will be shown before FullPage is loaded. The content is shown after FullPage is loaded and enabled.

### Override FullPage Links

Forces anchor links to use fullPage navigation. Enable this if fullpage anchor links aren't working as expected.

### Override Anchor Links

Forces regular anchor links to use fullPage navigation. Enable this if anchor links aren't working as expected.

### Container HTML tag

Changes the container's HTML tag to the one you pick.

### Extra Parameters

If needed, any extra fullpage.js parameters can be used.

## Extended Settings

![FullPage for Gutenberg Extended Settings](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/s40-extended-settings.png "Extended Settings")

### Observer

Watches for changes to the page's HTML structure and re-initializes fullPage when they happen.

### Enable JQuery Dependency

FullPage does not depend on jQuery. But if you want to load jQuery on the page, such as for events, enable this option.

### Enable Empty Page Template

[Video tutorial](https://www.youtube.com/watch?v=QsiSkkrRQzo)

By default, FullPage for Gutenberg ships with an empty page template, and this option is enabled. When FullPage is enabled, an empty page with no theme dependency is loaded.

Disable it if you want to load your theme template instead, the theme's header and footer will load alongside FullPage. You might need some CSS and JavaScript knowledge to adjust how the page behaves.

#### Use Template Redirect

Controls whether the template is redirected or included. When enabled, the template is redirected; when disabled, it is included. Try both to see which works best for your theme. Only available when Empty Page Template is used.

#### Template Path

You can provide your own template, such as a modified version of the theme template. If you want to use your own template, put the template path here. If left empty, the empty predefined page template will be used.

#### Remove Theme JS

Strips theme JavaScript files from the output. Be aware, this can break the page if the theme outputs JS in the head.

Enable this option if you want to remove theme JavaScript files, on necessary cases such as conflicts between theme and FullPage. Enabling this option is not recommended on production environments, and is used for debugging purposes.

#### Remove JS

Removes the specified JavaScript files from the output. Be aware, this can break the page. List the JavaScript file names separated by commas.

## FAQ

#### Can I move my license to another server?

Yes, you can! You can [deactivate](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/#license-deactivation) your license on your old server and use the same license on your new server. Please see [License Key](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/#license-key "License Key") section for more information.

#### How can I deactivate my license if I don't have access to my site?

You can manage your licenses on the [dashboard](https://alvarotrigo.com/fullPage/dashboard/).

Alternatively, you can *deactivate* your license on the [deactivation page](https://www.meceware.com/server/deactivate-fullpage/). You will need the domain of your site, your license key and your email you used to purchase the plugin.

#### How can I generate the invoice for the plugin?

You would have received an email from Gumroad that shows the plugin license key as well as an *Invoice* button. You can generate your invoice by clicking on that button.

#### I cannot see extensions even if I installed the Extensions plugin!

FullPage extensions can be purchased separately and is not available with the plugin out-of-the-box. If you haven't purchased any extension, you don't need to use/activate the extensions plugin.

If you have purchased one or more extensions, please take a look at the [Extensions](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/#extensions "Extensions") section for the tutorial video that shows how to install them.

#### I see a red box about extension not activated!

Please find more information at [Extensions](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/#extensions "Extensions") part of the documentation. As specified there, you could see the red box when the extension is not activated. However, if you are on a development domain, **please ignore that message and do not activate for the development domain**. **The extension domain cannot be changed and once activated, refund for the extension would not be possible**. Once moved to the production domain, you can activate it and the red box will be disappeared automatically.

#### How can I show a normal web site on mobile and fullpage scrolling web site on desktop?

You can activate Responsive Mode. To activate Responsive Mode, please set [Responsive Width](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/#responsive-width "Responsive Width") option to `767` (or any screen width you want). That's it! For the screens that has width less than `767px`, a normal scrolling web site will be shown.

You can also try setting [Responsive Auto-Height](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/#section-behaviour "Section Behaviour") option for the sections.

#### I cannot see my header and footer!

By default, the plugin comes with an empty page template. This means that, while fullPage is enabled on your WordPress site, an empty page with no theme dependency will be loaded. That's why your header or footer does not appear on your site. To disable it, please take a look at the [tutorial video](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/#enable-empty-page-template "Enable Empty Page Template").

#### I cannot scroll to my footer!

If scrollbars are disabled, only the content inside the sections are visible. To be able to show the footer, it needs to be moved inside a section. You can use the [Show Theme Footer](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/#show-theme-footer "Show Theme Footer") customization.

#### Sections are getting cut off! I cannot see the rest of my content!

When the scrollbars are disabled and your content is greater than the screen height, some of your content might be left outside of the viewport. To display these, you can enable [Scroll Overflow](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/#scroll-overflow "Scroll Overflow") option. This will create an in-section scrollbar.

#### The Block Generates Error / FullPage Block Contains Unexpected or Invalid Content

Sometimes with the update of Gutenberg, WordPress or other third party plugins, FullPage block might generate an error. If you see `This block contains unexpected or invalid content.` instead of the FullPage block, please first take a database backup, just in case, and use `Attempt Block Recovery` button. Do NOT use `Convert to Classic Block` option.

![License Settings](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/imgs/s41-attempt-block-recovery.jpg "Attempt Block Recovery for FullPage for Gutenberg")

#### How do I remove anchors from URL?

If you want to remove the anchors (your-domaion.com/`#anchor`), you can enable [Lock Anchors](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/#lock-anchors "Lock Anchors") or [Disable Anchors](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/#disable-anchors "Disable Anchors") option. Enabling one of these two options will remove the anchor part from the URL.

#### Why my scroll based animations or events don't work?

Some of the WordPress plugins or Javascript libraries that depend on scrolling mechanism such as sticky menus, animations etc. might not work if scroll bar is disabled using the plugin. Please enable the [Scroll Bar](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/#scroll-bar "Scroll Bar") option to enable scroll based animations.

#### Updating From v3.X to v4.0

FullPage for Gutenberg plugin has a major update that changes a lot of things under the hood! To update the plugin from `v3.X` to `v4.0`, please follow the instructions below:

- Before updating, please take a **database backup** as a precaution.

- Update FullPage for Gutenberg plugin to the latest version.

- For each page/post designed with FullPage for Gutenberg (FullPage is enabled):

  - Edit the page/post.

  - If you see `Attempt Block Recovery` button, click it. Do NOT use `Convert to Classic Block` option. This may be needed for FullPage block and each Section and Slide block.

  - For users that have custom CSS or JavaScript options, please check your site after the update. You can use [support](https://alvarotrigo.com/contact/ "Contact") for your customized scripts and styles.

  - Save the page and refresh. After saving, you should not see any error.

  - Check your page to test if everything works as expected.

- That should be it :) For any issues, please use [support](https://alvarotrigo.com/contact/ "Contact") and we will try our best to help you…

#### Updating From v2.X to v3.0

FullPage for Gutenberg plugin has a major update that changes a lot of things under the hood! To update the plugin from `v2.X` to `v3.X`, please follow the instructions below:

- Before updating, please take a **database backup** as a precaution.

- Update FullPage for Gutenberg plugin to the latest version.

- For each page/post designed with FullPage for Gutenberg (FullPage is enabled):

  - Edit the page/post.

  - Check [Easing](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/#easing) option under [Scrolling tab](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/docs/#scrolling) of FullPage options. If you used a different CSS easing before, please check the option if it’s the correct one. If you used a JS easing on your site (for fixed background images as an example), please disable **CSS Easing** option and select the correct option from **Easing** option.

  - For Offset Section extension users, if you have changed the default option of **Data Centered** option for any section, please update it again to the correct value. This option can be found under FullPage option for each section.

  - For users that have custom CSS or JavaScript options, please check your site after the update. You can use [support](https://alvarotrigo.com/contact/ "Contact") for your customized scripts and styles.

  - Save the page and refresh. After saving, you should not see any error.

  - Check your page to test if everything works as expected.

- That should be it :) For any issues, please use [support](https://alvarotrigo.com/contact/ "Contact") and we will try our best to help you…

## Pre-sales FAQ

#### Is fullPage plugin for Gutenberg compatible with any WordPress builder editor?

No. The plugin is only compatible with Gutenberg editor.

However, we also have a [fullpage.js plugin for Gutenberg editor!](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/)

#### Can I install it in any Gutenberg theme?

It can be installed with any Gutenbergtheme. However, if you need to use theme features, such as header, you might need to know CSS and maybe JavaScript, depending on your theme and your design.

#### Can I use fullPage plugin to build comercial products?

If you want to include Fullpage in downloadable or installable products like WordPress themes, HTML templates, as part of a commercial interface builder, SDK, or toolkit, choose the Commercial OEM license. Commercial OEM licenses are customized for each customer. [Contact us](https://alvarotrigo.com/#contact) if you need this license.

Otherwise you are fine with any of the other available licenses.

#### What happens if I cancel my yearly subscription?

You will still be able to use the fullPage.js plugin but you won't be able to get any more updates for it.

This means that you would be subject to **possible breaking changes** if you update WordPress or Gutenberg or if new versions of web browsers break the old version of fullPage.js in any way.

Additionally, you wouldn't be able to enjoy any fullPage.js improvements or new features.

Remember you can get a lifetime license with unlimited updates for just a bit more.

#### Is the payment secure?

Of course! You'll be paying through [Gumroad](https://gumroad.com/), a secure platform that allows payments all around the world with different cards and services like Paypal. Gumroad makes use of the [Stripe](https://stripe.com) service that ensures your payment details are secure and in pretty good hands!

#### How can I apply extra updates and support?

You can get extra support by acquiring the support package for fullPage.js forGutenberg.

#### Can I be refunded?

Sure! There's 30-days money back guaranteed for any purchase.

Notice that you won't be elegible for a refund if you asked for support.

#### Can I upgrade from one license to another?

Sure! It is in fact very easy!

Please proceed to purchase the upgraded license (Professional or Business license). Then [contact us](https://alvarotrigo.com/#contact) and let us know that you want to upgrade. We'll then proceed to refund you the previous purchase. Easy uh?

#### How can I get an invoice for my purchase?

You'll get a link to the invoice on the purchase confirmation email sent by Gumroad, the company dealing with the secure payment.

#### Do you have an affiliate program?

Yes we do! Earn up to 40% commission on every sale! Learn more on our [affiliates page](https://alvarotrigo.com/fullPage/affiliates/).

#### I have another question

If you still having some questions, please feel free to drop us an email from the [contact form](https://alvarotrigo.com/#contact). Make sure you select "wordpress" as the topic.