Block Section Settings - Revision history

An: /* General Configuration */

2024-05-30T03:20:09Z

General Configuration

← Older revision		Revision as of 03:20, 30 May 2024
Line 73:		Line 73:
	\| Row Gap		\| Row Gap
	\|Set the gap (in pixels) between the rows		\|Set the gap (in pixels) between the rows
			\|-
			\|Background Video
			\|Click Select Video and upload the video that will be used as the background of a section. Once added, you can tab the Change button below the video to delete or change the video.
	\|-		\|-
	\| Background Color		\| Background Color

An at 03:31, 27 May 2024

2024-05-27T03:31:58Z

← Older revision		Revision as of 03:31, 27 May 2024
Line 1:		Line 1:
			{{DISPLAYTITLE:Block: Section Settings}}

	===What is the Section Setting for?===		===What is the Section Setting for?===
	Easy Content Builder uses '''Section Settings''' as a special block to determine your ideal responsive layouts (1-column, 2-column, 3-column, 4-column, or hierarchical layouts) and global configurations (mask color, mask image, background video, parallax animation, etc.) within the section itself.		Easy Content Builder uses '''Section Settings''' as a special block to determine your ideal responsive layouts (1-column, 2-column, 3-column, 4-column, or hierarchical layouts) and global configurations (mask color, mask image, background video, parallax animation, etc.) within the section itself.

An: /* General Configuration */

2024-05-22T02:47:13Z

General Configuration

