General documentation

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:

Section docsColumns docs

Composer 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.

Custom page settings

By click the Page settings button you can overwrite some option that has been setted on Apparence > Theme options. The custom settings will be applied only to the current page and overwrite the settings of the Theme options panel.

Page lightbox and popup

This feature is deprecated and it's no more available on the latest themes (all themes published after May, 2019).

Every page can show a fullscreen content or a popup page on load. The expiration value is the number of days of waiting before show again the popup\lightbox to the user, se to 0 for show it always. You can set a link that will be open when the user click the popup\lightbox. The lightbox image deactivate the content, so you can show the image or the content but not both two. For a live preview check the HTML documentation by click the link below.

Live preview and HTML docs

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. You can also use Copy and paste method to move the objects.

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 and components 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.

HTML animations

Duplicate

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

Copy and paste

You can copy a component, column or section and paste it later on another position of the same page or into another page. To copy open the Settings box by click the top right gear icon (

) and click the top right icon of the two black and white squares icon (

). To paste it click the plus icon (

) to add a new component, column or section and click the two black and white squares icon (

). To paste a section click the same icon with the two black and white squares on the bottom of the page (

)

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 padding bottom Remove only the bottom paddings.
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
Font 2 Set the secondary font, you can set the secondary font from Theme options panel

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 right sm Align right only on tablets and smartphones
Text left xs Align left only on smartphones
Text left sm Align left only on tablets and smartphones
Pull none xs Remove the floating (pull-right) on smartphones
No bg xs Remove the background image on smartphones
Height full xs Set a 100% heigh only on mobile devices

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
Proporzional row All the children columns and components will have the same Height. Use class "clear-proporzional" for remove the proporzional height.
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.

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
Light Convert all colors of inner components to white, use this for sections with background image or video
Align left Align the content on left
Align right Align the content on right
Align center Align the content on center
No padding Remove all padding, use it in combination with No margins for fullscreen content like sliders
No padding top Remove only the top padding
No padding bottom Remove only the bottom padding
No padding y Remove top and bottom padding only
No padding x Remove left and right padding only
No margin Remove all margins, use it use it in combination with No padding for fullscreen content like sliders
Justify content center Center horizontally the columns, assign it to a parent column that contain other columns
Section color Default background color, assign it to the sections
Boxed area Set a boxed design with the main color as background and padding. Assign this class to columns or components
Clear Use it for fix floating problems

Text and alig
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 lg Set extra large font-size, default font-size: 110px
Text md Set large font-size, default font-size: 50px
Text sm Set medium font-size, default font-size: 27px
Text xs Set small font-size, default font-size: 18px
Font 2 Set the secondary font, you can set the secondary font from Theme options panel

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 md 12 Force a full width column on tablets
Col sm 12 Force a full width column on smartphones
Col md 6 Force a half width on tablets
Col sm 6 Force a half width on smartphones
Col md 4 Force a 1/3 column on tablets
Col sm 4 Force a 1/3 column on smartphones
No margin md Remove the margin only on tablets
No margin smRemove the margin only on smartphones
No margin xs Remove the margin only on small smartphones
Full width md Force a 100% full width only on tablets
Full width sm Force a 100% full width only on smartphones
Align left md Align the content to left only on tablets
Align left sm Align the content to left only on smartphones
Align center md Align the content to center only on tablets
Align center sm Align the content to center only on smartphones
Align right md Align the content to right only on tablets
Align right md Align the content to right only 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 Set the height to full screen size
Align items center Center horizontally the elements into the object, supported only by columns and sections

For more information check the HTML documentation at https://themekit.dev/docs/.

CSS 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.