Table of contents:

Getting started

  • Overview
  • Quick look at the website builder

Page Builder

  • Getting Started
  • Quick Tour
  • Widgets

Header Builder

  • Getting started
  • Quick Tour

Footer Builder

  • Getting started
  • Quick Tour

Live customizer

  • Basic Usage
  • Layout Width and Space
  • Typography

Miscellaneous

  • Colors
  • Performance
  • Issues and feedback

Changelog

  • 1.0
  • 1.1
  • 1.2
  • 1.3

Getting Started

This part of the Document contains the introduction and guidance for Web Graffiti Page builder, the most powerful tool in our Ecosystem.

Overview

Web Graffiti Page Builder is developed under a WordPress Plugin, lets you easily build and edit grid based page with Web Graffiti. This plugin is shipped with a bundle of beautiful features, some are:

  • Modern & minimal user interface design
  • Completely frontend environment
  • 180+ pre-designed cards
  • Create and manage templates
  • Optimised for responsive layouts
  • 60+ widgets
  • Inline text editor
  • Supports shortcuts
  • Undo/Redo

Quick Look at the Website Builder

It is highly recommended for you to go through this page for understanding basic ideas behind the Plugin.
The Plugin is powered by the four core tools including Live Customizer, Page Builder, Header Builder and Footer Builder.

  • Live Customizer: control global style of your site for example, customizing typography, setting up global color, etc.
  • Header Builder: build unlimited headers for your site, providing solutions to deal with responsive menus, coming with drag drop and live-editing features.
  • Page Builder: saving your time to create either a simple or complex responsive layout with many advanced features such as drag drop, live-editing, inline text editing, wireframing.
  • Footer Builder: build unlimited footers for your site with drag drop and live-editing features.

Consistent Ecosystem

Although each visual builder tool is completely a dependent app, we commit to ensure consistency in User Interfaces , which will develop a harmonious routine when you build your website with Web Graffiti.

Frontend Working Environment

Most of your time will spend on Frontend Working Environment. Each system interface is minimal by design. They are divided in to two main areas

  • Sidebar: a pane on your left, contains main settings to customise your layouts
  • Preview: a canvas on your right site where you will see your designs

UI Editors

UIs like as sliders, colorpickers are core components of the app. They are consistent across our systems and responsible for changes in your site’s layout and style.

Systems Switch

Although these System work independently with each other, it is easy to switch between each by clicking on the PLUS icon on the top left of the System Sidebar. Then, a popup will show options to help you navigate to another System.

Responsive Settings

Responsive Web Design makes your web page look good on all devices (desktops, tablets, and phones).
It is easy to resize the preview screen to tablet and mobile devices. Simply click on device’s icons on the bottom of Sidebars or pressing 1, 2, 3 or 4.
You are able to specifically modify style models for tablet and mobile devices via responsive Editors. If you see three icons of devices on the top right of UI editors, this means these editors support responsive mode.

Shortcuts

Every App in the Ecosystem supports keyboard shortcuts, like closing a popup with ESC or duplicating a widget by + D. Mastering these shortcuts really helps to increase your productivity, get your job done faster.

To show available shortcuts on the using System, click on PLUS → Help or simply press ?. You also can look up those Shortcuts from the Document

Templates

Starting from scratch each time you need a frequently-used Layout or Style is inefficient use of your talent. With every single App in our Ecosystem, you can create templates to save you both time and effort. Additionally, there are further options to import or export those templates. For detailed information, please visit:

Page Builder

Quick Tour

This chapter will walk you through the most important concepts behind Web Graffiti Page Builder and explain how you can get started quickly with the plugin.

Builder App

The Page Builder supports all pages, post and custom post-type like portfolio. Once activating the Page Builder from an entry, you will be directed to the main app area containing 4 main working tabs:

  • Map: the visual hierarchy of a nav, displaying the layout’s sections, rows, columns and its nested widgets. You can drag and drop to move the positions of widgets or perform actions like deleting or editing widgets from the tab.
  • Widgets: containing common web components like text or icons, currently the app supports nearly 70 widgets.
  • Editor: the area provides UIs to change settings and styles of a dropped widget.
  • Library: where to save and manage all of your saved layout templates.

