Materia Theme
  • What is Materia?
  • Getting Started
    • Download & Install
    • Theme License & Activation
    • Create Pages - Required
  • Theme Updates
  • Required Apps
  • Recommended Apps
  • Mega Menu
  • Store Settings - Required
  • Materia Theme Dashboard
  • Theme Settings
    • Logo
    • Favicon
    • Layout Settings
    • Typography
    • Color Schemes
    • Website Intro
  • Overall Zoom
  • Browser Tab Messages
  • Badges
  • Notification Bubble
  • Buttons Customization
  • Main Collection Filter
  • Product Card Settings
  • Product Variant Swatches
  • Search Behavior Settings
  • Wishlist
  • Cart Settings
  • Social Media
  • Preloader Settings
  • Currency Display Settings
  • Cookies
  • Speed Optimization
  • General Store Information
  • Terms and Conditions Settings
  • Theme Sections
    • Header
    • Announcement Bar Basic
    • Upper Navigation Bar
    • Announcement Bar Pro 1
    • Hero Pro 1
    • Hero Image 1
  • Hero Banner 2
  • Hero Product 2
  • Carousel Hero Slider
  • Slideshow Pro
  • Image
  • Video
  • Benefits Cards Pro 2
  • Benefits Pro
  • Image & VIdeo With Text
  • Image With Icons
  • Image With Benefits
  • Image With Text Pro
  • Page's global sections
    • Announcement Bars
    • Header
    • Footer
    • Mobile Navigation Bar
    • Back To Top Pro
  • Overlay Group
    • Cookie Consent Banner
    • Mobile Navigation Bar
    • Page Tag
    • Custom Color Swatches
    • Order Notification Pro 1
    • Image Banner Popup
    • Promotion Banner Pro
    • Back To Top Pro
  • Products & Collections
    • Product Page
      • Breadcrumbs
      • Product Snippets
        • Product – Trust Badges
        • Product - Upsell Addon
        • Product-Payment Badges #1
        • Product - Sold Social Proof
        • Product - Bundle Pro
        • Product – Text Timer
        • Product - Promo Banner
        • Product - Vertical Benefits
        • Product - Payment Badges #2
        • Ecomz – Discount Coupon
        • Product - Size Chart Image
        • Product - Circle Images
      • Product Information
      • Product Templates
    • Collection Page
      • Collection Template
  • Other Pages
    • 404 Page
    • Blogs
    • Customer Login
    • Cart & Checkout
  • FAQs
    • Missing images when install Materia
    • Why are some pages missing?
    • Theme translation
    • Change currency
    • Why Does the Desktop Preview Look Compressed in the Theme Editor?
    • How to change fonts?
Powered by GitBook
On this page

Image With Icons

PreviousImage & VIdeo With TextNextImage With Benefits

Last updated 1 month ago

This section allows you to pair a main image or video with a headline, subheading, and up to four feature highlights using icons and labels. It's ideal for showcasing key benefits, product features, or value propositions alongside a strong visual.

Section Padding

Adjust the spacing around the section on desktop and mobile devices.

  • Top Padding (Desktop): 44px

  • Bottom Padding (Desktop): 44px

  • Left/Right Padding (Desktop): 81px

  • Top/Bottom Padding (Mobile): 36px

  • Left/Right Padding (Mobile): 20px

Layout Alignment

  • Grid Max Width: 1240px

  • Column Ratio: 1 / 1

  • Grid Gap: 100px

  • Image Location: Left or Right

  • Text Alignment (Desktop): Left, Center, Right

  • Text Alignment (Mobile): Left, Center, Right

  • Horizontal Offset on Mobile: 0px

  • Spacing Between Image and Headline (Mobile): 21px

Font Settings

  • Enable Custom Fonts: Toggle on

  • Text Font: Sans-serif

  • Headline Font: Sans-serif

  • Headline Font Size (Desktop): 60px

  • Headline Font Size (Mobile): 49px

  • Headline Line Height: 1.2

  • Subheading Spacing Below Headline: 13px

  • Subheading to Icons Spacing: 20px

  • Headline Color: #000000

  • Subheading Color: #353535

  • Custom Font Family URL: (optional)

Media Settings

Primary Image or Video

  • Upload Image

  • Video URL (MP4) (if provided, image is hidden)

  • Aspect Ratio: 4:3

  • Border Radius: 8px

  • Shadow: None

  • Hover Animation: None

Second Image (Overlay, Optional)

  • Enable Second Image: Toggle

  • Upload Second Image

  • Width: 200px

  • Height: 200px

  • Vertical Position: 0px

  • Horizontal Position: 0px

Headline and Body Text

  • Headline Text: "Why is better?"

  • Subheading Text: "Lorem ipsum odor amet, consectetuer adipiscing elit. Rhoncus ut sociosqu hac nam imperdiet cubilia morbi..."

Icons and Labels

Each icon supports either an uploaded image or custom SVG. If both are present, SVG overrides the image.

  • Icon 1 Label: Feature 1

  • Icon 2 Label: Feature 2

  • Icon 3 Label: Feature 3

  • Icon 4 Label: Feature 4

  • SVG Icon Size: 60px

  • Image Icon Size: 60px

Section Styling

  • Background Color: #FFFFFF

  • Section Animation: None

  • Headline Animation: None