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

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>

and paste it in Divi > Theme Options > Integration (tab) > (Add code to the < head > of your blog) and that’s it. Like figure 1.3

Figure 1.3

Congratulation! So here we have completed step 1 which is hard part of this tutorial.

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.

Figure 1.4

Figure 1.5

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.

Figure 1.6

Figure 1.7

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.