Documentation
fullPage.js for Elementor Builder for WordPress

Q: How do I remove anchors from URL?

If you want to remove the anchors (your-domaion.com/#anchor), you can enable Lock Anchors or Disable Anchors option. Enabling one of these two options will remove the anchor part from the URL.

Version 3.0.0 · Updated October 4, 2026

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

DEMO|BUY|FAQ

RequirementsRequirements

WordPress version should be at least v6.8.
PHP version should be at least v7.4.
Elementor plugin should be active on the WordPress site and at least v3.32, recommended v4.0.

How To InstallHow To Install

Login to your WordPress Dashboard.
Install Elementor plugin if not installed.
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-elementor.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.

License KeyLicense Key

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

License Settings

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

Activated License Settings

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

License DeactivationLicense 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.

If you don't have access to your site, you can deactivate your license on the deactivation page.

License DashboardLicense Dashboard

If you want to see all your licenses, please visit the dashboard.

Sample Elementor TemplateSample Elementor Template

You can download the sample template and import it into your Elementor template library. It has four sections, and one of them has horizontal slides. It uses only a few elements, so it fits most sites.

To import and use it:

Create a new page and edit it with Elementor.
Click the Add Template icon (the folder) on the page.
Go to the Templates tab first, then click the Import Template icon at the top right.
Click Select File and choose the fullpage-for-elementor-template.json file.
Click Insert next to the imported template.
Enable FullPage for the page and click Save & reload.
Use the setup wizard for the first options, or close it and change them later.

Enable FullPageEnable FullPage

Create a new page, or open an existing one, with Elementor.
Click Page Settings in the top bar and open the FullPage section.
Turn on Enable FullPage.
The page needs to be saved and the preview reloaded. Click Save & reload.
After the preview reloads, the sections show at full height in the editor.

Note: Put all your content inside top-level Flexbox (recommended), Div Block or Container elements. Each of them becomes a section. Content outside them is not part of FullPage and may break the page.

By default, a page with FullPage enabled uses an empty page template: the page loads without your theme's header, footer and page title. To show them, turn off Enable Empty Page Template in the Advanced section, or answer Yes to Use your theme's template? in the setup wizard.

FullPage Setup WizardFullPage Setup Wizard

The Setup Wizard helps you choose the first options. After FullPage is enabled, you can open it with the Setup Wizard button in the FullPage section of Page Settings, or with the F icon in the top bar.

FullPage Setup Wizard

Use your theme's template?
- Yes: Your theme's header and footer stay on the page. Two more questions follow:
- Use your theme's header? Keeps the header fixed at the top. Give its CSS selector (like header or .site-header) so FullPage can find it.
- Use your theme's footer? Shows the footer as the last section. Give its CSS selector (like footer) too.
- No: A clean, empty page shows only your FullPage content.
Remove theme margins? Removes the margins and paddings your theme adds around the page.
Show section navigation bullets? Shows clickable dots on the side of the page, so visitors can see which section they are on.
Slide navigation: How visitors move between horizontal slides: Off, Bullets, Arrows, or Both.
Change vertical alignment? Leave it at No to keep the alignment you set on each element. Choose Yes to put the content of every section at the Top, Center, or Bottom.
Show a visible scrollbar? Shows the browser scrollbar and keeps the snapping between sections.
Enable responsive mode? Only asked when the scrollbar is hidden. Below your mobile breakpoint, FullPage turns off and the page scrolls like a normal website. You can change the width later in Responsive Width.

Click Apply Settings to use your answers, then save the page. All FullPage settings takes you to the full list of options instead.

SectionsSections

Each top-level Flexbox, Div Block or Container on the page is a FullPage section. The video below changes the options of the first section, then shows them on the page.

Add SectionsAdd Sections

Add a Flexbox (or a Container) to the page: click the + icon in the drop area, or drag it from the Elements panel. Each new top-level element is a new section. The Structure panel lists your sections.

Elementor Structure Panel

Remove SectionsRemove Sections

Right click on the section and click Delete.

Section OptionsSection Options

Select a section and open the FullPage part of its settings. For a Flexbox or a Div Block it is on the General tab. For a Container it is on the Layout tab.

Section Options

Has Horizontal SlidesHas Horizontal Slides

Turns the section into a section with horizontal slides. See Slides.

Slide Autoplay moves to the next slide on its own, and Slide Autoplay Delay sets the time between slides.

Section BehaviourSection Behaviour

Sets the height of the section.

Section Behaviour

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 and Responsive Height options are set.

FullPage AnchorFullPage Anchor

The anchor shows in the address bar while the section is on screen, and links can use it to go straight to the section.

For example, if the anchor of a section is secondPage, the link http://yoursite.com/#secondPage opens the page at that section.

If you leave it empty, a unique anchor is created for the section.

Note: FullPage Anchor should be unique, and should NOT be the same as any other ID on the page.

Navigation TooltipNavigation Tooltip

The text shown next to this section's navigation bullet.

Disable Scroll OverflowDisable Scroll Overflow

Stops the in-section scrollbar on this section. Use it when Scroll Overflow is enabled but this section doesn't need a scrollbar.

Navigation ColorsNavigation Colors

Nav Color, Nav Hover Color and Nav Active Color change the navigation bullet colors while this section is on screen. They override the page's navigation colors for this section only.

Tooltip Color and Tooltip Background do the same for the tooltip, once the section has a Navigation Tooltip.

SlidesSlides

Slides are the horizontal FullPage elements inside a section.

Turn on Has Horizontal Slides for a section, and each Flexbox, Div Block or Container directly inside it becomes a slide.

Note: In a section with slides, put all content inside the slides. Anything placed directly in the section, next to the slides, may break the page.

Add SlidesAdd Slides

Turn on Has Horizontal Slides for the section.
Add a Flexbox (or a Container) inside the section for each slide.
Add your content inside those slides.

Remove SlidesRemove Slides

Right click on the slide and click Delete.

Slide OptionsSlide Options

These options are on the section that holds the slides:

Has Horizontal Slides? turns the section into a section with slides.
Slide Autoplay moves to the next slide on its own.
Slide Autoplay Delay (s) is the time between slides, in seconds.

Each slide also has options of its own:

Slide Options

FullPage Anchor is the anchor of the slide. If it is set, the address of the slide is #section_anchor/slide_anchor. If it is empty, the slide number is used, like #section_anchor/2.
Disable Scroll Overflow works like the section option.
Nav Color, Nav Hover Color and Nav Active Color work like the section options, while this slide is on screen.

NavigationNavigation

The Navigation section of the FullPage page settings has the options for section and slide navigation.

FullPage for Elementor Navigation Options

Section NavigationSection Navigation

The navigation bar made up of small circles (bullets), one for each section. Click the edit icon next to Section Navigation to see its options.

FullPage for Elementor Section Navigation Options

Section Navigation: Where the bullets are shown: Off, Left or Right.
Section Navigation Style: The style of the bullets.
Show Active Tooltip: Shows the tooltip of the active section next to its bullet all the time.
Clickable Tooltip: Clicking a tooltip also goes to its section.
Bigger Navigation: Shows bigger bullets.

These options can be set for each device (desktop, tablet and mobile):

Show: Shows or hides the bullets.
Main Color: The color of the bullets.
Hover Color: The color of the bullets when the mouse is on them.
Active Color: The color of the active section's bullet.
Tooltip Background Color: The background color of the tooltips.
Tooltip Text Color: The text color of the tooltips.
Space: The distance of the bullets from the left or right side of the page.

Section Navigation ButtonsSection Navigation Buttons

Adds previous and next buttons to the page, to move between sections.

FullPage for Elementor Section Navigation Buttons Options

Section Navigation Buttons: Where the buttons are shown: Off, Left or Right.
Style: The style of the buttons.
Color: The color of the buttons.
Background Color: The background color of the buttons.

Slide NavigationSlide Navigation

The navigation bar made up of small circles (bullets) for the slides of a section.

FullPage for Elementor Slide Navigation Options

Slides Navigation: Where the bullets are shown: Off, Top or Bottom of the section.
Slide Navigation Style: The style of the bullets.
Bigger Slide Navigation: Shows bigger bullets.

These options can be set for each device (desktop, tablet and mobile):

Show: Shows or hides the bullets.
Main Color: The color of the bullets.
Hover Color: The color of the bullets when the mouse is on them.
Active Color: The color of the active slide's bullet.
Space: The distance of the bullets from the top or bottom of the section.

Control ArrowsControl Arrows

Shows the left and right arrows to move between slides.

Control Arrows Options

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

Lock AnchorsLock Anchors

Controls whether URL anchors have any effect on fullPage navigation.

Disable AnchorsDisable Anchors

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

Animate AnchorAnimate 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 ScrollingKeyboard Scrolling

Enables keyboard navigation between sections and slides.

Record HistoryRecord 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 is off.

ScrollingScrolling

Scrolling section includes the options about scrolling mechanism.

FullPage for Elementor Scrolling Options

Auto ScrollingAuto 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 SectionFit 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.

Fit To Section Delay is the wait, in milliseconds, before the section snaps into place.

Scroll BarScroll Bar

Enables a visible scrollbar alongside fullPage. Auto Scrolling still works, users can also drag the scrollbar, and fullPage snaps to the nearest section when scrolling stops.

Scroll OverflowScroll Overflow

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

Scroll Overflow Options

Mac Style Scroll Overflow shows a "mac style" scrollbar instead of the default one, which looks quite different on Windows computers.

Continuous VerticalContinuous Vertical

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

Loop BottomLoop Bottom

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

Loop TopLoop Top

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

Loop SlidesLoop Slides

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

Skip Intermediate ItemsSkip Intermediate Items

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

Big Sections DestinationBig 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.

EasingEasing

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

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

JavaScript Easing Options

Scrolling SpeedScrolling Speed

Speed in milliseconds for the scrolling transitions.

DesignDesign

Design section includes options about the elements of fullpage.

FullPage for Elementor Design Options

Vertical AlignmentVertical Alignment

Sets the vertical position of the content within sections and slides: Top, Center (default) or Bottom. Choose Default to keep the alignment you set on each element.

Adjust on Nav ResizeAdjust 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 WidthResponsive 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 HeightResponsive 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.

Fixed ElementsFixed 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 ElementsNormal 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 CSSCustom CSS

You can add your custom CSS. This CSS will only be enabled when FullPage is enabled.

EventsEvents

The Events section has the JavaScript events of fullpage.js. Each event runs the code you give it when the event fires.

FullPage for Elementor Events

FullPage for Elementor Event Code

afterRenderafterRender

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.

afterResizeafterResize

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

afterLoadafterLoad

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

beforeLeavebeforeLeave

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

onLeaveonLeave

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

afterSlideLoadafterSlideLoad

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

onSlideLeaveonSlideLeave

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

onScrollOverflowonScrollOverflow

Fires while scrolling inside a scrollable section, when Scroll Overflow is enabled.

afterResponsiveafterResponsive

Fires whenever fullPage switches between normal and responsive mode.

afterReBuildafterReBuild

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

Before FullPageBefore FullPage

Fires right before fullpage.js initializes.

After FullPageAfter FullPage

Fires right after fullpage.js initializes.

ExtensionsExtensions

Extensions section includes FullPage Extension options. The extensions can be purchased on 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 ExtensionInstalling The Extension

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

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

Click on Install Extension button.

Installing Extension

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

Activating The ExtensionActivating 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

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

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

Extension Installed

If you don't like the automatic activation process and you want to manually activate your license, go to the activation web site 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 ExtensionUsing The Extension

After the extension is installed,

Open Page Settings and turn on Enable FullPage Extensions in the Extensions section.
You should see the extension. Enable the corresponding extension and adjust its option(s) as suitable.

Extension Options

Removing the ExtensionRemoving the Extension

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

CustomizationsCustomizations

FullPage for Elementor Customizations

Video AutoplayVideo 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 MarginsRemove Theme Margins

Removes the margins and paddings of the page wrapper, so FullPage can fill the whole width of the screen.

Force Fixed Theme HeaderForce Fixed Theme Header

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.

If you designed your theme header using Elementor, the Theme Header Selector option should be set to .elementor-location-header.

Show Theme FooterShow Theme Footer

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 FullPageHide 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 LinksOverride FullPage Links

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

Override Anchor LinksOverride Anchor Links

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

Extra ParametersExtra Parameters

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

AdvancedAdvanced

FullPage for Elementor Advanced Parameters

Section SelectorSection Selector

If needed, the JavaScript selector of the sections can be given here.

Slide SelectorSlide Selector

If needed, the JavaScript selector of the slides can be given here.

ObserverObserver

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

Enable JQuery DependencyEnable 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 TemplateEnable Empty Page Template

By default, FullPage for Elementor uses an empty page template, and this option is enabled. When FullPage is enabled on a page, the page loads without your theme's header, footer and page title.

Disable this option to use your theme's template instead. You might need some CSS and JavaScript knowledge to adjust how the page behaves.

Use Template RedirectUse 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.

Remove Theme JSRemove 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 JSRemove JS

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

FAQFAQ

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

Yes, you can! You can deactivate your license on your old server and use the same license on your new server. Please see License Key section for more information.

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

You can manage your licenses on the dashboard.

Alternatively, you can deactivate your license on the deactivation page. 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?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!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 section for the tutorial video that shows how to install them.

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

Please find more information at 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?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 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 option for the sections.

I cannot see my header and footer!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.

I cannot scroll to my footer!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 customization.

Sections are getting cut off! I cannot see the rest of my content!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 option. This will create an in-section scrollbar.

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

If you want to remove the anchors (your-domaion.com/#anchor), you can enable Lock Anchors or 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?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 option to enable scroll based animations.

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

FullPage for Elementor v3.0 is a major update, rebuilt for Elementor 4. It needs Elementor v3.32 or later (Elementor 4 is recommended), WordPress v6.8 or later and PHP v7.4 or later. To update the plugin from v2.X to v3.0, please follow the instructions below:

Before updating, please take a database backup as a precaution.
Update Elementor to v3.32 or later, then update FullPage for Elementor plugin to the latest version.
For each page/post designed with FullPage for Elementor (FullPage is enabled):
- Edit the page/post.
- The old Elementor Section, Column and Inner Section elements are not supported any more. If your page uses them, replace each top-level Section with a Flexbox (or a Container), and each Inner Section that was a slide with a Flexbox (or a Container). Move your content into the new elements, and set the section options again: FullPage Anchor, Section Behaviour, Has Horizontal Slides and the others.
- The Full Height Columns option is removed. Use the size and alignment settings of the Flexbox instead.
- The Is Header a Section? option is removed.
- The Template Path option is removed. A page always uses the plugin's empty page template, or your theme's template when Enable Empty Page Template is off.
- Check the Vertical Alignment of your pages. Top and Bottom are back, and Default keeps the alignment you set on each element.
- For Offset Section extension users, if you have changed the default option of Data Centered for any section, please check it again. It is in the FullPage options of each section.
- For users that have custom CSS or JavaScript options, please check your site after the update. You can use support for your customized scripts and styles.
- The Setup Wizard can help you check the main options again.
- 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 and we will try our best to help you…

DocumentationfullPage.js for Elementor Builder for WordPress