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 the builder that only works in The Fox theme, and it only works for the homepage.

You’ll see the (HOMEPAGE) Builder immediately when you open the Customizer (Dashboard > Appearance > Customize)

When you open the (HOMEPAGE) Builder, you’ll see “Main Blog” and two “Add Section+” buttons.

The Main Blog always displays the latest posts of your website. You can add more sections before or after the Main Blog. Don’t worry about which button should be used because you can reorder those sections later.

Here’s a sample. I added 2 sections before the Main Blog. The first section, it displays a Slider. The second section, it displays 4 posts in a grid.

When you click to each section, there will be a lot of options to customize it.

For instance, when you click to the section “Grid 4”, you’ll see 5 groups of options to customize this section.

There are 5 groups of options corresponding to 5 tabs:

Layout: To customize things related to section layout, like how posts should be displayed (Grid, List, Masonry, column..), components to show/hide, title size, text align..

Query: To customize which posts should be displayed, for instance number of posts to show (default is 3), their order (by latest posts, or by view count, or comment count..), or displays only posts from some category, some author..

Heading: The options for displaying the heading of this section.

Ad: The options for the ad of this section

Design: The options for appearance of the entire section (visibility, show/hide on desktop/mobile, text color, background color, border, sidebar..)

You may try to test those options to understand them better. They’re pretty intuitive.

NOTE: For “Main Blog” section, Layout and Query tabs are missing. The Layout of your Main Blog is the same as the layout you set generally for the entire site and you can find those options in Customize > BLOG panel. And the Query tab is also missing because it always displays the latest posts. You may find some more options in Customize > BLOG > Homepage Layout.

NOTE: The (HOMEPAGE) Builder only shows up on your Blog page. Ie:

  • If you set your front page to display latest posts in Settings > Reading then the homepage builder will show up for your front page.
  • If you set your front page to display a custom page in Settings > Reading then the homepage builder will show up for your posts page.

Add/Remove/Duplicate Sections

Click to the “” icon on the left of the section name to Duplicate Section or Delete it.

After adding section, its default name is always “Untitled”. You can Edit Section Name to make it easier to remember.

Builder Settings

You may find many options for your homepage in Customize > Builder 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.

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.

Heading line color: This works for those headings that have some lines.

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.

Builder Heading Align: Obvious

Builder Heading Font: Obvious. Here you can style your heading by setting the font size, weight..

Builder Section Options

1/ Layout Options

Display: This is the first and most important option for each section, it decides which your section should display:

  • Standard: Displays the post in standard mode
  • Grid: Displays the post grid. You can choose column below it (2-5 columns)
  • (Pinterest-like) Masonry: Displays the post masonry. You can choose column below it (2-5 columns)
  • List: Displays posts in a list.
  • Newspaper: Posts in newspaper layout
  • Vertical post: Posts in vertical layout
  • Big Post: Posts in big post layout
  • Post Group 1: Group of posts in this layout
  • Post Group 2: Group of posts in this layout
  • Classic Slider: Posts in a slider (classic style)
  • Slider Style 1: Posts in a slider (modern style)
  • Carousel: Posts in a carousel style
  • A Shortcode: Displays a custom shortcode. Enter your shortcode below it.
  • A custom sidebar: Choose a custom sidebar to display. This mechanism allows you to insert as many widgets as you want in a section. Typical widgets used here are: Newsletter sign up form, Instagram, Image boxes, About widget, a Video, Text widget.. It’s up to your creativity.
  • A page content: Choose any page to display its content.

Customize components: If you choose “Yes”, you can choose which components will be displayed for your posts in this section, eg. thumbnail, title, category..

Column: This is column for post grid or masonry.

First post is standard layout? This is the option for List or Grid layout. If you choose Yes, the first post will be in standard layout.

Card Style: This is the option for Grid, Masonry, List or Standard layout. Choose card style you want for your post.

Item Spacing: Spacing between posts in Grid or Masonry layout.

Elements order: How post title, meta, excerpts being ordered.

