Summary
The Extensions can be applied to the boxed controls like Box, Layout Container, Text, Header/Footer Area, Slider, Image, etc to achieve different layout and visual effects.
Layout
Align Content
USED FOR: outer control (Container, Section, etc). The effect works for all inner controls.
This extension uses flexbox and aligns controls inside container to which you applied "Align Content" extension. It does not align individual controls.
Content Width - used to set the width for inner content area which contains inner controls. Align Content extension is positioning this area according to the chosen option.
Example:
Fix On Scroll
USED FOR: the control that you would like to fix on scroll (Hmenu, Container, etc).
This Extension toggles fixed position of the element on page scrolling.
Based on bootstrap Affix:
http://getbootstrap.com/javascript/#affix
Flex Column
USED FOR: separate Column inside Columns control. Use in combination with Columns Height: FillHeight(Flexbox).
This extension uses flexbox and stretches container inside column for 100% height.
Full Background
HeadingAndLine
This Extension is used for headings (Page title, Block header, Headline, Headings, etc).
With this extension you can create various types of title underlines:
To create basic underline please follow these steps:
- add relative position for the heading controls, e.g. Block header
- add HeadingAndLine extension to the heading control
- there are two tabs for Before and After lines:
- switch to After Line tab to add bottom underline.
- open Shape Options (see the screenshot above)
- add top border under the Border tab:
- go to the Arrange tab and specify the width for the underline.
To center the underline you should set left and right parameters to 0 and add margin auto under the Padding and Margin tab:
In fact, this extensions utilizes css :before
and :after
css pseudo-elements. Therefore you can create a much more effects based on these pseudo-elements. But this requires special css skills.
Set Page Width
Set Sheet width
Basic
Animation
This Extension applies various animation effects to the controls.
Expand To Bottom
Stretches container to the bottom on short pages. Used to create sticky Footer.
ParallaxBackground
This extension enables Parallax affect for container's background.
NOTE: The effect applies background-attachment: fixed;
to the image. It means that the background will be fixed with regard to the viewport. This may affect the visibility of the image.
Style
Balloon
This Extension applies nice Balloon effect to the boxed elements.
NOTE: To work correctly the control to which you apply this extension should have specified relative position. Please see more details
here.
Paper Shadow
This Extension creates nice shadow corners effect:
NOTE: To work correctly the control to which you apply this extension should have specified relative position. Please see more details
here.
Shadow Inner Out
This Extension applies inner and/or outer Shadow to the selected boxed control.
NOTE: To work correctly the control to which you apply this extension should have specified relative position. Please see more details
here.
Texture Overlay
This Extension adds overlay layer on top of the background of the control. This layer is located under the control's content.
Example:
Original Layout Container control with Text
Layout Container control with Texture Overlay extension (semitransparent layer with black fill color)
Texture Overlay extension settings
NOTE: To work correctly the control to which you apply this extension should have specified relative position. Please see more details
here.
Image
Image To Background
This Extension sets the selected Image as page background.
Scale & Crop
The Scale & Crop effect renders image inside Image controls as a background image.
This Extension can be applied to Image control, TextGroup Image, Post Image, etc.
Hyperlink
Smooth Scrolling
This Extension enables smooth page scrolling to the anchor.
Can be applied to menu controls: Horizontal Menu, Top menu, Vertical Menu, and HTML, Text and other controls with links.
Additional Settings:
Some of the Extensions utilize css :before
and :after
css pseudo-elements. Therefore the control to which you apply extension should have specified relative position. The position ca be specified under the Arrange tab of the More Options level of the left property editor panel.

