How to Configure Elements

WebCommander allows you to insert and configure various elements into your web pages using a simple editor interface. These elements include video, social links, forms, maps, accordions, articles, custom HTML, and more. This documentation explains how to add and configure each of these elements to enrich your web content.

How to Add Elements to a Page

Step 1: Access the Editor

• Log in to your WebCommander account.
• Go to the Editor section and select the desired page.

Step 2: Open the Add Section Modal

• Click + Add Section where you want to insert an element.

Step 3: Choose "Add Element"

• From the new section toolbar, click + and then select Element.

Step 4: Select Your Element Type

• Choose from available options such as:
  • Text
  • Image
  • Spacer
  • Button
  • Video
  • Social Button
  • Form
  • Map
  • Accordion
  • Article
  • HTML
  • Code
  • Table of Contents

Adding and Customising Each 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.

Video Element

• Insert a YouTube video by pasting the video URL.
• Use Edit Video to update the URL.
• Access Settings to configure:
  • Width and Height
  • Autoplay
  • Show suggested videos
  • Player controls
  • Full screen toggle

Social Button

• Add URLs for platforms like Facebook, Messenger, YouTube, Twitter, LinkedIn, WhatsApp, Pinterest, and Snapchat.
• Display social icons on the page.
• Orientation: Set layout to Horizontal or Vertical.
• Use Edit to modify URLs anytime.

Form

• Choose from Contact or Web forms.
• Configure form settings:
  • Form Title
  • Email to (recipient address)
  • Button Text
• Manage fields (Name, Email, Phone, Subject, Message) via Manage Fields.

Map

• Insert a map by entering a location.
• Configure settings:
  • Zoom level
  • Radius in meters
  • Popup text
  • Address field for pin placement

Accordion

• Add accordion items with title and content.
• You can add multiple items.
• Settings include default item expansion behavior:
  • First item expanded
  • All items expanded
  • No expanded items

Article

• Choose from existing articles.
• Preview article content and insert into section.
• Use Edit Article to update content, headings, links, and formatting.

HTML and Code

• Insert custom HTML or formatted code blocks.
• Launch code editor to enter and style content.

Table of Contents

• Auto-generates a TOC based on headers in the page.
• Settings include:
  • Widget Title
  • Heading Label
  • Minimal Count of Headings
  • Depth Level (1–6)
  • Numeration Style (None, Decimal, Roman, Nested options)

Best Practices

• Place elements where they provide the most value (e.g., maps in contact pages, TOC in long articles).
• Use forms for inquiries and support.
• Add social links in the footer or sidebar.
• Preview all elements after configuring before publishing.

Frequently Asked Questions (FAQs)

Q1: Can I rearrange the elements after adding?
Yes. Drag and drop elements within a section to reorder.

Q2: Can I duplicate elements?
Currently, elements must be added manually but can be easily reconfigured.

Q3: Are the settings saved if I leave the page?
No, always Save or Publish after editing.

Q4: Why is my video/map not displaying properly?
Ensure you provided a valid URL or address, and check width/height settings.