Two-Column Layout in Elementor with 70/30 Split | Boxed Content & Image Stretched to the Screen EDGE
4.3 هزار بار بازدید -
پارسال
-
In this video, we'll show
In this video, we'll show you how to create a visually stunning two-column layout that features a 70% boxed content area and a 30% image that expands to the edge of the viewport.
In our previous video (Elementor Layout Tutorial: Two-Column...), we explored creating a two-column layout divided equally with a 50% split. However, in this tutorial, we take it a step further by introducing an asymmetrical layout.
This advanced layout technique is perfect for magazine spreads, product pages, and other designs where you want to emphasize a specific element and captivate your audience's attention.
Join us as we delve into the intricacies of this design concept, providing you with the knowledge and skills to elevate your layout game to new heights.
Here's a link to the Custom CSS used: https://daveden.co.uk/tutorials/advan...
DESIGN INSPIRATION
==============
https://dribbble.com/shots/17025888-F...
TOOLS USED
=============
Elementor Pro (Pagebuilder) - https://daveden.co.uk/links/elementor...
Hostinger (Hosting) - https://daveden.co.uk/links/hostinger/
TIMESTAMP
=============
0:00 Intro
0:30 Previous tutorial on 50/50 Split
1:13 Preview of the layout we'll create
1:45 Brief mathematical background
5:50 Activating flexbox and grid container elementor feature
6:23 Creating the Flexbox layout
21:20 Creating the grid layout
In our previous video (Elementor Layout Tutorial: Two-Column...), we explored creating a two-column layout divided equally with a 50% split. However, in this tutorial, we take it a step further by introducing an asymmetrical layout.
This advanced layout technique is perfect for magazine spreads, product pages, and other designs where you want to emphasize a specific element and captivate your audience's attention.
Join us as we delve into the intricacies of this design concept, providing you with the knowledge and skills to elevate your layout game to new heights.
Here's a link to the Custom CSS used: https://daveden.co.uk/tutorials/advan...
DESIGN INSPIRATION
==============
https://dribbble.com/shots/17025888-F...
TOOLS USED
=============
Elementor Pro (Pagebuilder) - https://daveden.co.uk/links/elementor...
Hostinger (Hosting) - https://daveden.co.uk/links/hostinger/
TIMESTAMP
=============
0:00 Intro
0:30 Previous tutorial on 50/50 Split
1:13 Preview of the layout we'll create
1:45 Brief mathematical background
5:50 Activating flexbox and grid container elementor feature
6:23 Creating the Flexbox layout
21:20 Creating the grid layout
پارسال
در تاریخ 1402/03/08 منتشر شده
است.
4,387
بـار بازدید شده