Back to Browse

Elementor CSS Grid: Create a Flexible Boxed/Stretched Two-Column Layout

1.6K views
Feb 24, 2024
14:13

In this video, you'll learn all you need to know about creating a two-column layout where one column extends to the edge of the screen while the other column remains within the boxed content area. β–Ί The dd-bg-figure css β—„ πŸ”— https://daveden.co.uk/code-vault#image-as-background Subscribe for more Elementor and Bricks tutorials: πŸ”— https://davedens.link/subscribe β–Ί Support my channel β—„ Buy me kofi - https://davedens.link/kofi Donate on PayPal - https://davedens.link/paypal β–Ί Connect with me: β—„ πŸ“Ί Subscribe: https://www.youtube.com/@daveden2 πŸ‘ Facebook: https://www.facebook.com/daveden2 🐦 X (formerly Twitter): https://x.com/Daveden2 🌐 Website: https://daveden.co.uk/ β–Ί Recommended Tools (Affiliate Links - Support the Channel!) β—„ πŸ”— Elementor Pro - https://davedens.link/elementor πŸ”— Dynamic Shortcodes - https://davedens.link/dsh πŸ”— Crocoblock JetEngine - https://davedens.link/jetengine πŸ”— Bricksbuilder - https://davedens.link/bricks πŸ”— WDesignKit - https://davedens.link/wdkit πŸ”— Epidemic Sounds - https://davedens.link/sounds πŸ”— Hostinger: https://davedens.link/hosting ⏱️ Timestamp 00:00 - Intro 00:48 - The Global CSS used 01:31 - Creating the layout 02:22 - Styling Parent Container 03:27 - CSS Class Name on Parent Container 04:01 - Defining Section Layout Parameters 04:53 - Please note this for gap value 06:06 - styling Child Containrs 06:44 - Content Wrapper Styling 07:30 - Content Wrapper Class Name 09:01 - Styling the Image Wrapper 09:25 - Image Wrapper Class Name 10:13 - Image or Background Image? 10:57 - Adding mininum height to parent container 11:33 - More styling for the content wrapper 12:21 - Testing Mobile Responsiveness 13:33 - Please like, share and follow #elementor #css #grid 🚨 Disclaimer: Please note that some of the links in this description are affiliate links. If you choose to purchase a product or service through these links, I may receive a small commission at no extra cost to you. Your support enables me to continue delivering free content to you each week! 🎡 Soundtrack: "Life is a Dream" by Michael Ramir C. 🎢

Download

1 formats

Video Formats

360pmp430.6 MB

Right-click 'Download' and select 'Save Link As' if the file opens in a new tab.

Elementor CSS Grid: Create a Flexible Boxed/Stretched Two-Column Layout | NatokHD