Adventure: A Free Divi Layout
Make a quick start to your next project
Adventure is a responsive Divi layout with a clean, elegant design and a beautiful colour combination. It is not a complete website but rather gives a rough idea of the design. All modules can be easily copied and used on other pages.
Requirements: The Adventure Divi layout requires that you have the Divi parent theme for WordPress installed. It is not included with this product.
- adventure-master.json – importing this file will add the full layout and all of the individual sections to your Divi Library.
- adventure-full-layout.json – this is just the full Adventure layout.
- gallery images folder – this folder contains 12 images used in the gallery module of the Adventure layout.
Installing Adventure Layout
After Adventure layout pack is downloaded, you can add it to your Divi website by following these steps:
- Go to Divi → Divi Library → Import & Export → Import > Select the Adventure Master file
- Create a new page and activate the Divi Builder
- Click Load From Library → Add From Library → Adventure
The Adventure layout pack comes with 6 custom designed sections that guarantee a great user experience. We have used the latest design principles and applied material design styles, so that you can be sure users are going to love it! Each section has attractive hover effects applied which makes the layout extremely interactive.
Hero Image Section
This section only has one row and a Call To Action module which is used for displaying a background image with a big heading and a button. For editing the image, text and button we need to open the module settings where we then upload our own image, and where we add/edit text and setup the link for the button etc.
Gallery with Icons
The Gallery Module is ideal for displaying beautiful places, travel photos and amazing moments. After each image is clicked, the slider gallery opens so that users can easily slide the images and see them enlarged.
The Gallery section is built with 3 rows.
The first row is a Call To Action module where you type the heading and a little descriptive text.
The second row is the Gallery Module. Here you select the images and set the number and order of images to be displayed.
The third row is a 4 column layout with 4 blurbs, one in each column. To edit the Blurb Module, go to the Blurb Module settings and edit the text, change the icon or even setup a link.
The Team section is shared over 3 columns. In each column we have a Person Module with a pleasant animation. The profile picture zooms in and out on mouseover. The social media icons are hidden by default and they slide up smoothly after mouseover. This module offers several team options like name, title, description, social media links and profile image.
Image with Text
Below the Team section we have a custom section with an image on the left and text description on the right. The first column has a background image setup with the option to enable the parallax effect. In the second column we can see 3 Text Modules with different styles applied.
Testimonials for your website showcase how others have benefitted from your products or services, making it an excellent tool for establishing trust and encouraging potential buyers to take action.
The section features a parallax background and two modules inside. First is Call To Action module that displays your headline text above the testimonials.
The Slider Module description field is where you would put your testimonial text and accompanying photo – we recommend two to five slides.
Image Box with Text
In this section we decided to add some fun effects and play with the font colors. Each box zooms in and out on mouseover.
To build this section we used a 2 column layout. One column has a background image setup. In the second column there are 3 text modules that can be easily edited by going to Text Module Settings.
This section is ideal to showcase popular places, attractions and other special items.
The Call To Action
We all know how a CTA is important on every website. It calls users to take action. In this case we want the user to click on the button to open a new page, a popup window, etc.
In this section we have a background image with parallax effect and a CTA Module inside. In the customizer settings we can edit the text and button styles.
The modules above and below are overlapping this section making it more eye-catching and unique.
We hope you enjoy this layout and that it will save you time and jump starts your next Divi website project. If you have any questions, please feel free to ask and we will try to answer as best as we can.
If you’re ready to learn more about Divi and get more Divi freebies, make sure you subscribe to our newsletter so that you don’t miss anything!