This tutorial introduces how to create home page on WordPress website step by step through Air theme. The main part of the page, except for the header and footer, is created by adding a Page. Login WordPress dashboard, navigate to the Page tab click ‘Add New’. Then you will enter the page editing interface. It is WordPress default editor(screenshot below). Air supplies Settings options panel under the editor, you can config the page thought these options(like header, title, etc read more).
Step by step
- In the WordPress editor, please give the page a name by entering it in the Title field. Click Publish(or Update) button
- The main layout is built by BM Content Builder, please click the BM Content Builder button(blue color) at the WordPress editor top bar
- Then you enter the BM Content builder interface. Most of the Air demo layouts have been built in the builder, please click “Insert Template” to insert a layout quickly.
- In the popup panel of Insert Sections, Choose a layout, click Insert
- Click Close icon when it tips “Completed”
- Inserted layout should be like:
Note: Colorful blocks are placeholder - Click Save icon. When you add a new module, please click the icon to save the layout. It is not necessary to click Update button in WordPress default editor. check more
- You can replace as your own content now, please move the mouse above words “Air. Design”, click Pencil icon.
- Text module editing panel will pop up, you can edit the content in the editor
- Edit masked image – click Advanced Settings tab, click “Add New Image” (Background Image) to choose a picture from Media library. Click Save on Text editing panel.
- Please move your mouse above the portfolio, click Pencil icon to edit portfolio section(Grid module)
- Grid editing panel will pop up. Select Portfolio from selector Source. If you do not have created single portfolios, please create several single portfolios what should be set with one category(or more) and Featured image.
- Config Column and Spacing, you can select(or enter) number from(into) input boxes. There are 2 boxes for each option, the 1st is for desktop, the 2nd is for mobile.
Please select an option from selector Grid Ratio, options including: 4:3, 3:2, 16:9, 2:1, 1:1, 2:3, 3:4, Auto. The Auto will be shown as the image origin ratio.
There are 3 Grid List Type options for list layout: Regular grid(demo), Waterfall(demo), and Metro(demo). For Metro layout, the single portfolio should be set with thumbnail shape
List layouts:
- Filter – please check this tutorial.
- Air supplies Ajax pagination function, Pagination types including: Load more button and Infinite Scroll. Please enter a number for Post Number per Page. Eg entering 20. So if you have 25 portfolios, you would have 3 total pages. The first 2 pages would show 10 portfolios each, and the last page would show the remaining 5 portfolios.
If you want your users to load the next page of posts by clicking on the more button, please pick up option Load More Button for the Pagination. If you want your users to automatically load the next page of articles when they scroll to the bottom of the page, please pick up option Infinite Scroll for the Pagination.
- There are 2 options for Item Style: Image(with Mask) and Image + Text
The 2 item layouts should be like:
- What Thumbnail Does option is for what’s the target when the user clicks the thumbnail. Open a single portfolio/post/product item is for opening a single portfolio page. Open Lightbox is for checking gallery in a popup Lightbox.
- There are tons of option for the Grid module, please check this tutorial about the Grid module.
- If you want to set this page as the homepage of the website, please refer this tutorial.
Video Guide
Content:
00:14 – Add a new page, enter a title
00:30 – Activate BM Content builder, insert the template
00:48 – Edit Title text and masked image(Text module)
01:10 – Edit short description, add text style(Text module)
01:27 – Edit portfolio section(Grid module)
01:48 – Grid Columns
02:04 – Grid Spacings
02:27 – Grid Ratio
02:37 – Grid List Types
02:47 – Filter
03:13 – Pagination
03:57 – Item style
05:05 – Lightbox