Block Image With Text: Difference between revisions

From Posstack.com Documentation
mNo edit summary
Line 15: Line 15:
=== How to add Image With Text section ===
=== How to add Image With Text section ===


* Step 1: Add a Section Settings section that allows you to control the global settings of the Image With Text section.
* Step 1: Add a '''Section Settings''' section that allows you to control the global settings of the '''Image With Text''' section.
::Here you can define multi-column layouts, enable fullwidth, set the section's max-width, background color, global margin/padding, etc.
::Here you can define multi-column layouts, enable fullwidth, set the section's max-width, background color, global margin/padding, etc.


* Step 2: Add an Image With Text section (This provides you block-level configurations in addition to the global configuration level (via Section Settings above)
* Step 2: Add an '''Image With Text''' section (This provides you block-level configurations in addition to the global configuration level (via Section Settings above)


* Step 3: Set the Card Style. Generally, you can choose among three main styles:  
* Step 3: Set the '''Card Style'''. Generally, you can choose among three main styles:  


::* No card (Disable the card style)
::* No card (Disable the card style)
Line 33: Line 33:
::NOTE: For each section, Easy Content Builder lets you control the margin/padding at both the global level (via Section Settings) and block level (the Image With Text itself). Also, you might need to adjust the margin/padding of other sections you add before and after the Image With Text section too.
::NOTE: For each section, Easy Content Builder lets you control the margin/padding at both the global level (via Section Settings) and block level (the Image With Text itself). Also, you might need to adjust the margin/padding of other sections you add before and after the Image With Text section too.


* Step 5: (Optional) Configure the animation and margin of the Image With Text section.
* Step 5: (Optional) Configure the animation and margin of the '''Image With Text''' section.


=== Global Configuration ===
=== Global Configuration ===

Revision as of 04:36, 26 May 2023

Overview

This block helps you create separate content blocks (Each block comes with its heading, tagline, description, featured image, and CTA button). You can easily position the image (left, right, center, or bottom) to pair with the description text.

See Image With Text examples here. 

What is the Image With Text section perfect for?

You have various options to use the Image With Text section for your Shopify themes:

  • Call to Action: See an example here (the Take our size quiz block)
  • Sale promotion: See an example here
  • Related Blog Posts: See an example here
  • How it works: See an example here
  • About Us: See examples here, here, and here.
  • Store location: See an example here

How to add Image With Text section

  • Step 1: Add a Section Settings section that allows you to control the global settings of the Image With Text section.
Here you can define multi-column layouts, enable fullwidth, set the section's max-width, background color, global margin/padding, etc.
  • Step 2: Add an Image With Text section (This provides you block-level configurations in addition to the global configuration level (via Section Settings above)
  • Step 3: Set the Card Style. Generally, you can choose among three main styles:  
  • No card (Disable the card style)
  • Card with text block outside the image: Default, Primary, Secondary
  • Overlay (text block inside the image):
    • Overlay - No mask
    • Overlay - Text Center With Background
    • Overlay - No mask + Text Center With Background
  • Step 4: Insert the title, featured image, description, and CTA button.
NOTE: For each section, Easy Content Builder lets you control the margin/padding at both the global level (via Section Settings) and block level (the Image With Text itself). Also, you might need to adjust the margin/padding of other sections you add before and after the Image With Text section too.
  • Step 5: (Optional) Configure the animation and margin of the Image With Text section.

Global Configuration

From the Shopify theme editor, click on Image with text on the sidebar to view the details of settings.

Block image with text.png

(If you’re new to our Easy Content Builder, please refer to section Add App Sections and Add ECB Blocks for more details on how to create and edit a section or a block.)

Section settings Description
Card Style Create layout boxes for each product item. Emphasize an item with a primary card style.
Card Size Decrease or increase the padding of the card body.
Box Shadow Decrease or increase the box shadows of the card.
Image Add the image you want to feature in the block.
Image Width Set the width (in pixel) of the collection’s featured image.
Image Height Set the width (in pixel) of the collection’s  featured image.
Image Crop Cut out a part of the image: Top, Left, Bottom, Right, Center.
Image position Position the image (left, right, center, bottom) to pair with the block’s main text content. This setting is only applied to Desktop devices.
Vertical Alignment Align the content to the vertical position: top, middle, or bottom.
Text Alignment Align text to the left, right, or center.
Title Type a title for the content block.
Title Size Change the heading to H1, H2, H3, H4, H5, or H6.
Badge Create nice looking text badges.
Tagline Type a short tagline for the content block.
Tagline Size Set the tagline size - Small, Default, or Large
Description Type the content of the block.
Description Size Set the description size - Small, Default, or Large
Button Text Enter the button’s text. Leave this field empty to disable the button.
Button URL Set the internal or external URL for the button’s link.
Button Style Apply a different look for the button. You can choose a Primary Button/Danger Button for the primary action button, a Default Button (outlined button)/Secondary Button for a medium emphasis, or a Text/Link Button for a low emphasis action button.
Button Size Set the button size - Small, Default, or Large
Animate On Scroll This feature is only available for the Pro plan. It lets you apply different types of animation to elements within each section as you scroll down the page. Learn more about scrolling animations here.
Margin Set the vertical spacing between elements.