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

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

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

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.

Style

Balloon

This Extension applies nice Balloon effect to the boxed elements.

balloon-effect.png

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:

shadow-corners.png

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.

shadow-inner-out.png

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

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

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.

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.

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

- [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!