← Older revision		Revision as of 02:47, 22 May 2024
Line 53:		Line 53:
	:'''First Block Left''' refers to the main content block you want to show on the left column, and other blocks will be displayed on the right column. To keep an app block in the First Block position, drag it to reorder it on top of other blocks.		:'''First Block Left''' refers to the main content block you want to show on the left column, and other blocks will be displayed on the right column. To keep an app block in the First Block position, drag it to reorder it on top of other blocks.
	:[[File:Ecb-2col-1stblockleft.jpg\|border\|frameless\|800x800px]]		:[[File:Ecb-2col-1stblockleft.jpg\|border\|frameless\|800x800px]]
	*Three Columns ~~(''Three columns will each automatically be 33.33% wide.'')~~		*Three Columns: The first column's width is specified based on the main block width, the remaining columns will be the same width.
	* Three Equal Columns (''The first column's width is specified based on the main block width, the remaining columns will be the same width.~~'' )~~		* Three Equal Columns: Three columns will each automatically be 33.33% wide.
	*Three Columns: First Block Right		*Three Columns: First Block Right
	:'''First Block Right''' refers to the main content block you want to show on the right column, and other blocks will be displayed on the 1st and middle columns. To keep an app block in the First Block position, drag it to reorder it on top of other blocks.		:'''First Block Right''' refers to the main content block you want to show on the right column, and other blocks will be displayed on the 1st and middle columns. To keep an app block in the First Block position, drag it to reorder it on top of other blocks.

An: /* General Configuration */

2024-05-22T02:44:36Z

General Configuration

An: /* General Configuration */

2024-04-17T04:15:15Z

General Configuration

← Older revision		Revision as of 04:15, 17 April 2024
Line 47:		Line 47:
	*One Column		*One Column
	*Two Columns		*Two Columns
	*Two Columns: First Block Right, ~~others~~ Left		*Two Columns: First Block Right, Others Left
	:'''First Block Right''' refers to the main content block you want to show on the right column. Drag any block you want to reorder on top of other blocks to keep it in the First Block position.		:'''First Block Right''' refers to the main content block you want to show on the right column. Drag any block you want to reorder on top of other blocks to keep it in the First Block position.
	: '''Others Left''' means all other blocks will be displayed on the left column.		: '''Others Left''' means all other blocks will be displayed on the left column.
	:[[File:Ecb-2col-1stblockright.jpg\|border\|frameless\|800x800px]]		:[[File:Ecb-2col-1stblockright.jpg\|border\|frameless\|800x800px]]
	*Two Columns: First Block Left, ~~others~~ Right		*Two Columns: First Block Left, Others Right
	:'''First Block Left''' refers to the main content block you want to show on the left column. Drag any block you want to reorder on top of other blocks to keep it in the First Block position.		:'''First Block Left''' refers to the main content block you want to show on the left column. Drag any block you want to reorder on top of other blocks to keep it in the First Block position.
	:'''Others Right''' means all other blocks will be displayed on the right column.		:'''Others Right''' means all other blocks will be displayed on the right column.
Line 57:		Line 57:
	*Three Columns (''Three columns will each automatically be 33.33% wide.'')		*Three Columns (''Three columns will each automatically be 33.33% wide.'')
	* Three Equal Columns (''The first column's width is specified based on the main block width, the remaining columns will be the same width.'' )		* Three Equal Columns (''The first column's width is specified based on the main block width, the remaining columns will be the same width.'' )
	*Three Columns: First Block Right, ~~others~~ Left		*Three Columns: First Block Right, Others Left
	:'''First Block Right''' refers to the main content block you want to show on the right column. Drag any block you want to reorder on top of other blocks to keep it in the First Block position.		:'''First Block Right''' refers to the main content block you want to show on the right column. Drag any block you want to reorder on top of other blocks to keep it in the First Block position.
	:'''Others Left''' means all other blocks will be displayed on the 1st and middle columns.		:'''Others Left''' means all other blocks will be displayed on the 1st and middle columns.
	:[[File:Ecb-3col-1stblockright.jpg\|border\|frameless\|800x800px]]		:[[File:Ecb-3col-1stblockright.jpg\|border\|frameless\|800x800px]]
	*Three Columns: First Block Left, ~~others~~ Right		*Three Columns: First Block Left, Others Right
	:'''First Block Left''' refers to the main content block you want to show on the 1st left column. Drag any block you want to reorder on top of other blocks to keep it in the First Block position.		:'''First Block Left''' refers to the main content block you want to show on the 1st left column. Drag any block you want to reorder on top of other blocks to keep it in the First Block position.
	:'''Others Right''' means all other blocks will be displayed on the middle and 3rd columns.		:'''Others Right''' means all other blocks will be displayed on the middle and 3rd columns.

An: /* Adjust the font size, rounded corners, background color */

2024-02-29T03:29:28Z

Adjust the font size, rounded corners, background color

← Older revision		Revision as of 03:29, 29 February 2024
Line 153:		Line 153:

	===== Adjust the font size, rounded corners, background color =====		===== Adjust the font size, rounded corners, background color =====
	*Learn how to adjust the font size, ~~border radius~~ (border radius), background color [[Create_Template_For_Multiple_Pages#Adjust_the_font_size,_border_radius,_background_color\|here]]		*Learn how to adjust the font size, rounded corners (border-radius), background color [[Create_Template_For_Multiple_Pages#Adjust_the_font_size,_border_radius,_background_color\|here]]

	===== Custom CSS =====		===== Custom CSS =====

An: /* Adjust the font size, border radius, background color */

2024-02-29T03:29:00Z

Adjust the font size, border radius, background color

← Older revision		Revision as of 03:29, 29 February 2024
Line 152:		Line 152:
	*Learn how to adjust the padding/margin of each section [[Create_Template_For_Multiple_Pages#Adjust_the_padding/margin_of_each_section\|here]]		*Learn how to adjust the padding/margin of each section [[Create_Template_For_Multiple_Pages#Adjust_the_padding/margin_of_each_section\|here]]

	===== Adjust the font size, ~~border radius~~, background color =====		===== Adjust the font size, rounded corners, background color =====
	*Learn how to adjust the font size, border radius, background color [[Create_Template_For_Multiple_Pages#Adjust_the_font_size,_border_radius,_background_color\|here]]		*Learn how to adjust the font size, border radius (border radius), background color [[Create_Template_For_Multiple_Pages#Adjust_the_font_size,_border_radius,_background_color\|here]]

	===== Custom CSS =====		===== Custom CSS =====

An: /* General Configuration */

2024-02-29T03:27:57Z

General Configuration

← Older revision		Revision as of 03:27, 29 February 2024
Line 102:		Line 102:
	\|Container Background color		\|Container Background color
	\|Set the color of Containers - a fundamental building block - that are used to contain, pad, and align your content within a given device or viewport.		\|Set the color of Containers - a fundamental building block - that are used to contain, pad, and align your content within a given device or viewport.
			\|-
			\|Container Border Radius
			\|Set the rounded corners (in pixels) to the background container. This option is available for the Pro plan.
	\|-		\|-
	\|Text Color		\|Text Color

An: /* Image with overlapping rich content */

2024-02-26T04:56:56Z

Image with overlapping rich content

← Older revision		Revision as of 04:56, 26 February 2024
Line 195:		Line 195:
	#Under the '''Section Settings''' configuration, enable the '''Full Width Container'''.		#Under the '''Section Settings''' configuration, enable the '''Full Width Container'''.

	=====Image with ~~overlapping rich content~~=====		=====Overlapping Image with text=====
	Easy Content Builder lets you overlap a rich content column over an image. For example, you create an overlap effect with a text block in one column on the right, overlapping an image on the left so that the text is on top of the image.		Easy Content Builder lets you overlap a rich content column over an image. For example, you create an overlap effect with a text block in one column on the right, overlapping an image on the left so that the text is on top of the image.

An: /* How to create a full-width section */

2024-02-26T04:52:35Z

How to create a full-width section

← Older revision		Revision as of 04:52, 26 February 2024
Line 194:		Line 194:
	#Add '''Section Settings''' section (where you control the global configuration of the section, such as column layout, width, background color, etc.)		#Add '''Section Settings''' section (where you control the global configuration of the section, such as column layout, width, background color, etc.)
	#Under the '''Section Settings''' configuration, enable the '''Full Width Container'''.		#Under the '''Section Settings''' configuration, enable the '''Full Width Container'''.

			=====Image with overlapping rich content=====
			Easy Content Builder lets you overlap a rich content column over an image. For example, you create an overlap effect with a text block in one column on the right, overlapping an image on the left so that the text is on top of the image.

			You can easily specify the width (percent) and position (left/right) of the image and rich content column.

			Common use cases:

			*A rich text section overlaps an image
			*An image overlaps an image
			*A scrolling image carousel overlaps an image
			*A Before & After slider overlaps an image
			*A video overlaps an image
			*A featured product slider overlaps an image

			{{Note\|See live demo [https://easy-content-builder-demo.myshopify.com/pages/rich-content-overlap here].\|reminder}}

			[[File:Ecb-content-overlap.png\|frameless\|1024x1024px]]

			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:

			*Container Max Width: leave it blank.
			*Desktop layout: Two Col: First Block Left, Remains Right

			*Main Column Width: 40 (this refers to the width of the main text block that will overlap the background image)
			*Background image: upload your desired image
			*Background image for mobile: upload your desired image
			*Background Image Position: Right
			:Note: The '''Background Image Position''' must match the '''Desktop Layout''' field.
			:*To show the image on the right, the text column on the left: set '''Background Image Position: right''' and set '''Desktop Layout: Two Col: First Block Left, Remains Right'''.
			:*To show the image on the left, the text column on the right: set '''Background Image Position: left''' and set '''Desktop Layout: Two Col: First Block Right, Remains Left'''.
			*Background Image Width: 60 (this refers to the width of the image displayed below the text section)
			*Padding top: leave it blank.
			*Padding bottom: leave it blank.
			*Container Padding top: 50px
			*Container Padding top: 50px

			You can adjust the configurations as you wish.

			'''Step 2''': Add [[Block Section Title\|Section Title]] section with the following configurations:

			*Insert the Title, Tagline, Description, Icons as you wish.
			*Background color: specify your desired color (we used #f5ead9 for the demo purposes)
			*Margin: No margin
			*Padding: Medium

			'''Step 3 (Optional)''': Add space above and below the current section you've created.

			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 2''': Add a new [[Block Custom HTML\|Custom HTML]] section and configure its margin.
			[[File:Ecb-overlap-guide-space.jpg\|frameless\|1024x1024px]]

← Older revision		Revision as of 02:44, 22 May 2024
Line 47:		Line 47:
	*One Column		*One Column
	*Two Columns		*Two Columns
	*Two Columns: First Block Right~~, Others Left~~		*Two Columns: First Block Right
	:'''First Block Right''' refers to the main content block you want to show on the right column~~. Drag any block you want to reorder on top of~~ other blocks to keep it in the First Block position.		:'''First Block Right''' refers to the main content block you want to show on the right column, and other blocks will be displayed on the left column. To keep an app block in the First Block position, drag it to reorder it on top of other blocks.
	~~: '''Others Left''' means all~~ other blocks ~~will be displayed on the left column~~.
	:[[File:Ecb-2col-1stblockright.jpg\|border\|frameless\|800x800px]]		:[[File:Ecb-2col-1stblockright.jpg\|border\|frameless\|800x800px]]
	*Two Columns: First Block Left~~, Others Right~~		*Two Columns: First Block Left
	:'''First Block Left''' refers to the main content block you want to show on the left column~~. Drag any block you want to reorder on top of~~ other blocks to keep it in the First Block position.		:'''First Block Left''' refers to the main content block you want to show on the left column, and other blocks will be displayed on the right column. To keep an app block in the First Block position, drag it to reorder it on top of other blocks.
	~~:'''Others Right''' means all~~ other blocks ~~will be displayed on the right column~~.
	:[[File:Ecb-2col-1stblockleft.jpg\|border\|frameless\|800x800px]]		:[[File:Ecb-2col-1stblockleft.jpg\|border\|frameless\|800x800px]]
	*Three Columns (''Three columns will each automatically be 33.33% wide.'')		*Three Columns (''Three columns will each automatically be 33.33% wide.'')
	* Three Equal Columns (''The first column's width is specified based on the main block width, the remaining columns will be the same width.'' )		* Three Equal Columns (''The first column's width is specified based on the main block width, the remaining columns will be the same width.'' )
	*Three Columns: First Block Right~~, Others Left~~		*Three Columns: First Block Right
	:'''First Block Right''' refers to the main content block you want to show on the right column~~. Drag any block you want to reorder on top of other blocks to keep it in the First Block position.~~		:'''First Block Right''' refers to the main content block you want to show on the right column, and other blocks will be displayed on the 1st and middle columns. To keep an app block in the First Block position, drag it to reorder it on top of other blocks.
	~~:'''Others Left''' means all~~ other blocks will be displayed on the 1st and middle columns.
	:[[File:Ecb-3col-1stblockright.jpg\|border\|frameless\|800x800px]]		:[[File:Ecb-3col-1stblockright.jpg\|border\|frameless\|800x800px]]
	*Three Columns: First Block Left~~, Others Right~~		*Three Columns: First Block Left
	:'''First Block Left''' refers to the main content block you want to show on the 1st left column~~. Drag any block you want to reorder on top of other blocks to keep it in the First Block position.~~		:'''First Block Left''' refers to the main content block you want to show on the 1st left column, and other blocks will be displayed on the middle and 3rd columns. To keep an app block in the First Block position, drag it to reorder it on top of other blocks.
	~~:'''Others Right''' means all~~ other blocks will be displayed on the middle and 3rd columns.
	:[[File:Ecb-3col-1stblockleft.jpg\|border\|frameless\|800x800px]]		:[[File:Ecb-3col-1stblockleft.jpg\|border\|frameless\|800x800px]]
	* Four Equal Columns		* Four Equal Columns