» Add Widget

Add Widget

To add a component or Widget start by clicking on the “+” icon that appears when you click on your screen. A panel will appear from which Content, Image and Gallery can be added.

Content

Using the Widget drop down menu you can select between an Article, Custom Content, Snippet and Blog post.

Snippet

Selecting the Snippet widget gives you access to hundreds of templates waiting for you to edit.

Editing a Snippet

To edit a snippet, start by selecting the template you’d like to use and add it to your site.

Container

The container refers to the wrapper that holds together the snippets elements like text and images or buttons and links. Clicking on the container will allow you to begin your edits.

Text

Snippet text can be edited in two separate ways:

1. Text selection

Text selection will cause a popup list of attributes that can be changed. They are listed below:

Colour
: Ability to change the colour of the text.
Font Size: Ability to change the font size on the page
Text Align: Ability to align the text, right, left or center respective to the set margins.
Margin Top: A margin sets the space outside the text. Margin-top sets the margin area on the top of the element.
Margin Bottom: Margin-bottom sets the margin area on the bottom of the element.
Margin Right: Margin-right sets the margin area on the right of the element.
Margin Left: Margin-left sets the margin area on the left of the element.

2. Inline selection popup

Inline selection will cause a popup list of attributes that can be changed. They are listed below:

Source Code
: You can make changes to your text from source code. To change from the source code, click on HTML icon and the system will take you to source code.
Format: You can select different formats for your text including headers, quotes and normal text.
Style: You can select different format like marked, code, variable.
Bold: Snippet text can be set to bold.
Italic: Snippet text can be set to italic.
Strikethrough: Snippet text can to set to have a strikethrough.
Lists: Choose from the following two lists,
Ordered List or Numbered list.
Unordered List or Bullet points
Image
: You can add an image to your text.
Video
: You can add video to your text.
File
: You can add a file to your text.
Table
: You can add a table to your text.
Link
: You can add a link to your text.
Text Colour
: Ability to change the colour of the text.
Font Size
: Ability to change the font size on the page
Text Align
: Ability to align the text, right, left or center respective to the set margins.
Properties
: When you click on the properties icon a pop-up window will appear where you can add a HTML ID and Class, click save and HTML ID and Class will be saved.
RTL-LTR
: The RTL-LTR attribute indicate that writing starts from the right of the page and continues to the left. Clicking this will change to a left-to-right writing system, where writing starts from the left of the page and continues to the right.

Image

If you’ve selected a snippet with an image you can edit using the attributes below:

Snippet image attributes are:

Image Source
: Specifies the URL of the image.
Link
: Allows you to attach a link to the image.
Target
: Targeting allows user to control where the new link is opened.
Padding Right
: Padding is used to create space around elements. Padding-right sets the padding area on the right side of the element.
Padding Left
: Padding-left sets the padding area on the left side of the element.
Padding Top
: Padding-top sets the padding area on the top of the element.
Padding Bottom
: Padding bottom sets the padding area on the bottom of the element.

Icon

If your snippet utilises an icon you can edit using the attributes below:

Snippet icon attributes are:

Text Colour
: Ability to change the colour of the text.
Font Size
: Ability to change the font size on the page
Icon Selection
: Ability to change how the icon displays from a selection of images.

Button

When selecting a snippet with a button you can copy, move, edit and even delete the element using the Simple editor. Below are the button feature attributes.

Copy: For creating a copy of the existing button.
Move Up
: The ability to move the button up.
Move Down
: The ability to move the button up.
Delete
: For deleting an existing button.
Colour: Ability to change the colour of the buttons text.
Font Size: Ability to change the font size inside the button.
Text Align
: Ability to align the text inside the button.
Link
: Allows you to attach a link to the button.
Target
: Targeting allows user to control where the new link is opened.
Padding Right
: Padding is used to create space around elements. Padding-right sets the padding area on the right side of the element.
Padding Left
: Padding-left sets the padding area on the left side of the element.
Padding Top
: Padding-top sets the padding area on the top of the element.
Padding Bottom
: Padding bottom sets the padding area on the bottom of the element.
Margin
Top: A margin sets the space outside the button. Margin top sets the margin for the top of the element.
Margin Bottom
: Margin bottom sets the margin for the bottom of the element.
Margin Left
: Margin left sets the margin for the left of the element.
Margin Right
: Margin right sets the margin for the right of the element.
Border Colour
: Ability to change colour of the buttons border.
Border Style
: Ability to set the style of the border between solid, double, groove, ridge and a variety of others.
Border Radius
: Ability to create round buttons using the radius dropdown.
Border Width
: Ability to change the thickness of the buttons border.
Background Image
: Applies a background image for your button.
Background Colour
: Applies a background colour for your button.
Background Repeat
: Allows a set background image to repeat.
Background Size
: Sets the background images size.

Link

In a snippet, user can add link on

  • Text
  • Icon
  • Image
  • Button

HTML

HTML is an important feature of the Simple Editor which enables you to add text and links within the snippet. Not in every snippet has this feature and is mostly found in long text templates.

Overview

When dealing with long text snippets you’ll find you’re able to edit the text as if It was HTML. If you click on the pencil icona pop up window will appear which will let you Edit the text on the snippet.

Edit HTML

Once you click on the pencil icon a pop up window will appear and you will see all the HTML options.


HTML attributes

Blog

Using the Simple Editor, you can create and edit blog posts, edit and create new blog categories as well as view comments.


