Elements are the most important part of your site. They make up your content and include text, buttons, forms, images etc. Let’s explore the essential elements—Text, Image, Spacer, and Article—and discover how you can effortlessly create, edit, and enhance your website content.

Adding and Customising Elements

In the WebCommander Editor, you’ll find customisable elements that you can use to build your site. Select from images, text, video, spacer, and more to bring your site to life.

• Click on a blank section of your page.
• Click on “Add Elements” to open a menu with a variety of elements to choose from. These can include images, text, video, spacers, and more.
• Select the elements you want to add to your page. They will be placed within the selected section.
• After adding elements, click on the specific element you wish to customise.
• Look for the “Settings” option associated with the selected element.
• Click on “Settings” to access customisation options for the element. Depending on the type of element, you will see different customisation choices.
• Adjust settings such as text formatting, image properties, video options, or any other relevant features based on the selected element.
• Once you’re satisfied with the customisations, save your changes.

Text Element:

• Edit Text:
  • You can configure and change the text content by clicking on the “Edit Text” option.
• Up & Down:
  • Move the text element up and down within the section column if there are multiple elements.
• Delete:
  • Remove the text element by clicking on the delete icon.
• Configuring Text Element Properties:
  • After clicking on “Edit Text,” you can configure properties such as Text Type, Color, Font Size, Margin, Line Spacing, Text Styling Options, Alignment, and Hyperlink.

Image Element:

• Basic Operations on Image Element:
  • You can replace an existing image by clicking on “Change Image.”
  • You can add a new image by uploading a file or choosing an existing image from the library.
  • Move the image element up and down within the section column if multiple elements are present.
  • Remove the image element by clicking on the delete icon.
  • Clicking on the gear icon provides additional options like adding Alt Text, Hyperlink URL, and configuring URL opening options.
• Additional Options:
  • Topbar Actions include Zoom In, Zoom Out, Undo, Redo, and Reset.
  • Bottombar Actions include resizing, Crop, Flip, and Rotate.
  • Additional Options include Mask Image with Another Image, Draw and Drop, Filters, and Adjust Properties.

Spacer Element:

• Basic Operations on Spacer Element:
  • You can change the size of the spacer by clicking on “Edit Spacer.”
  • Move the spacer element up and down within the section column if multiple elements are present.
  • Remove the spacer element by clicking on the delete icon.

Article Element:

• Basic Operations on Article Element:
  • You can add and edit text in the article.
  • Move the article element up and down within the section column if multiple elements are present.
  • Remove the article element by clicking on the delete icon.
  • Save changes made to the article element.
• Text Editor Properties:
  • Clicking on “Edit Article” opens the article in a rich text editor with properties to Convert Text to HTML Editor, Change Text Type, Adjust Font Size, Alignment, Customise Text, Add Bullet Point, Add Image, Add Video, Add File, Add Table, Add Link, and Redirect.

These functionalities provide you with a wide range of options to customise and enhance your website content using the WebCommander Front-End Editor.