Block Icons With Text - Revision history

An: /* Global settings */

2025-11-04T04:51:24Z

Global settings

← Older revision		Revision as of 04:51, 4 November 2025
Line 68:		Line 68:
	*Set the icon width: '''image-width-100''' (replace 100 with the desired value).		*Set the icon width: '''image-width-100''' (replace 100 with the desired value).
	*Set the icon height: '''image-height-100''' (replace 100 with the desired value).		*Set the icon height: '''image-height-100''' (replace 100 with the desired value).
			:
			:'''EXAMPLE''' '''- Icons With Text''' (See [https://easy-content-builder-demo.myshopify.com/products/bundle-4 live demo]):[[File:Iwt-class-eg-dimension.jpg\|frameless\|800x800px]]
	:'''EXAMPLE''' '''- Icons With Text''' (See [https://easy-content-builder-demo.myshopify.com/products/bundle-4 live demo]):
	:[[File:Iwt-class-eg-dimension.jpg\|frameless\|800x800px]]

	'''<u>// Add a style to cards:</u>'''		'''<u>// Add a style to cards:</u>'''
Line 87:		Line 85:
	* '''uk-grid-collapse''' Add this class to remove the grid-gap entirely.		* '''uk-grid-collapse''' Add this class to remove the grid-gap entirely.

	:'''EXAMPLE''' '''- Card Style''' (See [https://easy-content-builder-demo.myshopify.com/products/pizza-ovens live demo]):		:
	:[[File:Iwt-class-eg-card-style.jpg\|frameless\|800x800px]]		:'''EXAMPLE''' '''- Card Style''' (See [https://easy-content-builder-demo.myshopify.com/products/pizza-ovens live demo]):[[File:Iwt-class-eg-card-style.jpg\|frameless\|800x800px]]

	'''<u>// Adjust Vertical Alignment</u>'''		'''<u>// Adjust Vertical Alignment</u>'''
Line 108:		Line 106:
	* '''toggle''': use this class to create Collapsible Text Columns with Icons that function similarly to an Accordion section.		* '''toggle''': use this class to create Collapsible Text Columns with Icons that function similarly to an Accordion section.

	:'''EXAMPLE - Collapsible Icons With Text''' (See [https://easy-content-builder-demo.myshopify.com/products/bundle-4 live demo]):		:
	:[[File:Iwt-class-eg-toggle.jpg\|frameless\|800x800px]]		:'''EXAMPLE - Collapsible Icons With Text''' (See [https://easy-content-builder-demo.myshopify.com/products/bundle-4 live demo]):[[File:Iwt-class-eg-toggle.jpg\|frameless\|800x800px]]

	'''<u>// Enable Auto-scrolling:</u>'''		'''<u>// Enable Auto-scrolling:</u>'''

An: /* Global settings */

2025-11-04T04:50:07Z

Global settings

An: /* Global settings */

2025-11-04T04:39:27Z

Global settings

An: /* Global settings */

2025-11-04T04:38:33Z

Global settings

← Older revision		Revision as of 04:38, 4 November 2025
Line 85:		Line 85:
	* '''uk-grid-large''' Add this class to apply a large gap		* '''uk-grid-large''' Add this class to apply a large gap
	* '''uk-grid-collapse''' Add this class to remove the grid-gap entirely.		* '''uk-grid-collapse''' Add this class to remove the grid-gap entirely.


	:'''EXAMPLE''' (See [https://easy-content-builder-demo.myshopify.com/products/pizza-ovens live demo]):		:'''EXAMPLE''' (See [https://easy-content-builder-demo.myshopify.com/products/pizza-ovens live demo]):
Line 106:		Line 107:

	* '''toggle''': use this class to create Collapsible Text Columns with Icons that function similarly to an Accordion section.		* '''toggle''': use this class to create Collapsible Text Columns with Icons that function similarly to an Accordion section.


	:'''EXAMPLE''' (See [https://easy-content-builder-demo.myshopify.com/products/bundle-4 live demo]):		:'''EXAMPLE''' (See [https://easy-content-builder-demo.myshopify.com/products/bundle-4 live demo]):
Line 120:		Line 122:
	*'''max-width-200''': Set item max width (replace 200 with your desired width).		*'''max-width-200''': Set item max width (replace 200 with your desired width).
	:'''<u>NOTE</u>''': If you do not set '''max-width-value''', each image's maximum width is 280px. To set the image bigger than 280px, you must specify both '''image-width-value''' and '''max-width-value''' (input the '''value''' as you wish. Make sure the value of '''image-width-value''' is always smaller than that of '''max-width-value'''.		:'''<u>NOTE</u>''': If you do not set '''max-width-value''', each image's maximum width is 280px. To set the image bigger than 280px, you must specify both '''image-width-value''' and '''max-width-value''' (input the '''value''' as you wish. Make sure the value of '''image-width-value''' is always smaller than that of '''max-width-value'''.


	:'''EXAMPLE''' (See [https://easy-content-builder-demo.myshopify.com/pages/homepage-flowers live demo])		:'''EXAMPLE''' (See [https://easy-content-builder-demo.myshopify.com/pages/homepage-flowers live demo])

An: /* Global settings */

2025-11-04T04:37:31Z

Global settings

← Older revision		Revision as of 04:37, 4 November 2025
Line 69:		Line 69:
	*Set the icon height: '''image-height-100''' (replace 100 with the desired value).		*Set the icon height: '''image-height-100''' (replace 100 with the desired value).

	'''EXAMPLE''' (See [https://easy-content-builder-demo.myshopify.com/products/bundle-4 live demo]): [[File:Iwt-class-eg-dimension.jpg\|frameless\|800x800px]]		:'''EXAMPLE''' (See [https://easy-content-builder-demo.myshopify.com/products/bundle-4 live demo]):
			:[[File:Iwt-class-eg-dimension.jpg\|frameless\|800x800px]]

	'''<u>// Add a style to cards:</u>'''		'''<u>// Add a style to cards:</u>'''
Line 84:		Line 85:
	* '''uk-grid-large''' Add this class to apply a large gap		* '''uk-grid-large''' Add this class to apply a large gap
	* '''uk-grid-collapse''' Add this class to remove the grid-gap entirely.		* '''uk-grid-collapse''' Add this class to remove the grid-gap entirely.
	'''EXAMPLE''' (See [https://easy-content-builder-demo.myshopify.com/products/pizza-ovens live demo]): [[File:Iwt-class-eg-card-style.jpg\|frameless\|800x800px]]
			:'''EXAMPLE''' (See [https://easy-content-builder-demo.myshopify.com/products/pizza-ovens live demo]):
			:[[File:Iwt-class-eg-card-style.jpg\|frameless\|800x800px]]

	'''<u>// Adjust Vertical Alignment</u>'''		'''<u>// Adjust Vertical Alignment</u>'''
Line 104:		Line 107:
	* '''toggle''': use this class to create Collapsible Text Columns with Icons that function similarly to an Accordion section.		* '''toggle''': use this class to create Collapsible Text Columns with Icons that function similarly to an Accordion section.

	'''EXAMPLE''' (See [https://easy-content-builder-demo.myshopify.com/products/bundle-4 live demo]): [[File:Iwt-class-eg-toggle.jpg\|frameless\|800x800px]]		:'''EXAMPLE''' (See [https://easy-content-builder-demo.myshopify.com/products/bundle-4 live demo]):
			:[[File:Iwt-class-eg-toggle.jpg\|frameless\|800x800px]]

	'''<u>// Enable Auto-scrolling:</u>'''		'''<u>// Enable Auto-scrolling:</u>'''
Line 117:		Line 121:
	:'''<u>NOTE</u>''': If you do not set '''max-width-value''', each image's maximum width is 280px. To set the image bigger than 280px, you must specify both '''image-width-value''' and '''max-width-value''' (input the '''value''' as you wish. Make sure the value of '''image-width-value''' is always smaller than that of '''max-width-value'''.		:'''<u>NOTE</u>''': If you do not set '''max-width-value''', each image's maximum width is 280px. To set the image bigger than 280px, you must specify both '''image-width-value''' and '''max-width-value''' (input the '''value''' as you wish. Make sure the value of '''image-width-value''' is always smaller than that of '''max-width-value'''.

	'''EXAMPLE''' (See [https://easy-content-builder-demo.myshopify.com/pages/homepage-flowers live demo])		:'''EXAMPLE''' (See [https://easy-content-builder-demo.myshopify.com/pages/homepage-flowers live demo])

	{{Note\|To display a long text in one line, use '''nowrap max-width-500''' (replace 500 with a value greater than your text length).\|inline}}		:{{Note\|To display a long text in one line, use '''nowrap max-width-500''' (replace 500 with a value greater than your text length).\|inline}}

	[[File:Iwt-class-eg-scrolling-textbar.jpg\|frameless\|800x800px]]		:[[File:Iwt-class-eg-scrolling-textbar.jpg\|frameless\|800x800px]]

	'''<u>// Enable Instagram Feed, Tiktok/Youtube Slider:</u>'''		'''<u>// Enable Instagram Feed, Tiktok/Youtube Slider:</u>'''

An: /* Global settings */

2025-11-04T04:34:36Z

Global settings

← Older revision		Revision as of 04:34, 4 November 2025
Line 119:		Line 119:
	'''EXAMPLE''' (See [https://easy-content-builder-demo.myshopify.com/pages/homepage-flowers live demo])		'''EXAMPLE''' (See [https://easy-content-builder-demo.myshopify.com/pages/homepage-flowers live demo])

	To display a long text in one line, use nowrap max-width-500 (replace 500 with a value greater than your text length).		{{Note\|To display a long text in one line, use '''nowrap max-width-500''' (replace 500 with a value greater than your text length).\|inline}}

	[[File:Iwt-class-eg-scrolling-textbar.jpg\|frameless\|800x800px]]		[[File:Iwt-class-eg-scrolling-textbar.jpg\|frameless\|800x800px]]

An: /* Global settings */

2025-11-04T04:33:07Z

Global settings

← Older revision		Revision as of 04:33, 4 November 2025
Line 116:		Line 116:
	*'''max-width-200''': Set item max width (replace 200 with your desired width).		*'''max-width-200''': Set item max width (replace 200 with your desired width).
	:'''<u>NOTE</u>''': If you do not set '''max-width-value''', each image's maximum width is 280px. To set the image bigger than 280px, you must specify both '''image-width-value''' and '''max-width-value''' (input the '''value''' as you wish. Make sure the value of '''image-width-value''' is always smaller than that of '''max-width-value'''.		:'''<u>NOTE</u>''': If you do not set '''max-width-value''', each image's maximum width is 280px. To set the image bigger than 280px, you must specify both '''image-width-value''' and '''max-width-value''' (input the '''value''' as you wish. Make sure the value of '''image-width-value''' is always smaller than that of '''max-width-value'''.

			'''EXAMPLE''' (See [https://easy-content-builder-demo.myshopify.com/pages/homepage-flowers live demo])

			To display a long text in one line, use nowrap max-width-500 (replace 500 with a value greater than your text length).

			[[File:Iwt-class-eg-scrolling-textbar.jpg\|frameless\|800x800px]]

	'''<u>// Enable Instagram Feed, Tiktok/Youtube Slider:</u>'''		'''<u>// Enable Instagram Feed, Tiktok/Youtube Slider:</u>'''

An: /* Global settings */

2025-11-04T04:13:14Z

Global settings

← Older revision		Revision as of 04:13, 4 November 2025
Line 69:		Line 69:
	*Set the icon height: '''image-height-100''' (replace 100 with the desired value).		*Set the icon height: '''image-height-100''' (replace 100 with the desired value).

	[[File:Iwt-class-eg-dimension.jpg\|frameless\|800x800px]]		'''EXAMPLE''' (See [https://easy-content-builder-demo.myshopify.com/products/bundle-4 live demo]): [[File:Iwt-class-eg-dimension.jpg\|frameless\|800x800px]]

	'''<u>// Add a style to cards:</u>'''		'''<u>// Add a style to cards:</u>'''
Line 84:		Line 84:
	* '''uk-grid-large''' Add this class to apply a large gap		* '''uk-grid-large''' Add this class to apply a large gap
	* '''uk-grid-collapse''' Add this class to remove the grid-gap entirely.		* '''uk-grid-collapse''' Add this class to remove the grid-gap entirely.
	[[File:Iwt-class-eg-card-style.jpg\|frameless\|800x800px]]		'''EXAMPLE''' (See [https://easy-content-builder-demo.myshopify.com/products/pizza-ovens live demo]): [[File:Iwt-class-eg-card-style.jpg\|frameless\|800x800px]]

	'''<u>// Adjust Vertical Alignment</u>'''		'''<u>// Adjust Vertical Alignment</u>'''
Line 104:		Line 104:
	* '''toggle''': use this class to create Collapsible Text Columns with Icons that function similarly to an Accordion section.		* '''toggle''': use this class to create Collapsible Text Columns with Icons that function similarly to an Accordion section.

	[[File:Iwt-class-eg-toggle.jpg\|frameless\|800x800px]]		'''EXAMPLE''' (See [https://easy-content-builder-demo.myshopify.com/products/bundle-4 live demo]): [[File:Iwt-class-eg-toggle.jpg\|frameless\|800x800px]]

	'''<u>// Enable Auto-scrolling:</u>'''		'''<u>// Enable Auto-scrolling:</u>'''

An: /* Global settings */

2025-11-04T04:03:53Z

Global settings

← Older revision		Revision as of 04:03, 4 November 2025
Line 103:		Line 103:

	* '''toggle''': use this class to create Collapsible Text Columns with Icons that function similarly to an Accordion section.		* '''toggle''': use this class to create Collapsible Text Columns with Icons that function similarly to an Accordion section.

			[[File:Iwt-class-eg-toggle.jpg\|frameless\|800x800px]]

	'''<u>// Enable Auto-scrolling:</u>'''		'''<u>// Enable Auto-scrolling:</u>'''

An: /* Global settings */

2025-11-04T03:50:06Z

Global settings

← Older revision		Revision as of 04:50, 4 November 2025
Line 70:		Line 70:


	:'''EXAMPLE''' (See [https://easy-content-builder-demo.myshopify.com/products/bundle-4 live demo]):		:'''EXAMPLE''' '''- Icons With Text''' (See [https://easy-content-builder-demo.myshopify.com/products/bundle-4 live demo]):
	:[[File:Iwt-class-eg-dimension.jpg\|frameless\|800x800px]]		:[[File:Iwt-class-eg-dimension.jpg\|frameless\|800x800px]]

Line 87:		Line 87:
	* '''uk-grid-collapse''' Add this class to remove the grid-gap entirely.		* '''uk-grid-collapse''' Add this class to remove the grid-gap entirely.

	:'''EXAMPLE''' (See [https://easy-content-builder-demo.myshopify.com/products/pizza-ovens live demo]):		:'''EXAMPLE''' '''- Card Style''' (See [https://easy-content-builder-demo.myshopify.com/products/pizza-ovens live demo]):
	:[[File:Iwt-class-eg-card-style.jpg\|frameless\|800x800px]]		:[[File:Iwt-class-eg-card-style.jpg\|frameless\|800x800px]]

Line 108:		Line 108:
	* '''toggle''': use this class to create Collapsible Text Columns with Icons that function similarly to an Accordion section.		* '''toggle''': use this class to create Collapsible Text Columns with Icons that function similarly to an Accordion section.

	:'''EXAMPLE''' (See [https://easy-content-builder-demo.myshopify.com/products/bundle-4 live demo]):		:'''EXAMPLE - Collapsible Icons With Text''' (See [https://easy-content-builder-demo.myshopify.com/products/bundle-4 live demo]):
	:[[File:Iwt-class-eg-toggle.jpg\|frameless\|800x800px]]		:[[File:Iwt-class-eg-toggle.jpg\|frameless\|800x800px]]

Line 122:		Line 122:
	:'''<u>NOTE</u>''': If you do not set '''max-width-value''', each image's maximum width is 280px. To set the image bigger than 280px, you must specify both '''image-width-value''' and '''max-width-value''' (input the '''value''' as you wish. Make sure the value of '''image-width-value''' is always smaller than that of '''max-width-value'''.		:'''<u>NOTE</u>''': If you do not set '''max-width-value''', each image's maximum width is 280px. To set the image bigger than 280px, you must specify both '''image-width-value''' and '''max-width-value''' (input the '''value''' as you wish. Make sure the value of '''image-width-value''' is always smaller than that of '''max-width-value'''.

	:'''EXAMPLE''' (See [https://easy-content-builder-demo.myshopify.com/pages/homepage-flowers live demo])		:'''EXAMPLE''' '''- Autoscrolling Text Bar''' (See [https://easy-content-builder-demo.myshopify.com/pages/homepage-flowers live demo])

	:{{Note\|To display a long text in one line, use '''nowrap max-width-500''' (replace 500 with a value greater than your text length).\|inline}}		:{{Note\|To display a long text in one line, use '''nowrap max-width-500''' (replace 500 with a value greater than your text length).\|inline}}

	:[[File:Iwt-class-eg-scrolling-textbar.jpg\|frameless\|800x800px]]		:[[File:Iwt-class-eg-scrolling-textbar.jpg\|frameless\|800x800px]]'''EXAMPLE''' '''- Autoscrolling Image Carousel''' (See [https://easy-content-builder-demo.myshopify.com/products/travel-tumbler Live Demo]):
			:[[File:Iwt-class-eg-scrolling-img.jpg\|frameless\|800x800px]]

	'''<u>// Enable Instagram Feed, Tiktok/Youtube Slider:</u>'''		'''<u>// Enable Instagram Feed, Tiktok/Youtube Slider:</u>'''

← Older revision		Revision as of 04:39, 4 November 2025
Line 68:		Line 68:
	*Set the icon width: '''image-width-100''' (replace 100 with the desired value).		*Set the icon width: '''image-width-100''' (replace 100 with the desired value).
	*Set the icon height: '''image-height-100''' (replace 100 with the desired value).		*Set the icon height: '''image-height-100''' (replace 100 with the desired value).


	:'''EXAMPLE''' (See [https://easy-content-builder-demo.myshopify.com/products/bundle-4 live demo]):		:'''EXAMPLE''' (See [https://easy-content-builder-demo.myshopify.com/products/bundle-4 live demo]):
Line 85:		Line 86:
	* '''uk-grid-large''' Add this class to apply a large gap		* '''uk-grid-large''' Add this class to apply a large gap
	* '''uk-grid-collapse''' Add this class to remove the grid-gap entirely.		* '''uk-grid-collapse''' Add this class to remove the grid-gap entirely.


	:'''EXAMPLE''' (See [https://easy-content-builder-demo.myshopify.com/products/pizza-ovens live demo]):		:'''EXAMPLE''' (See [https://easy-content-builder-demo.myshopify.com/products/pizza-ovens live demo]):
Line 107:		Line 107:

	* '''toggle''': use this class to create Collapsible Text Columns with Icons that function similarly to an Accordion section.		* '''toggle''': use this class to create Collapsible Text Columns with Icons that function similarly to an Accordion section.


	:'''EXAMPLE''' (See [https://easy-content-builder-demo.myshopify.com/products/bundle-4 live demo]):		:'''EXAMPLE''' (See [https://easy-content-builder-demo.myshopify.com/products/bundle-4 live demo]):
Line 122:		Line 121:
	*'''max-width-200''': Set item max width (replace 200 with your desired width).		*'''max-width-200''': Set item max width (replace 200 with your desired width).
	:'''<u>NOTE</u>''': If you do not set '''max-width-value''', each image's maximum width is 280px. To set the image bigger than 280px, you must specify both '''image-width-value''' and '''max-width-value''' (input the '''value''' as you wish. Make sure the value of '''image-width-value''' is always smaller than that of '''max-width-value'''.		:'''<u>NOTE</u>''': If you do not set '''max-width-value''', each image's maximum width is 280px. To set the image bigger than 280px, you must specify both '''image-width-value''' and '''max-width-value''' (input the '''value''' as you wish. Make sure the value of '''image-width-value''' is always smaller than that of '''max-width-value'''.


	:'''EXAMPLE''' (See [https://easy-content-builder-demo.myshopify.com/pages/homepage-flowers live demo])		:'''EXAMPLE''' (See [https://easy-content-builder-demo.myshopify.com/pages/homepage-flowers live demo])

← Older revision		Revision as of 03:50, 4 November 2025
Line 64:		Line 64:
	{{Note\|See more examples of how to add multiple classes to create an Icon With Text section [[Block_Icons_With_Text#Set_the_Heading_and_body_text_font_size/weight\|here]]\|reminder}}		{{Note\|See more examples of how to add multiple classes to create an Icon With Text section [[Block_Icons_With_Text#Set_the_Heading_and_body_text_font_size/weight\|here]]\|reminder}}

	// Define Icon Width & Height		'''<u>// Define Icon Width & Height</u>'''

	*Set the icon width: '''image-width-100''' (replace 100 with the desired value).		*Set the icon width: '''image-width-100''' (replace 100 with the desired value).
Line 71:		Line 71:
	[[File:Iwt-class-eg-dimension.jpg\|frameless\|800x800px]]		[[File:Iwt-class-eg-dimension.jpg\|frameless\|800x800px]]

	// Add a style to cards:		'''<u>// Add a style to cards:</u>'''

	* '''uk-card-primary''': creates a styled box with a primary color		* '''uk-card-primary''': creates a styled box with a primary color
Line 86:		Line 86:
	[[File:Iwt-class-eg-card-style.jpg\|frameless\|800x800px]]		[[File:Iwt-class-eg-card-style.jpg\|frameless\|800x800px]]

	/ Adjust Vertical Alignment		'''<u>// Adjust Vertical Alignment</u>'''

	* Use the '''image-middle''' class for middle alignment when positioning the icon on the left. This ensures proper vertical alignment between the icon and text blocks.		* Use the '''image-middle''' class for middle alignment when positioning the icon on the left. This ensures proper vertical alignment between the icon and text blocks.

	// Enable Icons With Text Slider		'''<u>// Enable Icons With Text Slider</u>'''
	*Convert items into sliders: '''slider'''. Show the slider with navigation arrows: '''slider-nav'''.		*Convert items into sliders: '''slider'''. Show the slider with navigation arrows: '''slider-nav'''.

	// Adjust Title and Body text size and color		'''<u>// Adjust Title and Body text size and color</u>'''
	* Set the Heading and body text font-weight: learn more [[Block Icons With Text#Set the Heading font-weight\|here]].		* Set the Heading and body text font-weight: learn more [[Block Icons With Text#Set the Heading font-weight\|here]].
	* Apply a different color to the text element: learn more [[Block Icons With Text#Apply a different color to text element\|here]].		* Apply a different color to the text element: learn more [[Block Icons With Text#Apply a different color to text element\|here]].

	// Use Metaobjects		'''<u>// Use Metaobjects</u>'''
	* Use metaobjects as a dynamic source: '''dynamic-source''' (Learn step-by-step guide [[Block Icons With Text#How to create an Icons With Text metaobject\|here]])		* Use metaobjects as a dynamic source: '''dynamic-source''' (Learn step-by-step guide [[Block Icons With Text#How to create an Icons With Text metaobject\|here]])

	// Collapsible Text Columns with Icons		'''<u>// Collapsible Text Columns with Icons</u>'''

	* '''toggle''': use this class to create Collapsible Text Columns with Icons that function similarly to an Accordion section.		* '''toggle''': use this class to create Collapsible Text Columns with Icons that function similarly to an Accordion section.

	// Enable Auto-scrolling:		'''<u>// Enable Auto-scrolling:</u>'''

	To enable auto-scrolling (Perfect for Logo slider, scrolling announcement text, Testimonial slider, etc.), add the CSS classes below:		To enable auto-scrolling (Perfect for Logo slider, scrolling announcement text, Testimonial slider, etc.), add the CSS classes below:
Line 115:		Line 115:
	:'''<u>NOTE</u>''': If you do not set '''max-width-value''', each image's maximum width is 280px. To set the image bigger than 280px, you must specify both '''image-width-value''' and '''max-width-value''' (input the '''value''' as you wish. Make sure the value of '''image-width-value''' is always smaller than that of '''max-width-value'''.		:'''<u>NOTE</u>''': If you do not set '''max-width-value''', each image's maximum width is 280px. To set the image bigger than 280px, you must specify both '''image-width-value''' and '''max-width-value''' (input the '''value''' as you wish. Make sure the value of '''image-width-value''' is always smaller than that of '''max-width-value'''.

	// Enable Instagram Feed, Tiktok/Youtube Slider:		'''<u>// Enable Instagram Feed, Tiktok/Youtube Slider:</u>'''

	* '''dynamic-source modal image-width-400 slider slider-nav''': show a regular Instagram/Tiktok/Youtube video slider (like [https://easy-content-builder-demo.myshopify.com/pages/section-instagram-feed-tiktok-youtube-slider this example]).		* '''dynamic-source modal image-width-400 slider slider-nav''': show a regular Instagram/Tiktok/Youtube video slider (like [https://easy-content-builder-demo.myshopify.com/pages/section-instagram-feed-tiktok-youtube-slider this example]).