Videos uploaded by user “Flint Skin”
Elementor Image Buttons
Creating simple Image Buttons with Elementor Free. Note: The padding option in the editor applies padding to the container not the button itself. This method makes the whole image clickable. CSS used: .image-button a { padding: 40% 0 !important; }
Views: 5225 Flint Skin
Elementor CSS Hacks - Gallery Masonry
Add basic masonry to the Elementor gallery widget. CSS CODE: .gallery-icon img{ width: 100%; } @media (min-width: 1024px) { #gallery-1 { column-count: 4; column-gap: 0px; } } @media (min-width:361px) and (max-width:1024px) { #gallery-1 { column-count: 3; column-gap: 0px; } } @media (max-width:360px) { #gallery-1 { column-count: 3; column-gap: 0px; } }
Views: 11708 Flint Skin
Elementor - aligning elements
Ways to align elements across columns Code: /*Option 1 - Flex Grid for 2 elements*/ .db-flex-column .elementor-widget-wrap { height: 100%; display: flex; flex-direction: column; justify-content: space-between; } /*Option 2 - CSS Grid for multiple elements*/ .db-grid-column .elementor-widget-wrap { display: grid; grid-template-rows: 1fr 2fr 2fr 1fr; }
Views: 13180 Flint Skin
Elementor Overlays without Negative Margins
A simple CSS hack to create overlays without the use of the dreaded negative margins. It must be noted that these tutorials are experimental and are created to hopefully inspire viewers to learn more CSS. You may run into some issues with using fixed height sections particularly with content that is designed to rescale such as text falling out of the container. But i hope you learn something and are inspired to learn more. CSS Code to be added to the parent section container: selector { height: 400px; }
Views: 6819 Flint Skin
Elementor - Hacking away at the UI frustrations
Template and CSS hacks to make your worflow in Elementor much simpler. Drop us some likes and i'll happily share. Hack # 1 - Move Section UI to bottom of the section: .elementor-editor-active .elementor.elementor-edit-mode .elementor-editor-section-settings { top: 100%; z-index: 9999; }
Views: 5053 Flint Skin
Elementor Sticky Mobile Footer UI
A quick and simple method to create a Sticky Mobile Footer UI using Elementor Page Builder in WordPress with Generate Press theme and Pro add-on.
Views: 3286 Flint Skin
Elementor Pagebuilder Slide Out boxes
How to create slide out boxes in Elementor with a little CSS Love. CSS Required: .db-hover-scale , .db-hover-slideout { transition: all 0.35s ease-in-out !important; } .db-hover-box:hover .db-hover-scale { transform: scale(1.02); box-shadow: 0px 10px 10px 15px rgba(0,0,0,0.3); } .db-hover-box:not(:hover) .db-hover-slideout { transform: translate(0,-100%); } Classes to apply: Outer column: db-hover-box Top inner section: db-hover-scale Bottom inner section: db-hover-slideout Note that you do not put a 'period' in front of the CSS Class names they are only in the CSS code itself.
Views: 3387 Flint Skin
Elementor - Responsive Hidden Columns
Using Elementor CSS to hide columns by device type. The three hidden classes: elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-phone The CSS: .db-column-flex-grow .elementor-column { flex: 1 1 auto; }
Views: 6326 Flint Skin
Elementor CSS Hacks - Three T's Slide in affect.
Using CSS Transform, Translate and Transition properties to create interactive hover effects over images.
Views: 2231 Flint Skin
Elementor Column Wrap
Making columns wrap on desktop is a long requested feature of Elementor. Well lets get to it with some simple CSS: @media (min-width: 1024px) { .db-column-wrap .elementor-row { flex-wrap: wrap; } .db-column-wrap .elementor-column { flex: 1 1 33% ; } }
Views: 6094 Flint Skin
Sticky Navigation - Elementor Pro and GeneratePress Pro
Sticky Navigation with Elementor Pro, GeneratePress Pro and a little bit of PHP using the Code Snippets Plugin. CODE BELOW. PLEASE NOTE: This won't work on an Elementor Canvas. add_action( 'generate_inside_navigation','db_add_shortcode' ); function db_add_shortcode() { echo do_shortcode('[elementor-template id="XXXX"]'); }
Views: 4462 Flint Skin
Elementor - Slide zoom box
Using the Elementor slide widget in a different way to create a simple zoom and reveal effect upon hover. Code Below: Code: .db-slider-reveal .elementor-slide-description, .db-slider-reveal .elementor-slide-button, .db-slider-reveal .slick-slide-inner .elementor-background-overlay { transition: all 1000ms ease-in-out; } .db-slider-reveal:not(:hover) .elementor-slide-description, .db-slider-reveal:not(:hover) .elementor-slide-button, .db-slider-reveal:not(:hover) .slick-slide-inner .elementor-background-overlay { opacity: 0; } .db-slider-reveal .elementor-slides .slick-slide-bg { transition-duration: 3s !important; transform: scale(1.2); } .db-slider-reveal:not(:hover) .elementor-slides .slick-slide-bg { transform: scale(1); }
Views: 3979 Flint Skin
Elementor 2 column video with overlay
Adding 2 side by side videos with header overlay
Views: 1976 Flint Skin
Elementor - Hacking away at UI Frustrations #2 - Widget Panel
Elementor UI Hack Widget Panel
Views: 6745 Flint Skin
Elementor - Form Widget add content - CSS Hack Pseudo Elements
How to use the pseudo :before and :after elements to add content to the forms widget.
Views: 1371 Flint Skin
Elementor CSS Grid
Demonstrating the CSS Grid with Elementor Pagebuilder in WordPress and the Post's Widget
Views: 5918 Flint Skin
Elementor Flex Gallery
Make a easy responsive image gallery using Elementor Gallery Widget and a CSS Flexbox hack. Code on GitHub https://gist.github.com/diggeddy/f3d10fe0d7fd9bea3904c472d250dc95
Views: 1643 Flint Skin
Elementor - Double Buttons
Creating double buttons using the Icon List Widget in Elementor. BLOOPER READ ME: I state that this is possible with the free version of Elementor - well it is apart from the absence of the Custom CSS options. To perform this hack without Elementor Pro add the code to the Additional CSS in your Theme's customiser. Thanks to Lyle for the spot.
Views: 2438 Flint Skin
Elementor Pagebuilder Widget Inspiration #1 Sliders
First in a possible series of design inspirations focusing on single Elementor Widgets. We kick of with Sliders
Views: 1196 Flint Skin
Elementor - Block Quotes - CSS Hack Pseudo Elements
How to use the pseudo :before and :after elements to create simple block quotes.
Views: 1470 Flint Skin
Elementor Slider Widget with additional content
How to put more content then just a title, description and button in your sliders
Views: 2974 Flint Skin
GeneratePress FleXections Day 2
Preview of additional functionality on original video demonstrating WP Show Posts content and mobile ordering
Views: 256 Flint Skin
Elementor - Onion Skin UI Hack
Hacking away those UI frustrations with some simple CSS
Views: 1372 Flint Skin
GeneratePress FleXections
Wordpress GeneratePress theme with Pro addon. Demonstrating GP Sections + Flexbox CSS
Views: 1026 Flint Skin
Image Background GP and Elementor
Full page BG Image w
Views: 1007 Flint Skin
Nested Section Shape Divider
Create Shape Dividers in columns
Views: 530 Flint Skin
FleXelementor Sections
Side experiment following on from the GeneratePress FleXections expirement
Views: 768 Flint Skin