The Page Builder can be used to create the website part of "Network Sites". Any number of custom pages can be created to serve any purpose - landing page, marquee, sectional, showcase etc. We called these "Featured pages". Read more in the product story.
Basic operation#
The Page Builder allows rich, dynamic, responsive pages to be created, simply by dragging and dropping Blocks on the page. The builder has 25+ comprehensive blocks that can be used even by a layman to create gorgeous pages with not a single line of code needed.
Each block can be added multiple times, moved around, duplicated, hidden and deleted. All blocks intelligently resize themselves based on the available space. All blocks can be customised.
Component Library blocks vs Direct blocks#
A number of Blocks can be created via the Component Library, while others can be created directly within the Page Builder.
It is highly recommended to create blocks in the Component Library for reuse.
Types of blocks#
The following blocks are available:
Background
The background block is used to create website sections or panels on which various blocks can be placed and laid out. The entire background block can then be treated as one unit - it can be moved, duplicated, hidden etc.
It renders a single color, or gradients, or an image, or a combination of these.
Text
The text block is used for all the text copy on the page. It allows for the creation of rich text, with headings, paragraph, links, lists, etc.
The text can be coloured in 2 ways - from a fixed palette based on the colour scheme already set, or any color from a full spectrum selector.
Spacer
The spacer block is used to insert horizontal or vertical spacing between sections or blocks.
It is recommended not to use this block for horizontal spacing.
It is recommended to use the upgraded block - Vertical Spacer - for vertical spacing.
Vertical Spacer
The vertical spacer block is used to insert only vertical spacing between sections or blocks.
The spacing to be inserted can be controlled for different screen sizes.
Divider
The divider block is used to insert a line between sections. It can have any color and thickness as desired.
It can optionally insert vertical spacing between sections or blocks.
Button / Call To Action
The call to action (and button) block is one of the most powerful blocks. It is versatile and can be used as just a button element or a full Call to Action.
The button URL can link to any URL - internal, external or on-page anchor.
When acting as a Call to Action, the button can be accompanied with some "call to action" text.
Image
The image block is used to display an image - either existing at some URL, or uploaded from a local directory.
Video
Any video from YouTube or Vimeo can be embedded on the page using this block.
Blurb
The blurb is one of the most powerful blocks. It is versatile and can be used to showcase small bits of important information in an eye catching way. Blurbs are the mainstay for most pages that want to present multiply bite-sized info, which optionally lead to other pages or sections on the same page. Eg top features, case studies, major customers etc. It is not meant for large volumes of information.
Blurbs can link to any URL - internal, external or on-page anchor.
It is recommended to create a blurb in the Components Library and insert it via the Blurb from Component Library block.
Blurb from Component Library
This blocks shows all the Blurbs that are available in the Components Library, and any Blurb can be inserted.
Blurb collection from Component Library
This block shows all the Blurb collections that are available in the Components Library, and any Blurb collection can be inserted.
Testimonial
The versatile testimonial block can be used to feature a quote, or review etc from a named entity (person or organization).
Testimonial from Component Library
This block shows all the Testimonials that are available in the Components Library, and any Testimonial can be inserted.
Profile from Component Library
This block shows all the Profiles that are available in the Components Library, and any Profile can be inserted.
Image carousel from Component Library
This blocks shows all the Image carousels that are available in the Components Library, and any Image carousel can be inserted.
Image grid from Component Library
This component is used when one wants to display a set of images in a grid, each of which can then be opened in a full screen gorgeous lightbox. Images can be reordered as desired.
Blurb collection from Component Library
Blurb collections can be used to display a selection of blurbs as a carousel or grid. It is especially useful to showcase grouped info - product or service features, customer logos, etc. Blurbs can be reordered as desired.
Expansion panel
Expansion panels are used to save space for optional information - they show a tiny bit of information that can be expanded to longer information.
Rotating text
The rotating text block is a neat animated block to show small bits of text that appear and disappear in the same space, using a typewriter effect.
Marketplace
A selectable number of Products from the Network's marketplace can be displayed - either selected from all available products, or selected via search and filters.
See a live example here of a featured page with marketplace - https://demo1.maincross.org/featured/yoga-studio-demo-5
Embed product
Any existing product can be embedded on a page - this creates a rich embed for the product allowing 1 click purchase.
See a live example here of a featured page with product - https://demo1.maincross.org/featured/yoga-studio-demo-5
Embed post
Embed any existing post from this Network. This allows rich interactive pages to be created, with (as an example), an embedded form, or event, or poll etc.
See a live example here of a featured page with form - https://www.figsi.in/featured/hosted-buyer
Only 1 such block should be inserted on a page at a time.
Custom feed
Create and insert any custom feed.
Topics
This network's Topic channels displayed as clickable cards
Organizations
This network's Organization channels displayed as clickable cards
Social connections
This block automatically shows clickable icons linked to all the social media handles configured under the Hero Dashboard.
Contact form
Add a contact form to allow visitors to contact the Network Owner account.
Subscribe form
Add a subscribe form for building an email list.
Login component
Add a block for sign in. This block is shown only to unsigned-in users.
Share component
Add a block for sharing the site on social media, via messengers and email.
Network carousel
Insert the pre-created Network carousel.
Schedule meeting
Allows users to schedule a meeting with you using the cal.com service.
Iframe
Embed certain white-listed URLs in an iFrame.