- [Layout](#layout)
- Align Content
- Fix on Scroll
- Flex Column
- Full Background
- [Heading and line](#heading_line)
- Set Page Width
- Set Sheet width
- [Basic](#basic)
- Animation
- Expand to Bottom
- ParallaxBackground
- [Style](#style)
- Balloon
- Paper Shadow
- Shadow inner Out
- Texture Overlay
- [Image](#image)
- Image to Page Background
- Scale and Crop
- [Hyperlink](#hyperlink)
- Smooth Scrolling
- [Additional Settings](#settings)
## Summary
The **Extensions** can be applied to the boxed controls like Box, Layout Container, Text, Header/Footer Area, Slider, Image, etc to achieve different layout and visual effects.
!extensions-list.png!
<a id="layout"></a>
### Layout
#### Align Content
**USED FOR:** outer control (Container, Section, etc). The effect works for all inner controls.
!align-content-2.png!
This extension uses flexbox and aligns controls inside container to which you applied "Align Content" extension. It does not align individual controls.
**Content Width** - used to set the width for inner content area which contains inner controls. Align Content extension is positioning this area according to the chosen option.
!align-content-example.png!
**Example:**
!align-content-example-2.png!
#### Fix On Scroll
**USED FOR:** the control that you would like to fix on scroll (Hmenu, Container, etc).
This Extension toggles **fixed position** of the element on page scrolling.
Based on bootstrap Affix:
http://getbootstrap.com/javascript/#affix
#### Flex Column
**USED FOR:** separate **Column** inside *Columns control*. Use in combination with Columns Height: *FillHeight(Flexbox)*.
This extension uses flexbox and stretches container inside column for 100% height.
#### Full Background
<a id="heading_line"></a>
#### HeadingAndLine
This Extension is used for headings (Page title, Block header, Headline, Headings, etc).
With this extension you can create various types of title underlines:
!block-samples.png!
To create basic underline please follow these steps:
1. [add relative position](#settings) for the heading controls, e.g. Block header
2. add **HeadingAndLine** extension to the heading control
3. there are two tabs for **Before** and **After** lines:
!after-libe-extension.png!
4. switch to *After Line* tab to add bottom underline.
5. open *Shape Options* (see the screenshot above)
6. add top border under the Border tab:
!after-line-border.png!
7. go to the Arrange tab and specify the **width** for the underline.
To **center** the underline you should set **left** and **right** parameters to **0** and add **margin auto** under the *Padding and Margin* tab:
!width-and-margin.png!
In fact, this extensions utilizes css `:before` and `:after` css pseudo-elements. Therefore you can create a much more effects based on these pseudo-elements. But this requires special css skills.
#### Set Page Width
####Set Sheet width
<a id="basic"></a>
### Basic
#### Animation
This Extension applies various animation effects to the controls.
!animations2.png!
#### Expand To Bottom
Stretches container to the bottom on short pages. Used to create *sticky* Footer.
!expand-to-bottom-4.png!
#### ParallaxBackground
This extension enables Parallax affect for container's background.
**NOTE:** The effect applies `background-attachment: fixed;` to the image. It means that the background will be fixed with regard to the viewport. This may affect the visibility of the image.
<a id="style"></a>
### Style
#### Balloon
This Extension applies nice **Balloon** effect to the boxed elements.
!balloon-effect.png!
<div class="alert alert-warning"> <b>NOTE</b>: To work correctly the control to which you apply this extension should have specified relative position. Please see more details <a href="http://answers.themler.io/articles/8762/extensions#settings">here</a>.</div>
#### Paper Shadow
This Extension creates nice shadow corners effect:
!shadow-corners.png!
<div class="alert alert-warning"> <b>NOTE</b>: To work correctly the control to which you apply this extension should have specified relative position. Please see more details <a href="http://answers.themler.io/articles/8762/extensions#settings">here</a>.</div>
#### Shadow Inner Out
This Extension applies inner and/or outer Shadow to the selected boxed control.
!shadow-inner-out.png!
<div class="alert alert-warning"> <b>NOTE</b>: To work correctly the control to which you apply this extension should have specified relative position. Please see more details <a href="http://answers.themler.io/articles/8762/extensions#settings">here</a>.</div>
#### Texture Overlay
This Extension adds overlay layer on top of the background of the control. This layer is located under the control's content.
**Example:**
Original Layout Container control with Text
!original-container.png!
Layout Container control with Texture Overlay extension (semitransparent layer with black fill color)
!container-overlay2.png!
Texture Overlay extension settings
!overlay-settings.png!
<div class="alert alert-warning"> <b>NOTE</b>: To work correctly the control to which you apply this extension should have specified relative position. Please see more details <a href="http://answers.themler.io/articles/8762/extensions#settings">here</a>.</div>
### Image
#### Image To Background
This Extension sets the selected Image as page background.
!image-to-page-bg.png!
#### Scale & Crop
The **Scale & Crop** effect renders image inside **Image controls** as a background image.
This Extension can be applied to **Image control**, **TextGroup Image**, **Post Image**, etc.
!image-effect2.png!
## Hyperlink
### Smooth Scrolling
This Extension enables smooth page scrolling to the anchor.
Can be applied to menu controls: Horizontal Menu, Top menu, Vertical Menu, and HTML, Text and other controls with links.
<a id="settings"></a>
## Additional Settings:
Some of the Extensions utilize css `:before` and `:after` css pseudo-elements. Therefore the control to which you apply extension should have specified relative position. The position ca be specified under the **Arrange** tab of the More Options level of the left property editor panel.
!relative-position.png!