iMaginem

PageBuilder


iMaginem Page Builder

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

2

Overview of PageBuilder
PageBuilder status

iMaginem Page Builder

Block Sections

Live Search for

Blocks

Archive Blocks

Builder Helpers

Template Setters

Highlighted block indicating recent action.

( Added or Moved inside builder )
3
Activating Page Builder
Activating Page Builder on Pages

Activating Page Builder on Pages

1. Choose 'Add New' page

2. Select 'Use Pagebuilder for this page'

1
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.
Page Layout for 100% Width Pages.

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.


Exporting and Importing Blocks

iMaginem Page Builder

Add Preset Templates Export block data Import Individual blocks
for all blocks seen or multiple blocks using
in Page Builder export data
area.

Export Individual Block

8
Blocks

Adding a Block

iMaginem Page Builder

1

Click
to add a
block

Added Block with highlight indicating recent movement

10


iMaginem Page Builder

Block Controls

Delete block
1

Edit block

Export block

3
Duplicate block

11
Resizing a Block

iMaginem Page Builder

Size indicator

Hover at the edge to find

Resize indicator.

Can be increased by
resizing with mouse click
dragging from the edge

Increase or descrease block size.

12

Edit a Block 1 Edit block

iMaginem Page Builder

2
Editing Displays a popup
to edit settings.

Apply and Close.

13
 Columns
Organize the Blocks in Grids
 15

iMaginem Page Builder

2
Add a Column

3

Columns with Blocks

iMaginem Page Builder

1

Column with Blocks added inside it.

16

Edit Columns

iMaginem Page Builder

1 Edit Columns
Edit Columns to apply
paddings and backgrounds

17

Adding Column IDs and Notes

iMaginem Page Builder

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.

1
2

18

Row of Columns

iMaginem Page Builder

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.

3
2

2 3
4
4

Background from 1st Column in the Row. Background is set from first column in the Row.

19
Export & Import Blocks


iMaginem Page Builder

Export a Block
1 Export Control

2
Single block import code
Select All and copy the export code
which can later be used to import the
blocks.

21

Import a Block

iMaginem Page Builder

1 Import Blocks

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.

22


iMaginem Page Builder

Export All Blocks

1 Export All Blocks

Import code for all blocks

2
Select All and Copy the export code.

Export code contains all blocks seen in

page builder.

23


iMaginem Page Builder

Import Multiple Blocks

1 Import Blocks

2 Import Blocks
Paste code to import all blocks.

24
 Managing
Page Builder
Templates


Saving a Template

iMaginem Page Builder

2

Saved Template selector. Save Template

Saved Templates will appear in this selector. Click this button to Save Template. Enter a unique
template name and choose 'Save'

26
Loading a Saved Template

iMaginem Page Builder

1

Template loader
Simply choose a saved template
from this list to load the saved
template.

27

Deleting a Saved Template

iMaginem Page Builder

1 2

Template selector Delete Template

Choose template to delete. Cick Delete Template to delete the
selected template from the list. This
process doesn't undo.

28


Export All Saved Templates

iMaginem Page Builder

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.

29

Import Templates

iMaginem Page Builder

1

Import Templates
Click to Import Templates

2
Import Builder Templates
Paste previously copied from
export templates data.
Importing will replace all
existing temapltes with new
ones.

30
{ end }
Thank you from iMaginem
Wed be glad to help you if you have any questions.
The support forum can be found at

http://support.imaginemthemes.co/