Basic operation#
The component library contains templates for a number of component types. One or more components can be created within each component type. Components can be edited, but not deleted.
Additionally, if this Network is part of a MainCross Assembly Line, then components from other Networks may be available within the Component Library. These inherited components can be viewed (and inserted via the Page Builder) but cannot be edited.
All components (created or inherited) are available in the Page Builder* to create rich Featured pages.
Each component can have the following meta data for reference, filtering and searching in the dashboard - tag and notes. These do not display with the component.
* The Banner component is available under Hero Dashboard > Network Dashboard > Essential config > Misc section
Styling
All components have a simple default styling when created. The component can be used as is with the default styling.
A Blurb component once created, can be styled in many ways inside the Page Builder. This is a unique method that allows for the same component's data to be presented in different ways on different pages, without having to create components repeatedly.
See examples of component styling here:
Inserting into a Featured page
All component (except Banners) are available as blocks in the Page Builder and can be inserted into one or more times into one or more Featured pages as desired. Components inserted into any Featured Page are NOT automatically updated if any changes to the component is made in the Component Library.
If the latest version of the component is required to be displayed, then it must be reinserted on the Featured page(s).
Types of components#
- Blurbs
- Blurb collections
- Announcement banners
- Team profiles
- Testimonials
- Image carousels
- Image grids
Blurbs
This component is a work horse. 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.
Each blurb can decide between a 1:1 or 2:1 aspect ratio image.
Blurbs can optionally have a Call To Action button linked to any URL - internal, external or on-page anchor.
This component can also be used for profiles, testimonials etc - however we recommend using the specialized components for those.
In order to make it easy to match the blurb's colors with the site colors, an image "recolor" utility method is provided. This will first remove all color detail from the image and then repaint with the selected color. This method does not work on photo kind of images and is particularly suitable for icons, illustrations and line drawings, etc with a transparent background. Your mileage may vary, hence please experiment and see if it meets your needs.
Blurb collections
Blurb collections are blurbs on steroids - they 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.
Instead of individually adding blurbs to the Page Builder one by one, its easier to define a Blurb collection and then insert that via the Page Builder.
For best results select similar blurbs, ie images with the same size and aspect ratio, and similar lengths of texts.
Announcement banners
This component is used to display a sleek alert bar at the top of the site.
- Banners can be of 3 types - info, warning and error, and can optionally be "attention grabbing"
- Each banner displays a short string of information, and can optionally have a button that links to a URL.
- Unlike other components, only 1 Banner can be active on the site at any time.
It is highly recommended that banners are used sparingly and only for important announcements.
Team profiles
This component is used to showcase a "profile". The profile fields are versatile and can be used for an individual or organization etc.
It can optionally link to Facebook, Twitter, LinkedIn, Instagram or a website.
Testimonials
This component can be used to showcase a review or testimonial or customer quote, etc.
Image carousels
This component is used when one wants to display multiple "slides" - full width images with an optional caption. Slides can be reordered as desired.
When live, the carousel can automatically rotate the slides. And a user may manually move the slides forward or back.
The image carousel can also be used to display a single hero image - just create a component with only 1 slide!
Image grids
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.
The image grid is used to display between 5 and 16 images.
