1. Home
  2. Homepage
  3. Frontpage Sections ( One Page )

Frontpage Sections ( One Page )

Frontpage Sections lets you create a long homepage with multiple content sections.

Added in version 3.0

Please watch videos 1 to 3 completely to avoid confusion.

Template Preview

Overview

Here is a summary of the Frontpage features. There are 18 available sections.

You can change the text, colors, and images for each section.

Video Outdated

Production credits, two more text sections, and animation options have been added.


This article contains tutorials and details for each section below.

Please Read

Please read each sections details if you have questions.

1. Select the Frontpage Template

Estimated time: 25 Seconds

The first step is you must select the Frontpage Sections template.

Step by Step Instructions

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


2. Add & Reorder Frontpage Widgets

Only add the Frontpage widgets you want to display on your homepage.

There are 18 available Frontpage widgets. ( Not 14 )

Step by Step Instructions

  1. Click the Customize > Widgets > Frontpage Sections
  2. Add Frontpage Widgets
    1. Click the Add a Widget button
    2. Type Frontpage into the search input
    3. Click the Frontpage widget you would like to add.
  3. Repeat step 2 to add the multiple Frontpage widgets
    • Only add the widgets you want to use.
    • Only add the widgets labeled Frontpage.
    • You will need to add each widget one by one.
    • Don’t add the same Frontpage widget twice.
    • The Contact & Pricing Table widgets will NOT work until you update their IDs. Tutorials below.
  4. Click Save & Publish

  • Only add the widgets labeled Frontpage.
  • Click and drag the widget headers to rearrange the order of the sections.
    • Click Refresh in Customizer to update the customizer preview window.

3. How to Edit Sections

There are two ways to edit the Frontpage sections:

  1. Click the Blue Pencil Icon. This will 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.

 

Detailed Information

Each panel you see under Frontpage Sections connects to its own corresponding Frontpage widget.

Example: The Frontpage: Banner Image widget settings are edited under
Customize > Frontpage Sections > Banner Image

So to edit a particular Frontpage widget, you must edit its settings under the right panel.

There are two ways to modify the Frontpage Sections:

1. Click the Pencil Icon 

When using the WordPress Customizer you will see a pencil icon in the preview window next to the header of the different sections.

Click the icon and it will open the corresponding customizer panel to edit the settings.

2. Go to Customize > Frontpage Sections

Click the panels of the sections you would like to edit.

If you want to edit the Frontpage: Contact widget, go to Customize > Frontpage Sections > Contact

Ignore the panels for the Frontpage widgets you did not add to your homepage.

Tips

  • Click the Save & Publish button to make changes live.
  • When editing a section, scroll to the area of the page to see the changes you are making.


4. Select Homepage

Estimated time: 25 Seconds

Here are the steps to make the Frontpage template your homepage.

Step by Step Instructions

  1. Click Customize under Appearance on the sidebar.
  2. Click Homepage
  3. Click A Static Page under Front page displays
  4. Under Front page select the page front page you created.
  5. Select your blog page under Posts Page.
  6. Click Save & Publish.


Available Frontpage Widgets (18)

All Frontpage widgets come with sample text, images, and colors. You can change all of these settings.

Click the boxes below for more information.

1. Banner Image

Image banner for your homepage.

Video Tutorial

The animation options were added after this video. Please note, not all animations will preview in the customizer.

Image Preview

Options

  • The banner can have text or an image in the center.
  • The background image and center image should be separate images.
  • You can add a background image or select a solid background color.
  • You can enable a Parallax image scrolling effect.
  • You can adjust the banner height.
  • You can add an optional button.
  • If you upload a banner center image it will overwrite the headline, subtext, and button.
  • This banner only supports one banner.

Requirements

  • 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.
  • You must have text or image in the banner. You can not only have a background image.
  • The banner center image should not be wider than 940 pixels.

Additional Image Previews

Center Image – Upload a transparent PNG image to appear over the banner background image.

Solid Background – No background image.

YouTube Banner Video Examples

Each image below is linked to the video and includes the video ID # to paste into the customizer.

Video Disclaimer:

  • These are not my videos, just videos I found on YouTube.
  • If you select a YouTube video you may want to give credit to the video owner somewhere on your website.
  • You are not downloading any videos, just embedding them into your website, so I don’t believe any copyright laws are being broken.
  • So please use at your own discretion.

Video ID: 8t3XYNxnUBs

