User Manual

Buildify for Magento 2 is one of the very few WYSIWYG solutions for building content for online stores powered by Magento 2 Open Source. Employ Buildify page builder to create and arrange content for pages, blocks, category and product descriptions. Start a layout, select widgets from the extensive list of thereof, collate them within the working area and customize neatly to have your content attractive and engaging on all kinds of devices.

Compatibility: Magento Open Source 2.3.X - 2.4.X   

 

 

 

 

 

Installing Magento 2 Buildify

Command Line Installation

  1. Backup your web directory and store database
  2. Download the Buildify installation package
  3. Upload contents of the Buildify installation package to your store root directory 
  4. In SSH console of your server navigate to your store root folder:
cd path_to_the_store_root_folder

run:

php -f bin/magento module:enable Aheadworks_Buildify

then:

php -f bin/magento setup:upgrade

after:

php -f bin/magento setup:static-content:deploy

     5. Flush store cache; log out from the backend and log in again

Make sure the installation is done from the FTP administrator account. Otherwise, set 775 permissions to the store root directory after the extension is deployed.

Composer Installation

If you are installing an extension from Aheadworks for the first time, you need to add our composer repository to your Magento store:

     1. Login to your ssh console and navigate to your store folder:

cd path_to_the_store_root_folder

Run the following command:

composer config repositories.aheadworks composer https://dist.aheadworks.com/

On successful execution of the commands you will be able to use the composer to install the extensions.

To install the extension:

     2. Login to your ssh console and navigate to your store folder:

cd path_to_the_store_root_folder

    3. Run the following command to install the latest version of the extension:

composer require aheadworks/module-buildify

if you need to install a specific version, run this command:

composer require aheadworks/module-buildify:<version>

 

Specify the version of the extension in <version>

When prompted, enter Composer Public Key (Username) and Private Key (Password):

Both Composer Public Key (Username) and Private Key (Password) can be found in My Projects and Licenses in your personal account on our site:

     4. Enable the extension:

php -f bin/magento module:enable Aheadworks_Buildify

Next, register the extension:

bin/magento setup:upgrade

Recompile your Magento store if you are in the Production mode:

bin/magento setup:di:compile

To verify that the extension is enabled, run this command:

bin/magento module:status

Clean store cache, by running the following command:

bin/magento cache:clean

Log out and Log in the backend again.

To upgrade the extension:

     5. To update or upgrade an extension:

Download the updated extension file. Take note of the module-name and version. Export the contents to your Magento root.

If a composer package exists for the extension, run one of the following.

Update per module name:

composer update aheadworks/module-buildify
 
Updater per version:
composer require aheadworks/module-buildify:<version>

Run the following commands to upgrade, deploy, and clean the cache.

php bin/magento setup:upgrade --keep-generated
php bin/magento setup:static-content:deploy
php bin/magento cache:clean

 

 

 

 

 

 

Uninstalling  

Manual Removal

1. Disable the module by executing the following commands:

php bin/magento module:disable Aheadworks_Buildify
php bin/magento setup:upgrade

2. Remove the extension files from the following folder:

app/code/Aheadworks/Buildify

Automatic Removal (via Composer)

1. Disable the module by executing the following commands:

php bin/magento module:uninstall Aheadworks_Buildify

 

 

 

 

 

Introducing Magento 2 Buildify

Buildify page builder for Magento 2 is a WYSIWYG visual editor to create and arrange content for pages, blocks, category and product descriptions. Buildify is widget-based, and comes with an extensive selection of widgets. The solution allows starting a layout of the page, drag and drop widgets onto it, collate them within the working area and customize neatly to have your content attractive and engaging on all kinds of devices. The key-features of the solution are as follows:

  • Multiple content widgets to be taken on without any further coding
  • Highly customizable style and layout options of the widgets
  • Drag & drop action to easily arrange widgets within the content area
  • Tweaking content to render well on various devices and screen sizes
  • Support of native Magento 2 widgets and image storage

Known Issues

It has been reported, that staging environments which employ NGINX Auth can display page preview incorrectly in Buildify.

Add the code below into the nginx.conf file if either of the following is true for you:

  • Header and/or Footer are not displayed in the Preview area of the editor.
  • Authentication credentials are prompted when the editor is loaded (on loading the <domain>/aw_buildify/page/preview page)

The file is found in the Magento directory.

location / { 
location ~ ^/aw_buildify {
auth_basic off;
try_files $uri $uri/ /index.php$is_args$args;
}
}

 

Alternatively, grant https://magento.buildify.shop/ (ip 157.245.245.206) access to your staging environment. 

 

 

 

 

General Information

Authorizing to Buildify

Go to Stores → Configuration → Aheadworks Extensions → Buildify to enter the authorization keys and start working with Buildify. Two keys are required: Public and Private API. Find the keys in My Projects and Licenses in your personal account on aheadworks.com.

Make sure, you use the Buildify authorization keys, not the Composer ones. The latter are used to install extensions from Aheadworks. Buildify authorization keys are located on the My Projects and Licenses page below the list of purchased products, at the bottom of the page.  

To enable Buildify, set Enable Buildify to Yes. By default, the selector is set to No. When Buildify is disabled a Magento default editor is used. Content created with Buildify remains available on Front-end on disabling Buildify.

What can I edit with Buildify?

Buildify page builder is available for the following entities of a web-site:

  • Pages
  • Blocks
  • Product descriptions
  • Category descriptions
  • Blog posts in Aheadworks Blog extension.

Buildify page builder is embedded into the interface of the Create/Edit Page/Block/Product/Category pages (normally, the into "Content" section thereof). It loads itself automatically on loading of the pages. However, when on a Create/Edit Category/Product page, click on the Edit with Buildify button to load the builder. The button is located next to the Description option in the Content section.

Buildify Interface

The builder has two working areas: Preview and Widgets

The Preview area displays the whole store page, including the content under construction, web-store header, menu and footer. This is where you can arrange the layout of the page, allocate widgets onto and preview changes to the configuration of the sections, columns and widgets. 

The Widgets area comes in three tabs: Menu, Widgets and Elements Tree. The Widget tab lists content widgets classified into named groups.  Scroll down the list to pick out a widget, or use the Search Widget field to find one quickly.  

 The Elements Tree tab shows the structure of the sections of the content you are designing. It also enables editing the layout of the page or deleting the content from the Preview area. 

The Menu tab gives access to the settings of the editor. This is where you can select the view for the Preview area.

To change the view, go to Widgets Area → Menu → Settings → Page Settings and select a view with the help of the Select Store View setting. The Preview area will then display the page in compliance with the styles of the chosen theme.

Changing views for the Preview area does not change the theme of the web-site. The features are meant for previewing only: for you to switch between the store views to see how your content looks with different themes.

The bottom of the Widget area contains four tabs: Responsive Mode, Help, Revisions and Templates (from left to right). Each tab is supported with an icon, meant to visualize the purpose of the tab.

The Responsive Mode tab allows choice of the preview mode: Desktop (default), Tablet or Mobile. On choice of the mode, the Preview area shows the page and its content the way it will look on the screen of the chosen device. The Tablet and Mobile views show content in device frames.

Use the Responsive Mode to test the responsiveness of the content you have just created.  

Help is next to the Responsive Mode tab. Clicking on the Help icon will take you to the present manual.

The Revisions tab is next to Help. Clicking on the Revisions tab opens the list of all the revisions (saved versions) of the given content. The versions show the date and time when the revisions were saved. To load the content, select the version and click on Apply above. To cancel selection, click on Discard. 

The Templates tab is to the right of the Revisions tab. Clicking on the tab allows choice of saving the present content as a template or loading a template from the Templates Library.

 

 

 

 

Page Layout

Using Templates

Buildify comes with a number of free pre-made page templates, which you can employ with the help of the Add Template button in the Preview Area. Clicking on the Add Template button opens the Templates Library popup holding a selection of templates. Templates are shown as thumbnail images. There is an upload button below each image telling the name of the template. Use the button to employ the template to your layout. When loaded, you will be able to modify the template, if need be. 

The Templates Library popup has two tabs: Predesigned Templates (on display by default) and My Templates. Content designs that you save appear on the My Templates tab. To save a template, click on the Save Template button next to Close in the right top of the popup and confirm the action.

To use big templates from Predesigned Templates, increase the max_input_vars value in php.ini

Arranging Layout Manually

Start with the layout of the content first. Click on the Add New Section button in the Preview area to see some pre-arranged content structures.  The selection appears in the Select Your Structure area which substitutes the buttons Add New Sections and Add Template. Click on the structure and it will be added to the page right above the Select Your Structure area. You can add as many structures of layout as you need.

A structure here is a row of columns within a section.

 

The Columns widget can also be used to arrange the layout of the page.

The layout of the page can be rearranged at any time:

  • columns can be added to or deleted from the sections
  • sections can be swapped
  • the order of the columns can be altered
  • columns can be swapped between the sections
  • the configuration of the columns/sections can be tweaked

To change the width of the column, hover the cursor over the right border of the column until the Resize pointer appears and drag the border to the right/left. The % value at the top of the column will indicate the part of the section the column takes.

To change the position of the column/section, hover the cursor over the Column/Section tab at the top left of the column/section until the Reposition pointer appears and drag and drop the column/section to the new position. This is how you can change the order of the sections within the layout, the order of the columns within the section, and to relocate the columns from one section to the other.

Alternatively, columns/sections can be relocated with the help of the Elements Tree in the Widgets area. Sections are represented here as blocks and columns as the content of these blocks. Hovering the cursor over the section/column in the Elements Tree will highlight this section/column in the Preview area. You can change the order of the sections, relocate the columns within the sections and between the sections with the help of the drag and drop feature.

To add a column to the section, click on the Column tab and then click on the '+' icon.

To add a copy of the column in the section, click on the Column tab and then click on the 'Copy' icon.

To delete a column from the section, click on the Column tab and then click on the 'x' icon.

To tweak the configuration of the column, click on the Column tab and refer to the Widgets area (see Configuring Columns). 

To add a copy of a section to the page, click on the Section tab and then click on the 'Copy' icon.

To delete a section from the page, click on the Section tab and then click on the 'x' icon.

To save a section as a template, click on the Section tab and then click on the 'Save' icon.

To tweak the configuration of the section, click on the Section tab and refer to the Widgets area (see Configuring Sections). 

Alternatively, you can drag and drop widgets right into the Select Your Structure area (or the area of the Add New Structure button) to start a new one-column section consecutively placed below the ones already in use. 

Configuring Layout

Configuring Columns

To tweak the configuration of a column, hover the cursor over the column and click on the Column tab. The Widgets area will show two tabs: Style (shown by default) and Advanced.

The Style tab will feature three blocks of configurations: Background & Border, Background Overlay (active when background is selected for the column), Layout and Typography.

See the table below to learn more on the Background & Border configuration options.

Background Type

Border Type and Border Radius Box Shadow

Background Type - None

No background is applied to the column.

Border Type - None

No border is applied to the column. Border Radius is visible, though not applicable.

Box Shadow - No

No shadow is applied to the column.

Background Type - Classic

The Classic type allows specifying a color and/or image for the background. 

Border Type - Solid/Double/Dotted/Dashed

Whatever type you select for the border, you can specify its width, color and radius.

Clicking on the Chain icon for width or radius will link/unlink the values for the top, bottom, left and right dimensions. When unlinked, each dimension can be set individually.

You can switch between fixed and floating (%) values for the border radius with the help of the PX and % selector above the parameter.

Box Shadow - Yes

When box-shadow is enabled, you can select a color for it, indicate the intensity of blur and spread, and specify the horizontal and vertical offset (from the center of the column).

Background Type - Gradient

When gradient is selected for the background type, you can specify the following:

  • the two colors to be mixed into the gradient (Color, Second Color)
  • the location of the start of the gradient (Location)
  • the type of the gradient (Type: Linear/Radial)
  • the angle of the gradient (Angle, for Linear type)]
  • the position of the gradient center (Position, for Radial type)

   

The Background Overlay block is available when the background type is Classic or Gradient. The block has similar configuration options to that of Background & Border, but for the extra Opacity option. The Opacity option is available for the Classic and Gradient background overlay types. It is meant to specify the transparency of the background overlay.

The Layout block has only one option - Content Position, which allows specifying the position of the content within the column: bottom, top (Default), middle.

Two configuration options are available for the Typography block: Colors and Text Align. The former is meant for headings, text, links and link hover. The latter allows choice between left, center and right alignment of text within the column.  

The colors indicated herein will not work if Global Colors are enabled.

The Advanced tab has two configuration blocks: Advanced and Responsiveness.

The following options are available within the Advanced block:

  • Margin (in px or %) - the margins between the content within the column and the borders of the column;
  • Padding (in px, em or %) - the padding between the content of the widget and the borders of the column;
  • Entrance Animation - the effect of animation for the content of the column: Fading, Zooming, Bouncing, Sliding, Rotating, Attention Seekers, Light Speed and Specials are on the list (only one effect can be chosen); 
  • Duration of Animation (available when Entrance Animation is set) - either of the Slow, Fast or Normal.
  • CSS ID - the text field to indicate the css IDs, if any are used; 
  • CSS Classes - the text field to indicate the css classes, if any are used.

You can check how well your content looks like on the screens of mobile devices, given the set margins and padding, with the help of the three icons above the Margin and Padding options. Clicking on each will update the view of the content in the Preview area with regard to the chosen device.

The Responsiveness block enables to manually specify how much narrower the column is to be displayed on the screens of mobile devices. To do so, select Custom in Mobile Width and configure the Column Width.

Mobile Portrait control is no longer supported. Please use the Mobile Width instead.

Configuring Sections

To tweak the configuration of the section, hover the cursor over the section and click on the Section tab. The Widgets area will show two tabs: Layout (shown by default), Style and Advanced.

The Layout tab features two blocks of configurations: Layout and Structure.

