Have you ever thought of creating an entirely horizontal page that uses swipe and anchor links to navigate? Well, if you have and didn’t exactly know how to approach it, this is the ideal post for you. We’re going to show you how to create an entirely horizontal swipe page using Divi. This technique really helps you make your website stand out from others and matches the web design trends of 2019. The outcome we’ll create will look great across all screen sizes.

Let’s get to it!

Preview

Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.

Desktop

swipe page

Mobile

swipe page

Approach

  • We’ll create the entire page using one section only
  • We’re turning that section into a horizontal grid using a few CSS code lines at the end of the tutorial
  • The horizontal grid will place each one of the rows in a horizontally-placed column
  • You get to decide how many horizontal columns a section contains
  • In this case, we’ll make use of 4 different columns that’ll each consist of 2 rows
  • You can modify the number of horizontal columns you create and determine how many rows each one of the section columns contain
  • We’re also using anchor links to help people navigate through the different section columns
  • On top of that, we’re adding a smooth scroll and a section scroll snapping effect that’ll easy the navigation for your visitors

Let’s Start Recreating

Add New Section

Background Color

Create a new page and add a regular section to it. Open the section settings and change the background color.

  • Background Color: #ffffff

swipe page

Spacing

Then, go to the spacing settings and add some custom padding across different screen sizes.

  • Top Padding: 10.5vw (Desktop), 15vw (Tablet), 10vw (Phone)
  • Bottom Padding: 3vw (Desktop & Tablet), 10vw (Phone)

swipe page

Add Row #1

Column Structure

Continue by adding a new row using the following column structure:

swipe page

Sizing

Without adding any modules yet, open the row settings and allow the row to take up the entire width of the screen.

  • Make This Row Fullwidth: Yes
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1

swipe page

Spacing

Go to the spacing settings next and make some changes across all different screen sizes.

  • Top Padding: 0px
  • Bottom Padding: 0px
  • Left Padding: 6vw (Tablet & Phone)
  • Right Padding: 6vw (Tablet & Phone)
  • Column 1 Bottom Padding: 15vw (Tablet & Phone)
  • Column 2 Left Padding: 4vw (Desktop), 0vw (Tablet & Phone)

swipe page

CSS ID

We’ll need to assign a CSS ID to the first row of each one of the section columns we create. This will help us create the anchor arrows later on this post.

  • CSS ID: swipe-1

swipe page

Custom CSS

As mentioned in the approach section of this post, we’re also applying a smooth scroll and snapping effect to the mechanism. To be able to do that, we’ll need to add a single line of CSS code to the first row of each one of the horizontal columns we create.

scroll-snap-align: start;

swipe page

Add Blurb Module to Column 1

Select Icon

We can now start adding modules! Start with a Blurb Module in column 1. Open the module settings and select a left arrow icon.

swipe page

Icon Settings

Then, go to the design tab and make some changes to the appearance of the icon.

  • Icon Color: rgba(255,255,255,0)
  • Image/Icon Placement: Top
  • Use Icon Font Size: Yes
  • Icon Font Size: 5vw (Desktop), 13vw (Tablet), 21vw (Phone)

swipe page

Spacing

Add some custom margin values next.

  • Top Margin: 14vw (Desktop), -11vw (Tablet), -17vw (Phone)
  • Left Margin: 60vw (Tablet & Phone)

swipe page

Visibility

We’re also hiding the module on smaller screen sizes.

swipe page

Add Text Module to Column 2

Add H2 Content

The next module we need is a Text Module in column 2. Add some H2 content.

swipe page

H2 Text Settings

Then, go to the design tab and modify the H2 text settings.

  • Heading 2 Font: Source Serif Pro
  • Heading 2 Text Alignment: Left
  • Heading 2 Text Size: 3vw (Desktop), 7vw (Tablet & Phone)

swipe page

Sizing

Modify the width in the sizing settings next.

  • Width: 77%

swipe page

Spacing

