Tutorial
You can open the sidebar and use it to see what you could change in the Drupal backend of this theme.
(This is only appearing in the preview link and will not be in the purchased theme.)
Continue tutorial
Don't show this again
In this section you can test the global settings for this theme.
(Please be aware of the fact that you will have to use the drupal backend to do those changes in the actual purchased theme. This is just an example to show what you could change.)
These toggles are global settings for the page. If you click on of them you will see the change directly in this preview.
You can modify every color. Try to change the main font-color!
Button:
You can reset every color to it's default-color with the button next to it.
Button:
This section is for the panels
- : change the panel order with drag and drop
- : edit the settings of each panel
- : hide the panel. You can still bring it back when you scroll down in this sidebar to the "disabled panels" section
Theme settings & options
Navigation sticky after scroll
(works only if the first panel is either "Hero" or "Hero Slider")
Navigation with brand-logo
/* general */
body{
background-color: bg_main;
color: font_main;
}
hr{
background-color: font_secondary;
}
h6.subtitle,
.panel-comments .reply-wrap{
color: font_secondary;
}
.color-bg-secondary{
background-color: bg_secondary;
}
/* inputs */
input[type="text"],
input[type="email"],
input[type="password"],
textarea{
background-color: bg_secondary;
color: font_main;
}
/* main nav*/
.main-nav a,
#mobile-overlay a,
#mobile-overlay .social{
color: font_main;
}
.main-nav a:hover,
.main-nav a.active,
#mobile-overlay a:hover,
#mobile-overlay a.active{
color: font_secondary;
}
/* cta */
.cta,
input[type="submit"],
#sliding-popup .eu-cookie-compliance-buttons button{
color: btn_color_main;
border: 2px solid btn_color_main;
}
.cta:hover,
input[type="submit"]:hover,
#sliding-popup .eu-cookie-compliance-buttons button:hover{
color: btn_main_hover;
background-color: btn_color_main;
}
.cta.cta-white,
#sliding-popup .eu-cookie-compliance-buttons button.decline-button{
color: btn_color_secondary;
border: 2px solid btn_color_secondary;
}
.cta.cta-white:hover,
#sliding-popup .eu-cookie-compliance-buttons button.decline-button:hover{
color: btn_secondary_hover;
background-color: btn_color_secondary;
}
/* slick slider */
.slick-dots li button{
background-color: bg_secondary;
border: 1px solid font_main;
}
.slick-dots li.slick-active button{
background-color: font_secondary;
border: 1px solid font_secondary;
}
/* cookie banner */
#sliding-popup .eu-cookie-compliance-message button{
color: font_main;
}
/* tags */
.tag{
background-color: font_secondary;
color: font_dark};
}
/* comments */
.panel-comments .reply-wrap{
color: font_secondary;
}
/* sidebar */
.sidebar li{
color: font_main;
}
.sidebar li.active{
color: font_secondary;
}
/* pagination */
.blog-post-tesaer-wrap nav a{
color: font_secondary;
background-color: bg_secondary;
}
/* hover-details-overlay-effect-1 */
.hover-details-overlay-effect-1 .details-container{
color: font_main;
}
.hover-details-overlay-effect-1 .details-container hr{
background-color: font_main;
}
/* panel-image-grid */
.panel-image-grid .filter-bar .mobile-dropdown{
background-color: bg_secondary;
}
.panel-image-grid .filter-bar .filter-trigger{
color: font_main;
background-color: bg_secondary;
}
.panel-image-grid .filter-bar .filter-trigger.active,
.panel-image-grid .filter-bar .filter-trigger:hover,
.panel-image-grid .filter-bar .icon-filter{
color: btn_main_hover;
background-color: btn_color_main;
}
/* panel-usp */
.panel-usp .element-usp .icon-wrap i,
.panel-usp .element-usp .icon-wrap .text-wrap .subtitle,
.panel-usp .element-usp h2,
.panel-usp .element-usp h3,
.panel-usp .element-usp h4,
.panel-usp .element-usp h5,
.panel-usp .element-usp h6{
color: font_secondary;
}
/* panel about*/
.panel-about .element-about h6{
color: font_secondary;
}
/* panel-faq */
.panel-faq .faq-element{
background-color: bg_secondary;
border: 1px solid bg_secondary;
}
.panel-faq .faq-element .faq-title{
color: font_main;
}
.panel-faq .faq-element .faq-title:hover{
color: font_secondary;
}
.panel-faq .faq-element.active-faq{
border: 1px solid font_secondary;
}
.panel-faq .faq-element.active-faq .faq-title{
color: font_secondary;
}
/* panel-hero---panel-bg-with-text */
.panel-hero hr,
.panel-bg-with-text hr{
background-color: font_main;
}
.panel-hero .text-layer .inner-text-layer:before,
.panel-bg-with-text .text-layer .inner-text-layer:before{
background-color: txt_read_dark;
}
.panel-hero.bg-bright .text-layer .inner-text-layer:before,
.panel-bg-with-text.bg-bright .text-layer .inner-text-layer:before{
background-color: txt_read_bright;
}
.panel-hero.bg-bright hr,
.panel-bg-with-text.bg-bright hr{
background-color: font_dark;
}
.panel-hero.bg-bright .text-layer,
.panel-bg-with-text.bg-bright .text-layer{
color: font_dark;
}
Colors - backgrounds
Background color - secondary
Colors - buttons
Button - main - font color
Button - main - font color - hover
Button - secondary - font color
Button - secondary - font color - hover
Colors - text readability helpers
Text readability helper - dark
Text readability helper - bright
Active panels
Explanation
You can change in this panel:
- the items of the navigation (All, Autumn...)
- each image (add as many as you want)
- the mouseover text of each element
Each image opens it own popup which can be:
- a bigger version of the image
- an image carousel with more images
- a video
Explanation
You can change in this panel:
- each element (add as many as you want)
- the mouseover icons of each element
Explanation
This panel has the exact same options as the "Hero".
You can add as many element to it as you want to.
The settings like text-color are unique for every slide and not for the entire panel. So you would be able to add very bright and very dark images to it.
Explanation
You can change the icon and text for each element
Explanation
This panel has the exact same options as the above "BG Image & text"
Explanation
This panel will show the last X (you can define that number) posts from your blog automatically
Explanation
You can add as many FAQ as you want in here
Explanation
You can:
- add as many input fields as you want
- customize the form
- define the page where a user gets redirect after pressing submit
Disabled panels
