WP SITES

3082 Coded Tutorials & 284 Plugins

How To Add a Sales Banner With Countdown Timer Before Your header In WordPress

This step by step tutorial shows you how to quickly & easily create a banner with countdown timer and add it before your header using any WordPress theme.

Requires the use of the FREE Countdown Banner plugin by WP SITES.

STEP 1 : TURN ON YOUR BANNER

  1. Go to your website’s admin area ( dashboard )
  2. Look for “Flash Banner” in the menu (it has a clock icon)
  3. Click on it
  4. Find the box that says “Enable Banner” and check it
  5. Click “Save Changes”

STEP 2 : PICK WHEN YOUR SALE ENDS

  1. Find “End Date” – this is when your sale stops
  2. Click the calendar and pick a date
  3. Find “End Time” – this is what time your sale stops
  4. Pick the time (like 11:59 PM)
  5. Click “Save Changes”

STEP 3 : WRITE YOUR MESSAGE

  1. Find “Text Column 1” – this is your first message
    Example: “HUGE SALE!”
  2. Find “Text Column 3” – this is your second message
    Example: “Don’t miss out!”
  3. Click “Save Changes”

STEP 4 : MAKE YOUR BUTTON

  1. Find “Button Text” – this is what your button says
    Example: “Shop Now”
  2. Find “Button URL” – this is where people go when they click
    Example: https://yoursite.com/shop
  3. Find “Button Description” – this is the small text above the button
    Example: “Click here to save money!”
  4. Click “Save Changes”

STEP 5 : MAKE IT PRETTY

  1. Find “Background Color” – this is the color behind everything
    Click the color box and pick a color
  2. Find “Text Color” – this is the color of your words
    Click the color box and pick a color
  3. Find “Font Size” – this makes your words bigger or smaller
    Example: 16px
  4. Click “Save Changes”

STEP 6 : STYLE YOUR BUTTON

  1. Find “Button Background Color” – this is the button’s color
    Click the color box and pick a color
  2. Find “Button Text Color” – this is the color of the button’s words
    Click the color box and pick a color
  3. Find “Button Font Size” – this makes the button words bigger or smaller
    Example: 14px
  4. Click “Save Changes”

STEP 7 : STYLE YOUR TEXT COLUMNS

For your first message (Text Column 1):

  1. Find “Text Column 1 Font Size” – make the words bigger or smaller
  2. Find “Text Column 1 Color” – pick the color of the words
  3. Find “Text Column 1 Font Family” – pick what the words look like

For your second message (Text Column 3):

  1. Find “Text Column 3 Font Size” – make the words bigger or smaller
  2. Find “Text Column 3 Color” – pick the color of the words
  3. Find “Text Column 3 Font Family” – pick what the words look like

Click “Save Changes” after each change!

STEP 8 : STYLE YOUR COUNTDOWN TIMER

  1. Find “Countdown Background Color” – the color behind the timer
  2. Find “Countdown Text Color” – the color of the timer numbers
  3. Find “Countdown Font Family” – what the timer numbers look like
  4. Find “Countdown Font Size” – how big the timer numbers are
  5. Click “Save Changes”

STEP 9 : CHECK YOUR BANNER

  1. Go to your website’s front page
  2. Look at the top – you should see your banner!
  3. If you don’t see it, make sure:
  • The banner is enabled (Step 1)
  • You picked an end date and time (Step 2)
  • The end date is in the future

STEP 10 : WATCH YOUR STATS

  1. Go back to “Flash Banner” menu
  2. Click “Stats”
  3. See how many people clicked your button!
  4. The green bars show faily clicks

Leave a Reply

New Plugins