And add some bottom margin for smaller screen sizes.

  • Bottom Margin: 15vw (Tablet & Phone)

swipe page

Add Button Module to Column 2

Add Content

Right below the Text Module you’ve added, go ahead and add a Button Module. Enter some copy.

swipe page

Button Settings

Then, go to the design tab and change around the button settings.

  • Use Custom Styles for Button: Yes
  • Button Text Size: 0.9vw (Desktop), 2vw (Tablet), 3.5vw (Phone)
  • Button Text Color: #000000
  • Button Border Width: 1px

swipe page

  • Button Border Color: #000000
  • Button Border Radius: 0px
  • Button Font: Mukta
  • Font Weight: Bold
  • Font Style: Uppercase

swipe page

Spacing

Add some custom margin and padding next.

  • Top Margin: 6vw (Desktop), 4vw (Tablet & Phone)
  • Top Padding: 15px
  • Bottom Padding: 15px
  • Left Padding: 50px
  • Right Padding: 50px

swipe page

Add Blurb Module to Column 3

Select Icon

The next and last module we need in this row is another Blurb Module in column 3. Select an icon of your choice.

swipe page

Link

Then, go to the link settings and add a link that’ll lead visitors to the second horizontal column of the section.

  • Module Link URL: https://www.yourwebsite.com/page/#swipe-2

swipe page

Icon Settings

Go ahead and change the icon settings too.

  • Icon Color: #333333
  • Image Icon Placement: Top
  • Use Icon Font Size: Yes
  • Icon Font Size: 5vw (Desktop), 13vw (Tablet), 21vw (Phone)

swipe page

Spacing

Continue by adding some custom top and left margin across different screen sizes.

  • Top Margin: 14vw (Desktop), -11vw (Tablet), -17vw (Phone)
  • Left Margin: 60vw (Tablet & Phone)

swipe page

Add Row #2

Column Structure

The second row we need makes use of the following column structure:

swipe page

Background Color

Without adding any modules yet, open the row settings and change the background color.

  • Background Color: #f7f7f7

swipe page

Sizing

Modify the sizing settings next.

  • Make This Row Fullwidth: Yes
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1

swipe page

Spacing

Along with the custom padding and margin values in the spacing settings.

  • Top Margin: -3.5vw (Desktop), -10vw (Tablet), -17vw (Phone)
  • Top Padding: 8vw (Desktop), 15vw (Tablet), 20vw (Phone)
  • Bottom Padding: 8vw (Desktop), 15vw (Tablet), 20vw (Phone)
  • Left Padding: 24vw (Desktop), 5vw (Tablet & Phone)
  • Right Padding: 24vw (Desktop), 5vw (Tablet & Phone)
  • Column 1 Right Padding: 2vw (Desktop), 0vw (Tablet & Phone)
  • Column 2 Left Padding: 2vw (Desktop), 0vw (Tablet & Phone)

swipe page

Add Text Module to Column 1

Add Content

Go ahead and add a Text Module to the first column. Enter some copy of your choice (including an H3 title).

swipe page

Text Settings

Go to the design tab and change the text settings.

  • Text Font: Open Sans
  • Text Size: 0.65vw (Desktop), 1.8vw (Tablet), 2.7vw (Phone)
  • Text Line Height: 1.8em

swipe page

H3 Text Settings

Along with the H3 text settings.

  • Heading 3 Font: Mukta
  • Heading 2 Font Weight: Bold
  • Heading 3 Font Style: Uppercase
  • Heading 3 Text Size: 0.8vw (Desktop), 3vw (Tablet), 4vw (Phone)
  • Heading 3 Line Height: 1.8em

swipe page

Spacing

Add some bottom margin for smaller screen sizes too.

  • Bottom Margin: 5vw (Tablet & Phone)

swipe page

Clone Text Module & Place in Column 2

Once you’re done modifying the Text Module in column 1, you can clone it and place the duplicate in the second column.

swipe page

Change Content

