Frontpage Sections Homepage Template

The Frontpage Sections template allows you to create a dynamic and engaging homepage by arranging various content sections in a long, scrolling layout. This is achieved using Frontpage widgets, which you can add, arrange, and customize to display different types of content. View Demo Website

If you followed the Install Theme & Demo Content guide, you have already set up this page and imported the frontpage widgets. So you can skip section 2 below.

1. Frontpage Template Overview

This video gives an overview of how to use the WordPress Customizer to edit the Frontpage template.

There are 20 frontpage widgets available to customize your homepage.

2. How to Set Up The Frontpage Template

Skip this step if you followed the Install Theme & Demo Content guide.

First, you need to create a static page for the frontpage template:

1. In WordPress, click Add New under Pages on the sidebar.
2. Enter a title for the page.
   • Example: Homepage, Frontpage, Welcome
3. In the Page Attributes box, under Template, select Frontpage Sections.
4. Click Publish.

Next, select the static page as your website homepage:

1. Click Customize under Appearance on the sidebar.
2. Click Static Front Page.
3. Click A Static Page under Front page displays.
4. Under the Front page, select the page you created.
5. Select your blog page under Posts Page.
   • How to Create A Static Page For Your Blog
6. Click Save & Publish.

3. How to Add & Remove Frontpage Sections

Only add frontpage widgets labelled “Frontpage” to the frontpage sections template.

Additional Information:

• Only add the widgets labelled Frontpage.
• There are 20 Frontpage widgets available.
• Click and drag the widget headers to rearrange the order of the sections.
  • Click Refresh in Customizer to update the Customizer preview window.
• Do not add widgets labelled “Frontpage” to any footer or sidebar widget areas.

4. Edit Frontpage Sections in The WordPress Customizer

There are two ways to edit the Frontpage sections in the WordPress Customizer:

1. Click the Blue Pencil Icon to open the customizer panel to update the settings.
2. Go to Customize > Frontpage Sections and select the panel you want to edit.
   • Ignore the panels for sections you did not add to your front page.

5. Available Frontpage Widgets (20)

Below are the options for the frontpage sections template in the WordPress Customizer.

5.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.

5.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 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 – Select an animation style for the text to make it more visually appealing. 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 opens 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 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.

5.3 – Banner – Image

This homepage banner 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 fonts 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 for the secondary text 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 – When the button is clicked, the link opens in a new tab or window.
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 use an image pattern, select repeat under background image settings.

5.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.

5.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 the 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, and it is difficult to adjust them 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.

5.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.

5.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.

5.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

5.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

5.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

5.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

5.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

5.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 in your product store.

5.14 – Services

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

Available Options:

1. Title
2. Text
3. Select this if you are adding more than 3 services.
   1. IMPORTANT – If you try 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.

5.15 – Social Icons

Display social icons on 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

5.16 – Text 1 to 5

The frontpage text widgets are flexible and 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 – The button appears when you enter a URL.
7. Open the 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 is mentioned in this video.

Example Text Sections

5.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 the 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

6. How to Link to Sections on the Front Page

Some users want a 1-page website or a link to specific sections on their homepage.

Here are the steps to link to a section on your homepage:

1. In WordPress, click Menus under Appearance on the sidebar.
2. Click the Custom Links box.
   
   

   

3. Enter the web address to your front page template for the URL input. This should be your homepage.
   • Example URL: http://your-domain-name.com/
   • Important: You must link to your full domain address. If you link to the ID name alone, the links will not work on pages that are not your homepage.
4. Add to the end of the web address the ID name to the section you would like to link to on your front page.
   • Example URL to link to the beats section: http://your-domain-name.com/#beats
   • Live Example: https://demo.musicmakertheme.com/#beats
   • Section ID Names:
     Here are the different section IDs. Copy the ID for the section you want to link to.
     1. #beats
     2. #license ( Pricing Table )
     3. #services
     4. #products
     5. #video
     6. #blog
     7. #contact
     8. #about
     9. #photos
     10. #t1 ( Text 1 )
     11. #t2 ( Text 2 )
     12. #t3 ( Text 3 )
     13. #t4 ( Text 4 )
     14. #t5 ( Text 5 )
     15. #credits ( Production Credits  )
     16. #email
