Download Zenyatta .json Free Divi Layout

Download the .zip file and unzip the file. Then open a new page and upload directly to the page. Don’t forget to save. To change the hero image, upload a new image 1920 x 1080 into the media folder, copy the path and replace the image path in the code module css.

Sign Up for Discounts and Specials

This is a form module, you can swap it out for an optin module here.

Code Module is hidden right here (black bar) , the downloaded version is transparent.

This is ZENYATTA, this is what we do.

THE JOURNEY

GET STARTED?

OUR TOURS

ALL THE GOOD STOPS

BOOK TODAY

SO DON’T MISS OUT

This is WHERE we go.

COASTAL     –     CASTLES     –     HIKING     –     RAFTING

Lorem ipsum dolor sit amet, has ponderum lucilius aliquando ei. Ceteros postulant ius ne. Vis in primis nominavi adolescens, id eum enim adipisci. Usu enim graeci dissentiet in, ei vim liber dolore.

COASTAL

PACIFIC HWY

CASTLES

OF IRELAND

RAFTING

GRAND CANYON

ZENYATTA
IS YOU.

Lorem ipsum dolor sit amet, has ponderum lucilius aliquando ei. Ceteros postulant ius ne.

How to get started.

Features You May Need

Videos

A few videos about who we are and what we do, along with video testimonials from clients.

Schedule

Schedule an appointment with us and we’ll come up with a plan that works within your budget.

Documents

Here are a list of documents design to help streamline your business and get you making money fast without thinking.

Ready for Bookly integrated booking app – The best booking app in the business.

bookly

This is only an example of one of many different types of Booking Sites you can work with your client on integrating with shortcode in a text module or script in a code module.

Back-end screen shot for set-up

http://demo3.booking-wp-plugin.com/demo/

And there’s more.

Replace this for your SEO

In The Country

Lorem ipsum dolor sit amet, has ponderum lucilius aliquando ei. Ceteros postulant ius ne. Vis in primis nominavi adolescens, id eum enim adipisci. Usu enim graeci dissentiet in, ei vim liber dolore.

Rebum elitr lobortis ut vis, appellantur voluptatibus ea vel. Suas legere expetenda qui at, summo facilisi accusata pri id, enim utroque vix et. Pro ex vivendo sensibus.

In The City

Nibh nominati his an, inciderint disputationi no vel. Eos virtute indoctum definiebas eu, ad qui noster iudicabit mediocritatem, cibo quodsi complectitur ius ei. Ei pro oratio omnesque accommodare, eirmod repudiare id has.

Rebum elitr lobortis ut vis, appellantur voluptatibus ea vel. Suas legere expetenda qui at, summo facilisi accusata pri id, enim utroque vix et. Pro ex vivendo sensibus.

ZENYATTA

CSS code for this layout (remove after)

ZENYATTA

COLORS:
#986e5a – Orangy Gray

#ff7d37 – Orange

/*—CSS – copy this code below to your custom CSS in the Divi Theme Options—*/

.primary {
cursor: pointer;
}

.primary img {
filter: url(“data:image/svg+xml;utf8,#grayscale”);
/* Firefox 10+, Firefox on Android */
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
/* IE 6-9 */
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;

}

.primary:hover img {
filter: url(“data:image/svg+xml;utf8,#grayscale”);
-webkit-filter: none;
filter: none;
}

/*—–Ken Burns Header—–*/
.dojo-kenburns-header {
overflow:hidden ;
position: relative;
padding: 0;
}
.dojo-kenburns-header:before {
content: “”;
position: absolute;
left:0; /*Left and Top sets the alignment of the image, you may need to change these if you want the image to move in a different direction*/
top:0;
width: calc(100vw + 120px); /*We are adding some extra width and height to the image so when it zooms and pans we don’t get any whitespace around it. You may need to change these values if you change the values in the keyframes section of CSS below*/
height: calc(100vh + 150px);
z-index: -1;
background: url(https://dividojo.com/wp-content/uploads/2017/04/garrett-parker-hero.jpg); /*Change to the URL of the image you want to use*/
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
-ms-animation:move 20s ease forwards;
-webkit-animation:move 8s ease forwards;
-0-animation:move 20s ease forwards;
-moz-animation:move 20s ease forwards;
animation:move 20s ease forwards; /* This sets the duration of the effect and the value ‘forwards’ tells the effect to stop when its finished rather than loop. */
}
@keyframes move {
from {
-ms-transform: scale3d(1);
-webkit-transform: scale3d(1);
-o-transform: scale3d(1);
-moz-transform: scale3d(1);
transform: scale3d(1); /*This tells the image to start at its original size*/
}
to {
-ms-transform: scale3d(1.2, 1.2, 1.2) translate3d(50px, -120px, 0px);
-webkit-transform: scale3d(1.2, 1.2, 1.2) translate3d(50px, -120px, 0px);
-o-transform: scale3d(1.2, 1.2, 1.2) translate3d(50px, -120px, 0px);
-moz-transform: scale3d(1.2, 1.2, 1.2) translate3d(50px, -120px, 0px);
transform: scale3d(1.2, 1.2, 1.2) translate3d(50px, -120px, 0px); /*This tells the image to finish at 1.2x it’s original size and at a position of 50px on the X axis and -120px on the Y axis. You can adjust these values to get the effect you want*/
}
}
/* NEWSLETTER SIGNUP */
.newsletterSignup .et_pb_contact_form {
margin: 0 auto;
max-width: 600px;
position: relative;
left: 24px;
}
.newsletterSignup input[type=”text”] {
border: 1px solid #fff;
color: #fff;
border-radius: 3px;
background-color: rgba(0,0,0,.2) !important;
font-weight: 500 !important;
}
.newsletterSignup .et_contact_bottom_container {
float: left;
margin-top: 0;
}
.newsletterSignup button[type=”submit”] {
border-radius: 3px !important;
background-color: #ff7d37 !important;
color: #fff !important;
font-family: ‘Lato’, Helvetica, Arial, sans-serif !important;
font-size: 15px !important;
font-weight: 800 !important;
letter-spacing: 2px !important;
text-transform: uppercase;
font-weight: 600 !important;
border: none !important;
line-height: 30px !important;
padding: 11px 24px 12px 24px !important;
left: -8px !important;
}
.newsletterSignup button[type=”submit”]:hover {
background-color: rgba(255,255,255,.7) !important;
padding: 11px 24px 12px 24px !important;
}
@media screen and (max-width: 1140px) {
.newsletterSignup .et_pb_contact_form {
left: 6%;
}
}
@media screen and (max-width: 1040px) {
.newsletterSignup .et_pb_contact_form {
left: 7%;
}
}
@media screen and (max-width: 870px) {
.newsletterSignup .et_pb_contact_form {
left: 8%;
}
}
@media screen and (max-width: 767px) {
.newsletterSignup .et_pb_contact_form {
left: 0;
}
.newsletterSignup .et_pb_contact_field_0 {
max-width: 100%;
padding-left: 0 !important;
}
.newsletterSignup .et_contact_bottom_container, .newsletterSignup button[type=”submit”] {
width: 100%;
}
.newsletterSignup button[type=”submit”] {
left: 0 !important;
margin-left: 0 !important;
}
}