Video ID: ujwJeKHOo2c

Video ID: hCmpgAn9q0A

Video ID: FOQF9APMsVg

Video ID:  pGbIOC83-So

Video ID: aFz_YcJI_zo

Video ID:3zAUhWtHeY

Video ID: oOUVzuuG-Go

Video ID: 43ngkc2Ejgw

Video ID: hEO09YiGF6k

Video ID: 0pXYp72dwl0

Video ID: X-dMOvEOQiM

Video ID: Sj0NEtvvUZ8

Video ID: JHRiaKEYeis

Video ID: aMKVQhKEKBU

Video ID: pXU_GY7hjPc

Video ID: a-11dtG7aK4

Video ID: 7c4WYzr30B0

Video ID: iGpuQ0ioPrM

Video ID: q0ZeZF4W37w

Video ID: NVb5GV6lntU

Video ID: Cfj_gTEiKwE

Video ID: zX8UU8UBQhw

Video ID: d4JuUYmiAbo

Video ID: 9Ep_h8vxgEU

Video ID: Jr_J2YUXms8

Video ID: 4G0bIKKz8-o

Video ID: VijPGj4DZrM

Video ID: Qnl6dBJzNUQ

Video ID: h4x9hgrPUiQ

3. Beat Store

Include the Beat Store Playlist on your homepage.

When using the customizer, only 5 beats will load to decrease loading time.

Video Tutorial

Image Preview

Options

  • Add text above and below the Beat Store.
  • Add a background image or select a solid background color.
  • You can enable a Parallax image scrolling effect.
  • Adjust the playlist height.

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 available for the Frontpage Sections.

4. Pricing Table

Display a pricing table on your homepage.

There are two pricing table plugins that have been tested.

Follow the tutorial for the one you would like to add to your homepage.

Option 1. Responsive Pricing Table

How to Create the Pricing Table

  1. Click Add New under Plugins on the sidebar.
  2. Search for Responsive Pricing Table.
  3. Click Install Now, then Activate.
  4. Click Add New under Pricing Tables on the sidebar.
  5. Give the table a title. Example: Pricing Table
  6. Add Pricing Column
    1. Enter your license information – You can use the Sample Licensing Text below.
    2. Example: Add Lease to the Title input.
    3. Add $19.99 to Price.
    4. Add this text to the features list:
      Untagged MP3
      Sell up to 3,000 units
      Non-Exclusive Rights
      Keep 100% Royalties
      Instant Delivery
    5. Select a Color to appear under the column.
    6. Click Add another plan to add the next column and repeat steps 1 to 5 under add pricing column.
  7. Once you are done adding columns, click the Publish button.
  8. Click All Pricing Tables under Pricing Tables on the sidebar.
  9. Copy the shortcode for the table you just created.
  10. Once you are done, add the pricing table shortcode to Customize > Frontpage Sections > Pricing Table
  11. Click the Save & Publish button to make changes live.

Sample Licensing Text

Lease

  • $19.99
  • Untagged MP3
  • Sell up to 3,000 units
  • Non-Exclusive Rights
  • Keep 100% Royalties
  • Instant Delivery

Premium

  • $59.99
  • Untagged WAV
  • Sell up to 12,000 units
  • Non-Exclusive Rights
  • Keep 100% Royalties
  • Instant Delivery

Exclusive

  • $300
  • Untagged WAV + Trackout
  • Unlimited Distribution
  • Unlimited Projects
  • Keep 100% Royalties
  • Instant Delivery
  • Exclusive Rights

Option 2. Easy Pricing Tables by Fatcat Apps

How to Create the Pricing Table

  1. Click Add New under Plugins on the sidebar.
  2. Search for Easy Pricing Tables by Fatcat Apps
  3. Click Install Now, then Activate.
  4. Close alert pop up.
  5. Click Add New under Pricing Tables on the sidebar.
  6. Give the table a title. Example: Pricing Table.
  7. Click the New Column button to add a third column.
  8. Add Pricing Column
    1. Enter your license information – You can use the Sample Licensing Text below.
    2. Example: Add Lease to the Name input.
    3. Add $19.99 to Pricing
    4. Add this text to the Features:
      Untagged MP3
      Sell up to 3,000 units
      Non-Exclusive Rights
      Keep 100% Royalties
      Instant Delivery
    5. Repeat the steps above for the next column.
    6. Click the Feature button for your most popular license option
  9. Once you are done adding columns, click the Save button.
  10. Click the Deploy button.
  11. Copy the shortcode.
  12. Add the pricing table shortcode to Customize > Frontpage Sections > Pricing Table
  13. Click the Save & Publish button to make changes live.

