Block Section Title: Difference between revisions

From Posstack.com Documentation
No edit summary
No edit summary
Line 1: Line 1:
{{Note|test}}
{{Note|test|warning}}
The Section Title (or Heading) lets you create catchy titles/headings for each content block. Since the Section Title is an independent content block, you get total control to decide where and how to use it. You can enrich the Title/Heading block with an icon, featured image, tagline, and a CTA button.  
The Section Title (or Heading) lets you create catchy titles/headings for each content block. Since the Section Title is an independent content block, you get total control to decide where and how to use it. You can enrich the Title/Heading block with an icon, featured image, tagline, and a CTA button.  
  See Section Title examples [https://easy-content-builder-demo.myshopify.com/pages/section-variations here].
  See Section Title examples [https://easy-content-builder-demo.myshopify.com/pages/section-variations here].
Line 11: Line 11:
!Description
!Description
|-
|-
|Icon
|Icon  
|[[SVG Icons|Insert HTML code of SVG]], Icon Font or Image.
|[[SVG Icons|Insert HTML code of SVG]], Icon Font or Image.
|-
|-
Line 24: Line 24:
|-
|-
|Image Crop
|Image Crop
|Cut out a part of the featured image: Top, Left, Bottom, Right, Center.  
|Cut out a part of the featured image: Top, Left, Bottom, Right, Center.
|-
|-
|Image Border
|Image Border
|Set the style of the featured image border: square, rounded, or thumbnail.
|Set the style of the featured image border: square, rounded, or thumbnail.
|-
|-
|Text Alignment
|Text Alignment  
|Align all elements of the Section title to the left, right, or center.
|Align all elements of the Section title to the left, right, or center.
|-
|-
Line 45: Line 45:
|-
|-
|Description
|Description
|Type the content of the title/heading block.
| Type the content of the title/heading block.
|-
|-
|Description Size
|Description Size
|Set the description size - Small, Default, or Large
|Set the description size - Small, Default, or Large
|-
|-
|Button Text
|Button Text  
|Enter the button’s text. Leave this field empty to disable the button.  
|Enter the button’s text. Leave this field empty to disable the button.
|-
|-
|Button URL
|Button URL
|Set the internal or external URL for the button’s link.
|Set the internal or external URL for the button’s link.
|-
|-
|Button Style
|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.  
|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
Line 72: Line 72:
|-
|-
|Margin
|Margin
|Set the vertical spacing between elements.  
|Set the vertical spacing between elements.
|-
|-
|Padding  
|Padding
|Set spacing between elements and their content.  
|Set spacing between elements and their content.
|}
|}


=== How to add SVG icons to Section Title ===
===How to add SVG icons to Section Title===
  NOTE: Shopify does not allow to upload SVG files at this time. It only supports JPG, PNG, GIF, and WebP on supported browsers.  
  NOTE: Shopify does not allow to upload SVG files at this time. It only supports JPG, PNG, GIF, and WebP on supported browsers.  
With Easy Content Builder, you can add SVGs inline into '''Section Title''' blocks.  
With Easy Content Builder, you can add SVGs inline into '''Section Title''' blocks.  


If you're new to SVGs, learn how to copy the SVG code [[SVG Icons|here]].
If you're new to SVGs, learn how to copy the SVG code [[SVG Icons|here]].

Revision as of 10:15, 27 July 2023

test

The Section Title (or Heading) lets you create catchy titles/headings for each content block. Since the Section Title is an independent content block, you get total control to decide where and how to use it. You can enrich the Title/Heading block with an icon, featured image, tagline, and a CTA button.

See Section Title examples here.

From the Shopify theme editor, click on the Section title on the sidebar to view the details of settings.

Block section title.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
Icon Insert HTML code of SVG, Icon Font or Image.
Image Add the image you want to feature above the Title/Heading.
Image Width Set the width (in pixel) of the featured image above the Title/
Image Height Set the width (in pixel) of the featured image above the Title/Heading.
Image Crop Cut out a part of the featured image: Top, Left, Bottom, Right, Center.
Image Border Set the style of the featured image border: square, rounded, or thumbnail.
Text Alignment Align all elements of the Section title 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.
Tagline Type a short tagline that will be shown above the Title/Heading.
Tagline Size Set the tagline size - Small, Default, or Large
Description Type the content of the title/heading 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
Background Color Specifies the background color of the section by CSS or Gradient options. Click the color and use the Gradient color picker or enter the value of the new color in the text field. You can also create a gradient background using CSS code - for example linear-gradient(red, green), radial-gradient(red, green), or conic-gradient(red, green).
Max Width Define the maximum width (in pixel) of the block’s container.
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.
Padding Set spacing between elements and their content.

How to add SVG icons to Section Title

NOTE: Shopify does not allow to upload SVG files at this time. It only supports JPG, PNG, GIF, and WebP on supported browsers. 

With Easy Content Builder, you can add SVGs inline into Section Title blocks.

If you're new to SVGs, learn how to copy the SVG code here.