Page Builder Template
Table of Contents:
Page Builder #
Page Builder page template intended to create a CV page.
Here are some of our demo page samples – Designer , Developer , Make Up Artist , Rider , DJ , Real Estate Manager .
To create a CV page go to Dashboard > Pages > Add New and choose Page Builder template type.
When creating a page, it is important to pay attention to the permalink structure.
Page Builder template not supported Featured Image and Discussion (comments).
Page Builder template doesn’t visually render the page title and page content.
As you may have guessed from our demo pages Page Builder page template provides two different page views – Plain and Papered.
Page Builder Plain View #
In the Plain View sections are located after each other, whole page is scrollable and there are up button at the page bottom (see demo).
If you want to navigate to the appropriate section when clicking on the menu item you should use SectionID as a link anchor. Read more about SectionID requirements and how to connect SectionID with the menu item here.
Note1: Intro section designed to have full screen view, so for the page Plain View it won’t always look good depending on content size, please make sure you have nice view according to your content size. It’s possible to hide Intro section using Disable The Section checkbox from WordPress Dashboard.
Note2: For the page plane view don’t use —–END OF PAPER—– section, this section intended to group sections and used only for page Papered View.
Page Builder Papered View #
In the Papered View sections are grouped inside papers (see demo). Each paper has full screen size with nested scroll and can contain one or more sections. There is ability to set papers background options and animation type.
How Create Papers
To wrap sections inside a paper you should add — Paper End — section. It will wrap all the sections above him into a paper.
Note 1: Intro section can’t be grouped with the other sections and for the page papered view automatically appeared as the first paper. It’s possible to hide Intro using Disable The Section checkbox from WordPress Dashboard.
Note 2: For the page papered view it is important to always have closing —Paper End— section at the very end please don’t miss it.
Paper Background
To set same background color or background gradient for the all papers globally go to Customizer > Colors > General:
Set background color or background gradient for each paper individually right from the — PAPER END — section:
Note 1: Background gradient type appears only if selected Background gradient color. If you want to use only Background color just reset Background gradient color.
Note 2: We recommend to set color from the customizer for the all papers and than customize it individually for one or more papers if needed.
Paper Animation
To set papers animation type and speed globally for the all papers go to Customizer » Paper & Section Settings .
Paper Title
Papers do not have their own titles, we use section titles, read more details here .
How Connect Sections and Papers with Menu #
Page Builder page template provides two different page views – Plain and Papered.
Connect Menu Items with Section for Plain View
All sections have SectionID field. This field is used when you want to navigate to the appropriate section when clicking on the menu item from the Left Sidebar (sample demo).
Read more how to create menu in the Left Sidebar here.
Step 1: Create SectionID
- SectionID will become page URL part as an anchor link, so it’s important to always use Latin alphabet lowercase letters (no matter what language is used in your site) separated with the dash not underscore ( read more about correct permalink structure ).
- SectionID field is required only if you want to connect it with the menu item, in case if you have section but don’t want to navigate to that section when clicking on the menu , you can just leave SectionID field empty.
- Use different SectionID in case of having same section more than once. All SectionID‘s should be unique.
- We are not created SectionID automatically because your section URL should be meaningful.
Step 2: Generate Section Anchor Link
If we have correct SectionID we should generate anchor link which will navigate to the appropriate section like this:
https://sitename.com/#SectionID
For example:
https://infolio.com/#about
https://infolio.com/#contact-us
Wrong example:
https://infolio.com/#о-нас
https://infolio.com/#contact_us
Step3: Create Section Menu Item
To connect created section anchor link with the menu item go to Appearance > Menus add new custom link and fill section name and section url:
Connect Menu Items with Section & Papers for Papered View
Sample demo.
Step 1: Create PaperID
- PaperID will become paper URL part as an anchor link, so it’s important to always use Latin alphabet lowercase letters (no matter what language is used in your site) separated with the dash not underscore ( read more about correct permalink structure ).
- PaperID value is required and all PaperID‘s should be unique.
- We are not created PaperID automatically because your paper URL should be meaningful.
Step 2: Generate Paper Anchor Link
If we have correct PaperID we should generate anchor link which will navigate to the appropriate section like this:
https://sitename.com/#PaperID
For example:
https://infolio.com/#about
https://infolio.com/#contact-us
Wrong example:
https://infolio.com/#о-нас
https://infolio.com/#contact_us
Step3: Create Paper Menu Item
To connect created paper anchor link with the menu item go to Appearance > Menus add new custom link and fill paper name and paper url:
Step4: Create Paper Nested Section Menu Item
- There is also ability to navigate to the section inside paper.
- All SectionID‘s and PapreID‘s should be unique.
- Generate section anchor link as described above in the Connect Menu Items with Section for Plain View.
- In the menu item always point to the paper anchor link not to the first section
Sections #
Page Builder page template contains different sections which are intended to create a CV page.
Intro
Intro section existing separate from the other sections. It always appeared as the first section and can’t be rearranged with the other sections. In case you don’t want to use Intro you can hide it. Read more detailed info about the Intro Section here.
Sections
All other available sections located under the Sections tab. To add a new section click on the Add Row button, all available sections will be listed inside the tooltip. Click on the section name, after that it will appear under the Sections tab and will be ready for customization.
Each section has its own options. Click on the arrow to show/hide section options.
We recommend to keep sections closed and open them only at the time of editing, this will help to manage page layout more faster and spend less time scrolling up and down to find the desired section or field.
Add Row will add section at the very end, it is possible to add new section between sections by clicking on the + button.
Remove a section with the – button.
Change sections order by drag and drop.
Find more detailed information about each section customization and purpose in the appropriate unit below.
Sections Title Type
It is possible to choose title type for all section from Customizer > Paper & Section Settings. Selected title type will apply for all sections. There is no ability to choose title type for section individually.