INTRODUCTIONCreating Pages and Posts
In this section you can find all the information needed to create your pages and blog posts.
SECTION 01Creating Pages
Simple pages are usually referred in WordPress as static contents. That means that the information displayed on a page doesn’t change, or doesn’t change often. A great example of a page would be the About or Contact Us section of a website.
To create a new Page you need to follow these steps:
- Navigate to Pages in your wp-admin sidebar and click Add New option.
- Input a new name for your page, then enter the content using Bold Builder.
- Set page settings and add Override Global Settings if needed.
When you create a page you will see Switch Editor button. If you do see classic WordPress’ HTML editor, please click Switch Editor button to get Bold Builder editor.
SECTION 02Bold Builder
Once you do that, you will see box with big ‘+’ button. Click on it to add a section which is basic content element in the theme.
Section is the basic building block of Bold Builder. It is the first element added to the page, and it contains all other elements of the page.
Each new section is added by clicking on + button.
Here’s the break-down of all options in Section’s edit panel.
General settings:
- Layout – here you can select the width of the section.
- Top / Bottom spacing – set the top and bottom padding of the section.
- Full screen – if full screen is selected, section will take up full viewport of the browser. Top and bottom spacing will be ignored.
- Vertical align (for full screen section) – set the content’s vertical align when the section is set to full screen.
Design settings:
- Color scheme – select the content’s color scheme. If there is no custom background color or image set, section’s background will adjust to background of the selected color scheme.
- Background color – set the section’s background color. Color won’t be visible if the background image is selected.
- Background image – set the section’s background image.
- Background overlay – here you can set the overlay of the section’s background.
- Parallax – set if the section will have parallax or not. If the field is left empty, section will not have parallax, and if the value is added, the parallax will work.
- Parallax offset in px – set the section’s offset.
- Border – select if the section will have the border in accent color.
Video settings:
- YouTube background video – paste the video’s URL to set it as a background.
- Video settings – set desired settings for the video. You can find settings on the following link.
- MP4 / OGG / WEBM background video – paste the video’s URL to set it as a background.
- Show video on mobile devices – select if the video will be loaded on mobile or not. If it’s disabled add background image to the section.
Responsive settings:
- Here you can select whether the section will be visible or hidden on certain screen sizes.
Posts:
- Category Filter – type Post Category slugs separated by comma and show only posts in the section from that category (e.g. sport, business).
- Post Format Filter – type Post Filter Format separated by comma (e.g. post-format-video, post-format-audio).
- Taxonomy Filter – type Taxonomy slugs (tags etc.) separated by comma (e.g. tag:highlight, michael-jackson).
- Post Author Username – type Author username and show only his posts (e.g. martin).
- Date Filter – type strtotime()-compatible string (e.g. 7 days ago, 1 month ago).
- Show Sticky Posts – choose to Hide, Show in list or Show sticky posts on top.
- Show Posts Already Displayed on This Page – choose to Show or Hide.
- Show Posts in Next Post Containers – choose to show Default (use other container’s settings) or to Force Show and repeat posts on the page.
- Order by – order posts Default (by date), Comment count descending, Post views, Review rate descending or Random.
Custom settings:
- Publish / expiry date – this feature allows you to set the time and date when the section will be published or when it will expire (meaning it will no longer be visible).
- Element ID – can be used to apply new CSS for that one specific element, or to create anchor links.
- Extra Class Name(s) – here you can add existing class to apply its CSS to the section, or create new class with different CSS.
- Inline style – this field is used for inline CSS that will apply to the section.
In the lower part of the screen you can see Bold Builder main toolbar. Main toolbar options are:
- Undo – you can undo your changes to page layout using this button.
- Redo – you can redo your changes to page layout using this button.
- Paste – you can paste clipboard contents to the bottom of the page layout. Just next to the paste button you can see a number which represents the number of items currently present on the clipboard.
- Clipboard Manager – This is unique feature of Bold Builder. You can easily copy and paste contents between different web sites. Once you click clipboard manager button and then click Export, Bold Builder exports.
- Preview – the same as Preview button on the Page edit form – by clicking on it you can preview the current page layout.
- Save – the same as Update button on the Page Edit Form – updates the layout of the page by saving the changes not essential for content creation so we will skip them (you can learn more about Bold Builder if you take a look at documentation which comes with it).
Toolbar options video tutorial
Once you add a section, place your mouse pointer over top area to show toolbar. Click ‘+’ to add a Row which is another basic content element. Now click ‘+’ in Row toolbar to add columns.
Next, place your mouse pointer over top area in a Row element to show toolbar. Click ‘+’ to select number of columns in that row and their width.
From Select Layout dialog you need to pick wanted layout of columns, e.g. 1/2+1/2 will add two columns with same width.
Note that Row element is based on Bootstrap’s 12 column grid, meaning you can have 1,2,3,4,6, and 12 columns in a row. Once you select the number of columns, you can set their width as well.
For example, the following row has two columns where left column is 3/4, and right one is 1/4.
Row Layout video tutorial
Now when you have columns, you can repeat same process to add some content to columns:
You can rearrange elements using drag and drop, clone and clipboard commands.
To edit content element properties, click Edit icon from element toolbar. You will see Edit dialog with various options, depending on which shortcode you are editing:
All sections, rows, columns or elements can be copied and pasted on pages.
Drag & Drop video tutorial
See in action Drag&Drop feature and quick preview from backend or edit function from frontend in the following video tutorial.
Make sure to subscribe to our YouTube channel!
Bold Builder enables you to hide elements on different screen sizes. It also allows you to set when an element will be published and when it will stop displaying (expire).
Video tutorial below shows how this can be done.
Hide on Responsive video tutorial
To use Custom menu on a page, just enter menu name in Menu Name input box.
The best (and fastest) way to learn more about content creation and individual shortcodes (content elements) is to import demo and explore demo content.
SECTION 03Override Theme Settings on Pages
As mentioned in section 3 – Theme customization, all global settings can be overridden on any single post or page. In the Settings box, you will find Override Global Settings dropdown which allows you to choose which setting you want to override.
To override menu, just enter menu name in the Menu Name field.
The possible values for the settings can be found in the Theme Customization part as a preformatted text below the setting name. If you want to reset a setting to default value, just enter ‘null’ (without quotes). Click ‘+’ button to add new override and ‘-’ button to remove previously entered override.
Please have a look at the following example:
SECTION 04Creating Blog Posts
Posts are based on standard WP functionality with some additional settings:
Custom Primary Menu Name
Enter name of the menu that you want displayed as the primary menu on specific post.
Custom Footer Menu Name
Enter name of the menu that you want displayed as the footer menu on specific post.
Images
Click Select or Upload Images to create gallery or add just a single image.
Grid Gallery
Check Grid Gallery to create grid gallery, otherwise gallery is displayed within a slider/carousel. Do not forget to upload the images you want to display as gallery and check Gallery Format in the Format box (on the right part of the page).
Video
In order to add Video post, enter Vimeo video URL, YouTube video URL or custom video shortcode in the Video field. Do not forget to check Video post format in the Format box.
Audio
If you want to create the Audio post, Audio field is where you enter audio shortcode or SoundCloud iframe embed code. Do not forget to check Audio post format in the Format box.
Link and Link URL
In order to create Link Post, enter link title in Link field and link URL in Link URL field. Do not forget to check Link format in the Format box.
Quote and Quote Author
To create quote post enter data in Quote and Quote Author fields. Do not forget to check Quote format in the Format box.
Override Global Settings
As with pages, here you can override global settings – for more info refer to the previous section “Override Theme Settings on Pages”.
Review Summary
Here you can write the summary of your review article.
Review rates
Enter any number of key/value pairs, e.g. Technology/100, where 100 will display as percent.
Custom Fields
Enter any number of key/value pairs, e.g. Year/2018, etc.
SECTION 05Creating Category Page
Category pages can be based on standard WP functionality or with some additional theme's settings:
NewStar theme includes several layout options for Category posts page:
1. Default Category Archive Page – inherits all the General settings (Headline, Menu position, Sidebar etc.)
2. Custom Category Archive Page – Similar to Footer Page Slug, entering full URL or page slug into the field in Posts > Categories section on the WP Dashboard, category page will inherit all the elements from that page. This setting provides you to set category page according to your needs.
Category URL will link to this page (instead of the default one). If the field is empty Category page will be default.
Example: Category Money
3. Category Archive Header – Another option is to edit just the header of Category page. Entering full page slug into the field in Posts > Categories section on the WP Dashboard, category page will inherit all the elements from that page and manage header area.
Header will include all the elements from certain page – for example “General Category Header page” (general-category-header-page). If the field is empty Category header will be default.
Example: Category Fashion
