Block Custom HTML - Revision history

An: /* Custom HTML Settings */

2025-03-27T01:55:05Z

Custom HTML Settings

← Older revision		Revision as of 01:55, 27 March 2025
Line 17:		Line 17:
	{{Note\|''If you are new to our Easy Content Builder, please take a look at the [[Add_section_settings\|Add Sections]] section for detailed instructions on how to add a section to your theme.\|reminder}}		{{Note\|''If you are new to our Easy Content Builder, please take a look at the [[Add_section_settings\|Add Sections]] section for detailed instructions on how to add a section to your theme.\|reminder}}

	=== Custom HTML ~~Settings~~ ===		=== Custom HTML global settings ===
	From the Shopify theme editor, click on '''Custom HTML''' on the sidebar to view the details of settings.		From the Shopify theme editor, click on '''Custom HTML''' on the sidebar to view the details of settings.
	{\| class="wikitable"		{\| class="wikitable"

An: /* Custom HTML Settings */

2024-11-07T04:13:50Z

Custom HTML Settings

← Older revision		Revision as of 04:13, 7 November 2024
Line 4:		Line 4:
	{{Note\|See Custom HTML block example [https://easy-content-builder-demo.myshopify.com/pages/section-variations here].\|inline}}		{{Note\|See Custom HTML block example [https://easy-content-builder-demo.myshopify.com/pages/section-variations here].\|inline}}

	=== Custom HTML ~~Settings~~ ===		=== How to add Custom HTML section ===
	~~From~~ the ~~Shopify theme editor~~, ~~click on~~ '''Custom HTML''' on the ~~sidebar to view~~ the ~~details of settings~~.
			*'''Step 1''': Add a '''Section Settings''' section that allows you to control the global settings of the '''Custom HTML''' section.

			:In this special section, you can specify multi-column layouts, activate full width, determine the section's maximum width, choose a background color, and set global margins and padding, among other options.

			:{{Note\|Note: If you include the '''Custom HTML''' in the core product information, skip the step for adding '''Section Settings'''. Just add the '''Custom HTML'''. [[File:Ecb add section core product info.jpg\|800px\|frameless]]\|reminder}}

	[[File:Block custom HTML.png\|1200x1200px]]		*'''Step 2''': Add a '''Custom HTML''' section and customize the settings according to your preferences.
			:[[File:Block custom HTML.png\|1200x1200px]]

	{{Note\|''If you are new to our Easy Content Builder, please take a look at the [[Add_section_settings\|Add Sections]] section for detailed instructions on how to add a section to your theme.\|reminder}}		{{Note\|''If you are new to our Easy Content Builder, please take a look at the [[Add_section_settings\|Add Sections]] section for detailed instructions on how to add a section to your theme.\|reminder}}

			=== Custom HTML Settings ===
			From the Shopify theme editor, click on '''Custom HTML''' on the sidebar to view the details of settings.
	{\| class="wikitable"		{\| class="wikitable"
	!Section settings		!Section settings

An: /* Details of Settings */

2024-06-13T09:49:16Z

Details of Settings

← Older revision		Revision as of 09:49, 13 June 2024
Line 4:		Line 4:
	{{Note\|See Custom HTML block example [https://easy-content-builder-demo.myshopify.com/pages/section-variations here].\|inline}}		{{Note\|See Custom HTML block example [https://easy-content-builder-demo.myshopify.com/pages/section-variations here].\|inline}}

	=== ~~Details of~~ Settings ===		=== Custom HTML Settings ===
	From the Shopify theme editor, click on '''Custom HTML''' on the sidebar to view the details of settings.		From the Shopify theme editor, click on '''Custom HTML''' on the sidebar to view the details of settings.

An at 09:06, 31 May 2024

2024-05-31T09:06:50Z

← Older revision		Revision as of 09:06, 31 May 2024
Line 2:		Line 2:

	The Custom HTML block lets you add snippets of HTML to your page. This block is helpful to embed custom content such as Google Map, Google Forms, specialized newsletter signups, or third-party widgets.		The Custom HTML block lets you add snippets of HTML to your page. This block is helpful to embed custom content such as Google Map, Google Forms, specialized newsletter signups, or third-party widgets.
	See Custom HTML block example [https://easy-content-builder-demo.myshopify.com/pages/section-variations here].		{{Note\|See Custom HTML block example [https://easy-content-builder-demo.myshopify.com/pages/section-variations here].\|inline}}

	=== Details of Settings ===		=== Details of Settings ===
Line 9:		Line 9:
	[[File:Block custom HTML.png\|1200x1200px]]		[[File:Block custom HTML.png\|1200x1200px]]

	{{Note\|''If ~~you’re~~ new to our Easy Content Builder, please ~~refer to section~~ [[~~Section Settings~~\|Add ~~App~~ Sections]] ~~and [[Add Blocks\|Add ECB Blocks]]~~ for ~~more details~~ on how to ~~create and edit~~ a section ~~or a block~~.''\|~~info~~}}		{{Note\|''If you are new to our Easy Content Builder, please take a look at the [[Add_section_settings\|Add Sections]] section for detailed instructions on how to add a section to your theme.\|reminder}}
	{\| class="wikitable"		{\| class="wikitable"
	!Section settings		!Section settings

An at 03:35, 27 May 2024

2024-05-27T03:35:46Z

← Older revision		Revision as of 03:35, 27 May 2024
Line 1:		Line 1:
			{{DISPLAYTITLE:Block: Custom HTML}}

	The Custom HTML block lets you add snippets of HTML to your page. This block is helpful to embed custom content such as Google Map, Google Forms, specialized newsletter signups, or third-party widgets.		The Custom HTML block lets you add snippets of HTML to your page. This block is helpful to embed custom content such as Google Map, Google Forms, specialized newsletter signups, or third-party widgets.
	See Custom HTML block example [https://easy-content-builder-demo.myshopify.com/pages/section-variations here].		See Custom HTML block example [https://easy-content-builder-demo.myshopify.com/pages/section-variations here].

An: /* Use case 2: Use the Custom HTML block to add vertical spacing between the rows/columns. */

2024-02-24T00:21:09Z

Use case 2: Use the Custom HTML block to add vertical spacing between the rows/columns.

← Older revision		Revision as of 00:21, 24 February 2024
Line 45:		Line 45:
	* A hero banner with two columns (left columns with text and CTA buttons, right column with a blank Custom HTML block): [[Block Image With Text#Use case 3: Hero banner with 3 CTAs buttons\|view details]].		* A hero banner with two columns (left columns with text and CTA buttons, right column with a blank Custom HTML block): [[Block Image With Text#Use case 3: Hero banner with 3 CTAs buttons\|view details]].
	* A hero banner using a blank Custom HTML block to add extra space between the Heading vs. CTA buttons: [[Block Image With Text#Use case 6: Hero banner with extra space between Headline/subheadline vs. CTAs buttons\|view details]].		* A hero banner using a blank Custom HTML block to add extra space between the Heading vs. CTA buttons: [[Block Image With Text#Use case 6: Hero banner with extra space between Headline/subheadline vs. CTAs buttons\|view details]].

			===Add other content blocks===
			You can add many content blocks to a 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]]

			{{Note\|See [https://easy-content-builder-demo.myshopify.com/pages/section-variations all content blocks] available that you can add to a section.\|reminder}}

An: /* Use case 2: Use the Custom HTML block to add vertical spacing between the rows/columns. */

2023-08-27T13:34:57Z

Use case 2: Use the Custom HTML block to add vertical spacing between the rows/columns.

← Older revision		Revision as of 13:34, 27 August 2023
Line 43:		Line 43:
	Here are examples of how to use the Custom HTML block to add blank spaces:		Here are examples of how to use the Custom HTML block to add blank spaces:

	* A hero banner with two columns (left columns with text and CTA buttons, right column with a blank Custom HTML block): [[Block Image With Text\|view details]].		* A hero banner with two columns (left columns with text and CTA buttons, right column with a blank Custom HTML block): [[Block Image With Text#Use case 3: Hero banner with 3 CTAs buttons\|view details]].
	* A hero banner using a blank Custom HTML block to add extra space between the Heading vs. CTA buttons: [[Block Image With Text#Use case 6: Hero banner with extra space between Headline/subheadline vs. CTAs buttons\|view details]].		* A hero banner using a blank Custom HTML block to add extra space between the Heading vs. CTA buttons: [[Block Image With Text#Use case 6: Hero banner with extra space between Headline/subheadline vs. CTAs buttons\|view details]].

An at 13:32, 27 August 2023

2023-08-27T13:32:50Z

← Older revision		Revision as of 13:32, 27 August 2023
Line 38:		Line 38:
	You can apply the same tweak to create blank space in 3-column or 4-column layouts.		You can apply the same tweak to create blank space in 3-column or 4-column layouts.

	==== '''Use case 2''': Use the Custom HTML block to add vertical spacing between the rows. ====		==== '''Use case 2''': Use the Custom HTML block to add vertical spacing between the rows/columns. ====
	Besides the primary purpose - inserting custom HTML code - you can use this block to add extra space between the existing content rows within a section - you leave all configuration fields blank (no need to add any custom code) and just set the margin to adjust the spacing as you wish.		Besides the primary purpose - inserting custom HTML code - you can use this block to add extra space between the existing content rows/columns within a section - you leave all configuration fields blank (no need to add any custom code) and just set the margin to adjust the spacing as you wish.

			Here are examples of how to use the Custom HTML block to add blank spaces:

			* A hero banner with two columns (left columns with text and CTA buttons, right column with a blank Custom HTML block): [[Block Image With Text\|view details]].
			* A hero banner using a blank Custom HTML block to add extra space between the Heading vs. CTA buttons: [[Block Image With Text#Use case 6: Hero banner with extra space between Headline/subheadline vs. CTAs buttons\|view details]].

An: /* Use case 2: Use the Custom HTML block to add vertical spacing between the rows. */

2023-08-27T04:04:31Z

Use case 2: Use the Custom HTML block to add vertical spacing between the rows.

← Older revision		Revision as of 04:04, 27 August 2023
Line 39:		Line 39:

	==== '''Use case 2''': Use the Custom HTML block to add vertical spacing between the rows. ====		==== '''Use case 2''': Use the Custom HTML block to add vertical spacing between the rows. ====
	Besides the ~~default padding, margin, or gap (depending on which type of sections you use),~~ you can use ~~Custom HTML~~ to add extra space between the existing content rows.		Besides the primary purpose - inserting custom HTML code - you can use this block to add extra space between the existing content rows within a section - you leave all configuration fields blank (no need to add any custom code) and just set the margin to adjust the spacing as you wish.

An at 09:48, 11 August 2023

2023-08-11T09:48:38Z

← Older revision		Revision as of 09:48, 11 August 2023
Line 1:		Line 1:
	The Custom HTML block lets you add snippets of HTML to your page. This block is helpful to embed custom content such as Google Map, Google Forms, specialized newsletter signups, or third-party widgets.		The Custom HTML block lets you add snippets of HTML to your page. This block is helpful to embed custom content such as Google Map, Google Forms, specialized newsletter signups, or third-party widgets.
	See Custom HTML block example [https://easy-content-builder-demo.myshopify.com/pages/section-variations here].		See Custom HTML block example [https://easy-content-builder-demo.myshopify.com/pages/section-variations here].

			=== Details of Settings ===
	From the Shopify theme editor, click on '''Custom HTML''' on the sidebar to view the details of settings.		From the Shopify theme editor, click on '''Custom HTML''' on the sidebar to view the details of settings.

Line 24:		Line 26:

	=== Other special use cases of Custom HTML block ===		=== Other special use cases of Custom HTML block ===
	~~'''Use case 1''': Create multiple-column layouts with blank sections.~~

			==== '''Use case 1''': Create multiple-column layouts with blank sections. ====
	Below is a sample 2-column layout with the 1st column floating left/right and the 2nd blank column:		Below is a sample 2-column layout with the 1st column floating left/right and the 2nd blank column:

Line 36:		Line 38:
	You can apply the same tweak to create blank space in 3-column or 4-column layouts.		You can apply the same tweak to create blank space in 3-column or 4-column layouts.

	'''Use case 2''': Use the Custom HTML block to add vertical spacing between the rows.		==== '''Use case 2''': Use the Custom HTML block to add vertical spacing between the rows. ====

	Besides the default padding, margin, or gap (depending on which type of sections you use), you can use Custom HTML to add extra space between the existing content rows.		Besides the default padding, margin, or gap (depending on which type of sections you use), you can use Custom HTML to add extra space between the existing content rows.