GeneratePress
Style Guide
I am the Elementor Hero template
Typography
Poppins
Poppins 17px Normal
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZZ
Poppins 17px 700
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZZ
Geometric sans serif typefaces have been a popular design tool ever since these actors took to the world’s stage. Poppins is one of the new comers to this long tradition.
With support for the Devanagari and Latin writing systems, it is an internationalist take on the genre.
The Devanagari is designed by Ninad Kale. The Latin is by Jonny Pinhorn.
-
List Item #1 -
List Item #1 -
List Item #1
Elementor headings
Poppins 17px 700
H1 Heading
H2 Heading
Theme typography – single posts
H1 Heading
H2 Heading
H3 Heading
H4 Heading
#FF00A6
#00BCFF
#CCC
#111122
#FFF
Additional CSS
Elementor
CONTROL absolute positioning
overflow-x-hidden class used on hero template and sections with absolutely positioned elements
no-abs-mobile class to disable absolutely positioned elements on mobile devices
/* Control overflow on hero image */
.elementor-editor-active .overflow-x-hidden,
.overflow-x-hidden {
overflow-x: hidden !important;
}
/* Mobile Disable absolute positioned elements */
@media(max-width: 767px) {
.no-abs-mobile,
.elementor-editor-active .no-abs-mobile {
position: static !important;
}
}
blobs are set to background overlay
no-mobile-bg-overlay class removes overlay backgrounds such as Blobs on mobile devices
/* no-mobile-bg-overlay - remove overlay on small devices */
@media(max-width: 1024px) {
.no-mobile-bg-overlay .elementor-background-overlay,
.elementor-editor-active .no-mobile-bg-overlay .elementor-background-overlay {
display: none;
}
}
adjust button float anim and shadow
no-hover-shadow class hides shadow unless button is hovered. Also applied to theme elements
/* Adjust button shadow and float animation */
.no-hover-shadow .elementor-button:not(:hover),
.button:not(:hover),
input[type="submit"]:not(:hover) {
box-shadow: 0 15px 25px -12px rgba(2, 62, 83, 0) !important;
}
.elementor-animation-float:active,
.elementor-animation-float:focus,
.elementor-animation-float:hover {
transform: translateY(-4px);
}
Additional CSS
GeneratePress
add top border to site footer
/* Add Border to top of theme footer */
.site-footer {
border-top: 1px solid #ccc
}
style buttons to match elementor
/* Theme Buttons */
.button,
input[type="submit"] {
color: #FFFFFF;
border-radius: 50px 50px 50px 50px;
-webkit-box-shadow: rgba(2, 62, 83, 0.67) 0px 15px 15px -12px;
padding: 20px 25px 20px 25px;
}
.button,
input[type="submit"] {
transition: 0.3s ease-in-out;
}