Layout

We organized layouts through grid systems built by a series of sections, rows and columns that house your content.

  • Main Layout: contains one or more Sections
  • Each Section: contains one or more Rows
  • Each Row: contains one or more Columns
  • Each Column: contains one or more Widgets

Note: Some special Widgets like Grid or Aside Image can host other Widgets.

Widgets

Widgets are the web components like flip boxes, images or icons. A web page simply is a combination of the components. In the system, Sections, Rows and Columns also are those components but they play a role as the core elements.

To use Widgets, you must already have at least a column available in your Layout since it is where to house your Widgets. If so, simply click on the Widgets tab, then drag and drop your wished widget into that column.

Once your Widget is created, simply click on it to navigate to Editor panel then start to style the Widget.

Templates

Web Graffiti Page Builder provides options to save and manage both layout and widget templates.

Layout Templates
You are able to save your current layout containing all sections into a Library. Simply navigate to Library Tab click on Floppy Disk Icon, after that enter your template’s name then hit enter or click on the save button.

Widget Templates
Besides saving all current layout, you also are able to store the current display of a widget into its own library. There are three ways to save a widget, one from the editor tab, the second is to right click on a widget and click on save as template. However, the fastest way is to hover on the widget you want to save, then press ++S. After that, fill the template name and hit enter to complete the action.

Visual Layer

When you hover your mouse on a widget, a blue overlay will appear on the top of the widget called Visual Layer. The Visual Layer is extremely useful in editing and visualizing the scope of Widgets and filtering the structure of your Layout (press  or +1, +2, +3, +4).

However, since those Layers are displayed above the widgets, you won’t be able to hover on some components having ‘hover effect’ like buttons. In that case, you must turn off the Visual Layers to be able to hover on the buttons. To do so, click on the Visual Switch button on the bottom of the app’s sidebar or simply press `.

Inline Text Editor

Besides the WYSIWYG editor from the app’s sidebar, the Page Builder also supports Inline Text Editor. To enable the mode, you can either click on the pencil icon on the right side of your screen or use the Shortcut +E.

Shortcuts

To show available shortcuts, click on PLUS → Help or simply press ?

General
Shortcut Description
+S Save
ESC Closes any pop-up window or panel, like this one
O-P Open preview page
O-K Open custom code panel
O-I Open wireframe pop-up
O-L Open library pop-up
TAB Switch between map, widgets, editor, library tab
1 2 3 4 Resize preview screen to mobile, tablet, laptop, desktop size
` Turn on/off Visual View
Collapse Sidebar
+E Open Editor Mode
? Open Help Panel as it is

Editor
Shortcut Description
+Z ++Z Undo, Redo
+C Copy
+X Cut
+V Insert to the Bottom of parent or insert after the same level
++V Insert to the Top of parent or insert before the same level
+D Duplicate
++S Save as Template
T Open Item Template
Space Scroll to the edited Widget and switch editor tab
Resize column width

Highlight Layer
Shortcut Description
Show all layer
+1 Show section layer
+2 Show row layer
+3 Show column layer
+4 Show item layer

Other
Shortcut Description
+Left Click on item Open the map of the clicked item
Right Click on colorpicker circle Open the color collection
+Drag on unit input Equally change in pair left and right or top and bottom
++Drag on unit input Equally change value of left, right, top and bottom
+TAB on editor panel Open Jumper Tabs

Widgets

Basically, editing a widget is quite straightforward. However, there are some widgets which need special configurations to work properly. This chapter will give you the clear instruction for using those widgets.

Tab Widgets are used to show/hide parts of your web pages. The parts here can be sections, rows, columns or widgets as long as they are assigned an ID value.

