Homepage Builder

Understand the concept

Fox homepage builder is not a page builder in usual meaning like Elementor, Visual Composer, Beaver Page Builder or WPBakery Page Builder. It’s a set of options in WP Customizer that helps you to build sections of posts in some special layouts before your main blog stream.

A picture is worth a thousand words.

After installing the theme, you can use Homepage Builder right away. No additional plugins is needed. Please head to Dashboard > Appearance > Customize > Homepage Builder.

General Settings

Builder Sections for pages 2, 3..? Your homepage shows the latest posts of your blog so it may have the pagination links page 1, 2, 3.. You may want to show builder sections for only page 1. When your readers come to yourblog/page/2/ they’ll only see the main stream.

Non-duplicating posts: Post X can be in 2 categories, say Books and Lifestyle. If you set section 1 to be category Books, category 2 to be Lifestyle then the post X won’t show up twice.

Homepage padding top: Padding top of your homepage. Please enter a number, eg. 10.

Homepage padding bottom: Padding bottom of your homepage. Please enter a number, eg. 10.

Max number of sections allowed: By default, there’re 6 sections. You may want to have more sections, say 20 sections. Please enter 20, hit the save button then refresh the page.

Spacing between sections: it explains itself.

Builder Heading

This is called the Builder Heading

This section includes global settings that apply to all sections. However, you can override those settings for each section.

Builder Heading Style: Please try to see it live.

Builder Heading Size: Obvious

Builder Heading Line Stretch: Please note that “Stretch full screen width” option will stretch the line to fullscreen, ie. the edge of your screen. We used this option in Fashion demo.

Builder Heading Align: Obvious

Builder Heading Font: Obvious

Section Settings

Display: This is the first and most important setting for each section. You can choose to dislay:

  • All categories: it means all posts from all categories.
  • Some category: eg. Lifestyle, Travel..
  • Featured Posts: A featured post is a post marked “star” in your post list. To understand it better, what’s a featured post?
  • Sticky post: What’s a sticky post?
  • Posts in format video, gallery or audio.
  • A custom post type: All post types have been listed there.
  • A shortcode: You can enter your shortcode there, eg. a subscribe form or some table, chart, map etc.

Query Options

This area has options for querying posts, which posts should be displayed. All options here are quite obvious with very detail description right there.

  • Number of posts to show?
  • Include only categories
  • Exclude categories
  • Only from authors:
  • Order By?
  • Order
  • Offset
  • Custom Query (query string)

The custom query option is for advanced users who understand how to write a custom query. Don’t use it if you don’t want to mess it up. A custom query looks like this:

posts_per_page=6&orderby=random&order=desc&cat=15

Displaying

This area has options for layout. How posts are displayed? Say, in a grid or a slider.

Displaying as: There’s a list of available layouts to choose from.

Customize show/hide components? If you enable this, you can choose which components should be shown and hidden. Say, if you don’t want to show post category, author and the more button, please uncheck it.

Please note that this option doesn’t work for some layouts, eg. Post Group 1 and Post Group 2. For those Post Groups, you only have global settings in Customize > Blog > Blog Post Layouts > Post Group 1, 2

Item alignment: Obvious

Item Spacing: This option works for grid and masonry layouts.

Elements order: There’re 5 available orders that’re very obvious, eg. Meta > Title > Excerpt then it’ll show the meta first, then post title, then post excerpt.

Thumbnail size: If you select “Original”, it won’t crop your photo. If you select “Fixed height”, all photos will have equal height and they adjust their width accordingly.

Thumbnail custom: Enter custom size if you choose thumbnail size to be “Custom”. Custom size format should be Width x Height, eg. 580×320

Text Color: Obvious

Title size: Obvious

Content/Excerpt? You’ll see this option if you choose layout Standard, Newspaper or Big Post. For other layouts, it displays the excerpt by default.

Excerpt length: Enter custom excerpt length. You can enter 0 for this field.

Excerpt size: Obvious

Excerpt more? Display the read more button or not.

More link style: Obvious

Heading

Heading Text: If you leave this empty, your section won’t have a heading

Heading color: Obvious

Heading style: It’s Inherit by default. You can set the default heading style in Customize > Homepage Builder > General Settings.

Heading Line Stretch: If you choose to stretch to fullscreen width, the heading line will stretch to the edge of the screen.

Heading align: Obvious

Heading size: Obvious

Heading URL: Obvious

Sidebar

By default, the section has no sidebar unless you specify one. To create a sidebar, please go to Dashboard > Fox Magazine > Sidebar Manager. Read more about sidebar here >>. After creating a new sidebar, it’ll appear in this sidebar list to choose.

Sidebar? Select available sidebar to display

Sidebar position: Left or right.

Sticky Sidebar? If select yes, the sidebar will be sticky and move along content when reader scroll.

Advertisement Code: If you enter an ad code (eg. a code from Adsense) then you can skip next options which is for image banner.

Image Banner: Upload a banner.

Banner width: Enter a number, eg 728 or 970.

Tablet Image: Banner will be visible on tablet screens, eg. Tablet, Note..

Banner tablet width: Banner width on tablet, eg. 600

Mobile Image: Banner will be visible on mobile screens, eg. iPhone, SS Galaxy..

Banner mobile width: Eg. 300

Banner URL: The URL of your ad

Section Design

Stretch: Content width or Fullscreen width. It’s content width by default.

Background: Obvious

Text Color: Obvious

Border: Obvious

Main Stream

Main Stream is your main blog which shows the latest posts. That’s why we don’t have option of which to display in this section. It displays, of course, your latest posts.

Main posts stream? Select Disable if you want to hide this. So that your homepage will show only page builder sections.

Main Stream Layout: The layout to display.

Main Stream Sidebar: Your blog sidebar. In case you want to set sticky sidebar, please go to Customize > Design > Site Layout > Sticky Sidebar. It’s a site-wide option. There’s no option for sticky sidebar only for main stream.

Display main stream after section? By default the main stream will be display in the end of all sections. If you want to display the main stream between section 3 and 4 for instance, please enter 3 for this option.

Custom number of posts to show on blog: By default, number of archive posts per page is controled in Dashboard > Settings > Reading. By using this option, you can change that number just for homepage main stream. Other archive pages like category, tag, author.. still obey the Reading setting.

Offset? Number of posts to skip

Include only categories: Obvious

Exclude categories: Obvious

Main Stream Heading, Banner & Ad, Section Design options are same as the above section settings.

Display Widgets in section

Fox allows you to display a custom sidebar with widgets instead of posts.

Step 1: Go to Dashboard > Fox Magazine > Sidebar Manager to create a new sidebar, say “My Sidebar”

Step 2: Go to your section, in Dipslay option, select “A custom sidebar”.

Click to “Select Sidebar”, you’ll see your “My Sidebar” newly created appears in the list.

Step 3: Go to Dashboard > Appearance > Widgets and drop your widgets into “My Sidebar”. Those widgets will appear in your section now.