---
title: "WordPress: Changing your home page banner"
description: Learn how to edit your home page banner image, text, and buttons.
---

[Skip to content](https://helpcentre.breadstack.com/wordpress-changing-your-home-page-banner#main-content)

[![Breadstack-logo-white small-1](https://helpcentre.breadstack.com/hs-fs/hubfs/Breadstack-logo-white%20small-1.png?width=300&height=75&name=Breadstack-logo-white%20small-1.png)](https://breadstack.com)

Open main navigation

Close main navigation

- [Sign in to Breadstack](https://bs.app.breadstack.io/login)

[Sign in to Breadstack](https://bs.app.breadstack.io/login)

 How can we help you?

- There are no suggestions because the search field is empty.

1. [Breadstack Help Centre](https://helpcentre.breadstack.com/?hsLang=en-ca)
2. [Website editing guides](https://helpcentre.breadstack.com/website-editing-guides?hsLang=en-ca)

# WordPress: Changing your home page banner

## This guide shows how to update the main banner on your website’s home page. Banners are an effective place to highlight seasonal content or promote new products.

Because WordPress is a third-party platform, we can offer general guidance but cannot troubleshoot WordPress-specific issues.

Note that depending on your store's theme and branding, your banner may look slightly different from the examples in the video below.

To change your banner background image or text, click **Edit Page**. Your next steps will be slightly different depending on whether you see an "**Edit with UX Builder**" option.

- [If you see "**Edit with UX Builder"**](https://helpcentre.breadstack.com/wordpress-changing-your-home-page-banner#ux-builder)
- [If you do not see "**Edit with UX Builder"**](https://helpcentre.breadstack.com/wordpress-changing-your-home-page-banner#no-ux-builder)

---

### If you see "Edit with UX Builder"

Follow the example in this video, or the steps below.

To update the banner image: 

- Double-click the image.
- In the Configuration Panel, click **Change media**.
- Upload your files.
- Click **Apply **to save your changes.

 To update the banner text:

- Click the text element (e.g., Heading, Subheading, Button).
- In the Configuration Panel, make your edits.
- Click **Apply **to save your changes.

---

### If you do not see "Edit with UX Builder"

Use this video as a guide ([instructions start here](https://drive.google.com/file/d/1ZCaZsqQVtrSYq7PwCdb9FJ2zq9tn6Jkk/view?usp=sharing&t=23)).

1. Click on your banner.
2. On the right-hand side, you'll see an editing panel. Adjust your background image and text elements here.
3. Click **Save** when you're finished editing.

 

 

- [Getting started](https://helpcentre.breadstack.com/getting-started?hsLang=en-ca)
- [Online Store module](https://helpcentre.breadstack.com/online-store-module?hsLang=en-ca#main-content)
  
  
  
  
  
    - [Promotions](https://helpcentre.breadstack.com/online-store-module?hsLang=en-ca#promotions)
    - [Orders](https://helpcentre.breadstack.com/online-store-module?hsLang=en-ca#orders)
    - [Products](https://helpcentre.breadstack.com/online-store-module?hsLang=en-ca#products)
    - [Insights](https://helpcentre.breadstack.com/online-store-module?hsLang=en-ca#insights)
- [Service module](https://helpcentre.breadstack.com/service-module?hsLang=en-ca#main-content)
  
  
  
  
  
    - [Service](https://helpcentre.breadstack.com/service-module?hsLang=en-ca#service)
- [Settings module](https://helpcentre.breadstack.com/settings-module?hsLang=en-ca#main-content)
  
  
  
  
  
    - [Data](https://helpcentre.breadstack.com/settings-module?hsLang=en-ca#data)
    - [Channels](https://helpcentre.breadstack.com/settings-module?hsLang=en-ca#channels)
    - [Team](https://helpcentre.breadstack.com/settings-module?hsLang=en-ca#team)
    - [Operation](https://helpcentre.breadstack.com/settings-module?hsLang=en-ca#operation)
- [Breadstack Delivery (CanFleet)](https://helpcentre.breadstack.com/breadstack-delivery-canfleet?hsLang=en-ca#main-content)
  
  
  
  
  
    - [Breadstack Delivery module](https://helpcentre.breadstack.com/breadstack-delivery-canfleet?hsLang=en-ca#breadstack-delivery-module)
    - [CanFleet Driver App](https://helpcentre.breadstack.com/breadstack-delivery-canfleet?hsLang=en-ca#canfleet-driver-app)
- [Breadstack OMS App](https://helpcentre.breadstack.com/breadstack-oms-app?hsLang=en-ca)
- [Integrations](https://helpcentre.breadstack.com/integrations?hsLang=en-ca#main-content)
  
  
  
  
  
    - [Integrating a payment provider](https://helpcentre.breadstack.com/integrations?hsLang=en-ca#integrating-a-payment-provider)
    - [Integrating a shipping or delivery partner](https://helpcentre.breadstack.com/integrations?hsLang=en-ca#integrating-a-shipping-or-delivery-partner)
- [Website editing guides](https://helpcentre.breadstack.com/website-editing-guides?hsLang=en-ca)

[![Breadstack Logo](https://helpcentre.breadstack.com/hs-fs/hubfs/BS%20Logo%20Textmark.png?width=200&height=43&name=BS%20Logo%20Textmark.png "Breadstack Logo")](http://breadstack.com)

<https://www.facebook.com/> <https://www.twitter.com/> <https://www.instagram.com/> <https://podcasts.apple.com/> [mailto:email@email.com](mailto:email@email.com)

Copyright © 2026, Breadstack