There are two kinds of Tab widgets which are Button Tab and Thumbnail Tab. There is no difference in configuring the two widgets, hence, this section will only show you an example for building a testimonial section with Thumbnail Tab widget. Hopefully, You then can take the same approach to build your own with Button Tab widget.

Header Builder

Quick Tour

This chapter will walk you through the most important concepts behind Web Graffiti Header Builder and explain how you can get started quickly with the plugin.

Header Manager

Basically, Header manager functions similarly to WordPress Posts List as it performs CRUD actions like creating, updating or removing headers. However, we designed it to be a Single Page application to handle those tasks without refreshing your browsers.

Unlimited Headers

There are unlimited headers you can create but normally a website has one or two fixed-designed headers. For example, your site might have two headers, one with transparent background and white text for pages contains a hero image, one with white background and black text for the other pages. Sometimes, you may need to design another Header for some special pages like the maintenance page or 404 page.

Assigning Headers

You can assign a specific header for any page, any single post type and its archive page.

There is a option field called Primary Header on the right side of the Header Manager, it simply is the default header for your site. If you create a new page or don’t select any header for a post type, these pages will always select the primary header to display.

For pages, you can either choose to display a header or not. If you wish create a page without a Header, simply select no header value from the Header metabox on the right side of the page’s admin area.

Builder App

Although the term navigation normally indicates links or menus of a website, we defined it as the area contains links, information data and typically is used in multiple pages. Based on the definition, there are two kinds of navigation you can build with our Header Builder. They are Horizontal Nav and Vertical nav.

  • Horizontal Nav: a traditional header, normally displayed on the top of a website, where the inside elements is organized horizontally.
  • Vertical Nav: a fixed aside area, displayed on the right or the left of a website, where the inside elements is organized vertically.

You can either choose one or both to be in the same design context. Multiple creation of one type is also allowed.

Nav Builder Area

One you create a nav, simply click on it to open its builder area. For both vertical and horizontal nav, the UI is similar with four main tabs.

Footer Builder

Quick Tour

This following section will walk you through the most important concepts behind Web Graffiti Footer Builder and explain how you can get started quickly with the plugin.

Footer Manager

The Footer Manager functions similarly to WordPress Posts List as it performs CRUD actions like creating, updating or removing footers. However, we designed it to be a Single Page application to handle those tasks without refreshing your browsers.

Unlimited Footers

There are unlimited footers you can create. Normally you should only have one footer. However, in some special cases such as doing an A/B test, you can consider to have more than one footer.

Assigning Footer

You can assign a specific footer for any page, any single post type and its archive page.

There is a option field called Primary Footer on the right side of the Footer Manager, it simply is the default footer for your site. If you create a new page or don’t select any footer for a post type, these pages will always select the primary footer to display.

For pages, you can either choose to display a footer or not. If you wish create a page without a footer, simply select no footer value from the Footer Metabox on the right side of the page’s admin area.

Builder App

Basically, the functions and interface of the Footer Builder are mostly similar to the Page Builder. The interface contains four main working areas.

  • Map: the visual hierarchy of a nav, displaying the layout’s sections, rows, columns and its nested widgets. You can drag and drop to move the positions of widgets or perform actions like deleting or editing widgets from the tab.
  • Widgets: containing common web components like text or menus.
  • Editor: the area provides UIs to change settings and styles of a dropped widget.
  • Footer: containing options to change settings and styles for the footer itself.

Live Customizer

Builder App

This tool is designed to custom global styles of your site, such as Layout, Spacing, Typography, Color. It is quite similar compared to WordPress Customizer. The core features include:

  • Real-time changing style
  • Direct Links
  • Undo and Redo
  • Support Shortcuts
  • Creating and Managing Templates

You can access the Live Customizer from any page admin toolbar or simply navigate to Admin Dashboard → Site Options → Live Customizer to open the tool for your front page.

Undo/Redo

The Live Customizer supports Undo/Redo feature to help you easily revert your previous actions. You can either click on the buttons on the top of Sidebar or use the two common shortcuts +Z or ++Z.