After inserting the blog, you can set the title, category, content, image, date and published status.

Article

Selecting article from the widget drop-down list will show the list of all existing articles. Here articles are displayed by their name, if they are visibility and the date they were made.  Use the search box to help you locate your desired text while clicking the “+Add New” button will give you the option to create a brand new article. After creating your new article, it will appear on the list to be inserted.

Custom Content

If you prefer to add custom text or HTML to your page, it can be done so by selecting the Custom Content drop down item. From here you can enter whatever you want into the text editor and click Save to insert it on your page.

Image

Back on the Add Widget menu you can upload a single image to your site using the Image feature. An image can be uploaded in two ways:

1. Asset Library
2. Local File

You can give your image a title as well as add a hyperlink as shown in the fields below.

Gallery

Using this feature allows you to add multiple images to your site by adding them to albums and selecting a slider.

Nivo Slider

Gallery Settings:

1. Width:Width of the image.
2. Height: Height of the image.
3. Direction Navigation: Choose Yes/No to Activate/Deactivate Direction Navigation.
4. Manual Advance: Choose Yes/No to Activate/Deactivate Manual Advance.
5. Control Navigation: Choose Yes if you want to Control Navigation. Otherwise, select No.
6. Pause On Hover: Choose Yes if you want to pause on hover.
7. Side Transition Speed: Control the speed of side transition.
8. Slide Show Time: Control the slide show time.
9. Effect: Choose between different transition effects for your slider.
10. Hyperlink Images: Add links to your images.

Image Properties:

  1. Replace Image: Upload image/ Drag and Drop
  2. Alternative Text
  3. Description
  4. Link to URL: None, Page, Product, Category, URL, Email, Auto Generated Page, Blog category

Gallerific

Gallery Settings:

1. Layout:Choose between different layouts.
2. Maximum No. Of Thumbnails (Thumbs): Choose the maximum number of thumbs to show.
3. Auto Play: Toggle ON/OFF to activate or deactivate auto play.
4. Thumb Position: Choose the position to show the thumb.
5. Show Caption: Enable if you want to show caption.
6. Thumb Offset: Set the thumb offset.
7. Caption Position: If the caption enabled, then you can choose the position of the caption.

Image Properties:

  1. Replace Image: Upload image/ Drag and Drop
  2. Alternative Text
  3. Description
  4. Link to URL: None, Page, Product, Category, URL, Email, Auto Generated Page, Blog category

JSSOR Slider

Gallery Settings:

1. Auto Play:Toggle ON/OFF to activate or deactivate auto play.
2. Hyperlink Images: Add links to you images.
3. Pause On Hover: Choose Yes if you want to pause on hover.
4. Side Transition Effect: Control the effect of side transition.
5. Arrow Visibility: Choose if the arrow will be visible or not.
6. Slide Duration: Choose the duration of the slide.
7. Bullet Visibility: Choose when bullets will be visible.
8. Auto Play Interval: Set the timer for auto play.

Image Properties:

  1. Replace Image: Upload image/ Drag and Drop
  2. Alternative Text
  3. Description
  4. Link to URL: None, Page, Product, Category, URL, Email, Auto Generated Page, Blog category

Widget Properties:

Create Caption

Navigation: Instance URL/Editor >> Edit Album >> Jssor Slider >> Select Image >> Widget Properties

1. Caption Type: Allows you to set your caption type, such as “Title”.
2. Caption: Allows you to enter a caption.
3. Caption Animation: From a drop-down menu you can select what animation will play for your caption.
4. Animation Duration: Set the time that the animation will run for. For example, if you set your animation duration to 100ms, the caption’s animation will play for 100 milliseconds.
5. Delay: Delay indicates that how much time your caption will stay visible on the banner image after the animation plays.
6. Save: Click save to update your caption changes.

SwipeBox Slider

Gallery Settings:

  1. Number of Column:Choose the number of columns.
  2. Title: Toggle ON/OFF to display or hide the title.
  3. Overflow: Set if your extra images will be displayed by scrolling or ask visitors navigate to another page. 
  4. Item Per Page: Choose the number of items per page.

Image Properties:

  1. Replace Image: Upload image/ Drag and Drop
  2. Alternative Text
  3. Description
  4. Link to URL: None, Page, Product, Category, URL, Email, Auto Generated Page, Blog category

OwlCarousel

Gallery Settings:

1. Items:Choose the number of items or images.
2. Margin: Set the margin.
3. Pagination Speed: Control the pagination speed from here.
4. Auto Play: Toggle ON/OFF to activate or deactivate auto play.
5. Auto Play Timeout (Ms): If Auto Play toggled on, then set the Auto Play Timeout.
6. Navigation: Toggle button to activate and deactivate navigation.
7. Previous Button Text: Choose text for previous button.
8. Next Button Text: Choose text for next button.
9. Pause of Hover: To stop transition on hover toggle this button ON.
10. Lazy Load: To activate Lazy Load, toggle the Lazy Load button ON.
11. Pagination: Pagination can be activated by toggling this button ON.
12. Pagination Numbers: Pagination will show pagination numbers when this button is toggled ON.

Image Properties:

  1. Replace Image: Upload image/ Drag and Drop
  2. Alternative Text
  3. Description
  4. Link to URL: None, Page, Product, Category, URL, Email, Auto Generated Page, Blog category
Newsletter
Share this page