Block Image With Text: Difference between revisions

From Posstack.com Documentations
mNo edit summary
mNo edit summary
Line 9: Line 9:
!Section settings
!Section settings
!Description
!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
|Image
Line 21: Line 30:
|Image Crop
|Image Crop
|Cut out a part of the image: Top, Left, Bottom, Right, Center.
|Cut out a part of the image: Top, Left, Bottom, Right, Center.
|-
|Image Border
|Set the style of the image border: square, rounded, or thumbnail.
|-
|-
|Image position
|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.
|Position the image (left, right, center, bottom) to pair with the block’s main text content. This setting is only applied to Desktop devices.
|-
|-
|Element Alignment
|Vertical Alignment
|Align the content to the vertical position: top, middle, or bottom.
|Align the content to the vertical position: top, middle, or bottom.
|-
|-
Line 39: Line 45:
|Title Size
|Title Size
|Change the heading to H1, H2, H3, H4, H5, or H6.
|Change the heading to H1, H2, H3, H4, H5, or H6.
|-
|Badge
|Create nice looking text badges.
|-
|-
|Tagline
|Tagline
Line 44: Line 53:
|-
|-
|Tagline Size
|Tagline Size
|Change the tagline to fs_1, fs_2, fs_3, fs_4, fs_5, or fs_6. Set to ‘fs_1’ for the largest size.
|Set the tagline size - Small, Default, or Large
|-
|-
|Description
|Description
Line 50: Line 59:
|-
|-
|Description Size
|Description Size
|Change the text size to fs_1, fs_2, fs_3, fs_4, fs_5, or fs_6. Set to ‘fs_1’ for the largest size.
|Set the description size - Small, Default, or Large
|-
|-
|Button Text
|Button Text
Line 58: Line 67:
|Set the internal or external URL for the button’s link.
|Set the internal or external URL for the button’s link.
|-
|-
|Button Color
|Button Style
|Choose the color of the button (based on the predefined button styles).
|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
|Button Size
|Set the button size that ranges from 'fs-1' to 'fs-6'. Use ‘fs-1’ for the largest button size.
|Set the button size - Small, Default, or Large
|-
|Padding Top
|Set the padding top (in px) of the block.
|-
|Padding Bottom
|Set the padding bottom (in px) of the block.
|-
|-
|Margin Top
|Animate On Scroll
|Set the margin top (in px) of the block.
|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 [https://posstack.com/blog/easy-content-builder-new-updates-mar-2023 here].
|-
|-
|Margin Bottom
|Margin
|Set the margin bottom (in px) of the block.
|Set the vertical spacing between elements.
|}
|}

Revision as of 15:49, 8 April 2023

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.

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.
Retrieved from "https://docs.posstack.com/index.php?title=Block_Image_With_Text&oldid=626"