Block Image - Revision history

An at 09:11, 1 April 2025

2025-04-01T09:11:56Z

← Older revision		Revision as of 09:11, 1 April 2025
Line 4:		Line 4:

	{{Note\|Easy Content Builder offers 4 sections for managing images:		{{Note\|Easy Content Builder offers 4 sections for managing images:
	*Image Section: Ideal for showcasing a single image.		*Image Section (the current page you are viewing): Ideal for showcasing a single image.
	*[[Block_Image_With_Text\|Images With Text]]: Great for presenting images alongside headings, descriptions, and CTA buttons, with the option to customize the ratio of image to text.		*[[Block_Image_With_Text\|Images With Text]]: Great for presenting images alongside headings, descriptions, and CTA buttons, with the option to customize the ratio of image to text.
	*[[Block_Gallery\|Gallery]]: Perfect for creating a grid of photos and videos. Clicking on an image or video opens a lightbox popup to display related content.		*[[Block_Gallery\|Gallery]]: Perfect for creating a grid of photos and videos. Clicking on an image or video opens a lightbox popup to display related content.

An at 09:08, 1 April 2025

2025-04-01T09:08:09Z

← Older revision		Revision as of 09:08, 1 April 2025
Line 1:		Line 1:
	{{DISPLAYTITLE:Block: Image}}		{{DISPLAYTITLE:Block: Image}}

	This section is great for displaying a single image, like an image within a modal.		This section is great for displaying a single image, like an image within a modal or in a multi-column layout where you want to show one image in each column.

	{{Note\|Easy Content Builder offers 4 sections for managing images:		{{Note\|Easy Content Builder offers 4 sections for managing images:

An: /* Image global settings */

2025-04-01T09:04:49Z

Image global settings

← Older revision		Revision as of 09:04, 1 April 2025
Line 37:		Line 37:
	\|-		\|-
	\|Image		\|Image
	\|Add the image you want to feature in the block.		\|Add the image you want to feature in the block on Desktop
			\|-
			\|Image Mobile
			\|Add the image you want to feature in the block on Mobile devices
	\|-		\|-
	\|Image Width (px)		\|Image Width (px)
Line 53:		Line 56:
	\|Adds rounded corners to the image. You can set your image with Circle, Rounded, or Pill values.		\|Adds rounded corners to the image. You can set your image with Circle, Rounded, or Pill values.
	You can combine three fields - '''''Image Width''''', '''''Image Height''''', and '''''Image Border''''' - to create a wide variety of image shapes: circle, square, rectangular, and oval.		You can combine three fields - '''''Image Width''''', '''''Image Height''''', and '''''Image Border''''' - to create a wide variety of image shapes: circle, square, rectangular, and oval.
			\|-
			\|Scale Up effect
			\|Activate this option to enable zooming of the image when hovered over.
	\|-		\|-
	\|Image Link		\|Image Link

An: /* Image settings */

2025-03-27T01:56:25Z

Image settings

← Older revision		Revision as of 01:56, 27 March 2025
Line 28:		Line 28:
	{{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}}

	===Image settings===		===Image global settings===
	From the Shopify theme editor, click on '''Image''' on the sidebar to view the details of settings.		From the Shopify theme editor, click on '''Image''' on the sidebar to view the details of settings.

An: /* Image settings */

2024-11-07T04:19:29Z

Image settings

← Older revision		Revision as of 04:19, 7 November 2024
Line 29:		Line 29:

	===Image settings===		===Image settings===
	~~SeFrom~~ the Shopify theme editor, click on '''Image''' on the sidebar to view the details of settings.		From the Shopify theme editor, click on '''Image''' on the sidebar to view the details of settings.

	{\| class="wikitable"		{\| class="wikitable"

An: /* Image settings */

2024-11-07T04:18:55Z

Image settings

← Older revision		Revision as of 04:18, 7 November 2024
Line 15:		Line 15:
	*Showcase a modal with two columns, featuring an image in one column and either a newsletter sign-up form or promotional information in the other column.		*Showcase a modal with two columns, featuring an image in one column and either a newsletter sign-up form or promotional information in the other column.
	:[[File:Ecb-modal-newsletter.jpg\|frameless\|1200x1200px]]		:[[File:Ecb-modal-newsletter.jpg\|frameless\|1200x1200px]]

			=== How to add Image section ===

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

			*'''Step 2''': Add an '''Image''' section and customize the settings according to your preferences.

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

	===Image settings===		===Image settings===
	SeFrom the Shopify theme editor, click on '''Image''' on the sidebar to view the details of settings.		SeFrom the Shopify theme editor, click on '''Image''' on the sidebar to view the details of settings.

	~~{{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 10:35, 17 September 2024

2024-09-17T10:35:23Z

← Older revision		Revision as of 10:35, 17 September 2024
Line 2:		Line 2:

	This section is great for displaying a single image, like an image within a modal.		This section is great for displaying a single image, like an image within a modal.

			{{Note\|Easy Content Builder offers 4 sections for managing images:
			*Image Section: Ideal for showcasing a single image.
			*[[Block_Image_With_Text\|Images With Text]]: Great for presenting images alongside headings, descriptions, and CTA buttons, with the option to customize the ratio of image to text.
			*[[Block_Gallery\|Gallery]]: Perfect for creating a grid of photos and videos. Clicking on an image or video opens a lightbox popup to display related content.
			*[[Block_Icons_With_Text\|Icons With Text]]: Designed for displaying a slider or grid of images, icons, and text. This section can be used for showcasing Trust Badges, a scrolling announcement bar, logo lists, testimonials, or any text columns with icons.\|reminder}}

	===What is the Image section perfect for?===		===What is the Image section perfect for?===

An: /* Image settings */

2024-09-17T10:23:29Z

Image settings

← Older revision		Revision as of 10:23, 17 September 2024
Line 36:		Line 36:
	\|Adds rounded corners to the image. You can set your image with Circle, Rounded, or Pill values.		\|Adds rounded corners to the image. You can set your image with Circle, Rounded, or Pill values.
	You can combine three fields - '''''Image Width''''', '''''Image Height''''', and '''''Image Border''''' - to create a wide variety of image shapes: circle, square, rectangular, and oval.		You can combine three fields - '''''Image Width''''', '''''Image Height''''', and '''''Image Border''''' - to create a wide variety of image shapes: circle, square, rectangular, and oval.
			\|-
			\|Image Link
			\|Please input the link you want to use. This will enable the icon to be clickable when hovering over the image.
			\|-
			\|Target
			\|Choose whether you want the link to open in the same window or in a new window.
	\|-		\|-
	\|Image Alignment		\|Image Alignment

An at 03:36, 27 August 2024

2024-08-27T03:36:39Z

← Older revision		Revision as of 03:36, 27 August 2024
Line 1:		Line 1:
			{{DISPLAYTITLE:Block: Image}}

	This section is great for displaying a single image, like an image within a modal.		This section is great for displaying a single image, like an image within a modal.

An at 03:36, 27 August 2024

2024-08-27T03:36:10Z

← Older revision		Revision as of 03:36, 27 August 2024
Line 1:		Line 1:
	~~''<to be updated>~~
	''
	This section is great for displaying a single image, like an image within a modal.		This section is great for displaying a single image, like an image within a modal.