Skip to the content
Peregrine KnowledgebasePeregrine Knowledgebase
  • Go to website
  • Go to website
  • Yelp
  • Facebook
  • Twitter
  • Instagram
  • Email

How can we help you?

Hester Pro

21
  • Theme Installation
  • Steps after Activating Hester Pro theme
  • Add widgets in sidebar or in Footer widget area
  • Enable front page sections
  • Home Sections
    • Slider Section
    • Info section
    • Service section
    • About section
    • Team section
    • Testimonial section
    • Pricing plan section
    • Call to Action section
    • Gallery section
    • Fun-facts section
    • Feature section
    • Steps to start section
    • Work history / timeline section
    • Workflow section
    • Clients section
    • Extra section
    • Design options

Bloglo Pro & BlogHash Pro common

2
  • Add social media profile links in header
  • Post Formats

ShopWell Pro

58
  • Download & Install ShopWell Addons Plugin
  • How to Install and Activate Required and Recommended Plugins
  • Import Demo
  • Configure Product Images in WooCommerce
  • 🔨 Product Archive Builder
  • 🛠️ Single Product Builder
  • How to change homepage products in the ShopWell free theme?
  • Customizer
    • General
    • Styling
    • Typography
    • Topbar
    • Header
      • Topbar
      • Campaign Bar
      • Header Layout
      • Header specific pages
      • Overriding the Header on Specific Pages
      • Header Builder
      • Sticky Header
      • Header Background
      • Header Elements
        • 🔍 Configuring the Header Search in ShopWell Theme
        • 👤 Account
        • ❤️ Wishlist
        • 🔄 Compare
        • 🛒 Cart
        • 📝 Custom Text
        • Preferences 🌍💱
        • View History
        • 📌 Primary Menu
        • 📌 Secondary Menu
        • 🗂️ Category Menu
        • 🍔 Hamburger Menu
      • Mega Menu
        • Mega Menu Vertical
        • 🍔 Mega Menu Hamburger
        • 🧩 Configure Mega Menu
        • Mega Menu Horizontal
    • Footer
      • Footer
      • Overriding the Footer on specific pages
  • Elementor
    • ⚙️ Elementor Basic Configuration Guide
    • Templates
    • 📢 Popup Builder
    • ShopWell Builder
    • Widgets
      • 🛍️ Product Deals Grid / Carousel
  • Pages
    • 📄 Creating a Page
    • ⚙️ Display Settings
  • Woocommerce
    • 🛒 Getting Started with WooCommerce
    • 📄 WooCommerce Pages
    • 🛒 Customize the Checkout Page
    • 📦 Create an Order Tracking Page
    • 👤 My Account Page Setup in WooCommerce
    • 🛍️ Catalog Mode
  • Shop
    • WishList & Compare
    • 💱 Currency Settings
    • 🛍️ Shop Display
    • 🧩 Product Filters
  • Mobile
    • Topbar
    • Header
    • Footer
    • Miscellaneous
  • Home
  • Docs
  • Design options
View Categories

Design options

1 min read

Almost each section on homepage has Design options settings.
With this settings you can set/change section’s background color, background image , background image with a color overlay or background gradient color, Top/Bottom spacing (padding) etc.

Background:

Background option has 3 options:

  • Solid color (Set Solid background color)
  • Gradient (Set gradient background color)
  • Image (Set image background with color overlay)

Font Color:

This options also has 3 options

  • Text color
  • Link color
  • Link hover color

With this option you can change section’s header text color.

Accent Color:

With this option you can change Section header’s sub-heading color and heading underline color.

Section spacing:

Change section’s Top / Bottom spacing (padding)

Section width:

Change section width Normal (Content width) or Full (fluid) width.

Let’s play with Service section’s background.

Set Solid background color #

We have set the Font color and Accent color to light gray (#e4e7ec) and background color to Solid rgba(224,75,67,0.94)

Set gradient background color #

We have set the Font color and Accent color to light gray (#e4e7ec) and color 1 to #cc2b5e and color 2 #753a88. You can adjust the color Location and color Angle according to your requirement. You can also choose gradient type Linear or Radial.

Set background image #

We have set a background image with a transparent color overlay and set it’s position to fixed so when you scroll you’ll have parallax effect.
You can check the rest of the settings in below screenshot.

Table of Contents
  • Set Solid background color
  • Set gradient background color
  • Set background image

© 2025 Peregrine Knowledgebase

Powered by WordPress

To the top ↑ Up ↑