5. Enter the name of the link in the Link Text input.
   
   

   

   
   Example Custom Link:
   • URL: http://demo.musicmakertheme.com#beats
   • Link Text: Beats
6. Click the Add to Menu button.
7. Reorder Links if needed.
8. Click Save Menu.

7. How to Embed BeatStars or Airbit

To embed another beat player into the Frontpage template, you can remove the beats frontpage section and add a Text Frontpage Section.

Replace the sample text with your player embed code. Watch the video below.

8. Additional Information

Frontpage Widget Restrictions

• Only add widgets labeled Frontpage to the Frontpage Sections sidebar and template.

Background Images

• If you are stretching background images, the background image size should be over 2000 pixels wide.
• Compress all large images to help decrease loading time. Check out compressjpeg.com
• Free website background patterns:
  • Subtle Patterns
  • The Pattern Library
  • Pixel Den

Misc

• Parallax background images do not work on mobile devices.
• The colors you select under the general Theme Color settings do not affect the Frontpage Sections template.

Banner Center Images

• The Banner Center Images should be transparent PNG files with no background.

Font Awesome Icons

Some of the Frontage Sections support Font Awesome Icons. You can visit the Font Awesome icons page and update the icon name.

9. How to Add CSS Gradient Backgrounds

There are some cool online CSS gradient generators that you can use to add a gradient background to the different sections.

Example Code ( Image Preview ) ( How to Add CSS )

#beats {
     background: linear-gradient(180deg, #B1C2E4, #C7BCD3, #CB9EB2, #A384B4, #5179B8, #3F5F8D, #1D3849, #2A3235, #1E2829, #131F21);
}

Update the ID name ( #beats ) with the ID names mentioned, and update the inside gradient code.

CSS Gradient Code

• WebGradients
• UI Gradients
• CSS Gradient Generator
• CSS Gradient Animator
• CSS Gradient
• CSS3 Patterns Gallery

Related FAQs

Can I Use the Frontpage Template More Than Once?

No. The frontpage template can only be used once on your website due to the WordPress customizer settings.

Can I change the layout of a Frontpage Section?

No, you can only use the options that are built into the Frontpage Section panels.

Can I embed another beat store?

Yes, check out the tutorial above.

How many different Frontpage Section layouts can I create?

With the 20 available Frontpage widgets, you can create a wide variety of homepage layouts. You can choose to use all of them, a few select ones, and arrange them in any order you prefer to suit your content and branding.

Can I customize the background color or images for each Frontpage Section?

The customization options for each Frontpage Section will depend on the specific widget you are using. Many widgets, such as the Banner widgets, Photos, and others, allow you to upload custom images and often have settings for background colors or overlays. You will find these options within the settings of each widget in the Customizer under Customize > Frontpage Sections or by clicking the blue pencil icon on the front end.

My Frontpage doesn’t look like the demo. What could be the issue?

If your Frontpage doesn’t match the demo, ensure you have selected the Frontpage Sections template for your designated homepage page. Also, check that you have added the desired “Frontpage:” widgets to the Frontpage Sections widget area in the Customizer and configured their content and settings appropriately. If you imported a demo style, it might have included a pre-configured set of Frontpage Sections; you can review and adjust these in the Customizer.

Is there a limit to the amount of content I can add to a Frontpage Section?

While there isn’t a strict technical limit, it’s generally best to keep each Frontpage Section focused and concise to maintain good website performance and user experience. For sections with a lot of content, consider breaking it down into multiple Frontpage: Text widgets or using other relevant widget types.

Can I use shortcodes within the Frontpage Section widgets?

Yes, many of the Frontpage Section widgets, particularly the Text widgets, allow you to insert shortcodes. This can be useful for embedding features from other plugins, such as contact forms, pricing tables, or other dynamic content.

The frontpage sections template was added in version 3.0