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

Подписаться 1,3 тыс.

50% 1

In this video, we extend the previous tutorial using CSS Grid for overlapping two columns where one remains within the boxed area and the other is stretched to the edge of the viewport.
The key ideas used in this video are:
1. Named CSS Grid Template Lines
2. CSS Variables
3. BEM Naming Methodology
► CODE SNIPPET ◄
daveden.co.uk/tutorials/eleme...
► PLAYLIST ◄
▶️ Pt1 - Simple 50/50 Split: • Elementor Layout Tutor...
▶️ Pt2 - Advanced Mixed Split (70/30 Split and others): • Two-Column Layout in E...
▶️ Pt3 - Overlapping Mixed Layout: • Two Column Layout: Box...
▶️ Pt4 - CSS GRID in Elementor! Boxed Content + Overlap Stretched Image: • CSS GRID in Elementor!...
► THE TOOLS I LOVE ◄
If you like what we do and would like to support us, please consider using these affiliate links when purchasing any plugins covered in my tutorials. Thank you for your support.
🔗 Dynamic Shortcodes: daveden.co.uk/links/dynamic-s...
🔗 Elementor Pro: daveden.co.uk/links/elementor...
🔗 Crocoblock: daveden.co.uk/links/crocoblock/
🔗 CoreFramework: daveden.co.uk/links/coreframe...
🔗 Bricksbuilder: daveden.co.uk/links/bricks
🔗 WPGridBuilder: daveden.co.uk/links/wpgridbui...
🌐 Let's stay connected:
👉 Subscribe: / @daveden2
👉 Facebook: / daveden2
👉 Website: daveden.co.uk/
⏱️ 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. 🎶

Хобби

Опубликовано:

4 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 20

@daveden2 4 месяца назад

To stack the image above the text on mobile, find the order setting in the Advanced tab of the Image Wrapper container and change it to "start."

@awakenmedia1369 3 месяца назад

Great Tutorials. Thanks

4 месяца назад

Just what I needed. Thanks a lot, David!

@daveden2 4 месяца назад

You're welcome

@mikecharles6767 4 месяца назад

Brilliant tutorial David. Mike

@daveden2 4 месяца назад

Thanks!!! Do you feel that it is easy for anyone to follow along?

@f2fcoil 3 месяца назад

One of the best tutorials! thank you for that. I couldn't find the css code for the class 'dd-bg-figure'. Can you please provide it ?🙏

@daveden2 3 месяца назад

Oh yeah sorry, I'll provide it as soon as I can

@ahmedkhattab9899 3 месяца назад

Thank you David!! Great tutorial as always!! If i need to set a custom gutter on different breakpoints the best option is to use media query, right? Is there a way to set it dynamically on Elementor?

@daveden2 3 месяца назад

Thanks! No, unfortunately, you'll have to write the Custom CSS yourself. I'm not sure about a way to do it dynamically.

@LudovicCharlier 4 месяца назад

Wow, that's great. any ideas which line in the code to change to 50/50 layout ? Thank you.

@LudovicCharlier 4 месяца назад

Oh sorry, I found the solution, we must change "--dd-col1-pct: 60;" to "--dd-col1-pct: 50;"

@daveden2 4 месяца назад

@@LudovicCharlier yeah 💯

@abdulwaheedorg 4 месяца назад

Could you please make a video to make the same layout but without using any third party framework?

@daveden2 4 месяца назад

I provided the CSS here daveden.co.uk/tutorials/elementor-css-grid-create-a-flexible-boxed-stretched-two-column-layout/ You just need to copy the css to your Elementor Site Settings' Custom CSS. You don't need a framework for it. Although, I should mention that Core Frameworks is free.

@JohnXionidis 17 дней назад

Hello Dave and thank you for this great tutorial! I would like to ask why this method is better than your other one? The old one doesn't use any css and it is very simple to achieve. So I'm a bit confused.

@daveden2 17 дней назад

I was mostly referring to the other methods (NOT the 50/50 layout). But the cool thing about this method is that you don’t need to worry about left/right padding on mobile.

@daveden2 4 месяца назад

Do you use any CSS Framework in Elementor? Or would you prefer to write your codes directly in Elementor