Amber Documentation
  • Amber - Documentation
  • Global Settings
    • Info
    • Typography
    • Colors
    • Styles
    • Search Suggestion
    • Variants and Swatches
    • Product card
    • Breadcrumbs
    • Localization
    • Price
    • Social Media
    • Favicon
    • Cart
    • Animation
    • Checkout
  • Global Features
    • Focal Points
    • Custom product badges
  • Global Sections
    • Announcement bar
    • Header
    • Cookie banner
    • Newsletter popup
    • Product quick view
    • Size guide
  • Content Sections
    • Content sections
    • Common settings
    • Featured collections
    • Featured product
    • Image with text
    • Custom liquid
    • FAQ
    • Featured blog
    • Featured cards
    • Featured products
    • Hero slider
    • Image with products gallery
    • Image with text overlay
    • Logos
    • Media banner
    • Newsletter banner
    • Richtext
    • Shop the look
    • Shop the Look recommendations
    • Size guide
    • Social images
    • Testimonials
    • Marquee
  • Pages
    • Collections list
    • Collection page
    • Product page
    • Size guide page
    • Cart page
    • Contact page
    • Blog
Powered by GitBook
On this page
  • Colors
  • Width
  • Layout
  • Media
  • Text content
  1. Content Sections

Image with text

PreviousFeatured productNextCustom liquid

Last updated 1 year ago

The main settings in the section are the ones listed . The additional settings are listed below.

Colors

Apart from the main settings for the color, there's also an additional setting for the image overlay color.

You can use a gradient or a solid color. You can change its opacity as well.

Width

The section can be full-width or contained in a shell.

When in full-width mode, you can add a small padding on the left and right. This is done from the Spacing around checkbox.

Checking this also enables the round corners, using the global border radius setting.

Layout

One of the main benefits of this section is its capability to change its layout.

You have 2 options here:

This provides quite a lot of options for customization and achieving different layouts with a single section.

When in 50/50 layout setting, you can also flip the image and text. This is done by checking the Flip columns left/right checkbox.

Media

For the 50/50 layout, you can control with width of the image in percentage.

There's also options to change the aspect ratio of the image for desktop and mobile.

You can set different images for desktop and mobile. If no image is selected for mobile, then the desktop one will be shown.

For the 50/50 layout, you can control whether the image to be position above or below the content on mobile.

Text content

You have the following options for the content management:

  • Horizontal content alignment -- The text can be aligned to the center, left or right

  • Content size -- There are 2 options for the content size - Large and Small. You can toggle between these options to change the size of the text

  • Content large gap -- This option is applicable to the 50/50 layout only. When checked, it adds extra spacing between the content and the image.

  • Subheading -- This is a small text which shows above the main section title

  • Heading -- The main section title

  • Body text -- The text which shows below the title

  • Expiration date -- You have the option to add a countdown timer. The time needs to be added in the following format - YYYY-MM-DD HH:MM, for example 2023-06-25 10:00. The time zone will be taken from the shop settings.

Full-width

50/50

here