WordPress Customizer ( Website Settings )

The WordPress Customizer allows you to change over 500 website settings, such as the appearance, fonts, homepage layout, beat player, and more.

Each Customizer feature is broken down in more detail below this video.

Go through each panel in the Customizer and the documentation below to find out what’s possible.

How to Use the WordPress Customizer

This video covers how to edit the homepage, but you will get a general idea of how to use the Customizer.

How to Use the WordPress Customizer

1. In WordPress, click Customize on the sidebar under Appearance.
   • You can also click Customize when browsing your website.
2. Make changes.
3. Click the Publish button to make any changes live.

Customizer Panel Overview

1. Header – Edit your site’s title, logo, social icons, navigation location, header image, and colors.
2. Frontpage Template – Edit the settings for the Frontpage Section Template
3. Beat Store Settings  – General Settings, Custom Text, Single Beat Page, and Playlist Colors.
4. Colors & Fonts – Customize the colors & fonts of your website.
5. Background Image – Upload a background image or select a background pattern.
6. Pages & Blog – Edit settings for static pages and blog.
7. Menus – Customize the header and footer navigation menu.
8. General – Edit general settings for tracking analytics, photo, and video gallery templates.
9. Product Store – Product store settings.
10. Widgets – Add and edit widgets.
11. Footer – Footer and footer widget settings.
12. Homepage Settings – Update homepage settings to a static page or blog.
13. Custom CSS – Add custom CSS code.

1. Header

1.1 Site Name

1. Site Title – Website’s name in the header.
2. Tagline – Subtext that appears under the site title.
3. Site Title Color – Customize the site title color.
4. Tagline Color – Customize the tagline color.
5. Site Title Font Size (px) – If you increase the Site Title font size, it is suggested to leave the tagline empty.
6. Top Padding (px) – Adjust the padding above your site title to vertically center with the social icons.
7. Bottom Padding (px) – Adjust the padding below the title or logo.
8. Custom Logo Image – Suggested size is 60 px high, and up to 560 pixels wide.
9. Logo Height (px) – Set the height for the logo image. No height is set by default.
10. Social Icons Top Padding (px) – Adjust the padding above the social icons to match the site title or logo.
11. Title or Logo Position ( Left / Center ) – Selecting the center will hide the header social icons.

1.2 Social Icons

Add links to your social profiles. Icons only appear if the Logo Position “Left” is selected, and they are hidden on mobile. You are limited to 5 icons.

1. Social Icons Color
2. Options – Facebook, X (Twitter), Instagram, SoundCloud, YouTube, Vimeo, RSS, Tumblr, Linkedin, Pinterest, Flickr, Apple, Spotify, TikTok, Bandcamp.

1.3 Header Background

1. Header Background Color – Select the header background color.
2. Header Background Image – This will overwrite the header background colors.
3. Image Settings – Header background image settings. Options: Default, Repeat, and Stretch.
4. Remove Header BG Color – Makes the header background transparent.

1.4 Menu Settings

To rearrange the menu links, visit the Menus Panel.

1. Navigation Link Color – Specifies the color of the links in the navigation menu.
2. Navigation Hover Link Color – Hover Link Color: Sets the color the navigation links change to when a mouse cursor hovers over them.
3. Navigation Background Color – Determines the background color of the navigation menu area.
4. Menu Location – Top / Bottom / Hide: This option chooses the location of the navigation menu, either at the top or bottom of the header or hides it completely.
5. Enable Sticky Menu – Appears when scrolling down past 500px: When enabled, the navigation menu sticks to the top of the page after scrolling down 500 pixels.
6. Display Search in Menu – This input will search the blog, not beats. Adds a search bar to the navigation menu that searches blog posts.

1.5 Promo Bar

The promo bar is a notification bar that appears on the top of your website to grab some extra attention on your site.

