Pagebuilder Guide
User Manual:
Open the PDF directly: View PDF 
.
Page Count: 32
iMaginem
PageBuilder
iMaginem Page Builder
2
Table of Contents
Overview of PageBuilder 3
Activating Page Builder 4
Activating Page Builder on Pages 5
Page Builder Activated 6
Exporting and Importing Blocks 8
Blocks 9
Adding a Block 10
Block Controls 11
Resizing a Block 12
Edit a Block 13
Columns 14
Organize the Blocks in Grids 14
Add a Column 15
Columns with Blocks 16
Edit Columns 17
Adding Column IDs and Notes 18
Row of Columns 19
Export & Import Blocks 20
Export a Block 21
Import a Block 22
Export All Blocks 23
Import Multiple Blocks 24
Managing Page Builder Templates 25
Saving a Template 26
Loading a Saved Template 27
Deleting a Saved Template 28
Export All Saved Templates 29
Import Templates 30
{ end } 31
iMaginem Page Builder
3
PageBuilder status
Archive Blocks
Builder Helpers
Template Setters
Highlighted block indicating recent action.
( Added or Moved inside builder )
Block Sections
Live Search for
Blocks
Overview of PageBuilder
Activating Page Builder
1
Activating Page Builder on Pages
1. Choose 'Add New' page
2. Select 'Use Pagebuilder for this page'
Activating Page Builder on Pages
2
Page Builder Activated
PageBuilder can be moved
so it appears above
or below other Page
Metaboxes
using Metabox Handle.
It can also be toggled using
the handle indicator.
Choose 100% Width page to
display a page with pagebuilder
without margins, spacings or
title section.
Edge to Edge layout is the same
as 100% Width Template.
Page Layout for 100% Width Pages.
iMaginem Page Builder
8
Export block data
for all blocks seen
in Page Builder
area.
Import Individual blocks
or multiple blocks using
export data
Add Preset Templates
Exporting and Importing Blocks
Export Individual Block
Blocks
iMaginem Page Builder
10
Adding a Block
1
Click
to add a
block
Added Block with highlight indicating recent movement
2
iMaginem Page Builder
11
Block Controls
Export block
Duplicate block
Edit block
Delete block
1
2
3
4
iMaginem Page Builder
12
Resizing a Block
Increase or descrease block size.
Size indicator
Can be increased by
resizing with mouse click
dragging from the edge
Hover at the edge to find
Resize indicator.
iMaginem Page Builder
13
Edit a Block Edit block
1
Apply and Close.
2
3
Editing Displays a popup
to edit settings.
Columns
Organize the Blocks in Grids
iMaginem Page Builder
15
Add a Column
1
2
3
iMaginem Page Builder
16
Columns with Blocks
Column with Blocks added inside it.
1
iMaginem Page Builder
17
Edit Columns
Edit Columns to apply
paddings and backgrounds
1
Edit Columns
iMaginem Page Builder
18
Adding Column IDs and Notes
1
2
1
2
Column ID
Column IDs can be used for various purposes such as for Jump links or CSS style targetting to isolate others.
Block Note
Add a small note to make it easy for column indentification within pagebuilder when there are multiple
columns.
iMaginem Page Builder
19
Row of Columns
Row of columns
In a row of columns the properties such as background color, background image or
margins are applied from the first column to the whole row.
Background is set from first column in the Row.
1
1
2
2
3
3
4
4
Background from 1st Column in the Row.
Export & Import Blocks
iMaginem Page Builder
21
Export Control
1
Export a Block
2
Single block import code
Select All and copy the export code
which can later be used to import the
blocks.
iMaginem Page Builder
22
Import a Block
Import Blocks
1
2
Import Blocks
Paste code and press import button to
import single or multiple blocks. New
blocks will appear at the end of exisiting
blocks.
iMaginem Page Builder
23
Export All Blocks
Export All Blocks
1
2Import code for all blocks
Select All and Copy the export code.
Export code contains all blocks seen in
page builder.
iMaginem Page Builder
24
Import Multiple Blocks
Import Blocks
1
2Import Blocks
Paste code to import all blocks.
Managing
Page Builder
Templates
iMaginem Page Builder
26
2
1
Save Template
Click this button to Save Template. Enter a unique
template name and choose 'Save'
Saved Template selector.
Saved Templates will appear in this selector.
Saving a Template
iMaginem Page Builder
27
Loading a Saved Template
1
Template loader
Simply choose a saved template
from this list to load the saved
template.
iMaginem Page Builder
28
Deleting a Saved Template
1 2
Template selector
Choose template to delete.
Delete Template
Cick Delete Template to delete the
selected template from the list. This
process doesn't undo.
iMaginem Page Builder
29
Export All Saved Templates
1
Export Saved Templates
Choose to grab export code for all
Saved Templates in the template
selector.
Code for importing.
Select All and copy.
Save these codes in a text file if you wish
to keep them for later use.
2
iMaginem Page Builder
30
Import Templates
1
Import Templates
Click to Import Templates
Import Builder Templates
Paste previously copied from
export templates data.
Importing will replace all
existing temapltes with new
ones.
2
{ end }
Thank you from iMaginem
We’d be glad to help you if you have any questions.
The support forum can be found at
http://support.imaginemthemes.co/
