Widgets are pre-built modules that can be used to add specific functionality to your website. These modules can include various features such as forms, galleries, maps, buttons, social media icons, and more. The use of widgets allows you to add new features to your website without having to write any code. WebCommander offers a range of widgets that can be used to customise your website and make it more interactive for your visitors. Some commonly used widgets in WebCommander are:

1. Article: You can create and edit articles using the Article widget. This allows you to add text, images, and other media to your content, and format it using the built-in editing tools. You can also choose to display articles in a specific order, and add tags or categories to make it easier for users to find related content.
2. Text/HTML: The Text/HTML widget allows you to add custom HTML or plain text to your website. This can be useful for adding things like custom scripts, CSS styles, or other advanced features to your pages.
3. Image: With the Image widget, you can add images to your website. You can upload images from your local system, or choose from a range of pre-built images provided by WebCommander. You can also customise the size and position of your images, and add alt text to improve accessibility.
4. Product: The Product widget allows you to display products on your website, complete with images, descriptions, pricing, and other details. You can organise your products into categories or tags, and allow users to filter or search for products based on specific criteria.
5. Category: The Category widget allows you to display categories on your website, providing users with an easy way to navigate and explore your content. You can create and manage categories using the built-in category management tools, and customise the display settings to match your website’s design and style.
6. Cart: This widget is used to display the items in a user’s shopping cart, and often includes options to edit the cart and proceed to checkout.
7. Login: The login widget provides a form where users can log in to their accounts on your website. This widget typically includes fields for email/username and password, as well as options for forgotten passwords and creating new accounts.
8. Navigation: Navigation widgets are used to create menus and links that allow users to navigate your website. They may include dropdown menus, links to different pages, or links to external websites.
9. Social Media: Social media widgets allow you to display social media feeds, icons, and links on your website. These widgets can help you promote your social media accounts and increase your social media following.
10. Track Order: This widget allows users to track the status of their orders by entering a tracking number. It may also include a link to the carrier’s website for more detailed tracking information.
11. Google Map: The Google Map widget allows you to embed a Google Map on your website. This can be useful for showing the location of your business or providing directions to your customers. You can customise the map’s size and zoom level, as well as add markers and labels to help users navigate the map.

At WebCommander, we strive to provide our users with the best experience possible. That’s why we offer a wide variety of widgets to choose from, including those mentioned above. But we’re always looking to improve and expand our offerings. Our team is constantly working to add new and innovative widgets to our platform, so stay tuned for even more exciting options in the future!

Navigation on websites is all about how you move around from one page to another within a website. It’s like the roadmap of your site, and it involves things like menus, links, buttons, and other stuff that help users find and go to different parts of your website. Good navigation should be easy to figure out, work the same way throughout your site, and be simple to use. This way, people can quickly get to the info or features they want. Navigation is super important for making your website user-friendly and making sure visitors have a good experience.

Here’s what we’ll go over in this section:

• How to create navigation.
• How to change the navigation you already have.
• How to set up the navigation system for your site.

Hello World Template Tutorial: Step-by-Step Guide to Creating Your First Template

To create a Hello World template using WebCommander, please adhere to the following step-by-step instructions. Pay attention to the subsequent actions:

Step 1

• Follow the steps mentioned on the Template Cleanup page, before proceeding with the Hello World template.

Step 2

• To proceed, choose the “Page” option from the available selections listed under the “Web Content” category.

Step 3

• Next, click on the settings button to access the options, and then select “Edit Content” from the menu.

Step 4

• In the page body section, utilise the drag-and-drop feature to place the Text/HTML widget. Move the widget to the desired location by dragging it and dropping it into the page body section.

Step 5

• To proceed, click on the “Configure HTML” button.

Step 6

• In the Content editor, type “Hello World”. Apply the H1 heading style to the text. Finally, click on the “Update” button to save the changes.

Step 7

• To save the page, click on the “Save” button.

Step 8

• Access the Asset Library from the Web Content menu.

Step 9

• Choose the “Template” option from the dropdown menu.

Step 10

• Click on the options icon and select “New Directory” to create a new directory.

Step 11

• Create a new directory named “CSS”.

Step 12

• Once you have selected the CSS directory, click on the “Upload” button.

Step 13

• Drag and drop the CSS file into the designated file drop zone. Afterwards, click on the “Upload” button and ensure the file is named “style.css”.

Step 14

• Click on the options icon and choose “Open in CSS Editor” from the available options.

Step 15

• To style the h1 element, enter the desired CSS code in the CSS Editor. Once you have made the necessary changes, click on the “Save” button to save the CSS code.

Step 16

• Click on the user profile menu and select “Visit Site” to navigate to the site.

Ultimate Outcome

The landing page of our demo site now displays the text “Hello World” as intended.

Adding a Template to the Marketplace

As a Partner, you can add templates to the system to expand your offerings and provide more value to your customers. Here’s how you can easily create and submit a new template:

To add a new template, go to the Templates section in your partner dashboard and click on the “Add Template” button.

Enter the Template Name, Category, and Description. Once you have filled in the required fields, click on the “Create Template” button to receive a success message.

You will now be taken to the template details page where you can provide more information about your template. Here, you can upload a logo for the template. The Template name and description fields will be pre-filled with the previously saved information.

• You can also upload up to preview images and videos, and enter a template description (about section in an editor).

Additionally, you can add a website, support document, and Privacy Policy URLs for the template support, set your preferred pricing for the template, and upload, re-upload, or delete a template source file in ZIP format with a Version number.

After completing each step, the index will indicate that the step has been completed with a green tick mark.