1. Show Promo Bar – This setting allows you to display or hide the promo bar on your website.
2. Promo Bar Text – Enter the text you want to display in the promo bar. This text should be concise and attention-grabbing.
3. Text Color – Choose the color of the text that appears in the promo bar to ensure it is readable against the background color.
4. Background Color – Select the background color of the promo bar. A contrasting color to the text can help the promo bar stand out.
5. Button Text – Enter the text for the button that will appear in the promo bar. This should be a call to action, such as “Shop Now” or “Learn More.”
6. Button Web Address – Specify the URL to which the button in the promo bar will link. This allows you to direct visitors to a specific page on your site or an external website.

1.6 Site Fav Icon

1. Site Icon – The site icons appear at the top of the web browser. Site Icons should be square and at least 512 × 512 pixels.

2. Frontpage Template ( 20 Sections )

2.1 – Frontpage Settings

These settings only apply to the Frontpage Sections homepage template.

Header:

1. Hide Navigation on Frontpage – This option allows you to hide the navigation menu on the front page.
2. Hide Header on Frontpage – This option allows you to hide the entire header section on the front page.

General:

1. Site Title Font Size (px) – This will update the font size of the headers of all the frontpage sections.
2. Frontpage Sections Width – This will allow you to adjust the width of the content container on the front page.

Footer:

1. Hide Footer Widgets on Frontpage – This option allows you to hide the footer widgets on the front page.
2. Hide Footer on Frontpage – This setting allows you to hide the entire footer on the front page.
3. Footer Background Color – This setting allows you to change the background color of the footer.

2.2 – About

This section allows you to add information about yourself, an image, and a link to read more.

Available Options:

1. Title Text – Add a title to the About section to introduce the content.
2. Text – Add the main text or description that you want to display in the About section.
3. Text Color – Choose the color of the text in the About section to match your website’s design.
4. Text Animation—To make the text more visually appealing, select an animation style. Note that not all animations may be visible in the Customizer preview.
5. Button Text – Enter the text that you want to display on the button in the About section, such as “Learn More” or “Read More”.
6. Button Web Address – Enter the URL that the button will link to when clicked. This could be a page with more information about you or your business.
7. Open link in a new window – When enabled, the button will open the linked page in a new browser tab.
8. Button Color – Choose the color of the button to make it stand out and match your website’s design.
9. About Image – Upload an image to be displayed in the About section. Optimal dimensions are 450×300 pixels.
10. About Image Position – Select the position of the image within the About section, such as left or right.
11. Image Animation – Select an animation style for the image to make it more visually appealing. Note that not all animations may be visible in the Customizer preview.
12. Background Image – Upload an image to be used as the background for the About section.
13. Background Image Settings – Adjust settings such as repeat or stretch to control how the background image is displayed.
14. Enable Parallax Effect – Enable a parallax scrolling effect for the background image, creating a sense of depth. Note that parallax is disabled on mobile devices.
15. Background Image Color Tint – Apply a color tint to the background image to adjust its appearance and match your website’s design.
16. Background Color – Choose a background color for the About section, which will be visible if no background image is used or if the image is transparent.
17. Section Height – Adjust the padding above and below the content in the About section to control its height and spacing.

Requirements – You must have an about image. The image should be at least 450 x 300 pixels.

2.3 – Banner – Image

This is a homepage banner that allows you to show a headline, subheadline, and button over a background image or color. You can also upload an image in the center of the banner to replace the text.

Available Options:

