1. Home
  2. Homepage
  3. Homepage Banners

Homepage Banners

Here are tutorials and detailed information for the homepage banners.


How to Show Homepage Banners

Homepage banners are hidden by default, you will have to enable them to appear.

  1. In WordPress click Customize under Appearance on the sidebar.
  2. Click General > Banners
  3. Check the boxes to show the banners.
  4. Click the Save & Publish button.


How to Add Banners

Important Note

The Theme Options panel has been replaced by the WordPress Customizer.

 How to Add Banners

  1. In WordPress click Add New Banner under 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.
  4. Enter a banner headline. Limit to 60 characters. ( Optional )
  5. Enter a sub-headline to appear below the headline text. Limit to 120 characters. ( Optional )
  6. Click the Publish or Update button to make your changes live.

Create a Full Width Homepage Banner

Here is a tutorial on how to create a full width homepage banner without having to modify any PHP code.

Image Preview

full width banner

Details & Instructions

There are a number of things you will see that are different in the image below. The header is white, the homepage banner is stretched to 100% width, and the main background of the site is white.

How it Works

  • The image you see as the full width banner image is background image that is applied to a div. The banner background image can only be 1 image and it does not change.
  • The text you see over the banner is an image, and this can change. The text must be a transparent png file. The image size is the same 940 x 350 pixels.

Sample Files

Tutorial: How to add custom CSS.

Watch Video to Avoid Issues

/* Wide Banner Image BG */
#home_banner_container {
background-image: url("http://your-domain.com/wp-content/xxxxxxxx.jpg");
}
/* Wide Banner No Edit */
#home_banner_container { height: 500px; width: 100%; background-size: cover; background-repeat: no-repeat; background-position: center center; margin-bottom: 20px; }
/* Padding Above Banner Image */
.fader img { padding-top: 75px;}
/* Center Banner Image */
.fader { margin-left: auto; margin-right: auto; }
/* Remove Space Above Banner */
.fader { margin-top:0px; }
/* Banner - Hide Banner Circles */
.fader .pager_list { display: none; }
/* Mobile Banner Resize */
@media screen and (max-width:880px) { #home_banner_container { height: auto; } }

/* Header - Changes Header BG to White */
.navigation_holder, .header_holder { background-color: #ffffff; }
/* Makes social icons a light grey */
#header_social_icons .circle { color: #ffffff; background-color: #e4e4e4; }
/* Navigation - Changes Navigation Link Color */
.navigation_holder a , ul.topnav .menu-button { color: #666666 !important; }
.navigation_holder ul li ul li a { color: #ffffff !important; }

/* Background - Remove BG Image and Make BG Color White */
body.custom-background { background-image: none; background-color: #ffffff; }

/* Remove Shadow Around Content Box and Widgets */
#main, .widget { box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.0); }

/* Remove Padding Around Beat Store */
.page-template-archive-download-php #main, .tax-genre #main, .tax-download_category #main, .tax-download_tag #main, .post-type-archive-download #main { padding: 0px;}
/* Extend the Width of the Beat Store */
.page-template-archive-download-php .leftside, .tax-genre .leftside, .tax-download_category .leftside, .tax-download_tag .leftside, .post-type-archive-download .leftside { width: 620px; }

/* Increase Beat Store Playlist Height */
.mejs-playlist { height: 800px !important; }

/* Footer - Remove BG color and change link colors */
#footer_sub, .widget_holder_sub, #footer { color: #666666!important; background: #ffffff !important;}
#footer_sub a, #footer h3, #footer .widgets { color: #666666 !important;}
#footer #widget_recent_post li, #footer #widget_new_beats li { border-bottom-color: #cccccc; }


CSS Tips & Tricks

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

Click the tabs below:

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; } }


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?
No, this option is not built into the theme.

Are there any other banner animation options available?
Unfortunately no.


Common Problems

Homepage Banner Won't Display

  • Make sure you selected the Show banners on the homepage  in Customize > General > Banners
  • Make sure you have published your homepage banners.
  • If you recently updated the theme, clear your browser cache.
  • If those don’t help, check out How to Troubleshoot Problems

Missing Information Box to Add Banners

Known Bug

Incorrect linking of first banner:
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.

Updated on September 7, 2017

Was this article helpful?

Related Articles

Leave a Comment