Block Before and After Slider - Revision history

An: /* Before & After section settings */

2025-03-27T01:53:58Z

Before & After section settings

← Older revision		Revision as of 01:53, 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}}

	=== Before & After ~~section~~ settings===		=== Before & After global settings===
	{\| class="wikitable"		{\| class="wikitable"
	\|+		\|+

An: /* How to add Before & After Slider section */

2024-11-07T04:12:19Z

How to add Before & After Slider section

← Older revision		Revision as of 04:12, 7 November 2024
Line 13:		Line 13:
	:{{Note\|Note: If you include the '''Before & After''' in the core product information, skip the step for adding '''Section Settings'''. Just add the '''Before & After'''. [[File:Ecb add section core product info.jpg\|800px\|frameless]]\|reminder}}		:{{Note\|Note: If you include the '''Before & After''' in the core product information, skip the step for adding '''Section Settings'''. Just add the '''Before & After'''. [[File:Ecb add section core product info.jpg\|800px\|frameless]]\|reminder}}

	*'''Step 2''': Add an '''Before & After''' section and customize the settings according to your preferences.		*'''Step 2''': Add a '''Before & After''' section and customize the settings according to your preferences.
	:[[File:Ecb before-after-slider.gif\|frameless\|518x518px]]		:[[File:Ecb before-after-slider.gif\|frameless\|518x518px]]
	{{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}}

An at 04:03, 7 November 2024

2024-11-07T04:03:49Z

← Older revision		Revision as of 04:03, 7 November 2024
Line 1:		Line 1:
	{{DISPLAYTITLE:Block: Before & After}}		{{DISPLAYTITLE:Block: Before & After Slider}}
	=== Overview ===		=== Overview ===
	Before & After slider block lets you compare two versions of an image together. Before and after images will appear with a divider which can be moved so that users can see the difference.		Before & After slider block lets you compare two versions of an image together. Before and after images will appear with a divider which can be moved so that users can see the difference.
Line 5:		Line 5:
	{{Note\|See Before & After Slider examples [https://easy-content-builder-demo.myshopify.com/products/the-women-greenhouse-tee here], [https://easy-content-builder-demo.myshopify.com/products/sneaker here], or [https://easy-content-builder-demo.myshopify.com/products/stylish-woolen-fashion-hat here].\|reminder}}		{{Note\|See Before & After Slider examples [https://easy-content-builder-demo.myshopify.com/products/the-women-greenhouse-tee here], [https://easy-content-builder-demo.myshopify.com/products/sneaker here], or [https://easy-content-builder-demo.myshopify.com/products/stylish-woolen-fashion-hat here].\|reminder}}

	=== How to add Before & After section ===		=== How to add Before & After Slider section ===

	*'''Step 1''': Add a '''Section Settings''' section that allows you to control the global settings of the '''Before & After''' section.		*'''Step 1''': Add a '''Section Settings''' section that allows you to control the global settings of the '''Before & After''' section.

An at 04:03, 7 November 2024

2024-11-07T04:03:16Z

← Older revision		Revision as of 04:03, 7 November 2024
Line 1:		Line 1:
	{{DISPLAYTITLE:Block: Before & After}}		{{DISPLAYTITLE:Block: Before & After}}
			=== Overview ===
	Before & After slider block lets you compare two versions of an image together. Before and after images will appear with a divider which can be moved so that users can see the difference.		Before & After slider block lets you compare two versions of an image together. Before and after images will appear with a divider which can be moved so that users can see the difference.
	{{Note\|NOTE: This block is only available for the Pro plan. You can still add and edit this block normally in the Theme Editor; however, you need to upgrade your plan to apply them to the front end.\|inline}}		{{Note\|NOTE: This block is only available for the Pro plan. You can still add and edit this block normally in the Theme Editor; however, you need to upgrade your plan to apply them to the front end.\|inline}}

An: /* How to add Before & After section */

2024-11-07T04:02:59Z

How to add Before & After section

← Older revision		Revision as of 04:02, 7 November 2024
Line 6:		Line 6:

	=== How to add Before & After section ===		=== How to add Before & After section ===
	'''Before & After''' helps you create separate content blocks (Each block comes with its heading, description, and icon). You can easily position the icon (left, right, center, or bottom) to pair with the wrapped text.

	*'''Step 1''': Add a '''Section Settings''' section that allows you to control the global settings of the '''Before & After''' section.		*'''Step 1''': Add a '''Section Settings''' section that allows you to control the global settings of the '''Before & After''' section.

An: /* How to add Before & After section */

2024-11-07T03:55:03Z

How to add Before & After section

← Older revision		Revision as of 03:55, 7 November 2024
Line 6:		Line 6:

	=== How to add Before & After section ===		=== How to add Before & After section ===
	'''Before & After''' ~~(previously '''''Features''''' block)~~ helps you create separate content blocks (Each block comes with its heading, description, and icon). You can easily position the icon (left, right, center, or bottom) to pair with the wrapped text.		'''Before & After''' helps you create separate content blocks (Each block comes with its heading, description, and icon). You can easily position the icon (left, right, center, or bottom) to pair with the wrapped text.

	*'''Step 1''': Add a '''Section Settings''' section that allows you to control the global settings of the '''Before & After''' section.		*'''Step 1''': Add a '''Section Settings''' section that allows you to control the global settings of the '''Before & After''' section.

An at 03:54, 7 November 2024

2024-11-07T03:54:38Z

← Older revision		Revision as of 03:54, 7 November 2024
Line 5:		Line 5:
	{{Note\|See Before & After Slider examples [https://easy-content-builder-demo.myshopify.com/products/the-women-greenhouse-tee here], [https://easy-content-builder-demo.myshopify.com/products/sneaker here], or [https://easy-content-builder-demo.myshopify.com/products/stylish-woolen-fashion-hat here].\|reminder}}		{{Note\|See Before & After Slider examples [https://easy-content-builder-demo.myshopify.com/products/the-women-greenhouse-tee here], [https://easy-content-builder-demo.myshopify.com/products/sneaker here], or [https://easy-content-builder-demo.myshopify.com/products/stylish-woolen-fashion-hat here].\|reminder}}

	~~[[File:Ecb before-after-slider~~.~~gif\|frameless\|518x518px]]~~		=== How to add Before & After section ===
			'''Before & After''' (previously '''''Features''''' block) helps you create separate content blocks (Each block comes with its heading, description, and icon). You can easily position the icon (left, right, center, or bottom) to pair with the wrapped text.

			*'''Step 1''': Add a '''Section Settings''' section that allows you to control the global settings of the '''Before & After''' 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 '''Before & After''' in the core product information, skip the step for adding '''Section Settings'''. Just add the '''Before & After'''. [[File:Ecb add section core product info.jpg\|800px\|frameless]]\|reminder}}

			*'''Step 2''': Add an '''Before & After''' section and customize the settings according to your preferences.
			:[[File:Ecb before-after-slider.gif\|frameless\|518x518px]]
	{{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}}

			=== Before & After section settings===
	{\| class="wikitable"		{\| class="wikitable"
	\|+		\|+

An at 09:02, 31 May 2024

2024-05-31T09:02:17Z

← Older revision		Revision as of 09:02, 31 May 2024
Line 7:		Line 7:
	[[File:Ecb before-after-slider.gif\|frameless\|518x518px]]		[[File:Ecb before-after-slider.gif\|frameless\|518x518px]]

	{{Note\|''If ~~you’re~~ new to our Easy Content Builder, please ~~refer to section~~ [[~~Add Sections~~\|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"
	\|+		\|+

An at 03:34, 27 May 2024

2024-05-27T03:34:21Z

← Older revision		Revision as of 03:34, 27 May 2024
Line 1:		Line 1:
			{{DISPLAYTITLE:Block: Before & After}}

	Before & After slider block lets you compare two versions of an image together. Before and after images will appear with a divider which can be moved so that users can see the difference.		Before & After slider block lets you compare two versions of an image together. Before and after images will appear with a divider which can be moved so that users can see the difference.
	{{Note\|NOTE: This block is only available for the Pro plan. You can still add and edit this block normally in the Theme Editor; however, you need to upgrade your plan to apply them to the front end.\|inline}}		{{Note\|NOTE: This block is only available for the Pro plan. You can still add and edit this block normally in the Theme Editor; however, you need to upgrade your plan to apply them to the front end.\|inline}}

An at 00:18, 24 February 2024

2024-02-24T00:18:25Z

← Older revision		Revision as of 00:18, 24 February 2024
Line 1:		Line 1:
	Before & After slider block lets you compare two versions of an image together. Before and after images will appear with a divider which can be moved so that users can see the difference.		Before & After slider block lets you compare two versions of an image together. Before and after images will appear with a divider which can be moved so that users can see the difference.
	NOTE: This block is only available for the Pro plan. You can still add and edit this block normally in the Theme Editor; however, you need to upgrade your plan to apply them to the front end.		{{Note\|NOTE: This block is only available for the Pro plan. You can still add and edit this block normally in the Theme Editor; however, you need to upgrade your plan to apply them to the front end.\|inline}}
	{{Note\|See Before & After Slider examples [https://easy-content-builder-demo.myshopify.com/products/the-women-greenhouse-tee here], [https://easy-content-builder-demo.myshopify.com/products/sneaker here], or [https://easy-content-builder-demo.myshopify.com/products/stylish-woolen-fashion-hat here].\|~~info~~}}		{{Note\|See Before & After Slider examples [https://easy-content-builder-demo.myshopify.com/products/the-women-greenhouse-tee here], [https://easy-content-builder-demo.myshopify.com/products/sneaker here], or [https://easy-content-builder-demo.myshopify.com/products/stylish-woolen-fashion-hat here].\|reminder}}

	[[File:Ecb before-after-slider.gif\|frameless\|518x518px]]		[[File:Ecb before-after-slider.gif\|frameless\|518x518px]]
Line 59:		Line 59:
	\|Set the vertical spacing between elements.		\|Set the vertical spacing between elements.
	\|}		\|}

			===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}}