If you are in search of making a full page section web with in divi like this beautiful web. Then here is a tutorial on how to do that.
Step 1:
Lets make a Divi environment, First create a page and call it home and set it “Blank Page” in page attribute like figure 1.1

Figure 1.1
Now go to Dashboard > Settings > Reading and make your created page as static front page like in figure 1.2
Now after doing that copy following code
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.5/jquery.fullpage.css" /> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.5/jquery.fullpage.js"> </script> <script type="text/javascript"> $(document).ready(function() { $('#fullpage').fullpage({ anchors: ['home', 'about', 'services', 'contact'], menu: '#menu', scrollingSpeed: 1000 }); }); </script>
Step 2:
Now return back to page which you have created as front page and give your section an id with name “fullpage” (without inverted commas obviously. The trick part for this web is you have to use one section only because everything which come under this id will appear as full page. So you have to develop different section by using Rows. Lets have a look at this instruction in pictures for clear understanding. Figure 1.4 is to highlight what is section and figure 1.5 is to highlight where ID need to be insert.
After doing this create row and give it a class with name “section” (obviously without inverted commas). Now create as many rows as you want, it will be displayed on Front End as full page section. Under this one row you can display content that you want to show in one section. Now again lets have a look quickly in pictures for better understanding. Figure 1.6 will highlight what is Row and figure 1.7 will highlight where to insert class.
That’s it. Now create as many Rows you want it will be displayed as Section or page whatever you call it on front end.
Step 3: (optional if you don’t want menu skip it)
How menu work for this web? In this web menu is dependent on data-menuanchor=”XXX” and ID given to menu. Remember we have added a link in jQuery script in above mention code which is anchors: [‘home’, ‘about’, ‘services’, ‘contact’]
So in this web menu work on basis of these anchors. Here number of anchors are equal to number of rows that you have created.
So a menu will look like this
<ul id=”menu”>
<li data-menuanchor=”home”><a href=”#home”>HOME</a></li>
<li data-menuanchor=”about”><a href=”#about”>ABOUT</a></li>
<li data-menuanchor=”services”><a href=”#services”>SERVICES</a></li>
<li data-menuanchor=”contact”><a href=”#contact”>CONTACT</a></li>
</ul>
Now obviously you have to style menu through custom CSS.
In this way you can create a menu. Note: in jQuery anchors will work in order form, it will not detect text.
For example:
You have anchors [‘section1’, ‘section2’, ‘section3’] and you have menu
<li data-menuanchor=”home”><a href=”#home”>HOME</a></li>
<li data-menuanchor=”about”><a href=”#about”>ABOUT</a></li>
<li data-menuanchor=”services”><a href=”#services”>SERVICES</a></li>
so here system will automatically consider home = section1, about=section2 and services=section3
The order or sequence in anchor in jQuery is directly dependent on order or sequence of Rows you created. Your first row will be the first item in anchors:[‘XXX’,….]
That’s it, now you have structure ready it’s time to show your creativity.
If you don’t find this code working then please re-type commas, because by copy code from divi content it change commas like below image so you have to re-type all single and double quotes that are include in Step 1

Awesome tutorial and it helped me out a lot. I was wondering how I could create this with horizontal slides?
Yes, you can.
Here is a link, You might need to do some changes in jQuery script
https://alvarotrigo.com/fullPage/extensions/scroll-horizontally.html#firstPage/1
and here is documentation
https://github.com/alvarotrigo/fullPage.js#options
I think this is a JS for Horizontal scroll
Where,
slidesNavigation: true
is main part for horizontal scrolling.
$(document).ready(function() {
$(‘#fullpage’).fullpage({
anchors: [‘firstPage’, ‘secondPage’, ‘3rdPage’],
sectionsColor: [‘#8FB98B’, ‘#DE564B’, ‘#EAE1C0’],
slidesNavigation: true
});
});
Awesome thanks. I’ll give that a shot. I’ve been playing with this in Divi and got close earlier today.
Hi, great tutorial but i have an issue. In my javascript console i get : “fullPage: data-anchor tags can not have the same value as any `id` element on the site (or `name` element for IE).” and when i slide, i jump from a section to a last blank section. Any Ideas ? Thank you guys
Hi Ivan,
Would you like to share your website url ?
and have you followed all steps ?
Thanks
Hi, following your tutorial, but in JS console I am getting an error – TypeError: $ is not a function. (In ‘$(document)’, ‘$’ is undefined). any ideas, thanks.
Try to retype inverted commas ”
else it must be conflicting with any other plugin that you have.
If that’s not a case then you try my another tutorial on it, which is different from this one and easy too.
here you go: https://gr8xpert.com/divi-full-screen-web/
Let me know if you still find any issue.
Thanks
Went with the following as it worked!
jQuery(document).ready(function() {
jQuery(‘#fullpage’).fullpage();
});