Sample Licensing Text

Lease

  • $19.99
  • Untagged MP3
  • Sell up to 3,000 units
  • Non-Exclusive Rights
  • Keep 100% Royalties
  • Instant Delivery

Premium

  • $59.99
  • Untagged WAV
  • Sell up to 12,000 units
  • Non-Exclusive Rights
  • Keep 100% Royalties
  • Instant Delivery

Exclusive

  • $300
  • Untagged WAV + Trackout
  • Unlimited Distribution
  • Unlimited Projects
  • Keep 100% Royalties
  • Instant Delivery
  • Exclusive Rights

Pricing Table Section Options

  • Add text above and below the Pricing Table.
  • Add a background image or select a solid background color.
  • You can enable a Parallax image scrolling effect.
  • You can add an optional button below the pricing table.

5. Contact

Add a contact form to your homepage.

Video Tutorial

Image Preview

Contact Form Code Mentioned in the Video

[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”]

How to Install the Contact Form Plugin

  1. Click Add New under plugins on the sidebar.
  2. Search for Contact 7.
  3. Click the Install Now, then Activate button.
  4. Click Add New under Contact on the sidebar.
  5. Give the form a title. Contact for example.
  6. Click the Save button on the right.
  7. Copy the shortcode in blue on the page.
  8. Go to Customize > Frontpage Sections > Contact
  9. Paste the shortcode into the Contact Form 7 Shortcode input.

Options

  • Add a background image or select a solid background color.
  • You can enable a Parallax image scrolling effect.

Additional Info

  • No other contact form plugins have been tested. It is not guaranteed all plugins will work.

6. Services

Display 1 to 6 services on your homepage.

Video Tutorial

Image Preview

Options

  • Add up to 6 services with a picture, title, description, and link to a page.
  • Add a background image or select a solid background color.
  • You can add an optional button.
  • You can enable a Parallax image scrolling effect.

7. About

Display an about section on your homepage.

Video Tutorial

Image Preview

Requirements

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

Options

  • Add a background image or select a solid background color.
  • You can add an optional button.
  • You can enable a Parallax image scrolling effect.

8. Products

Display 4 to 12 of your latest products.

Image Preview

 

Once you add the Frontpage: Products widget to the Frontpage Template:

  1. Click the pencil icon in the Products section, or in the customizer go to Frontpage Sections > Products
  2. Edit the information.
  3. Click the Save & Publish button to make changes live.

Requirements

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

Options

  • Display 4 to 8 of your latest products.
  • Show or hide the products names and price
  • You can add an optional button.
  • You can enable a Parallax image scrolling effect.
  • Add a background image or select a solid background color.

9. Photos

Display 4 to 12 pictures on your homepage.

Image Preview

Once you add the Frontpage: Photos widget to the Frontpage Template:

  1. Click the pencil icon in the Photos section.
    Or in the customizer go to Frontpage Sections > Photos
  2. Edit the information.
  3. Click Save & Publish to make changes live.

Options

  • Add a background image or select a solid background color.
  • You can add an optional button.
  • You can enable a Parallax image scrolling effect.

Requirements

  • Photos will only appear if you have published photos to your photo gallery.

10. Blog

Display your latest blog posts on your homepage.

Image Preview

Once you add the Frontpage: Blog widget to the Frontpage Template:

  1. Click the pencil icon in the Blog section.
    Or in the customizer go to Frontpage Sections > Blog
  2. Edit the information.
  3. Click Save & Publish to make changes live.

Requirements

  • The blog posts MUST have featured images added to appear in the Frontpage section.

Options

  • Display 3 to 6 posts.
  • Add a background image or select a solid background color.
  • You can add an optional button.
  • You can enable a Parallax image scrolling effect.

11. Video

Display a YouTube or Vimeo video on your homepage.

Image Preview

Once you add the Frontpage: Video widget to the Frontpage Template:

  1. Click the pencil icon in the Video section.
    Or in the customizer go to Frontpage Sections > Video
  2. Edit the information.
  3. Click Save & Publish to make changes live.

Options

  • Display a YouTube or Vimeo video.
  • Add a background image or select a solid background color.
  • You can add an optional button.
  • You can enable a Parallax image scrolling effect.

