Multi column layout examples - Revision history

An: /* The layout basics */

2025-07-09T09:41:40Z

The layout basics

← Older revision		Revision as of 09:41, 9 July 2025
Line 4:		Line 4:

	==The layout basics==		==The layout basics==
	Easy Content Builder lets you specify the column layout at the section level. You can combine one-column, two-column, three-column, four-column, or [[Section Settings#Hierarchical grid\|hierarchical grid]] layouts on the same page.

	[[Add section settings#Add Section\|Section Settings]] ~~is used to determine the column layout of each section~~. Then, you add [https://easy-content-builder-demo.myshopify.com/pages/section-variations multiple content blocks] to each column and configure the margin/padding and the gap between columns/rows to create your desired layout.		You can set the column layout (1 to 4 columns or [[Section Settings#Hierarchical grid\|hierarchical grid]]) for each section in [[Add section settings#Add Section\|Section Settings]]. Then, you add [https://easy-content-builder-demo.myshopify.com/pages/section-variations multiple content blocks] to each column and configure the margin/padding and the gap between columns/rows to create your desired layout.

	{{Note\|'''Tips''': Explore the most common configurations in the '''Section Settings''' and their use cases [[Add_section_settings#Edit_Section_Settings\|here]].\|reminder}}		{{Note\|'''Tips''': Explore the most common configurations in the '''Section Settings''' and their use cases [[Add_section_settings#Edit_Section_Settings\|here]].\|reminder}}
	The screenshot below illustrates how you can create a layout with three sections - each section comes with its own column layout:		The screenshot below illustrates how you can create a layout with three sections - each section comes with its own column layout:

An: /* The layout basics */

2024-11-08T07:55:42Z

The layout basics

← Older revision		Revision as of 07:55, 8 November 2024
Line 7:		Line 7:

	[[Add section settings#Add Section\|Section Settings]] is used to determine the column layout of each section. Then, you add [https://easy-content-builder-demo.myshopify.com/pages/section-variations multiple content blocks] to each column and configure the margin/padding and the gap between columns/rows to create your desired layout.		[[Add section settings#Add Section\|Section Settings]] is used to determine the column layout of each section. Then, you add [https://easy-content-builder-demo.myshopify.com/pages/section-variations multiple content blocks] to each column and configure the margin/padding and the gap between columns/rows to create your desired layout.
			{{Note\|'''Tips''': Explore the most common configurations in the '''Section Settings''' and their use cases [[Add_section_settings#Edit_Section_Settings\|here]].\|reminder}}
	The screenshot below illustrates how you can create a layout with three sections - each section comes with its own column layout:		The screenshot below illustrates how you can create a layout with three sections - each section comes with its own column layout:

Line 15:		Line 15:

	[[File:Ecb-layout-basics-2.jpg\|frameless\|1024x1024px]]		[[File:Ecb-layout-basics-2.jpg\|frameless\|1024x1024px]]
	~~{{Note\|'''Tips''': Explore the most common configurations in the '''Section Settings''' and their use cases [[Add_section_settings#Edit_Section_Settings\|here]].\|reminder}}~~
	{{Note\|'''Note''': You can add various block types, either from the Easy Content Builder app or other apps like Judge.me Reviews, to the section. Subsequently, you can use the steps in the guide below to establish a multi-column layout for that section, allowing you to control the display position for each block or set the background image or padding.\|inline}}		{{Note\|'''Note''': You can add various block types, either from the Easy Content Builder app or other apps like Judge.me Reviews, to the section. Subsequently, you can use the steps in the guide below to establish a multi-column layout for that section, allowing you to control the display position for each block or set the background image or padding.\|inline}}

An: /* The layout basics */

2024-11-08T07:25:56Z

The layout basics

← Older revision		Revision as of 07:25, 8 November 2024
Line 15:		Line 15:

	[[File:Ecb-layout-basics-2.jpg\|frameless\|1024x1024px]]		[[File:Ecb-layout-basics-2.jpg\|frameless\|1024x1024px]]
	{{Note\|Tips: Explore the most common configurations in the Section Settings and their use cases here.\|reminder}}		{{Note\|'''Tips''': Explore the most common configurations in the '''Section Settings''' and their use cases [[Add_section_settings#Edit_Section_Settings\|here]].\|reminder}}
	{{Note\|'''Note''': You can add various block types, either from the Easy Content Builder app or other apps like Judge.me Reviews, to the section. Subsequently, you can use the steps in the guide below to establish a multi-column layout for that section, allowing you to control the display position for each block or set the background image or padding.\|inline}}		{{Note\|'''Note''': You can add various block types, either from the Easy Content Builder app or other apps like Judge.me Reviews, to the section. Subsequently, you can use the steps in the guide below to establish a multi-column layout for that section, allowing you to control the display position for each block or set the background image or padding.\|inline}}

An: /* The layout basics */

2024-11-08T07:24:57Z

The layout basics

← Older revision		Revision as of 07:24, 8 November 2024
Line 15:		Line 15:

	[[File:Ecb-layout-basics-2.jpg\|frameless\|1024x1024px]]		[[File:Ecb-layout-basics-2.jpg\|frameless\|1024x1024px]]
			{{Note\|Tips: Explore the most common configurations in the Section Settings and their use cases here.\|reminder}}
	{{Note\|'''Note''': You can add various block types, either from the Easy Content Builder app or other apps like Judge.me Reviews, to the section. Subsequently, you can use the steps in the guide below to establish a multi-column layout for that section, allowing you to control the display position for each block or set the background image or padding.\|inline}}		{{Note\|'''Note''': You can add various block types, either from the Easy Content Builder app or other apps like Judge.me Reviews, to the section. Subsequently, you can use the steps in the guide below to establish a multi-column layout for that section, allowing you to control the display position for each block or set the background image or padding.\|inline}}

An: /* 2-col with Images With Text (Overlay option) */

2024-11-07T02:42:03Z

2-col with Images With Text (Overlay option)

← Older revision		Revision as of 02:42, 7 November 2024
Line 78:		Line 78:

	Setup steps:		Setup steps:
	*Create Section Settings to define two columns with adjustable widths.		*Create '''Section Settings''' to define two columns with adjustable widths.
	*Add two Images With Text sections, each set to the Overlay option.		*Add two '''Images With Text''' sections, each set to the Overlay option.

	For more details, check out [[Block_Image_With_Text#Use_case_8:_Collection_Grid\|this guide]].		For more details, check out [[Block_Image_With_Text#Use_case_8:_Collection_Grid\|this guide]].

An: /* 2-col with Images With Text (Overlay option) */

2024-11-07T02:41:22Z

2-col with Images With Text (Overlay option)

Show changes

An: /* Hierarchical grid: Type 4 */

2024-09-25T02:03:47Z

Hierarchical grid: Type 4

← Older revision		Revision as of 02:03, 25 September 2024
Line 291:		Line 291:
	*Margin: No Margin		*Margin: No Margin
	* Padding: Medium		* Padding: Medium
			====Hierarchical grid: Type 5 & 6====
			Here is the list of blocks utilized in Hierarchical Grid 6, which is also relevant to Hierarchical Grid 5, to help you become acquainted with this grid type.

			[[File:Ecb-hierarchical-grid-5-6-guide.jpg\|800px\|frameless]]

			Please note that in this instance, we have incorporated a Gallery section into each position. You have the option to substitute them with other available sections in Easy Content Builder (remember to modify the configuration for each section to align with the grid).

	===Collection Grid===		===Collection Grid===

An: /* Overview */

2024-09-25T01:23:26Z

Overview

← Older revision		Revision as of 01:23, 25 September 2024
Line 227:		Line 227:
	====Overview====		====Overview====
	By default, Easy Content Builder provides 6 types of Hierarchical grid, as shown in this screenshot:		By default, Easy Content Builder provides 6 types of Hierarchical grid, as shown in this screenshot:
	[[File:Ecb hierarchical grids.jpg\|frameless]]		[[File:Ecb hierarchical grids.jpg\|frameless\|800x800px]]
	====Hierarchical grid: Type 4====		====Hierarchical grid: Type 4====
	Below is a hierarchical grid (type 4) we built on our [https://easy-content-builder-demo.myshopify.com/pages/hierarchical-grid Hierarchical Grid demo]:		Below is a hierarchical grid (type 4) we built on our [https://easy-content-builder-demo.myshopify.com/pages/hierarchical-grid Hierarchical Grid demo]:

An: /* Hierarchical grid */

2024-09-25T01:22:57Z

Hierarchical grid

← Older revision		Revision as of 01:22, 25 September 2024
Line 225:		Line 225:

	===Hierarchical grid===		===Hierarchical grid===
			====Overview====
			By default, Easy Content Builder provides 6 types of Hierarchical grid, as shown in this screenshot:
			[[File:Ecb hierarchical grids.jpg\|frameless]]
			====Hierarchical grid: Type 4====
	Below is a hierarchical grid (type 4) we built on our [https://easy-content-builder-demo.myshopify.com/pages/hierarchical-grid Hierarchical Grid demo]:		Below is a hierarchical grid (type 4) we built on our [https://easy-content-builder-demo.myshopify.com/pages/hierarchical-grid Hierarchical Grid demo]:

An: /* 2-col: Overlapping Image with text */

2024-05-31T10:27:24Z

2-col: Overlapping Image with text

← Older revision		Revision as of 10:27, 31 May 2024
Line 189:		Line 189:
	Here are steps to create the sample section above with overlapping text and image:		Here are steps to create the sample section above with overlapping text and image:

	'''Step 1''': Add [[~~Block~~ Section ~~Settings~~\|Section Settings]] block and configure as follows:		'''Step 1''': Add [[Add section settings#Add Section\|Section Settings]] block and configure as follows:

	*Container Max Width: leave it blank.		*Container Max Width: leave it blank.
Line 220:		Line 220:
	You can add extra space above/below your overlapping image and rich content section by using one of the following options:		You can add extra space above/below your overlapping image and rich content section by using one of the following options:

	*'''Option 1''': Add a new [[~~Block~~ Section ~~Settings~~\|Section Settings]] and specify '''Container Padding Top''' and '''Container Padding Bottom''' to define your desired space (while keeping all other default configurations unchanged).		*'''Option 1''': Add a new [[Add section settings#Add Section\|Section Settings]] and specify '''Container Padding Top''' and '''Container Padding Bottom''' to define your desired space (while keeping all other default configurations unchanged).
	*'''Option 2''': Add a new [[Block Custom HTML\|Custom HTML]] section and configure its margin.		*'''Option 2''': Add a new [[Block Custom HTML\|Custom HTML]] section and configure its margin.
	[[File:Ecb-overlap-guide-space.jpg\|frameless\|1024x1024px]]		[[File:Ecb-overlap-guide-space.jpg\|frameless\|1024x1024px]]

← Older revision		Revision as of 07:25, 8 November 2024
Line 15:		Line 15:

	[[File:Ecb-layout-basics-2.jpg\|frameless\|1024x1024px]]		[[File:Ecb-layout-basics-2.jpg\|frameless\|1024x1024px]]
	{{Note\|Tips: Explore the most common configurations in the Section Settings and their use cases here.\|reminder}}		{{Note\|'''Tips''': Explore the most common configurations in the '''Section Settings''' and their use cases [[Add_section_settings#Edit_Section_Settings\|here]].\|reminder}}
	{{Note\|'''Note''': You can add various block types, either from the Easy Content Builder app or other apps like Judge.me Reviews, to the section. Subsequently, you can use the steps in the guide below to establish a multi-column layout for that section, allowing you to control the display position for each block or set the background image or padding.\|inline}}		{{Note\|'''Note''': You can add various block types, either from the Easy Content Builder app or other apps like Judge.me Reviews, to the section. Subsequently, you can use the steps in the guide below to establish a multi-column layout for that section, allowing you to control the display position for each block or set the background image or padding.\|inline}}

← Older revision		Revision as of 07:24, 8 November 2024
Line 15:		Line 15:

	[[File:Ecb-layout-basics-2.jpg\|frameless\|1024x1024px]]		[[File:Ecb-layout-basics-2.jpg\|frameless\|1024x1024px]]
			{{Note\|Tips: Explore the most common configurations in the Section Settings and their use cases here.\|reminder}}
	{{Note\|'''Note''': You can add various block types, either from the Easy Content Builder app or other apps like Judge.me Reviews, to the section. Subsequently, you can use the steps in the guide below to establish a multi-column layout for that section, allowing you to control the display position for each block or set the background image or padding.\|inline}}		{{Note\|'''Note''': You can add various block types, either from the Easy Content Builder app or other apps like Judge.me Reviews, to the section. Subsequently, you can use the steps in the guide below to establish a multi-column layout for that section, allowing you to control the display position for each block or set the background image or padding.\|inline}}