1. Headline Text – Limited text is suggested.
2. Headline Font Size (px) – Adjust the slider to change the headline font size.
3. Headline Font – Select the headline font. Font Doesn’t Work (?)
4. Headline Font Weight – Not all fonts have different font weights. Adjust until the font works.
5. Headline Font Color – Set the color of the headline font.
6. Headline CSS Text Effect – Adds a CSS font style. Most options do not change the font color. Play with different font and background colors. There are no additional settings to modify the effects. Read More.
7. Headline Animation – Not all animations will preview in the customizer.
8. Subtext -Limited text is suggested: The secondary text that appears below the headline. Keep the text concise.
9. Subtext Font Size (px) – Adjust the size of the subtext font (in pixels).
10. Subtext Font Color – Set the color of the subtext.
11. Subtext Animation
12. Button Text – Enter the text to appear in the button.
13. Web Address – The button appears when you enter a URL
14. Open link in a new window – Opens the link in a new tab or window when the button is clicked.
15. Button Color – Set the color of the button.
16. Button Animation – Choose an animation style for the button.
17. Banner Center Image – Adding an image will overwrite the banner text and button above. Upload a transparent PNG when placing a logo over a background image.
18. Background Image – Stretched banner image dimensions should be at least 2000 x 450 pixels.
19. Background Image Settings
20. Enable Parallax Effect – Parallax is disabled on mobile devices.
21. Banner Image Color Tint – Apply a color tint over the background image. Use the bottom slider to adjust the color opacity. Click the “Clear” button to remove the color.
22. Background Color – This appears if there is no background image.
23. Banner Height – Adjust the padding around banner content.

Additional Notes

• Banner Center Image Details
  • If you upload a “Banner Center Image,” it should be a transparent PNG image without a background.
  • Adding “Banner Center Image” will overwrite the banner text and button.
  • The banner center image should not be wider than 940 pixels.
• This banner only supports one banner.
• The stretched background image size should be at least 2000 by 600 pixels.
• If you are using an image pattern, select repeat under background image settings.

2.4 – Banner – Slider

This frontpage widget allows you to add multiple slider banners to your homepage using the Smart Slider WordPress plugin. Tutorial: How to Create Slider Banners

Available Options:

1. Shortcode – Add the slider banner shortcode in this input.
2. Slider Background Color – This allows you to customize the background color of the slider banner to match your website’s design.

2.5 – Banner – Video

This frontpage widget allows you to add a YouTube video banner background with text and a button over the video.

Available Options:

1. Headline – Limited text is suggested.
2. Subtext – Limited text is suggested
3. Subtext Animation – Not all animations will preview in the customizer.
4. Text Color
5. Button Text – Enter the text to appear in the button.
6. Button Web Address – The button appears when you enter a URL.
7. Open link in a new window.
8. Button Color
9. Button Animation – Not all animations will preview in the customizer.
10. Center Image – Uploading an image will overwrite the headline text and button above.
11. YouTube Video URL # ( Required ) – Example: _lj4KWrEjsk. This can be found at the end of the video URL.
12. Add dark tint over video.
13. Banner Image ( Mobile ) – The video banner will not play on mobile devices or tablets, so upload a banner image to appear on those devices.
14. Banner Height – The options below will adjust the padding inside the banner.

Specifications

• YouTube is the only supported video option.
• No Sound: The video banners do not play audio. There is no option for sound.
• No Mobile Support: Video banners do not play on mobile devices.
• Video Looping: Videos automatically loop when finished.
  • Pick videos that are longer than 40 seconds to make the loop less noticeable.
  • Loop Loading Time: There is a 3 to 5-second loading time between loops. Pick longer videos to make the loop less noticeable.

Limitations

• You can only have one video.
• You can not adjust the size or positioning of the videos. It is difficult to adjust video to be responsive on different screen resolutions.
• The banner must contain text or an image. There is no option to have only a video banner.
• The banner center image should not be wider than 940 pixels.

Additional Notes

• If you have concerns with loading times, you may want to use the banner image option.
• Do not add videos that have pop-up messages because they will appear in the video.
• The button will disappear when the screen is under 500 pixels wide.
• The banner you choose should be used as a visual background.

Troubleshooting

• If the video banner does not fill the entire screen width, try adjusting the banner height in the banner video panel.

2.6 – Beats

This section displays the beat player along with customizable text. Note: Only 5 beats will load in the customizer.

Available Options:

1. Title – Add a title to the section.
2. Text ( Top ) – Text appears above the beat player.
3. Text ( Bottom ) – Text appears below the beat player.
4. Text Color – Adjust the color of the text.
5. Playlist Height – Adjust the height of the beat player.
6. Beat Store Sidebar – This option will display the “Beat Store Homepage” sidebar next to the beat store playlist on the Frontpage Sections template.
7. Background Image – Upload a custom background image.
8. Background Image Settings
9. Enable Parallax Effect
10. BG Image Color Tint
11. Background Color – Select a background color.
12. Section Height – This adds padding above and below the beat player section.
13. Section Animation