Grid border? Use border between posts. This is for Grid or Masonry layout.

Border color? The color of the above grid.

Item Align: Left, center or right. This is obvious.

Post Text Color: The text color of your post. You can set it white if you use dark background for your section in the Design tab.

Thumbnail: Choose your thumbnail size for your post.

Custom thumbnail size: Enter custom size if you choose “custom” for the above option. Please enter by the syntax: WxH, for instance 400×250.

Thumbnail shape: Acute, round or circle. Note that circle shape should be set with square thumbnail size. Otherwise, your images will look weird.

Thumbnail hover effect? Choose the hover effect.

Thumbnail hover logo: If you choose “Custom logo” in the above option, you can set the logo here. The logo should be a white *png image over a transparent background.

Thumbnail hover logo width: Default is 40% of the thumbnail width.

Thumbnail on showing effect? The effect when your post is showing to visitors.

Thumbnail additional components: Check components you want to show up on your thumbnail.

Title tag: H2, H3, H4. It’s just for SEO purpose.

Title size: Choose the right size for you.

Title color: Obvious

Excerpt length: Enter a number, eg. 22. It’ll show 22 first words of your excerpt. If you need to change words to characters (for Japanese, Chinese..) please change it at Customize > Miscellaneous.

Excerpt font size: Obvious

  • 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,
  • 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.

2/ Query Options

This tab has nothing to do if you choose to dislay a custom shortcode, a custom sidebar or a page content.

Number of posts: 3 by default. You may enter any number you want.

Display only featured posts? Featured posts are posts marked by a star in your Dashboard > Posts. what’s a featured post?

Display only sticky posts? What’s a sticky post?

Order by? Order of your posts. It’s by publishing date by default.

Order: Descending or Ascending.

Include only categories: Choose any categories you want to narrow down. For instance, if you choose “Lifestyle” and “Music”, it shows only posts from those 2 categories. Skip this option if you want to show posts from all categories.

Exclude categories: Choose categories you want to exclude. If you choose “Lifestyle”, it’ll show all but posts from this category.

Include only tags: Enter tag IDs. How to find tag ID?

Include only authors: Choose authors you want to narrow down.

Format: If you select “Video”, it shows only posts with video format.

Include only following posts: Enter your post IDs. This is the option that helps you to specify the posts you want to display. How to find post ID?

Exclude following posts: Enter post IDs that you want to exclude.

Offset: If you enter 3, it’ll skip first 3 posts and starts displaying from 4th post.

Pagination: Check this if you want to display a pagination after posts.

Custom Query: This is an advanced feature. It allows you to enter a query string that overrides all other options. Don’t use this unless you know what are you doning. Here’s an example of custom query:

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

Custom Post Type: In case your site has some custom post type. Please read this article for the details.

3/ Heading

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

Empty text: Check this if you need an empty heading. Just for decoration purpose.

Heading color: Obvious

Heading style: It’s Inherit by default. You can set the default heading style in Customize > Builder 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

4/ Ad

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

Ad Visibility: In case you need to show/hide your ad on desktop/mobile flexibly.

5/ Design

Visibility: To show/hide the section temporarily. If you delete the section, you’ll lose all settings you’ve set for your section. You may use this option to hide it temporarily for testing. Especially, you can’t delete Main Blog section so this is the only way to disable it.

Show section on: Control visibility of the section on devices.

Stretch: If you choose “Full width (edge of screen)”

Background: Background color of your section

Text color: Text color of your section.

Border: Choose border style.

Sidebar? Select available sidebar to display. 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 position: Left or right.

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

Separator between main & sidebar: Choose yes if you want to have a border that goes between the main content and the sidebar.

Separator color: Color of the separator line.

Section ID: Enter section ID, for some purpose. For instance, to add custom CSS later. Please use only letters, numbers, “-” and “_”

Extra CSS Class: Enter section extra class, for some purpose. For instance, to add custom CSS later. Please use only letters, numbers, “-” and “_”

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

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.