Hybrid Composer overview
Hybrid composer is a back-end page builder with advanced features. It's completely integrated with the theme so you don't need to worry about compatibility issues.
Before start using it you should understand these concepts:
- All components are composed of two parts: settings and content. Content is directly editable and consists of text, icons or images. Settings are accessible by gears icons.
- Spaces are always needed. You should use the space component for every vertical space.
- Texts content should always use text block component. All the demos has been created using the text block component, this ensure easier content management and a better design. Text editor is not recommended but there are some situations where you might need to use
- Some settings and components have info tooltips, so make sure to hover the mouse over the settings name to get more information.
- Content is based on 3 components: sections, columns and components. You'll always start with a blank section, then add the columns, then the components.
Composer page options:
Composer or classic mode. The classic mode is the default WordPress editor, you can set classic mode to copy the composer array and paste it in other pages.
The locked mode blocks the page editing and hides some features. With locked mode activated you can only edit the content. Is not possible to add any new content, the layout is more compact and user friendly. The locked mode prevents accidental damage and simplifies the page administration. Locked mode is auto activated on lists - post type single items.
Show the page content formatted as array, this feature allow you to view all the values of every component of the page and it's useful for advanced customisations.
Use it to insert your custom CSS classes for the current page.
Templates allow you to save the current page and use it in other pages. To save the current page add the template name and click on save template. A success message will prompt and the template will be available after page reload. To use your saved templates select the template you want and wait a few seconds. There are also built-in templates, use them to add new pages in seconds. Please note that adding templates will delete your current content!
Clear the cache and reload
Hybrid composer uses a cache system to improve the performance. If you content is not updated, use this feature to clear the cache of the current page and reload the page with the latest content.
Custom page settings:
Allows you to overwrite some options that has been set on Appearance > Theme Pptions. The custom settings will only be applied to the current page.
Use it to move sections, columns and components by clicking and dragging on the move icon.
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.
Every column can be animated and can animate it's 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.
The timeline animates multiple columns and components sequentially, one after the other. You must apply the timeline animation to the parent column and all the child columns will be animated.
Custom codes and CSS
You can add custom CSS values and more to sections, columns and components by clicking on the top right icon .
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 customisation, the ID is unique and never changes. You can edit change it with any string you want, but only use letters and numbers.
The default classes are built-in classes useful for many scopes:
White Converts all colors of inner components to white; use this for sections with dark background images or videos
Col center centers a column; use it in combination with text-center class
Section bg color Sets the default background color (usually a light grey, eg. #f7f7f7)
Bg color Sets the main color (set in theme options) as background color
No paddings Removes all paddings; use it in combination with No margins for fullscreen content like sliders
No padding bottom Removes only the bottom paddings
No paddings y Removes only top and bottom paddings
No paddings x Removes only left and right paddings
No margins Removes all margins; use it use it in combination with No paddings for fullscreen content like sliders
Pull right Moves the object to right
Bg cover Default background image classes; use in combination with custom CSS style background-image:url()
Bg transparent Removes all backgrounds
Boxed Sets a boxed design with the main color as background; use it in combination with class white
Boxed inverse Sets a boxed design with white background
Circle Sets the object to as a circle shape
Clear Use it to fix floating problems
Text color Sets Main color to current text
Text center Aligns text to center
Text right Aligns text to right
Text left Aligns text to left
Text justify Justifies the text
Text bold Sets bold font weight, font-weight: 600
Text black Sets ultra bold font weight, font-weight: 900
Text light Sets light font weight, font-weight: 300
Text xxl Sets extra extra large font-size, default font-size: 90px
Text xl Sets extra large font-size, default font-size: 60px
Text l Sets large font-size, default font-size: 36px
Text m Sets medium font-size, default font-size: 16px
Text s Sets small font-size, default font-size: 13px
Text xs Sets extra small font-size, default font-size: 12px
Font 2 Set the secondary font (set in theme options)
Hidden xs Hides the object only on smartphone devices
Hidden sm Hides the object only on tablets and smartphone devices
Hidden md Hides the object only on tablets, smartphone and small desktop devices
Hidden lg Hides the object everywhere
Visible xs Shows the object only on smartphone devices
Visible sm Shows the object only on tablets and smartphone devices
Visible md Shows the object only on tablets and small desktop devices
Visible lg Shows the object on tablets, smartphone and small desktops devices
Col sm 12 Forces a column 12 on tablets and smartphones
Text center smAligns center only on tablets and smartphones
Text center xs Aligns center only on smartphones
Text right xs Aligns right only on smartphones
Text right sm Aligns right only on tablets and smartphones
Text left xs Aligns left only on smartphones
Text left sm Aligns left only on tablets and smartphones
Pull none xs Removes the floating (pull-right) on smartphones
No bg xs Removes the background image on smartphones
Height full xs Sets a 100% height only on mobile devices
Scroll hide Hides the object on page scroll
Scroll show Shows the object on page scroll and adds class showed, this class is removed on scroll top
Scroll change Adds class scroll-change to the object and add class scroll-css on page scroll, this class is removed on scroll top
Full screen size Sets the height to full screen size
Vertical row Centers the elements horizontally 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" to remove the proporzional height.
Middle content The content inside the component with this class is centred on middle. Use it with the columns
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.