Additional Info

• Only 5 beats load when using the customizer to decrease the loading time when using the customizer.
• The full-width Beat Store Playlist is the only option for the Frontpage Sections.

2.7 – Blog

This widget allows you to display your latest blog posts, along with images, titles, and a button to read more.

Available Options:

1. Title
2. Text
3. Text Color
4. Blog Post Name Color
5. Number of Blog Posts
6. Show Images
7. Show Date
8. Article Animation – Not all animations will preview in the customizer.
9. Button Text – Enter the text to appear in the button.
10. Button Web Address – The button appears when you enter a URL.
11. Button Color
12. Background Image
13. Background Image Settings
14. Enable Parallax Effect
15. BG Image Color Tint
16. Background Color
17. Section Height – Adjust padding above & below content.

Additional Notes

• The blog posts MUST have featured images added to appear on the front page.
• Display 3 to 6 posts.

2.8 – Contact

Add a contact form to your homepage using the Contact 7 WordPress plugin.

[text* your-name placeholder "Your Name (required)"]

[email* your-email placeholder " Email (required)"]

[text your-subject placeholder "Subject"]

[textarea your-message  placeholder "Message"]

[submit "Send"]

Available Options:

1. Title
2. Text
3. Text Color
4. Text Animation
5. Contact Form 7 Shortcode
6. Button Color
7. Form Animation
8. Background Image
9. Background Image Settings
10. Enable Parallax Effect
11. BG Image Color Tint
12. Background Color
13. Section Height

2.9 – Email

Embed an email form from your favorite email marketing service to capture email addresses.

Available Options:

1. Title
2. Text – Enter text to appear above the email form.
3. Email Form Code – Enter the HTML form code from your email marketing service.
4. Text Color
5. Button Color
6. Background Image
7. Background Image Settings
8. Enable Parallax Effect
9. BG Image Color Tint
10. Background Color
11. Section Height
12. Section Animation

2.10 – Photos

Display the latest photos in your photo gallery and add a button to view more.

Available Options:

1. Title
2. Text
3. Text Color
4. Number of Photos
5. Show Photo Title
6. Button Text – Enter the text to appear in the button.
7. Button Web Address – The button appears when you enter a URL.
8. Button Color
9. Background Image
10. Background Image Settings
11. Enable Parallax Effect
12. Parallax is disabled on mobile devices.
13. BG Image Color Tint
14. Background Color
15. Section Height
16. Photo Animation

2.11 – Pricing Table

Display a pricing table on your homepage for visitors to learn about license details.

Available Options:

1. Title
2. Text – Above Table
3. Pricing Table Shortcode
4. Text – Below Table
5. Text Color
6. Button Text – Enter the text to appear in the button.
7. Button Web Address – The button appears when you enter a URL.
8. Button Color
9. Background Image
10. Background Image Settings
11. Enable Parallax Effect
12. BG Image Color Tint
13. Background Color
14. Section Height – Adjust padding above & below content.
15. Section Animation

2.12 – Production Credits

Your homepage can display up to 6 production credits. You can also add a button to link to a page with more information about your work.

Available Options:

1. Title
2. Text
3. Artist #1 to #6
   1. Artist Name
   2. Song Name
   3. Image – Suggested size: 240 x 240. Incorrect dimensions may cause problems.
4. Button Text – Enter the text to appear in the button.
5. Button Color
6. Text Color
7. Artist Name Color
8. Background Image
9. Background Image Settings
10. Enable Parallax Effect
11. BG Image Color Tint
12. Background Color
13. Make images circles.
14. Section Height – Adjust padding above & below content.
15. Artist Animation

2.13 – Products

This widget allows you to display 4 to 12 of your latest products.

Available Options:

1. Title
2. Text
3. Text Color
4. Number of Products
5. Show Product Name
6. Show Price
7. Button Text – Enter the text to appear in the button.
8. Button Web Address – The button appears when you enter a URL.
9. Button Color
10. Product Name Color
11. Background Image
12. Background Image Settings
13. Enable Parallax Effect
14. BG Image Color Tint
15. Background Color
16. Section Height – Adjust padding above & below content.
17. Product Animation

Requirements

• Products will only appear if you have published products to your product store.

2.14 – Services

You can use this widget to promote and link to services you offer.

Available Options:

1. Title
2. Text
3. Select this if you are adding more than 3 services.
   1. IMPORTANT – If you are trying to show more than 3 services, you must enable this option.
      

      

4. Service #1 to #6
   1. Title
   2. Text
   3. Image – Suggested size: 330 x 190. Incorrect dimensions may cause problems.
   4. URL
5. Button Text – Enter the text to appear in the button.
6. Button Web Address – The button appears when you enter a URL.
7. Open link in a new window.
8. Button Color
9. Text Color
10. Service Title Color
11. Background Image
12. Background Image Settings
13. Enable Parallax Effect– Parallax is disabled on mobile devices.
14. BG Image Color Tint
15. Background Color
16. Section Height – Adjust padding above & below content.
17. Section Animation

Options

• Add up to 6 services with a picture, title, description, and link to a page.

2.15 – Social Icons

Display social icons to your different social profiles.

Available Options:

1. Title
2. Text
3. Text Color
4. Social Icons
5. Icon Background Color
6. Icon Color
7. Background Image
8. Background Image Settings
9. Enable Parallax Effect
10. BG Image Color Tint
11. Background Color
12. Section Height
13. Section Animation

2.16 – Text 1 to 5

The frontpage text widgets are flexible text widgets that allow you to add custom text messages or shortcodes for 3rd party plugins.

Examples of uses include FAQs, marketing messages, testimonials, other beat players, and more.

Available Options:

1. Title
2. Text
3. Text Color
4. Shortcode ( Optional ) – You can include shortcodes from 3rd party plugins to display different content on your homepage.
5. Button Text – Enter the text to appear in the button.
6. Button Web Address – Button appears when you enter a URL.
7. Open link in a new window.
8. Button Color
9. Background Image
10. Background Image Settings
11. Enable Parallax Effect
12. BG Image Color Tint
13. Background Color
14. Section Height – Adjust padding above & below content.
15. Section Animation

Additional Notes

• Add a shortcode from a 3rd party plugin.
  • It is not guaranteed all shortcodes will work.
  • No support is given for 3rd party plugins.
  • Instagram plugin mentioned in this video.

Example Text Sections

2.17 – Video

Display a YouTube or Vimeo video on your homepage.

Available Options:

1. Title
2. Text
3. Text Color
4. Select Video Type: YouTube / Vimeo
5. Video URL # – Example: GYSZAwNXyM. This can be found at the end of the video URL.
6. Button Text – Enter the text to appear in the button.
7. Button Web Address – The button appears when you enter a URL.
8. Open link in a new window.
9. Button Color
10. Background Image
11. Background Image Settings
12. Enable Parallax Effect
13. BG Image Color Tint
14. Background Color
15. Section Height – Adjust padding above & below content.
16. Section Animation

3. Beat Store Settings

3.1 General Settings ( Panel )

a. Settings

1. Playlist Button Settings – This setting controls how the for sale, no price, and free download buttons work. When clicked, the information will open in an overlay window, or send users to the single beat page.
   • Options: Open Overlay Window / Send Users to Single Beat Page
2. Order of Beats –  Newest Beats First / Random
3. Select the Beat Store Homepage – Update the continue shopping and home button on the single beat page.
4. Beat Store Layout –  Stacked / Columns
5. Autoplay Playlist – The autoplay does not work on mobile.
6. Show Genre
7. Show BPM
8. Show Produced By
9. Show Time
10. Show Play Count Text
11. Custom Play Count Text – This text appears in front of the play count.
12. Custom Time Text – This text appears in front of the time.

