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
  • Content Settings
  • Font Settings
  • Layout Settings
  • Style Settings
  • Image Settings
  • Button Settings
  • Spacing Settings
  • Split Images Feature
  • Hero Video
  • Image Over Text
  • Background Color Options
  • Pill Badge Settings
  • Subheading Settings
  • Button & Text Vertical Gap
  • Text Under Button Settings
  • Secondary Button
  1. Theme Sections

Hero Pro 1

PreviousAnnouncement Bar Pro 1NextHero Image 1

Last updated 1 month ago

Content Settings

Title Text Main heading displayed prominently. Example: “HERO IMAGE PRO”

Optional Top Text Displays above the main heading.

Subheading Text Appears directly under the main heading.

Button Text Primary call-to-action button text. Example: “Shop Now”

Button Link Set the URL the button should navigate to.

Font Settings

Title Text Font Weight Options: Normal / Bold

Enable Custom Fonts for Button and Top Text Toggle to use a custom font for both.

Custom Text Font Select a custom font (e.g., Roboto).

Enable Custom Font for Title Text Toggle to apply a custom font to the main title.

Custom Font for Title Text Choose a font specifically for the title.

Layout Settings

Elements Alignment (Desktop / Mobile) Align content Left / Center / Right.

Title Text Width (Desktop) Set width percentage (e.g., 110%).

Title Text Size (Desktop / Mobile) Adjust font size for title.

Title Padding (Left/Right for Desktop and Mobile) Control left/right spacing of the title text.

Title Line Height (Desktop / Mobile) Control line height for better spacing.

Style Settings

Button Background & Hover Colors Customize button background and hover states.

Button Text Color & Hover Color Set the font color for normal and hover states.

Button Icon Color Customize the icon’s color inside the button.

Title & Top Text Colors Set custom color values.

Enable Title Text Gradient Toggle a gradient effect on the main heading.

Gradient Colors (Start, Middle, End) + Degrees Configure gradient directions and colors.

Enable Button Border Add a border to the primary button.

Button Border Color / Thickness / Radius Customize the border around the button.

Image Settings

Enable Image Parallax Mouse Move Adds interactive mouse-based parallax.

Background Image (Desktop / Mobile) Upload or choose an image for each device view.

Image Brightness Adjust the brightness of the background image.

Section Height (Desktop / Mobile) Set the section height as a percentage of viewport height.

Button Settings

Button Padding (Vertical & Horizontal for Desktop / Mobile) Control space inside the button.

Button Icon Choose an icon to appear next to the text.

Icon Size Set the pixel size of the button icon.

Button Hover Animation Select an animation effect on hover (e.g., Glow White).

Spacing Settings

Padding (Top/Bottom) for Desktop and Mobile Adjust vertical space around the section.

Content Padding (Left/Right for Desktop & Mobile) Control internal horizontal spacing.

Split Images Feature

Enable Split Images Toggle to enable split background layout.

Split Image (Left / Right) Upload images to be shown side-by-side.

Hero Video

Video URL Insert a direct MP4 video URL. Auto-plays without sound on desktop.

Video Brightness Adjust brightness of the background video.

Display Hero Video on Mobile Toggle video visibility for mobile view.

Image Over Text

Enable Image Over Text Adds a floating image element over the hero text.

Image Upload Upload separate images for desktop and mobile.

Image Size (Width/Height for Desktop & Mobile) Customize the dimensions.

Image Positioning (Vertical / Horizontal) Adjust the location of the image using sliders or fixed values.

Image Over Text Constant Animation / Hover Animation Apply optional animations.

Background Color Options

Enable Background Color Use a solid color instead of an image/video.

Background Color Set a solid background color.

Enable Background Gradient Switch to gradient instead of solid color.

Gradient Colors (1, 2, 3) Customize the gradient.

Gradient Direction (Degrees) Set the angle of gradient flow.

Pill Badge Settings

Enable Pill Shape Badge Toggle a pill badge above the headline.

Badge Text Add text inside the badge (e.g., NEW).

Badge Font Size Customize text size.

Badge Text & Background Colors Style the badge with solid or gradient background.

Badge Gradient Colors (1, 2) + Degrees Set gradient and direction.

Badge Vertical Gap Spacing between the badge and headline.

Subheading Settings

Subheading Text Color Set custom color.

Font Size (Desktop / Mobile) Adjust subheading size.

Padding (Left/Right for Desktop & Mobile) Control subheading spacing.

Vertical Space (Heading → Subheading / Subheading → Button) Adjust space between text blocks.

Button & Text Vertical Gap

Vertical Gap Between Button And Texts Controls spacing between the button and all text blocks above it.

Text Under Button Settings

Enable Text Under the Button Toggle a secondary text under the CTA button.

Text Content Enter your message under the button.

Font Size, Color, Font Weight Style the text as needed.

Spacing Between Button & Under Text Adjust vertical spacing.

Secondary Button

Enable Secondary Button Displays a second button beside the main one.

Secondary Button Text & Link Configure label and destination URL.

Secondary Button Style (BG, Text, Border Color/Radius) Customize the look and feel.

Horizontal Gap Between Buttons Set spacing between both buttons.

Secondary Button Font Weight Select font weight (Light / Normal / Bold).