Section Settings - Revision history

An: /* Image with overlapping rich content */

2024-02-26T04:55:47Z

Image with overlapping rich content

← Older revision		Revision as of 04:55, 26 February 2024
Line 335:		Line 335:
	*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, background color [[Create_Template_For_Multiple_Pages#Adjust_the_font_size,_border_radius,_background_color\|here]]

	=== Image ~~with overlapping rich content~~===		=== Overlapping Image and text===

	* ~~How~~ to create ~~a section with~~ image and ~~overlapping rich content~~: [[Block Section Settings#Image with overlapping rich content\|here]].		* Learn how to create an overlapping image and text section: [[Block Section Settings#Image with overlapping rich content\|here]].

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

An: /* Image with overlapping rich content */

2024-02-26T04:54:49Z

Image with overlapping rich content

← Older revision		Revision as of 04:54, 26 February 2024
Line 335:		Line 335:
	*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, background color [[Create_Template_For_Multiple_Pages#Adjust_the_font_size,_border_radius,_background_color\|here]]

	=== Custom CSS ===		=== Image with overlapping rich content===
	*Learn how to customize your Shopify themes (change your font size, button, background, border radius, etc.) with Custom CSS using Easy Content Builder: [https://www.youtube.com/watch?v=gN20FiUvVZc 5-min video tutorial].
			* How to create a section with image and overlapping rich content: [[Block Section Settings#Image with overlapping rich content\|here]].

			===Custom CSS===
			*Learn how to customize your Shopify themes (change your font size, button, background, border radius, etc.) with Custom CSS using Easy Content Builder: [https://www.youtube.com/watch?v=gN20FiUvVZc 5-min video tutorial].

	:{{Note\|For Pro plan: In addition to the standard Custom CSS feature, you have an '''Automatically Generate CSS''' option - a handy way to customize your theme '''without coding'''. [[Custom CSS\|Learn more]]. \|reminder}}		:{{Note\|For Pro plan: In addition to the standard Custom CSS feature, you have an '''Automatically Generate CSS''' option - a handy way to customize your theme '''without coding'''. [[Custom CSS\|Learn more]]. \|reminder}}
	:[[File:Ecb-custom-css.jpg\|border\|frameless\|800x800px]]		:[[File:Ecb-custom-css.jpg\|border\|frameless\|800x800px]]

An: /* Image with overlapping rich content */

2024-02-26T04:52:53Z

Image with overlapping rich content

← Older revision		Revision as of 04:52, 26 February 2024
Line 317:		Line 317:

	'''Step 3''': Add three other '''Image With Text blocks''' similar to Step 2 above and configure each block your way.		'''Step 3''': Add three other '''Image With Text blocks''' similar to Step 2 above and configure each block your way.

	~~== 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]]~~

	== Customization FAQs ==		== Customization FAQs ==

An at 04:50, 26 February 2024

2024-02-26T04:50:09Z

An: /* Image with overlapping rich content */

2024-02-26T04:48:35Z

Image with overlapping rich content

An: /* Image with overlapping rich content */

2024-02-26T04:47:00Z

Image with overlapping rich content

@@ Line 343: / Line 343: @@
 *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
@@ Line 394: / Line 373: @@
 *'''Option 2''': Add a new [[Block Custom HTML|Custom HTML]] section and configure its margin.
 [[File:Ecb-overlap-guide-space.jpg|frameless|1024x1024px]]

An: /* Image with overlapping rich content */

2024-02-26T04:41:25Z

Image with overlapping rich content

@@ Line 342: / Line 342: @@
 *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

An: /* Step 2: Create a Section Settings */

2024-02-26T02:36:15Z

Step 2: Create a Section Settings

← Older revision		Revision as of 02:36, 26 February 2024
Line 25:		Line 25:
	*From the Easy Content Builder dashboard, click '''Manage Templates'''. Find the template that you want to edit, and then click '''Customize'''.		*From the Easy Content Builder dashboard, click '''Manage Templates'''. Find the template that you want to edit, and then click '''Customize'''.
	*From the theme editor, click '''+ Add Section''' in the sidebar.		*From the theme editor, click '''+ Add Section''' in the sidebar.
	{{Note\|Tips: While using the preview inspector, you can also add sections to the template directly from the preview window.\|inline}}		:{{Note\|Tips: While using the preview inspector, you can also add sections to the template directly from the preview window.\|inline}}
	*Scroll down the list of available blocks prebuilt by the Easy Content Builder and click '''Section settings.''' [[File:Add section settings.jpg\|1200x1200px]]		*Scroll down the list of available blocks prebuilt by the Easy Content Builder and click '''Section settings.''' [[File:Add section settings.jpg\|1200x1200px]]
	*Next, click on '''Section settings''' to open the section setting panel and configure the layout to your needs. The section settings will appear on the sidebar. Click '''Save''' to apply any changes you might make. [[File:Add section config.jpg\|1000x1000px]]		*Next, click on '''Section settings''' to open the section setting panel and configure the layout to your needs. The section settings will appear on the sidebar. Click '''Save''' to apply any changes you might make. [[File:Add section config.jpg\|1000x1000px]]

An: /* Step 2: Create a Section Settings */

2024-02-26T02:33:21Z

Step 2: Create a Section Settings

← Older revision		Revision as of 02:33, 26 February 2024
Line 28:		Line 28:
	*Scroll down the list of available blocks prebuilt by the Easy Content Builder and click '''Section settings.''' [[File:Add section settings.jpg\|1200x1200px]]		*Scroll down the list of available blocks prebuilt by the Easy Content Builder and click '''Section settings.''' [[File:Add section settings.jpg\|1200x1200px]]
	*Next, click on '''Section settings''' to open the section setting panel and configure the layout to your needs. The section settings will appear on the sidebar. Click '''Save''' to apply any changes you might make. [[File:Add section config.jpg\|1000x1000px]]		*Next, click on '''Section settings''' to open the section setting panel and configure the layout to your needs. The section settings will appear on the sidebar. Click '''Save''' to apply any changes you might make. [[File:Add section config.jpg\|1000x1000px]]
			:{{Note\|After adding a Section Settings, a blank section is added in the theme preview mode; however, no specific content is visible. Once you add the first content block (Add block > Apps > Select a section from the list), the new content block will appear in the preview. \|inline}}
	:{{Note\| Note: To learn more about the configurations in the Section Settings, please refer to section [[Block Section Settings\|ECB Block Settings > Block: Section Settings]].\|reminder}}		:{{Note\| Note: To learn more about the configurations in the Section Settings, please refer to section [[Block Section Settings\|ECB Block Settings > Block: Section Settings]].\|reminder}}

An: /* Step 3: Add content blocks */

2024-02-23T04:22:49Z

Step 3: Add content blocks

← Older revision		Revision as of 04:22, 23 February 2024
Line 31:		Line 31:

	==== Step 3: Add content blocks ====		==== Step 3: Add content blocks ====
	Now you can add many content blocks to the section you've created. These content blocks will be displayed in different positions within the section, depending on the Desktop/Mobile Layouts you configure.		Now you can add many content blocks to the section you've created. These content blocks will be displayed in different positions within the section, depending on the Desktop/Mobile Layouts you configure.

	[[File:Ecb-block-v2.jpg\|border\|frameless\|800x800px]]		[[File:Ecb-block-v2.jpg\|border\|frameless\|800x800px]]

← Older revision		Revision as of 02:33, 26 February 2024
Line 28:		Line 28:
	*Scroll down the list of available blocks prebuilt by the Easy Content Builder and click '''Section settings.''' [[File:Add section settings.jpg\|1200x1200px]]		*Scroll down the list of available blocks prebuilt by the Easy Content Builder and click '''Section settings.''' [[File:Add section settings.jpg\|1200x1200px]]
	*Next, click on '''Section settings''' to open the section setting panel and configure the layout to your needs. The section settings will appear on the sidebar. Click '''Save''' to apply any changes you might make. [[File:Add section config.jpg\|1000x1000px]]		*Next, click on '''Section settings''' to open the section setting panel and configure the layout to your needs. The section settings will appear on the sidebar. Click '''Save''' to apply any changes you might make. [[File:Add section config.jpg\|1000x1000px]]
			:{{Note\|After adding a Section Settings, a blank section is added in the theme preview mode; however, no specific content is visible. Once you add the first content block (Add block > Apps > Select a section from the list), the new content block will appear in the preview. \|inline}}
	:{{Note\| Note: To learn more about the configurations in the Section Settings, please refer to section [[Block Section Settings\|ECB Block Settings > Block: Section Settings]].\|reminder}}		:{{Note\| Note: To learn more about the configurations in the Section Settings, please refer to section [[Block Section Settings\|ECB Block Settings > Block: Section Settings]].\|reminder}}

← Older revision		Revision as of 04:50, 26 February 2024
Line 318:		Line 318:
	'''Step 3''': Add three other '''Image With Text blocks''' similar to Step 2 above and configure each block your way.		'''Step 3''': Add three other '''Image With Text blocks''' similar to Step 2 above and configure each block your way.

	=== Image with overlapping rich content ===		== 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.		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.

Line 373:		Line 373:
	[[File:Ecb-overlap-guide-space.jpg\|frameless\|1024x1024px]]		[[File:Ecb-overlap-guide-space.jpg\|frameless\|1024x1024px]]

	=== Customization FAQs ===		== Customization FAQs ==

	==== Set the Text color ====		=== Set the Text color ===
	Learn how to set the Text color [[Create Template For Multiple Pages#Set the Text color\|here]].		Learn how to set the Text color [[Create Template For Multiple Pages#Set the Text color\|here]].

	==== Set the Background color ====		=== Set the Background color ===
	Learn how to set the background color (applied to the whole section) [[Create Template For Multiple Pages#Set the Background Color\|here]].		Learn how to set the background color (applied to the whole section) [[Create Template For Multiple Pages#Set the Background Color\|here]].

	==== Set the Container Background color ====		=== Set the Container Background color ===
	Learn how to set the Container Background color (applied to the background of the content area instead of the full-width background) [[Create Template For Multiple Pages#Set the Container Background color\|here]].		Learn how to set the Container Background color (applied to the background of the content area instead of the full-width background) [[Create Template For Multiple Pages#Set the Container Background color\|here]].

	==== Adjust the padding/margin of each section ====		=== Adjust the padding/margin of each section ===
	*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, border radius, 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, background color [[Create_Template_For_Multiple_Pages#Adjust_the_font_size,_border_radius,_background_color\|here]]

	==== Custom CSS ====		=== Custom CSS ===
	*Learn how to customize your Shopify themes (change your font size, button, background, border radius, etc.) with Custom CSS using Easy Content Builder: [https://www.youtube.com/watch?v=gN20FiUvVZc 5-min video tutorial].		*Learn how to customize your Shopify themes (change your font size, button, background, border radius, etc.) with Custom CSS using Easy Content Builder: [https://www.youtube.com/watch?v=gN20FiUvVZc 5-min video tutorial].

	:{{Note\|For Pro plan: In addition to the standard Custom CSS feature, you have an '''Automatically Generate CSS''' option - a handy way to customize your theme '''without coding'''. [[Custom CSS\|Learn more]]. \|reminder}}		:{{Note\|For Pro plan: In addition to the standard Custom CSS feature, you have an '''Automatically Generate CSS''' option - a handy way to customize your theme '''without coding'''. [[Custom CSS\|Learn more]]. \|reminder}}
	:[[File:Ecb-custom-css.jpg\|border\|frameless\|800x800px]]		:[[File:Ecb-custom-css.jpg\|border\|frameless\|800x800px]]

← Older revision		Revision as of 04:48, 26 February 2024
Line 318:		Line 318:
	'''Step 3''': Add three other '''Image With Text blocks''' similar to Step 2 above and configure each block your way.		'''Step 3''': Add three other '''Image With Text blocks''' similar to Step 2 above and configure each block your way.

	==Image with overlapping rich content ==		=== 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.		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.

Line 342:		Line 342:
	*Container Max Width: leave it blank.		*Container Max Width: leave it blank.
	*Desktop layout: Two Col: First Block Left, Remains Right		*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)		*Main Column Width: 40 (this refers to the width of the main text block that will overlap the background image)
Line 374:		Line 373:
	[[File:Ecb-overlap-guide-space.jpg\|frameless\|1024x1024px]]		[[File:Ecb-overlap-guide-space.jpg\|frameless\|1024x1024px]]

	==== Customization FAQs ====		=== Customization FAQs ===

	===== Set the Text color =====		==== Set the Text color ====
	Learn how to set the Text color [[Create Template For Multiple Pages#Set the Text color\|here]].		Learn how to set the Text color [[Create Template For Multiple Pages#Set the Text color\|here]].

	===== Set the Background color =====		==== Set the Background color ====
	Learn how to set the background color (applied to the whole section) [[Create Template For Multiple Pages#Set the Background Color\|here]].		Learn how to set the background color (applied to the whole section) [[Create Template For Multiple Pages#Set the Background Color\|here]].

	===== Set the Container Background color =====		==== Set the Container Background color ====
	Learn how to set the Container Background color (applied to the background of the content area instead of the full-width background) [[Create Template For Multiple Pages#Set the Container Background color\|here]].		Learn how to set the Container Background color (applied to the background of the content area instead of the full-width background) [[Create Template For Multiple Pages#Set the Container Background color\|here]].

	===== Adjust the padding/margin of each section =====		==== Adjust the padding/margin of each section ====
	*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, border radius, 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, background color [[Create_Template_For_Multiple_Pages#Adjust_the_font_size,_border_radius,_background_color\|here]]

	===== Custom CSS =====		==== Custom CSS ====
	*Learn how to customize your Shopify themes (change your font size, button, background, border radius, etc.) with Custom CSS using Easy Content Builder: [https://www.youtube.com/watch?v=gN20FiUvVZc 5-min video tutorial].		*Learn how to customize your Shopify themes (change your font size, button, background, border radius, etc.) with Custom CSS using Easy Content Builder: [https://www.youtube.com/watch?v=gN20FiUvVZc 5-min video tutorial].

	:{{Note\|For Pro plan: In addition to the standard Custom CSS feature, you have an '''Automatically Generate CSS''' option - a handy way to customize your theme '''without coding'''. [[Custom CSS\|Learn more]]. \|reminder}}		:{{Note\|For Pro plan: In addition to the standard Custom CSS feature, you have an '''Automatically Generate CSS''' option - a handy way to customize your theme '''without coding'''. [[Custom CSS\|Learn more]]. \|reminder}}
	:[[File:Ecb-custom-css.jpg\|border\|frameless\|800x800px]]		:[[File:Ecb-custom-css.jpg\|border\|frameless\|800x800px]]