b. Beat Store Buttons

1. For Sale Button Text
   1. Button Text Option: Show The Price / Show Custom Text
   2. Custom For Sale Button Text – Limit text characters. It only appears if you select the custom text option.
2. Free Download Button Text
   1. Free Download Text
   2. For Sale Button Text if Price is $0.00 – This option is if you select the for sale option as the beat status, and you leave the price blank. This text will replace the 0.00 in the beat store playlist.
3. No Price Button Text
   1. No Price Button Text – Appears in the beats store and single beat page. I.e., Make an Offer
   2. Button Link – The button appears inside the overlay window or on the single beat page.
   3. Custom Button URL – Enter a URL if you selected Custom Button URL
4. Sold Button Text

c. Beat Thumbnails

1. Show Thumbnails – Show or hide thumbnails in the beat player.
2. Default Thumbnail – Add a custom default thumbnail for all beats. Upload a square image. At least 300 x 300.

d. Playlist Colors

Customize the audio player colors. Click the clear button to use the default colors.

1. Audio Player Color – Controls the color of the audio player.
2. Buy Button Color – This is for the main button in the playlist.
3. Beat Sort Bar Background Color – This bar appears over the audio player.
4. Beat Sort Bar Checkout Button Color – Select a color of the checkout button when an item is added to the shopping cart. The page will have to refresh for the color to appear.
5. Count Circle Color – Color circle in the sorting dropdown & cart number.
6. Progress Bar Color – Color for the progress bar and volume.
7. Active Beat – BG Color – The active beat is the beat that is currently playing in the playlist.
8. Playlist Theme Color – Dark Theme or Light Theme
9. Playlist Background Color – Controls the BG color of the playlist.
10. Playlist Border Color – This is the border that appears between beats.
11. Beat Name Color – This controls the beat name color.
12. Subtext Color – This text appears under the beat name.
13. Buy Button Text Color – Text color for the buy button.
14. Sold Text Color
15. Active Beat – Name Color
16. Active Beat – Subtext Color
17. Animated Bars Color – The animated bars appear in the active beat.
18. Show Animated Bars on Active Beat – The animated bars do not sync with the audio.
19. Animated Bars Opacity

e. Beat Preview Download Settings

Here are the options for the beat preview download. Read this post for help.

1. Button Text
2. Include a required checkbox with text under the beat preview download button.
3. Required Checkbox Text – Update the text and web address of a page on your website with your terms and conditions.

f. Beat Sort Pages

1. Beat Store Sidebar – This option controls the sidebar on the Beat Store homepage & beat sort pages. This option does not affect the Frontpage Sections template.
   • Options: Include Sidebar / Full Width
2. Beat Sort Page Title – Appears above the beat store on the search and paginated template.
3. Playlist Height – This affects the beat store playlist templates.

3.2 Beat Sort Bar ( Panel )

The beat sort bar is the bar that appears over the beat store playlist to search and sort beats.

1. Sort Bar Settings – Show Bar / Hide Bar
2. Sort Button Text
3. Show Genre
4. Show Categories
5. Show Tags
6. Show Price
7. Show Search Input
8. Search Input Text
9. Show Checkout Button
10. Checkout Button Text

3.3 Overlay Window Settings ( Panel )

a. General Overlay

These are the settings for the overlay window that appears when you click the button inside the beat store playlist.

1. Hide Animated Bars – Show or hide animated bars in the overlay window.
2. Show Social Icons – Show or hide social icons in the beat overlay window.
3. Overlay Image Background Color
4. Overlay Image Background Image
5. Pricing Table Shortcode – Add a pricing table shortcode to display a pricing table in the beat overlay window and single beat pages.

b. Make an Offer Overlay

Overlay window for beats with “No Price”. This allows you to add a form from Contact 7 for visitors to make an offer on a beat.

1. Show Button in Beat Sort Bar
   

   

2. Overlay Title – This changes the title for the button and overlay window.
3. Description Text – Here you can include text above the make an offer form.
4. Offer form Shortcode – Create a Make an Offer form in Contact 7 and add the shortcode below.