12. Text ( 1 - 5 )

There are 5 Frontpage: Text widgets.

These sections allow you to display marketing text or additional information to the Frontpage using shortcodes.

Video Tutorial

Options

  • Add a background image or select a solid background color.
  • You can add an optional button.
  • You can enable a Parallax image scrolling effect
  • 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

Image Previews

13. Production Credits

Display your production credits to your homepage.

Image Preview

Image sizes are 240 x 240 pixels.

14. Email

Add a email form to your homepage.

Important: This email input does NOT work by default. It is sample email form.

Copy and paste the email form code from what ever email marketing company you are using like Aweber or Mailchimp.

Image Preview

Requirements

  • Enter plain email form code from your email marketing service provider.
  • Do not enter forms with CSS styling.
  • CSS has already been added for Inputs, Buttons, and Labels
  • Clean up the email from of unnecessary code.
  • Test the form out to make sure it works.

Basics of a clean email form.

<form>

<!–Label –>
<label>Name</label>

<!–Input –>
<input type=”text” placeholder=”Enter Name”/>

<!–Label –>
<label>Email</label>

<!–Input –>
<input type=”text” placeholder=”you@example.com”/>

<!– Button –>
<input type=”submit” value=”Submit” />

</form>

Tutorial: How to Add Testimonial Section

The testimonial section you see on the demo site is using a Frontpage: Text widget and a testimonial plugin.

Please Note

I will NOT be providing support for the Strong Testimonials plugin. I am just providing a tutorial on how to use the plugin.

Here are the steps to follow to add this section:

Add Testimonial Plugin

  1. In WordPress click Add New under Plugins on the sidebar.
  2. Search for Strong Testimonials.
  3. Click Install Now, then Activate.
  4. How to Add Testimonials
    1. Click Add New under Testimonials on the sidebar.
    2. Enter a title.
    3. Enter a testimonial in the big text area.
    4. Enter a name in the Full Name input.
    5. Add the persons photo by clicking Add Image under featured image.
    6. Click the Publish button.
    7. Repeat these steps to add more testimonials.
  5. Click Views on the sidebar under Testimonials.
  6. Click the Add New button.
  7. Next to mode click Slideshow.
  8. Under Fields uncheck Title.
  9. Under Style check Modern.
  10. Click the Save Changes button.
  11. The shortcode should appear at the top of the page, click the Copy to Clipboard button.

Add Testimonial Section

  1. Click Customize on the sidebar under Appearance.
    • The customizer will open up with your homepage. If the Frontpage Section template is not your homepage, close the customizer, go to All Pages, find the Frontpage template you created and click the view link. Then click the Customize link.
  2. Click Widgets.
  3. Click Frontpage Sections.
  4. Add one of the Frontpage: Text widgets ( Maybe 4 or 5 )
  5. Drag the widget to where you want it to appear on the page.
  6. Click the Refresh in Customizer link to update the page.
  7. Scroll down the page to where the new text widget is and click the pencil icon.
  8. Edit the section title to Testimonials or what ever you like.
  9. Empty the 2nd text input.
  10. Paste the shortcode into the shortcode input.
  11. Make any other additional changes to the section and click the Save & Publish button when you are done.

You can add more testimonials, or modify the testimonial settings under Testimonials on the WordPress sidebar.


Frontpage Settings ( 4 )

These Frontpage settings will only affect the Frontpage Sections Template.

Options:

  1. Hide Header
  2. Hide Navigation
  3. Hide Footer Widgets
  4. Frontpage Sections Title Font Size
    Changes the front page title font size.

Additional Information

Widget Restrictions

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

Background Images

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

Can I embed another beat store?

Can I change the layout of a Frontpage Sections?

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

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.

Section IDs

You can link to a to a section the frontpage with the # and it’s name. Example: #beats

Section ID Names

  • Beats – #beats
  • Pricing Table – #license
  • Services – #services
  • Products – #products,
  • Video – #video
  • Blog – #blog
  • Contact – #contact
  • About – #about
  • Photos – #photos
  • Text 1 – #t1
  • Text 2 – #t2
  • Text 3 – #t3
  • Text 4 – #t4
  • Text 5 – #t5
  • Production Credits – #credits
  • Email – #email


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

Updated on November 3, 2017

Was this article helpful?

Related Articles

Leave a Comment