Make sure you change the content.

swipe page

Clone Row #1 Three Times

Once both your rows are done, you can clone the first row 3 times.

swipe page

Change Duplicate #1

Change Row CSS ID

We’ll need to change the CSS ID of the first duplicate.

  • CSS ID: swipe-2

swipe page

Change Blurb Module’s (Column 1) Icon Color

Along with the first Blurb Module’s color.

  • Icon Color: #333333

swipe page

Change Both Blurb Modules’ Links

To make the anchor links work, you’ll have to change the link of each one of the arrows accordingly:

  • Module Link URL: https://www.yourwebsite.com/page/#swipe-1

swipe page

  • Module Link URL: https://www.yourwebsite.com/page/#swipe-3

swipe page

Change Duplicate #2

Change Row CSS ID

Change the CSS ID of the second duplicate.

  • CSS ID: swipe-3

swipe page

Change Blurb Module’s (Column 1) Icon Color

Along with the icon color of the first Blurb Module.

  • Icon Color: #333333

swipe page

Change Both Blurb Modules’ Links

And again, change the links of each Blurb Module accordingly:

  • Module Link URL: https://www.yourwebsite.com/page/#swipe-2

swipe page

  • Module Link URL: https://www.yourwebsite.com/page/#swipe-4

swipe page

Change Duplicate #3

Change CSS ID

Change the CSS ID of the third row duplicate too.

  • CSS ID: swipe-4

swipe page

Change Blurb Module’s (Column 2) Icon

And select another icon for the Blurb Module in column 3.

swipe page

Change Blurb Module’s (Column 2) Link

Make sure that on click, the visitor will be redirected to the first section column by modifying the Module Link URL accordingly:

  • Module Link URL: https://www.yourwebsite.com/page/#swipe-1

swipe page

Clone Row #2 Three Times

On to the next row. Clone this row three times as well.

swipe page

Change Row Background Color of Duplicate #1

Change the background color of the first duplicate.

  • Background Color: #dcdced

swipe page

Change Row Background Color of Duplicate #2

The second duplicate makes use of the following background color:

  • Background Color: #ffeed1

swipe page

Change Row Background Color of Duplicate #3

Change the background color of the third row duplicate too.

  • Background Color: #d6ffe5

swipe page

Add CSS ID & CSS Code to Section

Now that we have all the rows we need, we can make the magic happen. Add a CSS ID to the entire section. Later on this post, we’ll use this CSS ID to hide the scrollbar.

  • CSS ID: section-scrollbar

swipe page

Then, go to the Custom CSS options and add some lines of CSS code to the main element.

overflow-y: scroll;
display: grid;
grid-template-columns: repeat(4, 100%);
scroll-behavior: smooth;
scroll-snap-type: x mandatory;

The more section columns you want to create, the more columns you’ll have to add in the CSS code. So, say for instance you want to have the same structure but allow 7 swipes instead of 4, you’ll have to modify the grid template columns CSS code line accordingly:

grid-template-columns: repeat(7, 100%);

But bear in mind that you’ll have to add more rows if you’re increasing the column number. So in this case, if you want two rows to appear per section column, you’ll need 14 rows.

swipe page

Hide Scrollbar

You can also choose to hide the scrollbar by using the section CSS ID and adding the following lines of CSS code to the page settings:

#section-scrollbar::-webkit-scrollbar {
display: none;
}

swipe page

swipe page

Preview

Now that we’ve gone through all the steps, let’s take a final look at the outcome on different screen sizes.

Desktop

swipe page

Mobile

swipe page

Final Thoughts

When designing websites with Divi, the most straightforward thing to do is build downwards. But just because it’s the most straightforward thing to do, doesn’t mean you’re limited to that option. You can create an entirely horizontal swipe page as well. In this tutorial, we’ve shown you how to achieve some stunning horizontal swipe web design using Divi. If you have any questions or suggestions, make sure you leave a comment in the comment section below!

Share This: