Homepage Banners ( Tutorials, CSS, FAQs )

Here are tutorials and information for the homepage banners.

Table of Contents

  • How to Add Homepage Banners ( Video )
  • Banner FAQs
  • Common Problems
  • Known Bug Issues
  • CSS Tips & Tricks

How to Add Homepage Banners


How to Activate Homepage Banners to Show

  1. In WordPress click on Theme Options under Appearance on the sidebar.
  2. In the Options Panel, under General click Show Homepage Banner in the drop down menu.
  3. Click the Save Options button at the bottom right of the page. Now add some banners.

Adding Banners

  1. In WordPress Click Add New Banner under Home Banners on the sidebar.
  2. Enter the banner name into the title field.
  3. Click the Add Image link in the image box to upload your banner image. Image dimensions: 940 x 350 pixels.
  4. Optional: Enter a banner headline and sub-headline. If you enter text into these boxes, the text will appear over the uploaded banner image.
  5. Optional: Enter a banner link. Link each banner individually by entering a web address into the banner link field.
  6. Click the Publish or Update button to make your changes live.

Banner Specifications


Known Bug

  • Incorrect Linking: There is a bug that if you are linking multiple homepage banners, the first time your site loads, the first banner will have the wrong link. Once all the banners play, the first banner will have the correct link. There is no fix for this issue, so it is suggested to NOT add a link to the first homepage banner. Also, I would not panic about this matter. The first banner only appears for 6 seconds. The average visitor will scroll down your home page and look around before clicking anything.

 Banner FAQs

  • Can I change the banner image size? No, not really. But check out the full-width banner CSS code in the tips and tricks below. That is the only available option.
  • How to I reorder the banners? Change the banner published dates. The most recent banners should show first.
  • Can I make the homepage banner a video or Flash? No. These options are not available.
  • Can I use another banner carousel script or plugin? Not unless you know how to code.
  • Are there any other banner animation options available? Unfortunately no.

Common Problems

  • Homepage Banner Won’t Display
    • 1. Make sure you selected the “Show Homepage Banner” on the theme options page.
    • 2. Make sure you followed the tutorial above correctly and have published a homepage banner.
    • 3. If you did both steps above, a WordPress plugin might be causing the problem. Turn off all plugins except easy digital downloads and see if you still have the issue. How to Troubleshoot Problems
  • Missing a box on the add new banner page? Check out the screen options.

CSS Tips & Tricks

Here is CSS code for the homepage banner.  Tutorial: How to add custom CSS

CSS Code Below:

  1. Change Banner Text Color
  2. Hide or Show Banner Dots
  3. Hide the Homepage Banner on Mobile Devices
  4. How to Add a Full Width Homepage Banner

Change the Banner Text Color

Change the white color ( #ffffff ) to whatever color you like. You can use the color picker at colorpicker.com to get the color your want.

/* Homepage Banner Text Color */
/* Headline */ #home_banner_container h2 { color: #ffffff; }
/* Subtext */ #home_banner_container h3 { color: #ffffff; }

Hide or Show Homepage Banner Dots

The code below will allow you to either show or hide the dots that appear on the homepage banner.

home-banner

Show Dots

/* Show Banner Dots */
.fader .pager_list { display: block; }

Hide Dots

/* Hide Banner Dots */
.fader .pager_list { display: none; }

Hide the Homepage Banner on Mobile Devices

Here is the code to hide the homepage banner on mobile devices. The code below will hide the homepage banner on screens below 500 pixels. If you want to change that number, just edit the 500.

/* Hide Homepage Banner on Mobile */
@media (max-width: 500px)  { #home_banner_container { display: none; } }

How to Add a Full Width Homepage Banner

View Tutorial

Related Articles
Last updated on February 17th, 2017.

4 Comments

  1. Benjamin

    How can I slow down the banner rotation? I didn’t found an option to change this. Because it’s too fast in my opinion ….

    1. Mark

      If you would like to change the time you want to edit the the jquery.easyfader.js file in the JS folder in the musicmaker theme folder.

      You want to look for the code slideDur: 7000,

      7000 is 7 seconds. So change it to the number you want.

      Please note these changes will be overwritten with future updates.

    1. Mark

      Hi

      You can use some CSS like this

      #Fader h2 { top: 110px !important; left: 30px !important; }
      #Fader h3 { top: 180px !important; left: 30px !important; }

      Please note this may cause problems with the responsive CSS. ​​​​​​

      Change the numbers to the numbers you desire. ​​

Leave A Comment?

Looking Help?
1. First search the knowledge base for answers. Email support can take 48 hours.
2. If something is not working, please read trouble shooting problems.
3. If those do not help, provide a website link to help speed up the process.