The Structure block allows resetting the structure of the section. Click on the Reset Structure to do so and select a new structure from the list below.

The Layout block brings forward the following options for configuration:

  • Stretch Section - If Yes is selected, the section will be stretched to the full width of the page using the JS.
  • Content Width - Full Width by default; when Boxed is selected, indicate the width of the box with the slider (in px).
  • Columns Gap -the gap between the columns: Default, No Gap, Narrow, Extended, Wide or Wider.
  • Height - Default, Fit to Screen or Min Height. If Fit to Screen is selected, the Column Position option is available. If Min Height is selected, the Minimum Height option is available too.
  • Minimum Height - the slider to indicate the minimum height of the section (in px or VH).
  • Column Position - the position of the column within the section: Stretch, Top, Bottom or Middle.  
  • Content Position - the position of the content within the section: Default, Top, Bottom or Middle

The Style tab features five blocks of configurations: Background, Background Overlay (when background is Classic, Gradient or Video), Border, Shape Divider and Typography.

The Background, Background Overlay, Border blocks and Typography for sections have the same configuration options as those in the similarly named blocks for columns. The only exception here is the Video type of the background, only available for sections. For the video background type you are suggested to indicate the link to the video (alternatively, a Youtube link) and the fallback background. The latter will replace the background video on mobile and tablet devices.

 

Shape Divider is a unique block of configuration options, specific for sections. This is where you can employ some pre-arranged shapes to visually separate the section from the one above and/or below it.  The Top and Bottom tabs allow switching between the two dividers, configuring each separately. The list of shapes can be accessed via the Type option. Depending on the chosen shape the list of configuration options can be as follows:

  • Color - the color of the shape 
  • Width, Height - the geometry of the shape in px
  • Invert - set to Yes to fill the transparent part of the shape with the given color and discolor the colored one
  • Flip - set to Yes to rotate the shape to 180 degrees
  • Bring to Front - set to Yes to overlay the content of the section with the shape
Samples of section dividers in Preview area Sample configuration of Shape Divider

The Advanced tab has two configuration blocks: Advanced and Responsive.

The Advanced tab has two configuration blocks: Advanced and Responsiveness.

The following options are available within the Advanced block:

  • Margin (in px or %) - the margins between the content within the column and the borders of the section;
  • Padding (in px, em or %) - the padding between the content of the widget and the borders of the section;
  • Entrance Animation - the effect of animation for the content of the section: Fading, Zooming, Bouncing, Sliding, Rotating, Attention Seekers, Light Speed and Specials are on the list (only one effect can be chosen); 
  • Duration of Animation (available when Entrance Animation is set) - either of the Slow, Fast or Normal.
  • CSS ID - the text field to indicate the css IDs, if any are used; 
  • CSS Classes - the text field to indicate the css classes, if any are used.

The Responsive block has the following options for configuration:

  • Reverse Columns - when set to Yes and when displayed on mobile devices, the order of the columns within the section is reversed: the column at the bottom appears at the top of the section and vice versa.
  • Hide on Desktop - set to Yes to hide the section when the page is viewed on desktop devices. 
  • Hide on Tablet - set to Yes to hide the section when the page is viewed on tablet devices. 
  • Hide on Mobile - set to Yes to hide the section when the page is viewed on mobile devices. 

The display settings (show/hide for mobile, tablet or desktop) will only take effect once you are on the preview or live page, and not while you are in the page editing mode in Buildify.

 

 

 

 

Widgets

General Information

Widgets are located in the Widgets area in a searchable continuous list. The Search field is available at the top of the Widgets area within the Widgets tab.

Widgets are broken into the following categories:

  • Basic  - essentials for page layout customization;
  • Typography - text in various forms and arrangement;
  • Buttons - buttons, individual and grouped;
  • General - most demanded content elements and the Magento 2 widget;
  • Media - images and video, individual and in galleries;
  • Icons - social media icons, individual and in lists;
  • Progress - widgets to visualize progress;
  • Slides - text and images in slides and carousels;
  • Comments - Facebook or Disqus comments and testimonials;
  • Google - Maps, Translate, Analytics and Hangout;
  • Pricing - tables and lists of prices;
  • Facebook - Facebook comments, posts, buttons, etc.
  • Twitter - Twitter comments, posts, buttons, etc.
  • Analytics - Google Analytics and Yandex Metrica;
  • Modal Windows - intended for displaying all sorts of information.

To populate sections with widgets, drag the widget into the column and drop it there. You can always rearrange the layout and move widgets within sections and columns. Do that either in the Elements Tree tab in the Widgets area or directly in the Preview area. In the Elements Tree, widgets are displayed as sub-elements of columns. In the Preview area, widgets are instantly visualized as per the content they embody. Sample data is used to visualize widgets. It can then be altered to your needs.

Configuring Widgets

To configure a widget, hover the cursor over the content of the widget in the Preview area. An orange frame will appear around the content of the widget. Refer to the right top corner of the frame. This is where the three icons are displayed: Edit, Copy and Delete. Click on the Edit icon and refer to the Widgets area. This is where widget configuration options will be displayed.

Configuration options are broken into three tabs for each widget: Content, Style and Advanced. Depending on the content element the widget embodies, either Content or Style tabs may not be present. The Advanced tab for widgets has the same configuration options as the Advanced tab for sections. The configuration options within the Style and Content tabs vary greatly from widget to widget. See the table below for details.

Widgets in Details

Basic Widgets

Employ the Columns widget to create sections which contain multiple columns. The main difference from sections which are added to pages as one-row structures is that you can create more advanced multi-row layouts with the Columns widget.

This is how the layout looks without (left) and with (right) the Columns widget:

Two single-row sections are used in the example on the left: one single-column with a text and image and one three-column with icons and text. The content of each widget here fills-in exactly the column it belongs to. If you want the 3 bottom columns share the background image with the top section you will have to use the Columns widget. The result is on the right.

Configuring the Columns widget

See Configuring Sections.

 

Employ the Table widget to organize data into rows and columns.

Configuring Tables

Content

Style Advanced

Header block

  • Sortable - dis/enables sorting rows by clicking on the headers of the cells.
  • Disable mobile responsive - dis/enables adaptation of the table for mobile devices. When set to Yes, hides the two options below.
  • Hide on mobile - shows/hides the table on mobile devices. 
  • When set to Yes, hides the option below.
  • Auto mobile headers - set to Yes to automatically fetch relevant headers on mobile. Works only when column span values are not used.
  • Mobile display - set how columns will look on a mobile device: one next to the other or one above the other.
  • Rows - edit every row separately.

Rows can be copied and deleted in the Header block of the Table configuration options. They can, furthermore, be edited as follows:

  • Cell Content - the type of the content of the cell;
  • Cell Text - the text to appear in the cell;
  • Icon - the icon to appear in the cell (no icon by default);
  • Column Span - the number of columns in the row below the given column is to span across;
  • Row Span - the number of rows the given column is to span across;
  • CSS ID and CSS Classes - CSS IDs and styles code. 

Content block

A list of rows and cells. When Row is selected as the type of the table element, you can only specify CSS styles for it as an additional configuration. 

When Cell is selected as the table element, the following list of options are available for configuration:

  • Cell Type - Default or Header
  • Mobile Header - the header to override the value set by the Auto Mobile Header when viewed on mobile devices;
  • Cell Content - the type of the content of the cell;
  • Cell Text - the text to appear in the cell;
  • Icon - the icon to appear in the cell (no icon by default);
  • Column Span - the number of columns in the row below the given column is to span across;
  • Row Span - the number of rows the given column is to span across;
  • CSS ID and CSS Classes - CSS IDs and styles code; 
  • Link - active link set to the content of the cell.

Table block

  • Maximum size - width of the table within the section.
  • Alignment - alignment of the table within the section.
  • Transition duration - time (in seconds) for Hover configs (see Rows and Cells below) to change to Default.

Rows block

  • Border type: solid, double, dotted, dashed or none.
  • Alternate: even or odd.
  • Color and Background color for the Default and Hover (cursor on-hover) positions.

Cells block

  • Typography - when set to Yes the following configuration options will appear: size, font, style, letter spacing, etc. 
  • Color and Background Color can be set both for the Default and Hover modes. You can, furthermore, indicate the First and Last colors different to the Default one.
  • Padding (in px, em or %) - the padding between the content and the borders of the cells.
  • Alignment - alignment of the content within the cell.
  • Border type: solid, double, dotted, dashed or none.

Headers block

  • Mobile width - the % of the default width of the headers when displayed on mobile devices.
  • Typography, Color, Background Color, Padding and Border Type are of similar configuration options to those of the Cells block, though applied to table headers only.

Columns block

  • Spans - the number of columns a column can span over in the table.
  • Background color - the color of the background of the columns.
  • Border Type: solid, double, dotted, dashed or none.
  • Width - the width of the column (in % or px).

See Configuring Sections

 

Adds horizontal lines to visually divide content. Employ the Divider widget to highlight sections and structure of content.

Configuring Divider

The Divider widget does not have any Style options. The Advanced options are the same as those for Sections. The Content options are presented within one block as follows:

  • Style - line style: solid, double, dotted, dashed
  • Weigh - brush width (1 the thinnest)
  • Color - line color
  • Width - line width (in %)
  • Alignment - line position on the page
  • Gap - the space between the divider and widgets on above and below it (in absolute value, 50 the maximum)

 

The Spacer widget adds vertical space separators between paragraphs, images, or other widgets. This improves the overall look of the page.

Configuring Spacer

The Spacer widget does not have any Style options. The Advanced options are the same as those for Sections. The Content options are presented within one block as follows:

  • Space - the gap between the spacer and widgets on above and below it

 

The Anchor widget helps navigate pages quickly, without scrolling endlessly or searching for a page in the main menu. A single click on an anchor will take customers exactly where they want to go: back to the top, down to the bottom or to the FAQ page.

Configuring Menu Anchor

