Adventure: A Free Divi Layout

Apr 12, 2017 | Divi | 26 comments

Today we would like to introduce you to our brand new Divi layout, Adventure. This layout is suitable for travel agencies, personal/travel blogs, portfolios, photo galleries and more…

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.

What’s inside

  • 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:

  1. Go to Divi > Divi Library > Import & Export > Import > Select the Adventure Master file
  2. Create a new page and activate the Divi Builder
  3. Click Load From Library > Add From Library > Adventure

Getting Started


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.

Team Section


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.

The Testimonial

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.

Final thoughts


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!

Download LayoutLive Preview

Maciej Ekstedt

Maciej Ekstedt

Creative Director

Premium WordPress Divi Child Theme for real estate professionals, experts and agencies. Get 15% discount with coupon code ESTATE15

26 Comments

  1. Kossi Eric

    Great layout… Thanks for sharing.
    Please where can I find the CSS code you used to style the “Image with Text” and “Image Box with Text” sections.
    Thanks for all

    Reply
  2. Jerome

    Hi Maciej,
    Great layout pack. Having trouble getting it to download. I have filled out the form several times but have yet to be redirected to a download page, initiate a download or receive a download link via email. Can you assist?

    Reply
    • Maciej Ekstedt

      Hello Jerome, indded we are having caching issues. It should be fine now. Please try again and let me know how it goes! Sorry for any inconveniances caused.

      Reply
      • Jerome

        Thanks Maciej,
        Download working now.

        Reply
  3. Steven

    Thanks Maciej, truly a very clean and very elegant design. It’s got everything a onepage website could wish for. Very good study material, thanks again!

    Reply
  4. Al

    Thanks for the generosity always, another fantastic layout!

    Reply
  5. Breck

    Hello, thanks for this great layout! Thank you for sharing this. Question: What is the best way to change the (purple) gradient color? This is in the gallery section of the layout. I see that it’s a CSS class, but I can’t find it anywhere. What is the CSS to change the color or attributes?

    Reply
    • Maciej Ekstedt

      Hi Breck,
      Thank you for your comment. I’m glad you like it. You can change gradient color by editing .gradient class. All css can be found at the top of your page in first Divi Module called “code”. Hopefully this helps 🙂

      Reply
      • Breck

        Thanks! This helps a lot. I completely missed that.

        Reply
  6. Thomas

    Great share and very well documented, Thanks!

    Reply
    • Maciej Ekstedt

      Thank you Thomas 🙂 Glad to hear that!

      Reply
  7. Danny

    Thanks for sharing.

    Will be useful as I’m in travel!

    Just one question is the section under the very top image supposed to be off centre?

    Thanks Danny

    Reply
    • Maciej Ekstedt

      Hi Danny. Thank you for your comment and yes, it suppose to be like that 🙂

      Reply
  8. Doug

    How can I change the color of the greenish button? Sorry. I’m just not seeing it.

    Reply
    • Maciej Ekstedt

      Hello Doug, Please check and edit CSS code placed in first module. To change button color search for .big-button class. Hopefully this helps 🙂

      Reply
  9. Kevin

    Hi, is it possible to just import one section and not the whole layout.
    thank you.

    Reply
    • Maciej Ekstedt

      Hi Kevin, unfortunately not. Full page layout has to be imported and then you can extract sections you would like to use. Please be advised, you would also have to copy CSS code required for your section. All CSS is embedded in first module.

      Reply
      • Kevin

        Thanks, Love the layout

        Reply
  10. Dundee

    You guys have taste for the web 🙂

    Reply
  11. Ahmed Metwally

    Thanks a lot for this great layout, I really liked it.
    Please after I imported it the testimonials section was not included.
    Please advise on how to get it.
    Regards,

    Reply
    • Maciej Ekstedt

      Hi Ahmed,
      Thank you for reporting this. I have checked and indeed there was some issue with the layout. I think this could be caused by some of the latest Divi updates. Anyways, I have uploaded new zip file so you can download and import new json with working testimonials section.

      Reply
      • Ahmed Metwally

        Hi Maciej,
        The newly uploaded json file works perfectly now.
        Thanks a million!

        Reply
  12. Roberto Arturo Ayala

    Hi Maciej I have been working for Divi and I am not an expert. My question is, how do I place a footer, as the template does not seem to bring it. Thank you very much.

    Reply

Leave a Reply to Jerome Cancel reply

Your email address will not be published. Required fields are marked *

Shares

Sign up to our newsletter list

Pin It on Pinterest

PGlmcmFtZSB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUuY29tL2VtYmVkL1N6X0ZpNGh6bFdvP2F1dG9wbGF5PTEmc2hvd2luZm89MCZ2cT1oZDcyMCZjb250cm9scz0wIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3dmdWxsc2NyZWVuPjwvaWZyYW1lPg==
PGlmcmFtZSB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUuY29tL2VtYmVkL0l4NDZjTmNPMFlvP2F1dG9wbGF5PTEmc2hvd2luZm89MCZ2cT1oZDcyMCZjb250cm9scz0wIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3dmdWxsc2NyZWVuPjwvaWZyYW1lPg==
Are You Ready To Succeed?
If you have any questions or would like to find out more about our services please fill out this form and we will get back to you as soon as possible.
Your Information will never be shared with any third party.
Your Information will never be shared with any third party.
Hi there! We’d love to help you out. Leave us a message and we’ll get back to you as soon as possible.
Write a review
We would love to hear your feedback. Please take a moment and fill out this form.
Your Information will never be shared with any third party.
PGlmcmFtZSB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUuY29tL2VtYmVkL2ZrcURZbVRZVVowP2F1dG9wbGF5PTEmc2hvd2luZm89MCZ2cT1oZDcyMCZjb250cm9scz0wIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3dmdWxsc2NyZWVuPjwvaWZyYW1lPg==
Your Information will never be shared with any third party.
Thank you!
Your message has been sent.
We will get back to you in the earliest convenience.
FOLLOW US
Server settings:
Requirements
  • PHP 5.6 or later
  • upload_max_filesize (256M)
  • max_input_time (300)
  • memory_limit (256M)
  • max_execution_time (300)
  • post_max_size (512M)
PHP.ini Settings:
  • php-xml or/and php-dom
  • XMLReader
  • PHP CURL module
PHP Modules:
  • allow_url_fopen
  • allow_url_include
A regular license allows an item to be used in one project for either personal or commercial use by you or on behalf of a client. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.
Extended license
An extended license allows an item to be used in unlimited projects for either personal or commercial use. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.
Regular license
License details
Subscribe Now
Join our mailing list to receive the latest news directly to your inbox.
    
DiviEstate
Premium WordPress Divi Child Theme for real estate professionals, experts & agencies.
Testimonial Slider
Testimonial Slider is a highly customizable Divi Plugin that will help you add a slider of various testimonials received from customers, partners or valuable users.
Bruno
Premium Divi Child Theme
BRUNO is perfect for various business domains such as web design, online courses, coaching, agency, finance and many more.
Adventure: A Free Divi Layout