c. Instructions Overlay

Use this overlay to provide instructions on how to buy beats from your website.

1. Show “Help” Button in Beat Sort Bar
   

   

2. Instructions Button Text – Limit text. Example: Help, Instructions, How to Buy
3. Overlay Text – Edit the text in quotation marks. To change the icons, visit Font Awesome, click the icon you want, copy the fa-name, and update the icon name below.
4. Overlay Icon Color – Changes the icon color.
5. Overlay Icon Background Color – Changes the icon background color.

d. Sale Overlay

Use this overlay to promote current sale promotions and promo codes. This overlay appears when the button above the beat player is clicked.

1. Show “Sale” Button in Beat Sort Bar
   

   

2. Sale Button Text – Limit text. Example: Sales, Promotion, Discounts
3. Overlay Text – Edit the text in quotation marks.
4. Overlay Text Color
5. Overlay Text Background Color
6. Overlay Background Image

3.4 Single Beat Page ( Panel )

a. Single Beat Page Settings

Settings for the single beat page.

1. Text Above License Options
2. Automatically Start Player
3. Show Producer
4. Show BPM
5. Show Time
6. Show Page Views
7. Show Type
8. Show Related Beats – Beats load randomly.
9. Show the Continue Shopping button – Must include button text below.
10. Continue Shopping Button Text – Enter the text to appear in the button. Example: Continue
11. Single Beat Page Sidebar – Show Sidebar / Hide Sidebar
12. Related Beats Text

b. Audio Player

1. Select Audio Player – Audio files need to be on your server for the Soundwave audio player to work. The Soundwave player will not work with demo content, add your own beats for it to work.
2. Soundwave Progress Color
3. Soundwave Color
4. Soundwave BG Color

4. Colors & Fonts

Customize your website’s fonts & colors. Preview fonts at Google Web Font Directory.

4.1 Website Title Font

1. Website Title & Header Fonts – Setting for the name, frontpage titles, page titles, and widget title.
2. Page & Widget Title Color – Changes the page and widget title color.
3. Font Weight – Adjust the boldness of the font.

4.2 Button Settings

1. Accent Color: Button & Link Color – Select your button and link color. Do not select white.
2. Button Font Weight
3. Button Style

4.3 Body General Font

1. Body Font – Font for body text, buttons, and text inside widgets.
2. Body Font Size – Changes the body and widget font size.
3. Body Text Color – Changes the body and widget text color.

4.4 Website Background Color

1. Remove the background color and padding from the content container & widgets.
2. Border Line Color – Changes the borderline color for page titles, widgets, and more.
3. Content Background Color – Changes the color of the main content box and sidebar widgets.
4. Website Background Color – For this color to appear, you can not have a background image or pattern.

4.5 Navigation Font

1. Navigation & Beat Name Font – Font for the navigation, beat name, and the beat sort bar.
2. Font Weight – Adjust the boldness of the font.

4.6 Widgets

1. Widget Header Font Size (px) – Changes the sidebar widget title size.

5. Background Image

Here you can add a background image to your website.

1. Website Background Image
2. Background Patterns

6. Pages & Blog

Edit settings for static pages and blog.

6.1 General Sidebar

1. Sidebar Position: Left or Right
2. Hide Sidebar on Mobile

6.2 Page Title Styling

The page title is the title that appears at the top of the page, like the page name and blog title.

1. Page Title Settings – Default / Fullwidth Title
2. Fullwidth Title Text Color
3. Fullwidth Title Background Color
4. Fullwidth Title Background Image
5. Fullwidth Image Color Tint – Apply a color tint over the background image.
6. Title Background Image Settings – Stretch / Repeat
7. Fullwidth Title Font Size
8. Fullwidth Title Padding
9. General Page Animation – Setting for static pages, beat pages, blog posts, and full-width templates.

6.3 Blog Settings

Settings for blog home and single posts.

Blog Homepage

1. Hide Sidebar – This hides the sidebar on the blog homepage.
2. Hide Author & Date
3. Animation – Animates blog posts.