The Menu Anchor widget does not have any Style options. The Advanced options are the same as those for Sections. The Content options are presented within one block as follows:

  • CSS ID - the ID of the Menu Anchor as it is described in the CSS (no # tag here) 

 

Adds custom HTML chunks to the page.

Configuring HTML

The Menu Anchor widget does not have any Style options. The Advanced options are the same as those for Sections. The Content options are presented within one block as follows:

  • HTML code - the html code to be implemented on the page (Single comments with double slashes in script or style tags will be stripped).

 

Typography

Employ the Heading widget to create headings and title texts.

Configuring Heading

Content

Style Advanced

Specify here the text for the heading and the way it will be presented. 

  • Title - the text of the header
  • Link - the hyper-link to be attached to the text
  • Size - the size of the text: Default, Small, Medium, Large, XL, XXL 
  • HTML tag - the tag to contain the text
  • Alignment - the alignment of the text within the column

Specify how the text of the heading will look.

  • Text color - the color of the text in the header
  • Typography - when set to Yes the following configuration options will appear: size, font, style, letter spacing, etc

See Configuring Sections

 

 

Use the Blockquotes widget to highlight the main ideas in the text or whatever important information and format it into blocks of quotes. Visitors will then be able to easily share these quotes on Twitter, for example.

Configuring Blockquote

Content

Style Advanced

Specify the text of the quotation and the form of the block to contain the text.

  • Skin - the style of quote display: Boxed, Border, Quotation, Clean. When anything but Border is selected, the Alignment option will get available. 
  • Content - the text of the quotation
  • Author - the text-box to indicate the author of the quotation
  • Tweet Button - set to On to enable a button to share the quote on Twitter. The following options will then get available: 
    • View - the style of display of the button: Icon, Icon & Text, Text
    • Skin - advanced style of display of the button: Classic, Bubble, Link
    • Label - the text on display (when Icon&Text or Text is selected for View)
    • Via - the account name of the of the person who shares the quote on Twitter 
  • Target URL - the URL assigned to the quote (Current Page, None, Custom)
  • URL - the address of the URL (available when Custom is selected above)

Content block

Configure how the text of the quotation and the name of the Author will be styled.

  • Text Color - the color of the text of the quotation
  • Typography - when set to Yes the following configuration options will appear: size, font, style, letter spacing, etc
  • Gap - the space between the quotation and widgets above and below it
  • Author Text Color - the color of the text of the Author's name
  • Author Typography - when set to Yes the following configuration options will appear: size, font, style, letter spacing, etc

Tweet button block

Specify how the Tweet Button will look.

  • Size - the size of the button (2 the maximum)
  • Border Radius - the radius of the corners of the button (in px, %, em, rem)
  • Color - the color of the button: Official, Custom. When Custom is selected, you will be able to specify the color of the text and background, both for the Default Hover modes.
  • Typography - when set to Yes the following configuration options will appear for the text of the button: size, font, style, letter spacing, etc

Border block (when Border is selected for the Skin of the Blockquote)

Configure how the border of the quote block is to look both in the Normal mode and when a cursor is hovered over the quote.

  • Color - the color of the border
  • Width - the width of the border line (100 px the maximum)
  • Gap - the horizontal space between the text of the quote and the border (100 px the maximum)
  • Vertical Padding - the vertical space between the text of the quote and the border (100 px the maximum)

Similar configuration options are available for skins Quotation and Boxed. When Boxed is selected for Skin, you can specify the width of each line of the box, as well as the radius of the corners of the box and its shadow. 

See Configuring Sections

 

Text Divider widget is intended to break text into chapters or other logical parts.

Configuring Text Divider

Content

Style Advanced

Specify what visitors will see as a text divider.

  • Text - the text as part of the divider
  • HTML tag - the tag to contain the divider
  • Alignment - the alignment of the divider within the column

Text block

Specify how the text will look within the divider.

  • Position - the alignment of the text within the divider
  • Text Spacing - the space between the text and line parts of the divider (max 100 px)
  • Padding - the space around the text and other widgets
  • Color - the color of the text
  • Background Color - the background color of the text
  • Border Type -  the border of the text box: none, solid, double, dotted, dashed
  • Border Radius - the radius of the corners of the text-box
  • Border Shadow - set to Yes to enable text-box border. Read Configuring Columns on the configuration parameters available for Border Shadow.
  • Typography - when set to Yes the following configuration options will appear for the text of the divider: size, font, style, letter spacing, etc

Divider block

Specify how the divider is to be styled and presented on the frontend.

  • Vertical alignment - the alignment of the lines of the divider against the text thereof
  • Width - the width of each line
  • Height - the brush width of the lines
  • Background color - the color of the background behind the lines. Set the background for the two states: Before and After.
  • Background Type - the type of the background: none, image/color, gradient. Refer to Configuring Columns to learn more on configuring backgrounds.

See Configuring Sections

 

Employ Text Editor to add text to the page and edit it to the desired format. 

Configuring Text Editor

Content

Style Advanced

Add text and images, and edit them on the go. You can edit text either in the visual editor or HTML mode.

The Drop Cap options en/disables the initial capital letter. 

Specify the advanced styling for the text you edit.

  • Alignment - the alignment of the text within the column
  • Text Color - the color of the text
  • Typography - when set to ON the following configuration options will appear to style the given text: size, font, style, letter spacing, etc

See Configuring Sections

 

Employ Animated Headline to liven up the content and highlight the headline.

Configuring Animated Headline

Content

Style

Advanced

Decide on the animation style and the way it is to be presented.

  • Style - the style of the animation: Rotating or Highlighted
  • Animation - the type of the animation. 
    • for style Rotating: Typing, Clip, Flip, Swirl, Blinds, Drop-in, Wave, Slide, Slide Down
    • for style Highlighted: Circle, Strikethrough, Curly, Underline, Double, Double Underline, Underline Zigzag, Diagonal, X
  • Before Text - the initial part of the text that remains without animation
  • Rotating/Highlighted Text - the part of the text that is animated
  • After Text - the closing part of the text that remain without animation 
  • Alignment - the alignment of the headline within the column
  • HTML tag - the HTML tag assigned to the text

Shape block

Specify the look of the shape used for the Highlighted style of animation.

  • Color - the color of the shape
  • Width - the width of the shape (20 px the maximum)
  • Bring to Front - when On the shape is displayed on top of other elements of the widget
  • Rounded Edges - when On the shape has rounded corners and edges

Headline block

Set the colors for the headline and customize other parameters of the font both for the static and animated parts of the headline.

  • Text Color - the color of the text
  • Typography - when set to ON the following configuration options will appear to style the given text: size, font, style, letter spacing, etc

See Configuring Sections

 

Employ the Read More widget to hide long chunks of text. When need be, users can click on the "Read More" button to read it. 

This is how you can prioritize parts of the content, ease your customers’ reading and add more data about the product. Furthermore, when enabled the Read More functionality influences positively on the store ranking. Search engines will see all the content, while visitors will see what they really need to.

Configuring Read More

Content Style

Advanced

Content block

Add text and images, and edit them on the go. You can edit text either in the visual editor or HTML mode.

The Visible and Visible Amount options allow configuring how many lines (how much of text %) is to be shown to the viewer.

Settings block

Specify the behavior of the content within the widget for both states: folded, and unfolded.

  • Alignment - the alignment of the content within the column
  • Unfold Duration - the duration of the content "unfolding" animation (1.9 sec maximum)
  • Animation - the type of the content "unfolding" animation: Linear, Break, Back, Elastic, Bounce, SlowMo, Step.
  • Easing - the type of easing of the animation effect: Ease in, Ease out, Ease in and out. 

Separator block

Hide or show a line of opacity as a separator between the visible and invisible parts of text. 

Button block

Configure the button for both states of the content: closed and open.

  • Closed Text and Open Text - the text on the button for each state of the content 
  • Size - the size of the button: Extra Small, Small, Medium, Large, Extra Large
  • Icon - the icon to be placed before the text on the button

Content block

Specify the styling of the content of the widget.

  • Color - the color of the text within the widget
  • Background color - the color of the background within the widget
  • Padding - the padding between the content of the widget and borders of the column
  • Typography - when set to ON the following configuration options will appear to style the given text: size, font, style, letter spacing, etc

Separator block

Specify how the height and background type for the content separator.

  • Height - the height of the separator opacity line (in px or %)
  • Background type - Classic or Gradient (see Configuring Columns for details)

Button block

Specify how the Read More button is to look on the storefront, both when the mouse cursor is hovered over the button and when not.

  • Distance - the distance from the visible part of the text and the button (96 px the maximum)
  • Typography - when set to ON the following configuration options will appear to style the text on the button: size, font, style, letter spacing, etc
  • Text color - the color of the text on the button
  • Background color - the color of the background of the text on the button
  • Border Type - the type of the border of the button: None, Solid, Double, Dotted, Dashed. When anything but None is selected, two more configuration options will get available: Width and Color.
  • Border Radius - the radius of the corners of the button (in px or %)
  • Box Shadow - set to Yes for the button to have shadow. More configuration options will then get available, see Configuring Columns for details.
  • Text Padding - the padding of the text within the button

See Configuring Sections

 

Employ the Alert widget to highlight important information or place alert/warning notes.

Configuring Alert

Content

Style Advanced

Add text and images to the alert message, and edit them on the go. You can edit text either in the visual editor or HTML mode.

  • Type - the type of the alert message: Info, Success, Warning, Danger. Alert messages of different types come with different colors of the background.
  • Title and Description - the headline of the alert message
  • Dismiss Button - select Show to display the X (i.e. "Close") button in the alert message box

Alert Type block

Update the default colors of the alert and specify the width of the border of the alert box.

Title and Description blocks

Specify the color of the headline and text of the alert. When Typography is On, more customization options will get available to format the texts.

See Configuring Sections

 

Employ the Button widget to add buttons to the page.

Configuring Button

Content

Style

Advanced
  • Type - the type of the button: Default, Info, Success, Warning or Danger. Buttons of different types come with different colors of the background. This helps to easily combine buttons with alert messages.
  • Text - the text on the button
  • Link - the hyper-link of the resource the viewer is to be taken to on clicking on the button
  • Alignment - the alignment of the button within the column 
  • Size - the size of the button: extra small, small, medium, large and extra large 
  • Icon - the icon to be placed before the text on the button

Specify how the button is to look on the storefront, both when the mouse cursor is hovered over the button and when not.

  • Typography - when set to ON the following configuration options will appear to style the text on the button: size, font, style, letter spacing, etc
  • Text color - the color of the text on the button
  • Background color - the color of the background of the text on the button
  • Border Type - the type of the border of the button: None, Solid, Double, Dotted, Dashed. When anything but None is selected, two more configuration options will get available: Width and Color.
  • Border Radius - the radius of the corners of the button (in px or %)
  • Box Shadow - set to Yes for the button to have shadow. More configuration options will then get available, see Configuring Columns for details.
  • Text Padding - the padding of the text within the button

See Configuring Sections

 

 

Employ Share Buttons to add a group of buttons that allow sharing your content to social networks.

Configuring Share Buttons

Content Style

Advanced

Add buttons to the group and specify which social networks they are to share your content to. If the Network list does not contain the media resource, indicate its name in the Custom Label field. You can change the order of the buttons in the group, copy-paste, delete and add buttons here.

  • View - decide what elements are to be parts of the button: Icon, Icon & Text or Text
  • Label - Show the name of the social network on the button or Hide it
  • Count - Show the number of shares on the button or Hide it
  • Skin - the look of the button: Gradient, Minimal, Framed, Boxed Icon, Flat
  • Shape - the type of the shape of the button: Square, Rounded (edges)or Circle
  • Columns - the number of columns the buttons are to be grouped within the widget box
  • Target URL - select Current Page to share the content of this page, otherwise specify an URL of the resource to share

Configure the look of the Share Buttons box here.

  • Columns Gap - the distance between the columns of buttons within the box 
  • Rows Gap - the distance between the rows of buttons
  • Button Size - custom size of the buttons 
  • Icon Size - custom size of the icons on the buttons
  • Button Height - the height of the buttons
  • Color - the color of the buttons: Official (as per the official color of the network), Custom. When Custom is selected, you can further specify the color for both Normal and Hover states.
  • Typography - when set to ON the following configuration options will appear to style the text on the button: size, font, style, letter spacing, etc

See Configuring Sections

 

Add groups of buttons to the page as a customizable block thereof.

Configuring Buttons Group

Content Style

Advanced

Buttons block

Create buttons and group them appropriately. You can create as many buttons as you need.

Add, shuffle, edit and delete buttons here.

To edit a button, click on the button name on the list. You will then be able to choose one of the three sets of configuration options to tweak: 

  1. Content
  • Text - the text on the button
  • Enable Tooltip - set to Yes to enable a hint bubble to appear next to the button on hovering a cursor over it. The following options are then added to the list:
    • Tooltip position (available when Enable Tooltip is set to Yes) - the position of the tooltip in relation to the button: Global (default), Bottom, Left, Right, Top
    • Tooltip text - the text to appear within the tooltip box
  • Link - the URL visitors are to be redirected to on clicking on the button
  • Icon - the icon to feature on the button. Two more parameters are then available when an icon is selected:
    • Icon position - the position of the icon in relation to the text on the button: After, Before
    • Icon spacing - the distance between the icon and the text (50 px maximum)
  • CSS ID and CSS Classes  - the fields to enter your custom CSS styles for the button

2. Layout

  • Size - the size of the button: Extra Small, Small, Medium, Large, Extra Large
  • Min Width - the width of the button (10px the minimum)
  • Align Text - the alignment of the text within the button 

3. Style

Custom - set to Yes to enable more configuration options to override default style settings for the button:

  • Effect Type - the effect of animation to be applied to the button on hovering the cursor over it: None, Clone, Flip, Background, Cube, 3D. Selecting an effect unfolds more configuration options, specific to the effect. The options are generic in their nature and quite intuitive, thereby for convenience reasons, the present guide will only see the options when None is selected for the Effect Type.
  • Animation - the animation to be applied to the button on hovering the cursor over it
  • Border Type - the type of the border of the button: None, Solid, Double, Dotted, Dashed
  • Border Radius - the radius of the angles of the button container
  • Text Padding - the padding of the text within the button
  • Text Color and Background Color - the colors of the text and background of the button for two states: Default and Hover.

Tooltips block

Refer to this block of options if tooltips are enabled for the buttons. 

  • Position - the position of all the tooltips within the buttons group
  • Delay in - the time between the activation of a tooltip and it's displaying to the viewer (in seconds)
  • Delay out - the time between the deactivation of a tooltip and it's vanishing from the user's view (in seconds)
  • Arrow - select Show to display an arrow connecting tooltips to the buttons they explain 
  • Distance - the distance between the button and the tooltips (6px by default)
  • Maximum width - the width of a tooltip box
  • zindex -  the stack order of the tooltip (999 by default). An element with greater stack order is always in front of an element with a lower stack order.

Buttons block

Specify the styling of the buttons.

  • Vertical Alignment and Alignment - the alignment of the button group within the column (vertically and horizontally) 
  • Buttons Gap - the distance between the buttons: Default, No Gap, Narrow, Extended, Wide, Wider, Custom.
  • Border Radius - the radius of the corners of the borders of the buttons (in px and %)
  • Stack - the display device the buttons are to get stacked: None, Desktop, Tablet, Mobile
  • Typography - when set to ON the following configuration options will appear to style the text on the buttons: size, font, style, letter spacing, etc

Next set of configuration options are available both for the Default and Hover states of the buttons:

  • Border Type - the type of the border of the buttons: None, Solid, Double, Dotted, Dashed. When anything but None is selected, the Width parameter will get available for configuration.
  • [Border] Color - the color of the border
  • Text Color - the color of the text
  • Background Color - the color of the background of the text
  • Box Shadow - set to Yes for the boxes of the buttons to have shadows. See Configuring Columns to learn more on configuring shadows.

 

See Configuring Sections

 

Use the Timeline widget to add a timeline to the page. Timelines present content chronologically, thereby facilitating its visual perception. A timeline here is a vertical line with stops along the line to represent milestone events. Each event is presented as a combination of icons, notes and descriptions.  

Configuring Timeline

Content Style

Advanced

Specify the information to feature within the elements of the timeline. 

The timeline events are collected into a list. You can shuffle the list, add, copy and delete events. To add an event, click the Add Item button below the list. There are three sets of configuration options available for each event on the list: Content, Media and Style.

  1. Content
  • Date - the date of the event (events are not sorted along the timeline automatically!)
  • Link - the hyperlink to be assigned to the text within the event box
  • Text - the text of the event. You can supply text with images and edit it either in the visual editor or HTML mode. 

2. Media

Choose an image to complement the description of the event, and set its size.

3. Style

When Custom is set to Yes, configure the colors and scale of the timeline event elements. Do that for the Default, Hover and Focused states of the elements. For each state you can select an icon to feature within the point, the background of the point, icon color, card background (description box), date color and the scale of the event.

Specify the look of the elements of the timeline events: the general layout, images, cards (description boxes), dates, points and the line.

With view to the specifics of each element, the configuration options on offer will vary, but on average they will present some generic styles like Size, Alignment, Spacing, Padding, Border Radius and Colors. The Points and Cards (when Animate Cards is On) elements will require configuring the above for the three possible states: Default, Hover and Focused.

Alignment here is the position of an element against the container: for example right, center, left.

Spacing is the distance between the elements of content within the container.

Padding is the distance between the content and the borders of the container. 

See Configuring Sections

 

Tabs separate content into multiple sections, accessible by clicking on a corresponding tab above the sections. By default, each tab has one section of one column. This widget will help save space on the page and will allow you to add as much content as you need.

Configuring Tabs

Content Style

Advanced

Manage the list of tabs here: add, copy, delete, shuffle and edit tabs.

Clicking on the list item, allows editing the name of the tab.

Clicking on the Add Item button, adds another item to the list. 

There are two types available for the layout of the tabs: horizontal and vertical. Choose one with the help of the corresponding option.  

Specify the styling of the tabs, namely:

  • Navigation Width - the width of the tabs
  • Border Width - the width of the border brush of the tabs
  • Border Color and Background Color - the colors of the border and background of the tabs correspondingly
  • Title Color and Title Active Color - the colors of the titles of the inactive and active tabs
  • Typography - when set to ON the following configuration options will appear to style the text of the tabs: size, font, style, letter spacing, etc
  • Content Padding - the distance between the content of the tabs and the borders of the tab

See Configuring Sections

 

Collect content into a vertically stacked list of tabs with the Accordion widget. Each tab has a single section of one column inside to welcome content. The content is hidden when the tab is inactive. To activate the tab and unfold the content, click on the tab.  Clicking on the tab again closes its content. Activating a tab when other tab is active closes the content of the previously active tab and unfolds the content of the newly-activated one.

Hiding content with the help of accordion tabs facilitates searching for sections, chapters or questions since one does not have to browse through long passages of content. FAQ pages frequently employ an Accordion widget. 

Configuring Accordion

Since the concept of Accordion is based on tabs, the configuration options here are the same as for the Tabs widget. See Tabs for further details.

The only difference concerns the Navigation width parameter (Style) for Tabs, which is substituted with Icon Alignment (left/right) for Accordion.

 

Toggle is similar to Accordion, the function and concept are the same. At the same time, Toggle allows having all tabs open at the same time.

Configuring Toggle

See Tabs for further details. The Navigation Width parameter (Style) for Tabs is not present here.

 

Employ the Devices widget to play video in a frame of a device.

Configuring Devices

Content Style

Advanced

Device block

Choose and configure the frame of the device here.

  • Type - the frame of the device: phone, tablet, laptop, desktop, window
  • Media Type - the type of media to appear within the frame: Image, Video
  • Alignment - the alignment of the frame within the column
  • Maximum width - the width of the frame (in px and %)
  • Orientation (For Phone and Tablet frames) - horizontal or vertical orientation of the frame
  • Orientation Control (For Phone and Tablet frames) - set to Yes to enable the Orientation icon below the frame. Clicking on the icon, the viewer can change the orientation of the frame.

Video block (available when video is selected as a type of media)

Specify the video and cover resource and suggest some playback control features. A cover here is an image. Clicking on the Cover tab in the Video block, will ask you to upload or choose an image.

  • MP4 Source, OGG Source and WebM Course - the links to the video resource with regard to the file-type
  • Show Buttons - set to Yes to show button Play and Pause
  • Show Bar - set to Yes to show the playback bar. When set to Yes decide if you want to show the following options on the bar: time, duration, volume and fullscreen. Do that with the corresponding configuration options that become available when Show Bar is set to Yes.
  • Show Rewind - set to Yes to show the rewind icon, clicking on which will start the video again
  • Autoplay - set to Yes to play the video automatically when the page loads
    • Play in Viewport (available when Autoplay is set to Yes) - set to Yes to play video automatically when the frame happens to be in viewport, that is in the page area visible to the viewer
    • Stop on Leave (available when Autoplay is set to Yes) - set to Yes to stop video playback once the frame is off the visible area of the page 
  • Restart on Pause - set to Yes to automatically restart video playback when the end thereof is reached
  • Loop - set to Yes to loop the playback

Screen block (available when Image is selected as a type of media)

Select the image to be displayed within the frame. Select two images for mobile devices. Do that with the help of the Default and Landscape tabs.

  • Image size - the size of the image
  • Scrollable - set to Yes to show the full image within the frame and allow scrolling down/up the screen device to see the image should it be bigger than the display area within the frame.
  • Vertical align - the alignment of the image within the frame

Device block

Override default device styles. 

To override some default styles used by Devices, set Override Style to Yes. The following configuration options will get available:

  • Device Background - the color of the frame of the device
  • Tone - the tone of some elements of the frame: Dark or Light. To have elements discernible, select Dark tone for light colors of Device Background and Light tone otherwise.
  • Opacity - the level of saturation of the color suggested by the tone (in %)

Video block (available when Video is chosen as the Media Type)

Set Cover to Yes for video to cover the whole screen of the chosen frame.

Video Overlay block

Select the color of the device screen, that is the Background of the video, and the intensity of thereof.

Video Interface

Specify the styles of the playback control elements of the device: play, stop, etc. Do that for the two states thereof: Default and Hover.

  • Border Radius - the radius of the edges of the control element
  • Controls Background - the color of the background of a control element
  • Controls Color - the color of the control
  • Controls Opacity - the intensity of the above colors
  • Border Type - the type of the border of the controls: None, Solid, Dashed, Dotted, Double. When anything but None is selected, specify the brush width for the border
  • Box Shadow - set to Yes to enable shadow for the controls (see Configuring Columns for more on shadows)

 

Video Buttons

  • Size - the size (in %) of the controls
  • Controls Spacing - the space between the controls

 

 

Employ native Magento 2 widgets to add content representing your store data. 

Drag and drop the widget into the Preview area and refer to the Widgets area. Two tabs are available there for Widget: Content and Advanced. The latter has the same configuration options as those in Configuring Sections. The former shows selected widget and the Select Widget button. Only one widget can be selected at a time with the help of the Widget (native Magento 2) widget.

Clicking on the Select Widget button opens a popup prompting to specify the type of the widget and the details thereof. When done with the configuration, click on the Insert Widget button in the top right of the popup to complete the job.

Inserting a widget does not create a widget instance.

CMS Page Link

Displays a link to a specific CMS page. Allows specifying custom text and title.

The following configuration options are available for CMS Pake Link:

  • Anchor Custom Text - the text to contain the hyperlink to the CMS page
  • Anchor Custom Title - the text to appear in the tooltip to the anchor text (visible when hovering the cursor over the anchor text)
  • Template - one of the two templates available for the widget
  • Page - the name of the page to be redirected to on click of the anchor link. To specify the page, click on the Select Page button. A popover will emerge, prompting to select a page from the grid.  

CMS Static Block

Displays a block of content at a specific location on a page.

The following configuration options are available for CMS Static Block:

  • Template - the template of the widget
  • Block - the name of the block to feature in the widget. To specify the block, click on the Select Page button. A popover will emerge, prompting to select a block from the grid.  

Catalog Category Link

Displays either an inline or block-style link to a selected catalog category.

The configuration options here are similar to those for CMS Page Link, but that you specify them for a category. 

Catalog New Products List

Displays a block of products which have been designated as new, for the duration of time specified in the product record.

The following configuration options are available for Catalog New Products List:

  • Display type - the type of products to display: All product or New Products
  • Display Page Control - set to Yes to display page controls (buttons Next, Back, etc) alongside the product list content. The Number of Products per Page option is added when Display Page Control is set to Yes. This is where you indicate the number of products to be displayed within the list. Page controls then enable pagination, i.e. moving from one part of the list to the other.
  • Template - the template of the widget
  • Cache Lifetime - the time between widget updates (in seconds)

Cache Lifetime

If not set, the value of Cache Lifetime equals to 86400 seconds (24 hours). To update the widget instantly, go to Cache Management and clear the Blocks HTML Output cache. The widget will not show products that begin to match the specified conditions until cache is refreshed.

Catalog Product Link

Displays either an inline or block-style link to a selected catalog product. 

The configuration options here are similar to those for CMS Page Link, but that you specify them for a catalog. 

Catalog Product List

Displays a list of products from the catalog.

The configuration options here are similar to those for CMS Page Link, but for the following two:

  • Title - the title of the product list
  • Conditions - the filter for the products to appear on the list.  Click on the "+" icon to add a condition, click on the "X" icon to delete a condition. Clicking on the capitalized words in bold (All, True, etc) will open choices to specify conditions.

Orders and Returns

Gives guests the ability to check the status of their orders and submit requests to return merchandise. The widget appears only for guests and customers who are not logged in to their accounts.

The widget requires a choice of a template. Do that with the help of the Template option.

Recently Compared Products

Displays the block of recently compared products. You can specify the number of products included, and format them as a list or product grid.

The following configuration options are available for Recently Compared Products:

  • Number of Products to Display - the whole numeric to indicate the number of recently compared products to be displayed to the viewer
  • Product attributes to show - select the product attributes to be shown alongside the products
  • Buttons to show - select the button to be shown alongside the products
  • Template - the template of the widget

Recently Viewed Products

Displays the block of recently viewed products. You can specify the number of products included and format them as a list or product grid.

The following configuration options are available for Recently Viewed Products:

The configuration options here are similar to those for Recently Compared Products, but that you specify them for recently viewed products. 

More on native Magento 2 widgets.

 

Employ Video widget to embed videos. The resources for videos here are: Youtube and Vimeo.

Configuring Video

See Configuring Sections for Advanced settings, Style is not available for Video. The Content tab shows two blocks of options: Video and Image Overlay.

Video block

Image Overlay block

Suggest a video here and specify some playback options.

  • Video Type - the type of the video to show: Youtube or Vimeo
  • Link - the link to the video
  • Aspect Ratio - the aspect ratio of the video: 3:2, 4:3, 16:9
  • Autoplay - set to Yes to iterate the playback of the video
  • Suggested Videos - set to Yes to allow Youtube/Vimeo suggest you more videos when the given video reaches its end
  • Player Control - set to Show to enable playback control elements within the video box
  • Player Title and Actions - set to Show to enable the title player and action icons
  • Muted - set to Yes to have the video muted while playing it 

Different mobile (tablet) platforms intentionally disable autoplay on mobile devices in order to protect user’s bandwidth.

Suggest an image overlay and tweak lightbox parameters, if any.

  • Image overlay - set to Show to upload and configure an overlay image for the video (the image will be displayed on the screen instead of a video shot before the playback)
  • Play icon - set to Yes to enable the Play icon in the centre of the overlay image
  • Lightbox - set to On to allow playback of video in a popup, aka lightbox
  • Color - specify the color of the background of the popup
  • Content width - the width of the video box within the popup
  • Content position - the position of the video box within the popup
  • Entrance animation - the animation effect for the popup on switching on the playback  

 

Employ Video widget to add Soundcloud audios to the content of the page.

Configuring Video

See Configuring Sections for Advanced settings, Style is not available for Soundcloud. The Content tab allows specifying the following:

  • Link - the link to the SoundCloud audio file
  • Visual Player - set to Yes to enable a visual player
  • Additional Options - set Yes to Autoplay to enable automatic re-play of the audio, decide which control buttons are to be shown, and what would be their color.

 

Mark up parts of the image and provide them with descriptions hidden within the tooltips. To mark the image up, hotspots are used. Hotspot is an animated circle area, containing some text, if need be, to attract viewers' attention to a part of the image. A tooltip appears on hovering the cursor over the hotspot. Placing some description within the tooltip box may explain the area of the image you wanted to highlight.  

Configuring Image Tooltips

Content

Style Advanced

Image block

Specify the image and suggest the size thereof. 

Hotspot block

Add hotspots and configure their content and positions.

Hotspots are collected within a list. You can shuffle, add, copy and delete hotspots. Clicking on a list item will open configuration options for the hotspot. There are broken into two sets: Content and Position. The buttons that give access to the sets are named correspondingly. 

  1. Content
  • Type - the type of the content: text or Icon
  • Text / Icon - the text or icon to feature within the hotspot
  • Link - the hyperlink assigned to the hotspot (Active only when Tooltip Trigger is set to Hover). You can enable opening the link in a new window with the help of the icon on the right of the Link textbox.
  • Tooltip Text - the text and/or image of the tooltip. You can edit the text in the visual or HTML editor
  • CSS ID and CSS - your CSS code for custom styling of the content of the hotspots

2. Position

  • Horizontal and Vertical Position - indicate the position of the hotpost within the image (in % of the width and length of the image)
  • Tooltip position - the position of the tooltip as per the given hotspot: Global (default), Left, Right, Top, Bottom

Tooltips block

  • Position - the default position of a tooltip in relation to a hotspot
  • Trigger - the event to trigger the display of a tooltip: Hover, Click
  • Delay in - the time between the activation of a tooltip and it's displaying to the viewer (in seconds)
  • Delay out - the time between the deactivation of a tooltip and it's vanishing from the user's view (in seconds)
  • Arrow - select Show to display an arrow connecting tooltips to the buttons they explain 
  • Distance - the distance between a hotspot and a tooltip
  • Maximum width - the width of a tooltip box
  • zindex -  the stack order of the tooltip (999 by default). An element with greater stack order is always in front of an element with a lower stack order.

Image block

Specify the styling of the image.

  • Opacity - the level of saturation of the image
  • Border Type - the type of the border: None, Solid, Double, Dashed, Dotted. When anything but None is selected, the following options get available:
    • Width - the width of brush of the border line.
    • Color - the color of the border
  • Border Radius - the radius of the edges of the border
  • Box Shadow - set to Yes to enable Image shadow. See Configuring Columns for details on shadowing.

Hotspot block

Specify the styling both for the Default and Hover states.

  • Text Padding - the distance between the text and the borders of the hotspot.
  • Border Radius - the radius of the border edges
  • Typography - when set to ON the following configuration options will appear to style the text of the hotspot: size, font, style, letter spacing, etc
  • Opacity - the level of saturation of the hotspot background color
  • Color - the color of the border of the hotspot
  • Background Color - the color of the area within the hotspot
  • Border Type - the type of the border: None, Solid, Double, Dashed, Dotted. When anything but None is selected, the following options get available:
    • Width - the width of brush of the border line.
    • Color - the color of the border
  • Box Shadow - set to Yes to enable Image shadow. See Configuring Columns for details on shadowing.

Tooltip block

Specify the styling of tooltips.

  • Alignment - the alignment of the text within the tooltip box
  • Text Padding - the distance between the text and the borders of the hotspot.
  • Border Radius - the radius of the border edges
  • Typography - when set to ON the following configuration options will appear to style the text of the hotspot: size, font, style, letter spacing, etc
  • Opacity - the level of saturation of the hotspot background color
  • Color - the color of the border of the hotspot
  • Background Color - the color of the area within the hotspot
  • Border Type - the type of the border: None, Solid, Double, Dashed, Dotted. When anything but None is selected, the following options get available:
    • Width - the width of brush of the border line.
    • Color - the color of the border
  • Box Shadow - set to Yes to enable Image shadow. See Configuring Columns for details on shadowing.

See Configuring Sections

 

 

Employ HTML5 Video to insert videos with the help of the <video> tag.

Configuring HTML5 Video

Content

Style Advanced

Content block

Specify the video and cover resources.

  • MP4 Source, OGG Source and WebM Course - the links to the video resource with regard to the file-type
  • Choose cover - the image to feature in the video box as a preview to the video

Settings block

  • Show Buttons - set to Yes to show control buttons
  • Show Bar - set to Yes to show the playback bar. When set to Yes decide if you want to show the following options on the bar: time, duration, volume and fullscreen. Do that with the corresponding configuration options that become available when Show Bar is set to Yes.
  • Show Rewind - set to Yes to show the rewind icon, clicking on which will start the video again
  • Autoplay - set to Yes to play the video automatically when the page loads
    • Play in Viewport (available when Autoplay is set to Yes) - set to Yes to play video automatically when the frame happens to be in viewport, that is in the page area visible to the viewer
    • Stop on Leave (available when Play in Viewport is set to Yes) - set to Yes to stop video playback once the frame is off the visible area of the page 
  • Restart on Pause - set to Yes to automatically restart video playback when the end thereof is reached
  • Muted - set to Yes to mute the video (can later be unmuted with the help of the Volume controls, if available)
  • Loop - set to Yes to loop the playback
  • End at last frame (available when Loop is set to No) - set to Yes to end the video at the last frame instead of showing the first one.

Video block

Specify the look of the video box to play the video on the page.

  • Border Type - the type of the border: None, Solid, Dashed, Dotted, Double. When anything but None is selected, two more parameters will appear prompting you to specify the width of the border line brush and the color thereof.
  • Border Radius - the radius of the edges of the border (in px or %)
  • Box Shadow - set to Yes to enable a shadow to the video box (see Configuring Columns for details on shadows)

Overlay block

Select the color of the video box background, and specify the intensity of it.

Interface block

Specify the styles of the playback control elements of the video box: play, stop, etc. Do that for the two states thereof: Default and Hover.

  • Border Radius - the radius of the edges of the control element
  • Controls Background - the color of the background of a control element
  • Controls Color - the color of the control
  • Controls Opacity - the intensity of the above colors
  • Border Type - the type of the border of the controls: None, Solid, Dashed, Dotted, Double. When anything but None is selected, specify the brush width for the border
  • Box Shadow - set to Yes to enable shadow for the controls (see Configuring Columns for more on shadows)

Buttons block

  • Size - the size (in %) of the controls
  • Controls Spacing - the space between the controls

Bar block

Specify the styles of the control bar.

  • Padding - the space between the control elements located on the bar and the borders of the video box
  • Distance - the space between the bar and the borders of the video box
  • Border Radius - the radius of the edges of the bar
  • Controls Zoom - the size of the controls within the bar
  • Controls Spacing - the space between the controls within the bar

See Configuring Sections

 

Employ Image Compare to add two images to the page. The images come in one box, one next to the other. Such layout facilitates visual comparing of images. By default, images are displayed in half in the image comparison box. A handle is available in the center of the box. Dragging the handle to the side will reveal the hidden part of one of the images, and will cover the corresponding part of the other image.

Configuring Image Compare

Content

Style Advanced

Image and Labels block

Suggest the two images for comparison and specify the labels to explain the images.

Widget block

  • Size - the size of the widget (in %)
  • Alignment - the alignment of the widget within the column

Labels block

Tweak the look of the labels.

  • Distance - the space between the labels. 
  • Padding - the space between the text of the label and the borders of the label box
  • Vertical Alignment - the alignment of the labels within the image comparison box. By default, the labels are located in the opposite corners of the image comparison box. 
  • Border Type - the type of the border of the controls: None, Solid, Dashed, Dotted, Double. When anything but None is selected, specify the brush width for the border, as well as the color thereof
  • Border Radius - the radius of the edges of the bar
  • Box Shadow - set to Yes to enable shadow for the controls (see Configuring Columns for more on shadows)
  • Typography - when set to ON the following configuration options will appear to style the text of the labels: size, font, style, letter spacing, etc
  • Color - the colors of the text and border of the labels
  • Background Color - the color of the background of the label box

You can set different colors for the Original and Modified labels.

Separator block

  • Size - the size of the vertical line separating the two images (in %)
  • Background Type - the type of the background: Classic or Gradient. See Configuring Columns for details.

Handle block

Specify the colors and size for the handle here. Do that for the three states: normal (default), Hover (when cursor is hovered over the handle) and Dragged (when the handle is dragged to the side).

See Configuring Sections

 

Add an image to the page.

Configuring Image

Content Style

Advanced

Upload/Select an image and specify some details for it.

  • Image Title Attr - the title for the image (title attribute for SEO)
  • Image Alt Attr - the alternative text to feature on the screen when image is not displayed (alt attribute for SEO)
  • Image size - the size of the image: Extra Small, Small, Medium, Large, Extra Large
  • Alignment - the alignment of the image within the column
  • Caption - the text for the caption
  • Link to - the link to a resource: None, Media File, Custom URL. When anything but None is selected, you will be prompted to specify the link.

Image block

Specify the styling for the image.

  • Size - the size of the image as a % of the column size
  • Opacity - the saturation of the image colors (in %)
  • Hover animation - the animation effect assigned to the image. Activates when the cursor is hovered over the image.
  • Border Type - the type of the border of the image: None, Solid, Dashed, Dotted, Double. When anything but None is selected, specify the brush width for the border, as well as the color thereof
  • Border Radius - the radius of the edges of the image
  • Box Shadow - set to Yes to enable shadow for the image (see Configuring Columns for more on shadows)

Caption block

  • Alignment - the alignment of the caption relative to the image
  • Text Color - the color of the text of the caption 
  • Typography - when set to ON the following configuration options will appear to style the text of the caption: size, font, style, letter spacing, etc

See Configuring Sections

 

Add an image box to the page. An image box contains an image, a headline and description of the image.

Configuring Image Box

Content Style

Advanced

Upload/Select an image and suggest the headline as well as the description.

  • Image Title Attr - the title for the image (title attribute for SEO)
  • Image Alt Attr - the alternative text to feature on the screen when image is not displayed (alt attribute for SEO)
  • Title & Description - the title and description of the image. Edit the description either in the visual or HTML mode.
  • Position - the position of the image within the image box
  • Title HTML tag - the tag assigned to the title text
  • Link to - the link to a resource: None, Media File, Custom URL. When anything but None is selected, you will be prompted to specify the link.

Image block

  • Image Spacing - the space between the image and the headline/description
  • Image size - the size of the image
  • Opacity - the saturation of the image colors (in %)
  • Animation - the animation effect to be applied to the image on hovering the cursor over it
  • Border Type - the type of the border of the image: None, Solid, Dashed, Dotted, Double. When anything but None is selected, specify the brush width for the border, as well as the color thereof
  • Border Radius - the radius of the edges of the image
  • Box Shadow - set to Yes to enable shadow for the image (see Configuring Columns for more on shadows)

Content block

  • Alignment, Vertical alignment - the alignment of the title and description within the image box
  • Title Spacing - the distance between the title and description
  • Title Color - the color of the title
  • Title Typography - when set to ON the following configuration options will appear to style the text of the title: size, font, style, letter spacing, etc
  • Description Color - the color of the description
  • Description Typography - when set to ON the following configuration options will appear to style the text of the description: size, font, style, letter spacing, etc

See Configuring Sections

 

Adds a gallery of images.

Configuring Image Gallery

Content Style

Advanced

Image Gallery

Add images and tweak the layout of the gallery. Click on the Add Images button to upload/select images.

  • Image size - the size of the images
  • Columns - the number of columns to make up the gallery and feature images
  • Link to - the hyperlink to take viewers to a resource on clicking on the gallery: None, Media, Custom Link, Lightbox 

Image Lightbox (available when Lightbox is selected for Link to in the Images block)

A lightbox is an area to preview images, which takes the whole space of the page when activated and hides any content but for the image gallery. Page content is overlayed by the background of the lightbox. The lightbox can be closed any time. The use of a lightbox helps focus viewers' attention on the image gallery.  

  • Color - the color of the background of the lightbox
  • Content width - the width of the image gallery within the lightbox
  • Content Position - the position of the gallery within the lightbox 
  • Entrance Animation - the animation effect to be displayed on activation of the lightbox

Images block

  • Spacing - the space between the images. When Custom is selected, indicate the spacing value.
  • Border Type - the type of the border of the images: None, Solid, Dashed, Dotted, Double. When anything but None is selected, specify the brush width for the border, as well as the color thereof
  • Border Radius - the radius of the edges of the images (in px or %)

Caption block

  • Display - set to Show to display the caption block. The following configuration options are then available:
  • Alignment - the horizontal alignment of the captions relative to the images
  • Title Color - the color of the captions
  • Title Typography - when set to ON the following configuration options will appear to style the text of the captions: size, font, style, letter spacing, etc

See Configuring Sections

 

Add an icon to the page.

Configuring Icon 

Content Style

Advanced

  • View - the view of the icon: Default, Stacked, Framed. By default, the icon is displayed as it is. When Stacked is selected the icon is enclosed into a shape (see below). When Framed is selected, then the icon is enclosed into s shape, though only the border thereof is displayed.
  • Icon - the icon to display
  • Shape - the shape to enclose the icon
  • Link - the hyperlink to be assigned to the icon
  • Alignment - the alignment of the icon within the column

Icon block

Specify the styling for the icon.

  • Primary Color - the color of the icon
  • Secondary Color (available when Stacked or Framed is selected for View)
  • Size - the size of the icon and the shape, if any
  • Icon Padding - the space between the icon and the borders of the shape
  • Rotate - the angle of the icon within the shape
  • Border Radius - the radius of the edges of the shape

Icon Hover block

Specify the colors and the animation that will be displayed on hovering a cursor over the icon.

See Configuring Sections

 

Add icons of social networks and assign links to them.

Configuring Social Icons

Content Style

Advanced

Find the list of social icons here. You can shuffle, add, delete and edit the icons on the list. To edit an icon, click on the corresponding item on the list. The configuration options will get unfolded:

  • Icon - the network and its icon
  • Link - the link to be assigned to the icon
  • Shape - the shape of the icons
  • Alignment- the alignment of the icons within the column 

Icon block

Specify the styling for the icon.

  • Color - the colors of the icons: Official, Custom. When Custom is selected, the following two parameters become available:
    • Primary Color - the color of the icon
    • Secondary Color (available when Stacked or Framed is selected for View)
  • Size - the size of the icon and the shape, if any
  • Icon Padding - the space between the icon and the borders of the shape
  • Rotate - the angle of the icon within the shape
  • Border Radius - the radius of the edges of the shape

Icon Hover block

Specify the colors and the animation that will be displayed on hovering a cursor over the icon. Colors configuration is available only when Custom is selected for Icon Color.

 

 

Add a list of icons with text descriptions and links.

Configuring Icon List

Content Style

Advanced

Find the list of icons here. You can shuffle, add, delete and edit the icons on the list. To edit an icon, click on the corresponding item on the list. The configuration options will get unfolded:

  • Text - the text to feature next to the icon
  • Icon - select an icon
  • Link - the link to be assigned to the icon

List block

  • Space between - the space between the icons on the list
  • Alignment- the alignment of the icons within the column
  • Divider - set to On to enable a divider line between the icons. When On is selected, you will be prompted to configure the style, color, weight and width of the divider line. 

Icon block

  • Icon - the color of the icons
  • Size - the size of the icons

Text block

  • Text Indent - the distance between the text and the icon
  • Text Color - the color of the text
  • Typography - when set to ON the following configuration options will appear to style the text of the captions: size, font, style, letter spacing, etc

See Configuring Sections

 

Add a box containing an icon, icon title and description.

Configuring Icon Box

Content Style

Advanced

Upload/Select an icon and suggest the headline as well as the description.

  • View - the view of the icon: Default, Stacked, Framed. By default, the icon is displayed as it is. When Stacked is selected the icon is enclosed into a shape (see below). When Framed is selected, then the icon is enclosed into shape, though only the border thereof is displayed.
    • Shape - the shape to enclose the icon
  • Icon - the icon to display
  • Shape - the shape to enclose the icon
  • Title & Description - the title and description of the image. Edit the description either in the visual or HTML mode.
  • Position - the position of the image within the image box
  • Title HTML tag - the tag assigned to the title text
  • Link to - the link to a resource: None, Media File, Custom URL. When anything but None is selected, you will be prompted to specify the link.

Icon block

Specify the styling for the icon.

  • Primary Color - the color of the icon
  • Secondary Color (available when Stacked or Framed is selected for View)
  • Spacing - the space between the icon and title
  • Size - the size of the icon and the shape, if any
  • Icon Padding - the space between the icon and the borders of the shape
  • Rotate - the angle of the icon within the shape
  • Border Radius - the radius of the edges of the shape

Icon Hover

Specify the colors and the animation that will be displayed on hovering a cursor over the icon. Colors configuration is available only when Custom is selected for Icon Color.

Content block

  • Alignment, Vertical alignment - the alignment of the title and description within the icon box
  • Title Spacing - the distance between the title and description
  • Title Color - the color of the title
  • Title Typography - when set to ON the following configuration options will appear to style the text of the title: size, font, style, letter spacing, etc
  • Description Color - the color of the description
  • Description Typography - when set to ON the following configuration options will appear to style the text of the description: size, font, style, letter spacing, etc

See Configuring Sections

 

The Circle Progress widget is used to show an animated progress (loading) circle-bar representing a percent value towards the completion of some operation. The circle-bar comes with a text inscription meant to provide explanation on the visualized statistics.

Configuring Circle Progress

Content Style

Advanced

Circle block

  • Value - the value to be displayed inside the circle, the part of the whole the highlighted part of the circle represents.
  • Suffix - the unit to credit the given value (%, for example). The suffix explains what the given value presents.
  • Value position - the position of the value relative to the circle: inside, below
  • Suffix Position - the position of the suffix relative to the value: before, after
  • Suffix Vertical Alignment - the alignment of the suffix relative to the value
  • Suffix Top Offset (available when Top alignment is selected) - the location of the suffix along the imaginary vertical line relative to the top right corner of the value
  • Reverse Animation - set to Yes to mirror the display of the highlighted part of the circle
  • Easing - the easing effect for the animation
  • Duration - the duration of the animation (in milliseconds)
  • Start Angle - define where on the circle the animation and highlighting is to start
  • Appear Offset - the offset, relative to when the widget enters the viewport, after which the animation starts

Text block

Add text or/and image to the circle-bar. Provide explanations, give definition or just state the title for the diagram. You can use either the visual or HTML editor to format the text.

NA See Configuring Sections

 

Add an animated counter. Counters allow displaying, for example, the number of users who have visited your site, the number of comments users have left, the number of posts you have published, etc. in a visually pleasing way.

Configuring Counter

Content Style

Advanced

  • Starting Number - the value to start the counter from
  • Ending Number - the value to stop counting on reach of
  • Number prefix - the prefix to the number on count
  • Number Suffix - the suffix to the number on count
  • Animation Duration - the duration of the animation (in milliseconds)
  • Thousand Separator - set to Show to display a separator between the thousands
  • Title - the title of the counter

Configure here the color and some typographic parameters for the number and title of the counter. 

See Configuring Sections

 

Add a progress bar. The Progress Bar widget allows showing the User how far he/she has advanced with some operation.

Configuring Progress Bar

Content Style

Advanced

  • Title - the title of the bar (will feature next to it)
  • Type -the type of the bar: Default (black), Info, Success, Warning, Danger. The type here defines the colour of the bar
  • Percentage - the % of the bar to be filled with color
  • Display percentage - set to Show to display the value of % on the bar
  • Inner Text - the text to display on the colored part of the bar

Specify the colors for the progress bar and the title.

When Typography is set to ON the following configuration options will appear to style the text of the title: size, font, style, letter spacing, etc

See Configuring Sections

 

The Countdown widget allows displaying the countdown towards some event.

Configuring Countdown 

Content

Style

Advanced
  • Due Date - the target date and time of counting
  • View - the visual representation of the counter: inline, block
  • Hide on expiring - set to Show to show the counter when the target date is reached
  • Days, Hours, Minutes, Seconds - decide what time parts are to be displayed on the counter
  • Show Labels - set to Yes to show labels of time parts next to each part, and then specify the names of those parts in your language.

Boxes block

  • Container width - the width of the boxes to contain the digits of the counter (in % or px)
  • Background color - the color of the boxes
  • Border Type - the type of the border of the boxes: None, Solid, Double, Dashed, Dotted. If anything but None is selected, specify the Border Radius, that is the rounding of the edges of the border line.
  • Space between - the distance between the boxes
  • Padding - the space between the digits and the border of the boxes

See Configuring Sections

 

Slides

Employ the Slides widget to add content sliders onto the page. Sliders make content more dynamic and engaging. A slide contains a text, image and button. A few slides make up a slider. To switch between the slides, a slider has some navigation elements: arrows - to switch the slides one after the other, and buttons - for the choice of a slide on the list. 

Configuring Slides

Content Style

Advanced

Slides block

Find the list of the slides here. Add, shuffle, delete, copy and edit the slides here. Click on the item on the given list to open the configuration options for the chosen slide. These are broken into the three categories: Background, Content and Style.

  1. Background
  • Color - the color of the background of the slide
  • Image - the background image of the slide

2. Content

  • Title & Description - the title and description to appear over the chosen background of the slide
  • Button Text - the text on the button to appear over the chosen background of the slide
  • Link - the hyper-link to be assigned to the button 

Leave these fields blank to display only the background on the slide.

3. Style

Set Custom to Yes to customize the positioning and color of the title, description and button for the chosen slide. Default styling settings can be set for all slides in the Style tab (see the column on the right).

Slider Options block

Specify the behavior and animation of the slider.

  • Pause on Hover - set to Yes to pause the autoplay of slides on hovering the cursor over the slider
  • Infinite Loop - set to Yes to play the slides continuously until paused
  • Autoplay - set to Yes to play the slides automatically on opening the page
  • Autoplay speed - the time (in milliseconds) to separate the play of the two consecutive slides
  • Navigation - the elements of navigation to switch between the slides: None, Arrows, Dots, Arrows and Dots
  • Transition - the effect of transition from slide to slide: Slide, Fade
  • Transition speed - the time (in milliseconds) for the transition effect
  • Content animation - the direction of the transition animation as applied to the content: Up, Down, Left, Right, Zoom, None

Slides block

Specify the positioning of the content within the slides.

  • Content width - the width of the content box within the slide (in px or %)
  • Padding - the space between the content and the borders of the slide
  • Horizontal and Vertical Position - the position of the content box within the slide
  • Text Align - the alignment of the text within the content box

Title & Description blocks

Specify the colors, spacing and font styles for the title and description of the slider.

When Typography is set to ON the following configuration options will appear to style the text of the title and description: size, font, style, letter spacing, etc

Button block

Specify how the button is to look on the storefront, both when the mouse cursor is hovered over the button and when not.

  • Size - the size of the button: Extra Small, Small, Medium, Large, Extra Large
  • Typography - when set to ON the following configuration options will appear to style the text on the button: size, font, style, letter spacing, etc
  • Text color - the color of the text on the button
  • Background color - the color of the background of the text on the button
  • Border width - the width of the line brush for the border of the button
  • Border Radius - the radius of the external angles of the button (in px or %)
  • Border Color - the color of the border

 

Navigation block

Specify the look of arrows and bullets (aka dots) used to slide the content within the slider to the right/left. Configure the position (Inside, Outside the slider), size and color of these navigation elements. 

See Configuring Sections

 

The Flip Box widget allows adding animated boxes that flip to the side when the visitor hovers the cursor over them. A flip box has two sides, so only two versions/copies of content can be displayed with the help of a flip box as compared to a slider, where multiple copies can be presented. Flip boxes make content more dynamic and engaging. A flip box contains a text, icon, image and button. 

Configuring Flip Box

Content

Style Advanced

Front block

The front side of a flip box is displayed to the viewer on load of the page. It is aimed at attracting the viewer's attention to the subject matter, thereby it can welcome either an image or icon alongside the text. The latter makes up the content of the flip box front. Use the Content tab to access the respective configuration options. Click on the Background tab to customize the background of the flip box side (see Configuring Columns for details).

  • Graphic element - choose the graphic element for the front side of the flip box: None, Image, Icon. When Image or Icon is selected, you will be prompted to tweak further configuration options specific to the chosen element.
  • Title & Description - the title and description to appear on the front side

Leave the Title & Description fields blank to display only the background (icon or image) on the front side.

When Image is selected as a graphic element, upload/select an image, specify the alternative attributes for it and indicate the size of the image. Alternative attributes are essential for successful SEO practices.

When Icon is selected as a graphic element, select an icon and decide if it is to be enclosed within a shape. You can select either a square or circle shape, filled or with just a border line.

Back block

The back side of a flip box is meant to call for actions, thereby it contains a button alongside some text. The configuration options here as similar to those described above, but for the options specific to the use of buttons:

  • Button Text - the text on the button
  • Link - the link to be assigned to the button

Settings block

  • Height - the height of the flip box (in px and vh)
  • Border Radius - the radius of the external angled of the flip box (in px or %)
  • Flip effect - the effect of animation to highlight the transition from the front to back side. With regard to the chosen effect, additional configuration options may appear. For example, for the Flip effect it is suggested you specify the Flip Direction and switch on/off the 3D Depth effect (when being flipped the content will hover over the background of the flip box).

Specify the styling of the content of the flip box. The configuration options here are split into the two blocks: Front and Back. Both blocks have similar settings with regard to the content they can display.

  • Padding - the space between the content and the borders of the flip box
  • Vertical Position - the position of the content box within the flip box
  • Alignment - the alignment of the content within the flip box

Specify the look of the text on the flip box

  • Title Spacing - the space between the title and description of the side
  • Title Text Color / Description Text Color - the color of the text of the title/description
  • Typography - set to ON to further style the text of the title and description: size, font, style, letter spacing, etc

Specify how the button is to look on the storefront, both when the mouse cursor is hovered over the button and when not:

  • Size - the size of the button: Extra Small, Small, Medium, Large, Extra Large
  • Typography - when set to ON the following configuration options will appear to style the text on the button: size, font, style, letter spacing, etc
  • Text color - the color of the text on the button
  • Background color - the color of the background of the text on the button
  • Border width - the width of the line brush for the border of the button
  • Border Radius - the radius of the external angles of the button (in px or %)
  • Border Color - the color of the border

Specify how the icon is to look on the back side of the flip box.

  • Spacing - the space between the icon and the title/description
  • Primary and Secondary Color - the colors of the icon and shape
  • Icon Size - the size of the icon and shape
  • Icon Padding - the distance between the icon and the borders of the shape
  • Icon Rotate - the angle at which the icon is displayed within the shape
  • Border Radius - the radius of the border of the icon

See Configuring Sections

 

The Gallery Slider widget allows viewing images in a slideshow manner. The Gallery Slider consists of two areas: image gallery and image slider. Images can be viewed in a gallery as thumbnail copies, or in a slider as full-size copies. The slider plays images automatically, one after the other. Viewers can select an image to preview in the slider from the gallery.

Configuring Gallery Slider

Content Style 

Advanced

Gallery block

Select/upload images here. Click on the Add Images to do so. Click on the image thumbnail to delete it from the list. Click on Clear to delete all images from the list in a go.

Thumbnails block

Specify the size of the images as they will appear in the gallery part of the widget. Indicate the number of columns for the gallery to have.

Preview block

Configure the work of the slider as part of the widget.

  • Image Size - the size of the image as it will be displayed in the slider
  • Link to - the link to be assigned to the image: None, Media File (opens the image full screen in a new tab), Custom. When Custom is selected, specify the hyperlink in the relevant field.
  • Image Stretch - when set to Yes, images will be stretched to the size of the widget box
  • Pause on Hover - set to Yes to pause the autoplay of slides on hovering the cursor over the slider
  • Infinite Loop - set to Yes to play the slides continuously until paused
  • Autoplay - set to Yes to play the slides automatically on opening the page
  • Autoplay speed - the time (in milliseconds) to separate the play of the two consecutive slides
  • Adaptive Height - set to Yes to adapt the height of the images to the geometry of the widget box 
  • Effect - the effect of transition from slide to slide: Slide, Fade
  • Animation speed - the time (in milliseconds) for the animation effect
  • Direction - the direction of the transition animation as applied to the content: Up, Down, Left, Right, Zoom, None

Preview block

Configure the layout for the slider part of the widget. Click on the Layout button at the top of the block.

  • Position - the position of the slider in the widget box: top, left, right
  • Width - the width of the slider (in %)
  • Spacing - the space between the slider and the gallery

Click on the Images button at the top of the block to configure the look of the images in the slider.

  • Border type - the type of the border of the images: None, Solid, Dashed, Dotted, Double. When anything but None is selected, more options of configuration will get available.
  • Border Radius - the radius of the external angles of the images in the slider

Thumbnails block

Specify the look of the gallery as part of the widget.

  • Alignment and Vertical Alignment - the horizontal and vertical alignment of the thumbnail images in the gallery
  • Horizontal and Vertical Spacing - the space between thumbnail the images
  • Border type - the type of the border of the images: None, Solid, Dashed, Dotted, Double. When anything but None is selected, more options of configuration will get available.
  • Border Radius - the radius of the external angles of the images in the gallery
  • Background color - the color of the background of the images
  • Opacity - the transparency of the images
  • Box shadow - the shadow of the images in the gallery. Set to Yes to enable shadow, and configure some additional shadow styling options (see Configuring Columns). 

You can specify the above settings differently for the three states of the thumbnail images: default, Hover and Active

  • Background color - the color of the overlay for inactive images
  • Opacity - the transparency of the overlay
  • Border Type - the border of the overlay

You can specify the above settings differently for the three states of the thumbnail images: default, Hover and Active

See Configuring Sections

 

Use the Testimonial Carousel widget to organize testimonials into an attractive content slider block. 

Make use of testimonials, the proof of your clients’ loyalty to your brand. Testimonials make a positive impact on the people who are visiting your site for the first time. 

Configuring Testimonial Carousel

Content Style

Advanced

Slides block

Slides consist of the text of the testimonial, author's signature and avatar.

This is where you can find a list of all slides in the carousel. Add, shuffle, delete, copy and edit slides here.

  • Skin - the look of the box to enclose the text of the testimonial: Default, Bubble
  • Layout - the inter-location of the elements of the slide: Image Top, Image Left, Image Right, Image Stacked, Image Incline
  • Alignment - the alignment of the content of the slide within the carousel box
  • Slides per View - the number of slides to be displayed within the carousel box at a time 
  • Width - the width of the slide (in % or px)

Additional Options block

  • Arrows - set to Show to display navigation arrows (used to switch to the next/previous slide)
  • Pagination - select the type of the visualization of the number of slides in the carousel: None, dots, fraction, progress
  • Transition duration - the time (in milliseconds) of the effect of transition to another slide
  • Autoplay - set to Yes to play the slides automatically on opening the page
  • Autoplay speed - the time (in milliseconds) to separate the play of the two consecutive slides
  • Pause on interaction - set to Yes to pause the playback of slides when the cursor if over the carousel
  • Image size - the size of images in the avatar

Slides block

Specify how slides are to look as part of the carousel.

  • Space between - the space between the slides (when more than 1 is chosen per view)
  • Background Color - the color of the background of the slides
  • Border size - the size of the border brush of the slides
  • Border color - the color of the border
  • Padding - the space between the content of the slides and the borders thereof
  • Border Radius - the radius of the external angles of the slides

 

Content block

  • Gap - the space between the text of the testimonial and the avatar + name + role
  • Content Text Color -the color of the text of the testimonial
  • Content Typography - when set to ON the following configuration options will appear to style the text of the testimonial: size, font, style, letter spacing, etc
  • Name Text Color -the color of the text of the name of the author
  • Name Typography - when set to ON the following configuration options will appear to style the text of the name of the author: size, font, style, letter spacing, etc
  • Title Text Color -the color of the text of the role of the author
  • Title Typography - when set to ON the following configuration options will appear to style the text of the role of the author: size, font, style, letter spacing, etc

 

Image block

  • Image Size - the size of the avatar image
  • Image Gap - the space between the avatar image and the name + title of the author
  • Border - set to Yes to enable the border of the image. You will then be asked to specify the color and brush width thereof.
  • Border Radius - the radius of the external angles of the border

Navigation block

  • Arrows and Pagination size - the sizes of the arrows and pagination elements
  • Arrows and Pagination Color - the color of the arrows and pagination elements

Bubble block

  • Background color - the color of the bubble
  • Padding - the space between the text of the testimonial and the borders of the bubble
  • Border Radius - the radius of the external angles of the border of the bubble
  • Border - set to Yes to enable the border of the image. You will then be asked to specify the color and brush width thereof.

See Configuring Sections

 

Add a dynamic gallery to the page with the help of the Image Carousel widget.

Configuring Image Carousel

Content Style  Advanced

Image Carousel block

Add images to the carousel with the help of the Add Images button. To delete selected images, click on the image on the list. To clear the list, click on the Clear active link.

The following options are available to configure the carousel:

  • Image Size - the size of the images in the carousel
  • Dynamic Mode - set to On for all slides to have a dynamic width and to be distributed proportionally to the given height
  • Slides to Show - the number of images to feature in every slide 
  • Slides to Scroll - the number of images to change with every new slide
  • Image Stretch - set to Yes to have the images stretched full size
  • Navigation - the elements to play the slides manually: None, Dots, Arrows, Dots and Arrows
  • Link to - the link to be assigned to the carousel: None, Custom, Media File, Lightbox. On clicking on the link, viewers will be redirected to the address in the link if a custom address is specified, or to the full-screen image opened in a new tab, or to the lightbox. 
A lightbox is an area to preview images, which takes the whole space of the page when activated and hides any content but for the image carousel. Page content is layered over by the background of the lightbox. The lightbox can be closed any time. The use of a lightbox helps focus viewers' attention on the image carousel.  

Image Lightbox (available when Lightbox is selected for Link to in the Image Carousel block)

  • Color - the color of the background of the lightbox
  • Content width - the width of the image gallery within the lightbox
  • Content Position - the position of the gallery within the lightbox 
  • Entrance Animation - the animation effect to be displayed on activation of the lightbox

Additional options

  • Pause on Hover - set to Yes to pause the playback of the slides when hovering a cursor over the carousel
  • Infinite Loop - set to Yes to play the slides continuously until paused
  • Autoplay - set to Yes to play the slides automatically on opening the page
  • Autoplay speed - the time (in milliseconds) to separate the play of the two consecutive slides
  • Animation speed - the time (in milliseconds) for the animation effect
  • Direction - the direction of the transition animation as applied to the content: Up, Down, Left, Right, Zoom, None

Navigation block

Specify the look of arrows and bullets (aka dots) used to slide the content within the slider to the right/left. Configure the position (Inside, Outside the slider), size and color of these navigation elements. 

Image block

Specify the look of the images in the carousel.

  • Spacing - the distance between the images in a slide: Default, Custom. When Custom is selected, specify the spacing.
  • Border Type - the type of the border of the images: None, Solid, Dashed, Dotted, Double. When anything but None is selected, more options of configuration will get available.
  • Border Radius - the radius of the external angles of the border of the images

See Configuring Sections

 

The Facebook Comments widget allows viewers to comment on the content on your site using their Facebook accounts. People can choose to share their comment activity with their friends (and friends of their friends) on Facebook as well. The comments plugin also includes built-in moderation tools and social relevance ranking.

The following configuration options are available to set up the widget:

  • Alignment - the alignment of the widget within the column
  • URL to comment on - the URL of a website you want to use with the comments widget
  • Number of posts - the number of posts you want to show
  • Width - the width of the widget
  • Locale - the code of the country and language you want to see in the comments
  • App Id - your Facebook API, if any.

For Advanced configuration options see Configuring Sections.

More on employing Facebook comments.

 

Employing Embedded comments is a simple way to put comments to Facebook public posts into the content of your web page. Only public comments from Facebook Pages and profiles can be embedded.

The following configuration options are available to set up the widget:

  • Alignment - the alignment of the widget within the column
  • URL of comment - the URL of the comment to embed
  • Width - the width of the embedded comments box
  • Height - the height of the embedded comments box
  • Include parent comment (if URL is a reply) - set to On to embed the parent comment when the URL provided for the URL of Comment option is a reply
  • Locale - the code of the country and language you want to see in the comments
  • App Id - your Facebook API, if any.

For Advanced configuration options see Configuring Sections.

More on embedding Facebook comments.

 

Disqus is a web service to discuss issues. With the help of the present widget these discussions can be imported into your page. 

To enable Disqus comments, indicate your Disqus shortname.

A shortname is the unique identifier assigned to a Disqus site. All the comments posted to a site are referenced with the shortname. The shortname tells Disqus to load only your site's comments, as well as the settings specified in your Disqus admin.

The shortname can be seen in the address bar of your browser as example.disqus.com/admin or in the forum settings.

For Advanced configuration options see Configuring Sections.

 

Add testimonials to the page with the help of the present widget. A testimonial box contains the text of the testimonial (aka feedback/review), and the signature of the author, that is an avatar, name and role.

Configuring Testimonial

Content Style

Advanced

Suggest the content for the testimonial: text, avatar image, author's name and job.

The text of the testimonial can be formatted with the help of the visual editor. Alternatively, you can provide the text with HTML tags in the text editor.

Specify the Title Attr and Alt Attr values for best SEO practice, and set the position of the image relative to the author's name and role: Aside or Top.

Finally, indicate the alignment of the testimonial within the column. 

Configure the color and font styles for the text of the testimonial, author's name and role separately.

Setting Typography to On will unfold more configuration options for each block.

Specify the following parameters for the avatar image:

  • Image Size - the size of the image
  • Border Type- the type of the border of the image. Set to None to show no border. Otherwise, indicate the width of the border line brush and its color. 
  • Border Radius - the radius of the external angles of the image (in px or %)

See Configuring Sections

 

Google

Tell customers more about yourself. Add the location of your store with the help of the Google Maps service.

The following configuration options are available to set up the widget:

  • Address - the address to show on the map
  • Zoom level - the level of zoom for the map
  • Height - the height of the map
  • Prevent Scroll - set to Yes to prevent the CTRL+scroll to zoom the map

For Advanced configuration options see Configuring Sections.

 

The Google Translate widget allows customers to translate your page into their native languages.   

The following configuration options are available to set up the widget:

  • Alignment - set the position of the Google Translate inscription and language selector within the column
  • Display mode - choose how the widget is to be displayed on the page: Tabbed or Inline
  • Layout - set up how the parts of the widget are to be combined
  • Translation banner - set to Show to automatically display the Translation banner to users, who speak languages different to that of your page. The banner is displayed at the top of the page and follows the scroll. 
  • Multilingual page - set to Yes if you have multilingual content on the page. It will help Google Translate to detect multilingual content faster.
  • Track translation traffic - set to Yes if you have a Google Analytics account, you can connect it to your page. Enter your Google Analytics ID here. Google will analyze traffic automatically and show the results in your Google Analytics account.

For Advanced configuration options see Configuring Sections.

 

Employ the Google Hangout widget to add the Hangout button to the page. Clicking on the button visitors launch a Google Hangout directly from your site.

The following configuration options are available to set up the widget:

  • Alignment - the alignment of the button within the column
  • Button width - the width of the Google Hangout button
  • Account - the email to auto-invite
  • Locale - specify the language of Google Hangout to open

For Advanced configuration options see Configuring Sections.

 

Google Analytics provides metrics, trend graphs, and time stats from Google Analytics Service.

To enable Google Analytics on the page enter the ID of your Google Analytics account.

You will need a Google account to enable Google Analytics. The widget does not use your Gmail account for anything other than signing in and out of Google Analytics.

 

Do not use multiple Google Analytics widgets of the same kind on one page.

For Advanced configuration options see Configuring Sections.

 

Add a detailed table of offer to the page. The table lists the price and detailed features of the offer. To prompt action, the table has a button and text of motivation. Visual elements of design, like sales ribbon, headers, etc facilitate further motivation to act.

Configuring Price Table

Content Style

Advanced

Header block

Specify the name for your offer

Title and Subtitle - the title and subtitle of the offer

Pricing block

Specify the price of the offer. If it is sale, you can indicate the old price too.

  • Currency Symbol - choose the symbol of the currency
  • Price - indicate the price of the offer
  • Sale - set to On if the price above is a discounted offer. The following option will get available:
  • Original Price  - indicate the original price of the offer. Will be stricken through with a line when displayed in the table.
  • Period - indicate the period, if the above fee has to be paid over a period

Features block

Add features to your offer, explain what is included in it. Click on the Add Item button to add a feature. Features are collected into a list. You can shuffle the list, add, copy, delete and edit features. Clicking on a feature will unfold you the following options:

  • Text and Icon - the text and icon of the feature
  • Icon Color - the color of the icon, if any

Footer block

Provide a call and motivation for action.

  • Button Text - the text to feature on the button
  • Link - the link to be assigned to the button. Clicking on the button will take viewers to the resource
  • Additional Info - the text of the motivation to click on the button

Ribbon block

Decide if you want to show a ribbon at the corner of the Header of the table. Set Show to Yes to do so. Specify the title and position of the ribbon.

Header block

  • Background Color - the color of the background
  • Padding - the spacing between the content and the borders of the content block
  • Color - the color of the content element
  • Title Typography - when set to ON the following configuration options will appear to style the text of the content element: size, font, style, letter spacing, etc

Pricing block

Since price is of a text attribute too, same configuration options as those for Header are present here. At the same time, you can further specify the position of the currency symbol, original price and payment period, as well as to tweak the sizes of these elements.

Features block

Since features are of a text attribute too, same configuration options as those for Header are present here. At the same time, you can further specify the alignment and width of the features block. Furthermore, this is where you can style the divider - the line that divides the features.

To enable the dividing line, set Divider to Yes. The following options will get available:

  • Style - the style of the dividing line: Dotted, Solid, Double, Dashed.
  • Color - the color of the line
  • Weight - the width of the line brush
  • Width - the length of the line
  • Gap - the spacing between the line and the features on top/bottom of it 

Footer block

Since footer has elements of a text attribute, same configuration options as those for Header are present here. At the same time, you can further specify the margins for the text of motivation. Furthermore, this is where you can style the button. Do that for the two states: when the mouse cursor is hovered over the button and when not.

  • Size - the size of the button: Extra Small, Small, Medium, Large, Extra Large
  • Typography - when set to ON the following configuration options will appear to style the text on the button: size, font, style, letter spacing, etc
  • Text color - the color of the text on the button
  • Background color - the color of the background of the text on the button
  • Border type - the type of the border: None, Solid, Dashed, Dotted, Double. When anything but None is selected the following option gets available:
  • Border width - the width of the line brush for the border of the button
  • Border Radius - the radius of the external angles of the button (in px or %)
  • Border Color - the color of the border
  • Text padding - the space between the text on the button and the borders thereof

Footer block

Since footer has elements of a text attribute, same configuration options as those for Header are present here. At the same time, you can further specify the margins for the text of motivation. Furthermore, this is where you can style the button. Do that for the two states: when the mouse cursor is hovered over the button and when not.

  • Size - the size of the button: Extra Small, Small, Medium, Large, Extra Large
  • Typography - when set to ON the following configuration options will appear to style the text on the button: size, font, style, letter spacing, etc
  • Text color - the color of the text on the button
  • Background color - the color of the background of the text on the button
  • Border type - the type of the border: None, Solid, Dashed, Dotted, Double. When anything but None is selected the following option gets available:
  • Border width - the width of the line brush for the border of the button
  • Border Radius - the radius of the external angles of the button (in px or %)
  • Border Color - the color of the border
  • Text padding - the space between the text on the button and the borders thereof

Ribbon block

Since ribbon has elements of a text attribute, same configuration options as those for Header are present here. At the same time, you can further specify the distance of the ribbon from the corner of the Header block and if the ribbon is to have any shadow.

See Configuring Sections

 

Add a price list/menu to the page. The price list / menu features the items you sell, their prices and descriptions. You can furthermore upload images to visually support the items you sell.

Configuring Price List

Content  Style

Advanced

Find here the list of items to feature on the price list. To add an item, click on the Add Item button. You can shuffle the list, add,copy, delete and edit items. To edit an item, click on it. The following configuration options will get available:

  • Price - the price of the item
  • Title and Description - the title and description of the item
  • Image - the image of the item
  • Link - the link to be assigned to the item. Clicking on the item on the frontend, will take viewers to the destination specified in the link.

List Style Block

  • Color - the color of the content element
  • Title Typography - when set to ON the following configuration options will appear to style the text of the content element: size, font, style, letter spacing, etc
  • Separator Style - the style of the line separating the title and price
  • Separator Weight - the brush width of the separator
  • Separator Spacing - the space between the title and separator, price and separator

Image Style block

  • Image Size - the size of the image
  • Border Radius - the radius of the external angles of the border of the image
  • Spacing - the space between the image and the title and description

Item Style

  • Rows Gap - the space between the rows of items
  • Vertical align - the alignment of the items

See Configuring Sections

 

Employing Embedded comments is a simple way to retrieve public posts into the content of your web site or web page. Only public posts from Facebook Pages and profiles can be embedded.

The following configuration options are available to set up the widget:

  • Alignment - the alignment of the widget within the column
  • URL of post - the URL of the post to embed
  • Width - the width of the embedded post box
  • Height - the height of the embedded post box
  • Include full post - set to On to fetch the image of the post alongside the text
  • Locale - the code of the country and language you want to see in the post box
  • App Id - your Facebook API, if any.

For Advanced configuration options see Configuring Sections.

 

Employ Facebook Video Player to add Facebook videos and Facebook live videos to your website. You can use any public video post made by either a Page or a person as a video or live video source.

The following configuration options are available to set up the widget:

  • Alignment - the alignment of the widget within the column
  • URL of video- the URL of the video to embed
  • Width - the width of the embedded video box
  • Height - the height of the embedded video box
  • Include full post - set to On to fetch the text of the post alongside the video
  • Locale - the code of the country and language you want to see in the video box
  • App Id - your Facebook API, if any.

For Advanced configuration options see Configuring Sections.

 

Add the Facebook Like button to the page. A single click on the Like button will 'like' your content and share it onto Facebook.

You can also display a Share button next to the Like button to allow people to select the people they are sharing your content with and to add a personal note to the message.

The following configuration options are available to set up the widget:

  • Alignment - the alignment of the widget within the column
  • URL to like - the URL of the resource that will be liked and shared by visitors on Facebook on clicking the button
  • Action Type - the action to be performed on clicking on the button: Like or Recommend
  • Layout style - the style of the layout of the button: Standard, Button, Button Count, Box Count (count shows the number of presses on the button)
  • Button size - the size of the button
  • Wrapper Width - the width of the wrapper enclosing the button
  • Include Share Button - set to On to display the Facebook Share button next to Like
  • Show Friends Faces - set to On to show profile photos when 2 or more friends like this 
  • Locale - the code of the country and language for Facebook to interpret your content correctly
  • App Id - your Facebook API, if any.

For Advanced configuration options see Configuring Sections.

 

The Page plugin lets you easily embed and promote any Facebook Page on your website. Visitors can browse the posts, like and share the Page without leaving your site.

The following configuration options are available to set up the widget:

  • Alignment - the alignment of the widget within the column
  • Facebook Page URL - the URL of the page to embed
  • Tabs - the page tab to render (timeline, events, messages). Use a comma-separated list to add multiple tabs i.e. timeline, events.
  • Width - the width of the embedded page box
  • Height - the height of the embedded page box
  • Use Small Header - set to On to use a smaller version of the page header
  • Adapt to plugin container - set to On for the widget to try to fit inside the column
  • Hide Cover Photo - set to On to hide the cover photo of the page from the embedded page box
  • Show Friends' Faces - set to On to show profile photos when 2 or more friends like this 
  • Locale - the code of the country and language you want to see in the page box
  • App Id - your Facebook API, if any.

For Advanced configuration options see Configuring Sections.

More on Facebook Page plugin.

 

The Facebook Quote widget allows people to select text on your page and add it to their share, so they can tell a more expressive story. When text is selected, a popover is displayed prompting people to share the quotation. 

You do not need to implement Facebook login or request any additional permissions through app review in order to use this plugin.

To employ the widget, indicate the locale for the quote and add the app ID. The latter is optional (one unique Facebook application id is allowed per page).

For Advanced configuration options see Configuring Sections.

More on Facebook Quote plugin.

 

The Facebook Share button lets people add a personalized message to links before sharing your page on their timeline, in groups, or to their friends via a Facebook Message. Clicking on the button will call the Facebook Share popup.

The following configuration options are available to set up the widget:

  • Alignment - the alignment of the widget within the column
  • URL to share - the URL of the resource that will be shared by visitors on Facebook on clicking on the button
  • Layout style - the style of the layout of the button: Standard, Button, Button Count, Box Count (count shows the number of presses on the button)
  • Button size - the size of the button
  • Wrapper Width - the width of the wrapper enclosing the button
  • Mobile Iframe - set to On to show the share dialog in an iframe on mobile
  • Locale - the code of the country and language for Facebook to show you the Share pop in appropriate language
  • App Id - your Facebook API, if any.

For Advanced configuration options see Configuring Sections.

More on Facebook Share Button.

 

The Facebook Save Button widget inserts the Facebook Save button into the page. The button lets people save items or services to a private list on Facebook, share it with friends, and receive relevant notifications. For example, a person can save an item of clothing, trip, or link that they're thinking about and go back to that list for future consumption, or get notified when that item or trip has a promotional deal.

The following configuration options are available to set up the widget:

  • Alignment - the alignment of the widget within the column
  • Link of a website or product to save - the URL of the resource that will be saved by visitors to their Facebook accounts on clicking on the button
  • Button size - the size of the button
  • Wrapper Width - the width of the wrapper enclosing the button
  • Locale - the code of the country and language for Facebook to interpret your content appropriately
  • App Id - your Facebook API, if any.

For Advanced configuration options see Configuring Sections.

More on Facebook Save Button.

 

Embed Twitter posts with description, Likes and comments.

The following configuration options are available to set up the widget:

  • Alignment - the alignment of the widget within the column
  • URL of post - the URL of the post to embed
  • Max Width - the width of the post box
  • Hide Media - set to Hide to expand the links in the Tweet to photos, videos and previews
  • Hide Thread - when set to Hide, a collapsed version of the previous Tweet in a conversation thread will not be displayed when the given Tweet is the reply to another Tweet
  • Widget Type - the type of the widget: video, tweet
  • Theme - the theme of the post box: light, dark
  • Lang - the language of the post box controls

For Advanced configuration options see Configuring Sections.

 

Add Twitter Timeline onto your page. Timeline is a list or aggregated streams of posts.

The following configuration options are available to set up the widget:

  • Alignment - the alignment of the widget within the column
  • URL of profile - the URL of the profile to contain the timeline to embed
  • Width - the width of the timeline box
  • Max Height - the height of the timeline box
  • Tweet Limit - the number of tweets to show in the embedded timeline
  • Hide Header - set to Hide to hide the timeline header. 
  • Hide Footer - set to Hide to hide the timeline footer and Tweet composer link, if included in the type of the timeline widget.
  • Hide Border - set to Hide to remove all borders within the widget including those surrounding the widget area and separating Tweets.
  • Hide Scrollbar - set to Hide to crop and hide the main timeline scrollbar, if visible. Mind, that hiding standard user interface components can affect the accessibility of your website.
  • Transparent Background - set to Yes to hide the background of the widget
  • Theme - the theme of the post box: light, dark
  • Lang - the language of the post box controls

When timeline header is hidden, add some custom Twitter attribution, a link to the source timeline, for example, to comply with Twitter display requirements.

For Advanced configuration options see Configuring Sections.

 

Share information about the most interesting moments from Twitter.

The following configuration options are available to set up the widget:

  • Alignment - the alignment of the widget within the column
  • URL of post - the URL of the moment
  • Width - the width of the post box
  • Limit - the number of tweets to show in the embedded moment
  • Hide Footer - set to Hide to hide the timeline footer and Tweet composer link
  • Lang - the language of the post box controls

For Advanced configuration options see Configuring Sections.

 

Add the Twitter Follow button to the page to help customers follow your profile on Twitter.

The following configuration options are available to set up the widget:

  • Alignment - the alignment of the button within the column
  • URL of profile - the URL of the profile to follow
  • Size - the size of the button: Standard, Large
  • Hide Username- set to On to hide the username of the account
  • Hide Count - set to On to hide counter of followers
  • Lang - the language of the post box controls

For Advanced configuration options see Configuring Sections.

 

Add the Twitter Share button to the page to help customers share your content on Twitter.

The following configuration options are available to set up the widget:

  • Alignment - the alignment of the button within the column
  • Size - the size of the button: Standard, Large

For Advanced configuration options see Configuring Sections.

 

Add the Twitter Message button to the page and enable customers to send you direct messages, fast and easily.

The following configuration options are available to set up the widget:

  • Alignment - the alignment of the button within the column
  • Size - the size of the button: Standard, Large
  • Twitter user ID - the user ID of the Twitter user who will receive the messages.

To find your User ID, navigate to the Your Twitter data section in Settings, your User ID will be located right below the @username.

Make sure, your Twitter account settings are set to “Receive Direct Messages from Anyone” (Settings > Security and Privacy > Privacy).

For Advanced configuration options see Configuring Sections.

 

Analytics

Add metrics, trend graphs, and time stats from the Yandex Metrica service to your page.

To employ the widget, enter your Yandex.Metrica counter number.

A Yandex Metrica counter number is a unique identifier of the data storage associated with the counter. It is assigned by the Metrica system automatically on creation of the counter, and can not be changed later. 

To work with Yandex.Metrica, you will need a Yandex user account. You can start one here

If you have advertising campaigns in Yandex.Direct, or your online store is a Yandex.Market partner, we recommend that you log in with the username registered for one of these services. This will allow you to quickly switch between the services.

 

Do not use multiple analytic widgets of the same kind on one page.

 

Modal Windows

Add a modal section to the page. A modal window is intended to display all sorts of information. A modal window is any type of window that is a child (secondary window) to a parent window and usurps the parent's control. The Modal Section widget  associates a modal window with a pop-up that stays in front of the original window.

The widget allows displaying a modal window in the following situations:

  • Timeout: will be displayed after the specified time.
  • Window leave: will be displayed when the cursor leaves the window.
  • Hover element: will be displayed when the cursor hovers over the element .
  • Click element: will be displayed on clicking on the selected element.

Configuring Modal Section

Layout Style

Advanced

  • Show modal on - select a trigger to launch the modal window
  • Timeout - set the timeout (in seconds) for the display of the modal window
  • Repeat - choose when to repeat the modal window: show in time, show once, show always. When Show in time is selected, specify the time in Repeat in Time (in minutes). 
  • Horizontal Position - choose the horizontal position: center, top, bottom.
  • Horizontal Offset - set the horizontal offset.

  • Vertical Position - choose the vertical position: center, top, bottom.
  • Vertical Offset - set the vertical offset.
  • Modal width - specify the width of the modal window.
  • Close modal on outer click - set to Yes to close the modal window on clicking on the outside area of the window.
  • Hide close button - decide whether to show or hide the Close button.
  • Columns Gap - set the margin between the columns.
  • Height - set the height of the modal window. When Min Height is selected, specify the height and column position.
  • Content Position - select the position of the content within the modal window.

You will see the structure for the modal window at the bottom of the Layout settings. This is where you may reset the structure. Do that by clicking on the Reset Structure icon and text.

Wrapper Background color - the color of the area around the modal window.

Modal Window Background - select the type of the background for the modal window: None, Classic, Gradient, Video. For Video, specify the link to the video file and upload/select the cover image. For other types of background refer to Configuring Columns.

The Background Overlay block is available when Modal Window Background Type is Classic or Gradient. The block has similar configuration options to that of Modal Window Background, but for the extra Opacity option. The Opacity option is available for the Classic and Gradient background overlay types. It is meant to specify the transparency of the background overlay.

Close Button block (located on the top right of the window)

  • Color - the color of the Close button 
  • Size - the size of the button
  • Margin - the space between the button and the borders of the modal window
  • Icon - the icon for the button

Border block

By default, no border is applied to the column. Border Radius is visible, though not applicable.

Select the type of the border: None, Dotted, Solid, Dashed, Double. When anything but None is selected, you can specify the width, color and radius of the border.

Clicking on the Chain icon for width or radius will link/unlink the values for the top, bottom, left and right dimensions. When unlinked, each dimension can be set individually.

You can switch between fixed and floating (%) values for the border radius with the help of the PX and % selector above the parameter.

Shape Divider block

By default, no dividers are applied. The Type is then set to None.

Otherwise, you can employ a pre-arranged shape to visually separate the modal windows, if a few of them respond to the same trigger.  The Top and Bottom tabs allow switching between the two dividers, top and bottom correspondingly, configuring each separately. The list of shapes can be accessed via the Type option. Depending on the chosen shape the list of configuration options can be as follows:

  • Color - the color of the shape 
  • Width, Height - the geometry of the shape in px
  • Invert - set to Yes to fill the transparent part of the shape with the given color and discolor the colored one
  • Flip - set to Yes to rotate the shape to 180 degrees
  • Bring to Front - set to Yes to overlay the content of the section with the shape

Two configuration options are available for the Typography block: Colors and Text Align. The former is meant for headings, text, links and link hover. The latter allows choice between left, center and right alignment of text within the modal window.  

See Configuring Sections

 

Product Page

You can always find the latest version of the software, full documentation, demos, screenshots, and reviews on http://aheadworks.com
License agreement: https://aheadworks.com/end-user-license-agreement
Contact Us: https://aheadworks.com/contact
Copyright © 2021 Aheadworks Co. http://www.aheadworks.co

Report incorrect information

Still Have Questions?

Our customer care team is here for you!

Contact Us