General documentation

Hybrid composer

GETTING STARTED

Hybrid composer is a back-end page builder with advanced features. Before start to use it you should understand these concepts:

  • All components are composed by two parts: settings and contents. Contents are texts, icons and images and are directly editable. Settings are accessible by gears icons.
  • Spaces are always needed. You should use the space component for every vertical space.
  • Texts contents should always use text block component. All the demos has been created using the text block component, this ensure a more easy content management and a more good design. Text editor is not adviced in most of situations
  • Settings and components contain help informations, for show it move the mouse over the setting and wait some second. Help is available only for some setting.
  • All website contents are based on 3 components: sections, columns and components. You will build your pages by add sections and into the section by add the columns and into the columns the components.

Before star build your website you need only to understand how work the sections and the columns:


COMPOSER PAGE OPTIONS


Editor mode
Composer or classic mode. The classic mode is the default WordPress editor, you can set classic mode for copy the composer array and past it in others pages.

Locked mode
The locked mode block the page editing and hide some feature, with locked mode activated you can edit only the contents like texts, images and some setting. Is not possible add any new content, the layout is more compact and more user friendly. The locked mode prevent damages from not tech users and simplify the page administration. Locked mode is auto activated on lists - post type single items.

Composer content
Show the page content formatted as array, this feature allow you to view all the values of every component of the page and is useful for advanced customizations.

CSS
Here you can insert your custom CSS classes for the current page.

Templates
Templates allow you to save the current page and use it in other pages. To save the current page insert the template name and click on save template, will appear a success message and the template will be available after page reload. To use your saved templates select the template you want and wait some second. There are also built-in templates, use it for add new pages in seconds.

Clear the cache and reload
Hybrid composer administration contents of your pages use a cache system for improve the performance, if you see not updated contents like the post types categories click this button to remove the cache of the current page and reload the page with the latest contents.

MOVE

You can move sections, columns and components by click on top right icon . This is drag and drop system and you need to maintain clicked to left mouse button until you moved the mouse on the position you want.

ANIMATIONS

Every column can be animated and can animate his child columns with the timeline feature. To set a animation click on animation button and select your animation. The animation will be showed on page scroll, when the column is visible.

Timeline
The timeline animate multiple columns at same time, sequentially, one after the other. To create a timeline you must add a parent column, activate the timeline, and add into this column other columns, the child columns that will be animated.

Advanced customizations
Add new animations is easy, there are also many features not used in the WordPress administration but you can use it with custom codes, check HTML documentation for all details.


DUPLICATE

You can duplicate sections, columns and components. To duplicate click on top right icon . The duplicated object will be placed on right of original object and will contain all the settings and contents of the original object.

CUSTOM CODES AND CSS

You can add custom CSS values and more to sections, columns and components by click on top right icon .

ID
On top right you can see the ID of the object, you will need it for one page and full page menus, for lightbox containers and also for advanced customizations, the ID is unique and never change. You can edit change it with any string you want, but use only letters and numbers.

Default classes
The default classes are built-in classes useful for many scopes.

General
White Convert all colors of inner components to white, use this for sections with background image or video
Col center center a column, use it in combination with text-center class
Section bg color Set the default background color
Bg color Set the main color as background color
No paddings Remove all paddings, use it in combination with No margins for fullscreen content like sliders
No paddings y Remove top and bottom paddings only
No paddings x Remove left and right paddings only
No margins Remove all margins, use it use it in combination with No paddings for fullscreen content like sliders
Pull right Move the object to right
Bg cover Default background image classes, use in combination with custom CSS style background-image:url()
Bg transparent Remove all backgrounds
Boxed Set a boxed design with the main color as background, use it in combination with class white
Boxed inverse Set a boxed design with white background
Circle Set the object to as a circle shape
Clear Use it for fix floating problems

Text
Text color Main color
Text center Align text to center
Text right Align text to right
Text left Align text to left
Text justify Justify the text
Text bold Set bold font weight, font-weight: 600
Text black Set ultra bold ont weight, font-weight: 900
Text light Set light font weight, font-weight: 300
Text xxl Set extra extra large font-size, default font-size: 110px
Text xl Set extra large font-size, default font-size: 50px
Text l Set large font-size, default font-size: 27px
Text m Set medium font-size, default font-size: 18px
Text s Set small font-size, default font-size: 13px
Text xs Set extra small font-size, default font-size: 11px

Mobile
Hidden xs Hide the object only on smartphone devices
Hidden sm Hide the object only on tablets and smartphone devices
Hidden md Hide the object only on tablets, smartphone and small desktop devices
Hidden lg Hide the object everywhere
Visible xs Show the object only on smartphone devices
Visible sm Show the object only on tablets and smartphone devices
Visible md Show the object only on tablets and small desktop devices
Visible lg Show the object on tablets, smartphone and small desktops devices
Col sm 12 Force a column 12 on tablets and smartphones
Text center smAlign center only on tablets and smartphones
Text center xs Align center only on smartphones
Text right xs Align right only on smartphones
Text left xs Align left only on smartphones
Pull none xs Remove the floating (pull-right) on smartphones
No bg xs Remove the background image on smartphones

Functions
Scroll hide Hide the object on page scroll
Scroll show Show the object on page scroll and add class showed, this class is removed on scroll top
Scroll change Add class scroll-change to the object and add class scroll-css on page scroll, this class is removed on scroll top
Full screen size Set the height to full screen size
Vertical row Center horizontally the elements into the object, supported only by columns and sections
Middle content The content inside the component with this class is centered on middle. Use it with the columns

For more informations check the HTML documentation.


Custom css classes
Here you can insert multiple custom classes separated by space. Ex. my-class-1 my-class-2 my-class-3.

Custom css style
Here you can insert multiple custom css styles. Ex. color:red; text-transform:uppercase.