6.4 Single Blog Page

1. Hide Sidebar
2. Hide Author & Date
3. Show Social Share Buttons – Display social buttons on single beats, articles, and product pages.

7. Menus

Edit the header and footer navigation menu.

8. General

Edit general settings for tracking analytics, photo, and video gallery templates.

8.1 Google Analytics

Add the website tracking code from Google Analytics or another service. The tracking code should include a script tag.

8.2 Photo Gallery

Settings for the photo gallery template.

1. Select Photo Gallery Homepage – Select the page you created the photo gallery. This will link the “All” option in the sort drop-down menu.
2. Hide Photo Name
3. Hide Sorting Drop Down Menu
4. Image Animation – Control how images are loaded on the page.
5. Hide Sidebar
6. Hide Author & Date

8.3 Video Gallery

Settings are for the video gallery template.

1. Video Gallery Homepage – Select the page you created the video gallery. This will link the “All” option in the sort drop-down menu.
2. Video Gallery Animation – Animates the video thumbnails.

9. Product Store

9.1 Product Store Settings

If you sell physical products, fill in the info below. You must have a PayPal account to use the product store.

1. PayPal Email Address – Enter the email address connected to your PayPal account.
2. Currency – Enter your currency. The default currency displayed is American dollars (USD). Example currencies: EUR, GBP, AUD. Here is a list of PayPal allowed currencies.
3. Currency Symbol – Enter the currency sign. The dollar sign is the default $. Examples: $, £, €. List of currency symbols.
4. Select Store Homepage – Choose the page you created the store homepage. This will link the “All” option in the sort drop-down menu.
5. Select Store Success Page – Create a static thank you page and select here to redirect the user to once the payment is made in your product store.

9.2 Store Homepage

1. Banner Image – Suggested image size: 900×300
2. Store Homepage Animation – Animates the images in the product store.
3. Hide Sorting Drop Down Menu

9.3 Single Product Page

1. Product Image Position – Left / Right
2. Show Related Products – Show / Hide
3. Related Products Text
4. Store Single Page Animation – Animates the single product container.

9.4 Single Product Page Preview

10. Widgets

Add and remove sidebar widgets and frontpage sections.

• Widgets ( Sidebar )
• Frontpage Section Template

11. Footer

Here you can edit the settings for the footer that appears at the bottom of your website

11.1 Footer Options

1. Footer Menu Location – Align left or center the footer menu.
   • Displaying a Footer Menu – Once you create a footer menu, you must select Footer Menu under Menu Locations on the Menus page.
2. Footer Menu Text Color
3. Copyright Text
4. Hide Music Maker link

11.2 Footer Widgets

1. Show Footer Widgets – To show the footer widgets, you need to enable “Show Footer Widgets”
2. Footer Widget Background Color – You must select show footer widgets above.*
3. Remove Widget Area Background – This will remove the background color.
4. Footer Widget Title Color – Update the widget title color.
5. Footer Widget Text Color
6. Footer Widget Link Color
7. Footer Widget Border Color – Changes the footer border color.

12. Homepage Settings

These are the general homepage settings.

12.1 Homepage Banners

These are for the settings for the banner post type that appears above the Beat Store Playlist template.

These banners are not connected to the Frontpage Sections Template.

12.2 Homepage Display

Here you can select what appears on your website homepage.

By default, WordPress displays the blog homepage and the latest blog articles.

If you would like to display a static page:

1. Select “A Static Page”
2. Under “Homepage” select the page you want to appear on your homepage.
3. Create a Static Page named Blog
4. Under “Posts Page”, select the “Blog” page you created

13. Custom CSS

Here you can add custom CSS code to customize the appearance and layout of your site.

You must enter valid CSS code. If you don’t, it can break your website.

Troubleshooting & Notes

• Cache Plugin Problems
  • If you are using a cache plugin, please clear your cache and deactivate it to avoid problems.
• The names for the different panels and options may have changed.
• The WordPress Customizer replaced the Theme Options settings in version 2.18.