If your template doesn’t get approved, don’t worry. We’ll provide you with valuable feedback that will highlight the areas that need improvement. With this feedback, you can make the necessary changes and resubmit your template for reconsideration. It’s important to implement these changes to ensure that your template meets the necessary standards for approval.

Removing Templates From the Marketplace

From the template list, click on the template you want to remove. It will take you to the template details page.

On the template details page, click on the kebab menu on the right side of the screen.

You will find the “Delete template” option. If you click the “Delete Template” button, it will ask for confirmation if you want to delete it or not.

If you confirm the deletion, the template will be removed from the marketplace.

We hope this guide has helped add and remove templates to/from the system as a partner. If you have further questions or concerns, please contact our support team for assistance.

Once you have completed the template design, follow the steps outlined below to upload the template to the Partner Program:

Export

Navigate to the “Web Design Tools” section.

Click on the “Template” option.

Click on the “Download Site Template Resources” button. This action will initiate the download of a zip file containing the necessary resources for the site template.

Import

If a user wishes to upload an existing template zip file to the system, they should follow the steps outlined below:

Navigate to the “Web Design Tools” section.

Click on the “Template” option.

Click on the “Upload Template Resources” button.

Drag and drop the downloaded zip file into the designated area, or click to browse and select the file from your device. Afterwards, click on the “Submit” button to proceed with the upload process.

Step into the realm of responsive design and unlock the ability to create web applications that adapt flawlessly to various devices and screen sizes. In this section, we’ll guide you through the process of configuring and implementing responsive design elements, ensuring your content remains stunning and accessible across the digital landscape. Let’s begin this journey to enhance user experience and responsiveness in your applications.

Configuring Responsive Design

Navigate to your dashboard’s “Administration Menu” and choose “Settings.”

Within the Settings section, explore the “Structural” settings.

Under “Structural” settings, delve into “Design Preferences.”

Activate the “Enable Responsive Design” option to initiate responsive design for your application.

Once enabled, customise your application’s responsive behaviour by defining minimum and maximum width values for various media queries. Feel free to add or remove media queries as needed.

To add resources to your template repository for the purpose of template design, follow these steps:

Go to the Asset Library under the WebContent menu.

Select the “Template” option from the dropdown menu.

For creating folders. Click on the kebab menu and choose a new directory

Create folders within the “Template” section to organise and store the necessary resources for your design, such as CSS files, JavaScript files, fonts, and images.

In WebCommander, when we talk about “pages,” we’re simply referring to the different parts of your website. These pages are important because they help organize and display your content to people who visit your site. On these pages, you can put all kinds of things like text, pictures, videos, forms, and more.

WebCommander makes it easy for you to manage and create these pages. You can add new ones, make changes to existing ones, and get rid of pages that you no longer need. Plus, you can personalize how each page looks and works by using the tools and elements that WebCommander provides.

Thanks to the user-friendly page editor in WebCommander, you can design pages that are interesting and interactive, effectively showing off your content and keeping your site’s visitors engaged.

In this section, we’ll go over a few things:

• How to make a new page
• How to edit the content on your pages
• Other cool features you can use
• Widgets

What does layout mean in WebCommander?

In WebCommander, the term “layout” refers to the structure or blueprint of a website. It’s like a plan that helps you organise and arrange different parts of your site, such as headers, footers, and content sections. By creating a layout, you decide how these elements fit together and how your website will look. It’s important because it ensures that your site is visually appealing, easy to navigate, and user-friendly. So, in simple terms, a layout in WebCommander is like a blueprint that helps you organise and design your website.

When and why is a layout necessary?

• A well-designed layout ensures that your website looks consistent and professional.
• It helps you showcase important elements in a visually appealing way.
• With a layout, you can easily make updates and changes to the design and structure of your website.
• It helps reinforce your brand identity and create a cohesive look and feel.
• A layout allows you to optimise the placement of key elements to engage users effectively.

Layout Management

The Layout Page provides you with essential controls to create, modify, and optimise the structure of your website, empowering you to create an impactful and visually appealing online presence. On the Layout Page, You Can:

• Create Layout: Generate new layout designs that define the structure and arrangement of your webpage components.
• Attached Page: View and manage the list of pages connected to the layout, ensuring consistent design and content across your site.
• Copy: Duplicate an existing layout to save time and maintain a consistent design theme.
• Edit Header Section: Modify the header section of your layout, including logo placement, navigation menus, and branding elements.
• Edit Content Section: Customise the central content area of your layout where you can add and organise various widgets, such as text, images, and forms.
• Edit Footer Section: Tailor the footer section of your layout, which often contains important links, contact information, and other relevant details.
• Rename: Give your layout a distinct and recognisable name for easier management and identification.
• Set as Default Layout: Set a particular layout as the default choice – it will be automatically selected when you create a new page.
• Remove: Delete layouts that are no longer needed, simplifying your layout management and organisation.

This section covers the following topics:

• Creating Your Layout
• Editing The Content Section
• Creating & Editing Docker
• Positioning

Setting a Favicon

From the sidebar menu, select “Settings”.

Find “General Setting” from the list of settings, or search for it.

Scroll down to the “Favicon” section and click on the “Drop image/click here” button to select the image file from your local system.

Click on the “Save and Close” button from the top left to apply the changes and update your website’s favicon

Setting a Logo

From the sidebar menu, select “Settings”.

Find “Structural” from the list of settings or search for it.

Select “Store Details”.

In the “Store Logo” section, click on the “Drop/Image Click Here” button to upload your store logo from your local system.

Click on the “Save and Close” button located at the top left corner of the page to apply the changes and update your website’s logo.