Templates

Not only you can save your data in normal way, the all of the current style can be saved in a template for further usage. The Live Customizer also provides options to manage all the template you have saved.

Save to a Template

To save your current style into a template, simply click on TEMPLATE → Save to a Template → Enter Template Name. After that, click on Save button or hit Enter to complete the action.

Use and Manage your Templates

To open the list of saved templates, click on TEMPLATE → OPEN TEMPLATES or simply press O-I.

After open the Template Panel, to apply a template, simply click on the template name you want to use. To back to the preceding style, simple click on undo button or press +Z.

There are also options to import, export and delete templates. Template(s) is exported and imported in JSON format. For delete action, please notice that this is a permanent action, it means the removed templates cannot be recovered.

Reset to Default

The Live Customizer has an option to reset itself to its default settings. To find this option, click on the undo button on the right site of the panel title.

Please notice that each reset button works independently as its scope extends for only the panel containing that button. It means when you trigger panel A’s reset button, only the options from panel A and its child panels can reset. In the case you want to reset all options to their default values, make sure to use the reset button from the root panel.

Miscellaneous

Widget Default Colors

Web Graffiti allows to specify default colors for Builder Tools’s Widgets via Live Customizer → Builder Tools → Widget Default Colors.

These colors will be applied as default values for Widget custom fields like text color, icon color, etc.

Specify Global Colors for Widgets in Live Customizer

Colorpicker

The plugin supports a functional colorpicker to help you easily pick your favorite color in both HEX or RGBA format. Besides that, it also has other beautiful features:

  • Recently Picked Colors: the system automatically save your recently picked color in a history. You can drag to move the position of those saved colors.
  • Color Presets : your can save your favorite colors as presets. Drag to move the position of the saved colors. In the case you want to remove a color, right click on a color and select remove.

The colors saved in Color Presets and Recent Picked are consistent across our Ecosystem. As long as your use the same browser, those colors will be the same on all Builder Tools as well as Live Customizer.

Changelog

1.0

Added

  • Enqueue jquery in the case few themes do not use the library

Changed

  • Fix unload Typekit and Uploaded font list in Live Customizer
  • Improve frontend compile engine
  • Fix collapse bug for counter widget of Page Builder

1.1

Added

  • Free starter theme in plugin package, specially designed to work with Web Graffiti
  • Provide basic website functionality such as post, blog, 404, maintenance mode, etc
  • 3 Page Builder Widgets for classic grid post, metro post and slideshow post
  • Contact Form 7 widget for Page Builder and Footer Builder, developed under a WordPress Plugin

Changed

  • Fix missing check icon in Footer Manager when saving
  • Fix lazy image script not work

1.2

Added

  • Portfolio add-on with grid portfolio widget, filter portfolio widget, full portfolio widget for page builder
  • Upgrade Web Graffiti theme from 1.0 to 1.0.1 with banner post widget and carousel post widget for page builder
  • Option to avoid mega menu conflict
  • Contact Form 7 widget for Page Builder and Footer Builder, developed under a WordPress Plugin

Changed

  • Improve add_widget APIs, allow to enqueue external scripts
  • Fix broken links in Site Options
  • Fix frontend image not show when reuploading new gallery image
  • Fix contact form not show from contact cards
  • Fix editor buttons not show on portfolio full widget
  • Fix multisite mode conflict of the starter theme
  • Fix not showing metro style for blog
  • Fix hidden layout after selecting a Header
  • Fix not showing wireframes

We use cookies to give you the best online experience. By agreeing you accept the use of cookies in accordance with our cookie policy.

Privacy Settings saved!
Privacy Settings

When you visit any web site, it may store or retrieve information on your browser, mostly in the form of cookies. Control your personal Cookie Services here.

These cookies are necessary for the website to function and cannot be switched off in our systems.

In order to use this website we use the following technically required cookies
  • wordpress_test_cookie
  • wordpress_logged_in_
  • wordpress_sec

Decline all Services
Accept all Services