This folder contains two CSS files and a folder. It is important to follow the folder structure and naming convention strictly.

We need to add the style.css and responsive.css files in the CSS folder. The style.css file contains CSS rules that will be used to style the template design, while the responsive.css file contains CSS rules for the responsive design purpose.

The colours folder contains five CSS files. These CSS files are used for changing the theme colour of our template. For example, if our template has five theme colour variations – red, green, blue, black, and yellow, with red being the default template colour, the CSS file names should be as follows: default-FF0000.css, green-02B729.css, blue-0093C1.css, black-000000.css, and yellow-FFC35C.css. These CSS files overwrite CSS rules to change the template theme colour.

Here’s an example of using custom CSS to modify the appearance of a webpage:

To fix the design issues of a broken login form, you can add the following CSS rules to your style.css file:

/*login page*/
.login-form input[type="text"] {
    color: #333;
    height: 42px;
    background: #fff;
}
.page-login .login-form {
    border: 1px solid #e5e5e5;
    padding: 50px 70px;
    max-width: 650px;
    width: auto;
}
.login-form .title {
    font-size: 25px;
    font-weight: 500;
    padding-bottom: 20px;
}
.login-form .form-row {
    margin: 0 0 30px;
}
.login-form .form-row:last-child {
    margin-bottom: 10px;
}
.login-form .form-row label {
    font-size: 15px;
    font-weight: 500;
    padding-bottom: 7px;
}
.login-form .form-row input[type="text"],
.login-form .form-row input[type="password"] {
    height: 45px;
    width: 100%;
}
.login-form .submit-row {
    float: none;
}
.login-form .submit-row button {
    font-family: "Poppins",sans-serif;
    font-size: 18px;
    font-weight: 500;
    width: 100%;
}
.login-form .form-row.remember {
    color: #333;
    float: right;
    font-weight: 500;
    text-align: right;
}
.login-form .lost-password a {
    color: #f1bb01;
    font-weight: 500;
}
.login-form .lost-password a:hover {
    color: #333;
}
.login-form .form-row .no-account-label,
.login-form .form-row .account-register {
    color: #333;
    font-weight: 500;
}
.login-form .account-register a {
    color: #f1bb01;
}
.login-form .form-row .account-register a:hover {
    color: #333;
}
.login-form .errorlist.after {
    padding-top: 5px;
}

Below is the updated Log In form after adding the CSS rules:

Users can simply follow the steps from Create a Page in this section to create a page with Layouts.

After creating the page user must find a navigation element there and drag it to the marked white space.

Now click on the navigation section & which will open the edit section for the navigation

Users will see the total number of navigations that exist in the marked space in the widgets action

If the user wants to add a custom CSS class he must choose the navigation wizard first. Then he can add a class from the basic section & configure basic functionalities. Also, users can add existing CSS & JS code for navigation by clicking on the menus.

Users can add custom CSS & JS for the page properties section and edit details for the layout section by marking sections in the pages

Click on the save button to make all the changes save

Clicking on the icon will open the navigation in my sites.

My site page will display a navigation bar & functional outputs for the navigation

Simply clicking on the kebab menu will open a section for edit or removing your existing navigation

Clicking on the edit button will open a section where you can add new navigation by following the steps mentioned in the navigation creation step

Clicking on the pencil icon will open options to edit existing navigation

After making your desired changes, clicking on the save button will save the changes for the navigation with a success message

This guide provides a step-by-step approach to creating effective navigation. It covers the key elements of navigation and offers tips for designing intuitive and user-friendly navigation. Whether you’re building a new website or template, this guide will help you create a navigation that helps your users find what they need quickly and easily.

Go to the Content tools section in your Web Commander instance and Expand to view options

Find and click on the Navigation Section

Clicking it will open a section that will display your existing navigation and a Button will be there for creating new Navigation

Clicking on the Button will create a new section where you can provide the navigation Name & click on the save button

Clicking on the save button will open a portion that will display some mandatory fields for creating a navigation

Give a proper label & class name for your Navigation

Toggle on disable redirection will stop the feature for page redirection

Select a type for your navigation

If you select specific types such as product, page, or Category → the system will open an option with existing selected type items in the list

• By choosing URL as types, the system will open a field for input URL

• By choosing Email as type, the system will open a field for input Email

• By choosing Auto-generated Page as type, the system will open a section that will suggest some commonly uses pages that will be auto-generated by the Web Commander

• The Navigation Target dropdown will provide some customised options to open the Navigation Target page

• You are able to select a parent for the navigation by selecting items from the parent section

• You can upload images for the item in the images section

• You can save the created details by simply clicking on the save button & if you want to create another item just press on the Plus icon

• Above steps will guide you to create navigation successfully. A pop-up with a success message and in the Navigation list you can see your created navigation item.

The right side of the list shows the navigation with its label

Users can simply view a page by clicking on the “ View In Site “ button from the “Gear” menu

Users can simply copy a page by clicking on the “ Copy “ button from the gear menu

Users can simply remove a page by clicking on the “ remove “ button from the “Gear” menu

Users can simply update the permission on a page by clicking on the “ Permission “ button from the “Gear” menu

Users can simply set a page as a landing page by clicking on the “ Set as Landing Page “ button from the “Gear” menu.

To edit the page content, you can follow these steps:

Click on the action button. Select “Edit Content” from the options.

To add content to your page, go to the content section. Drag and drop the desired widget onto the page.

Each widget has three options: Basic, CSS, and JS. Let me explain what you can do with each option:

• Basic: In this option, you can change the title of the widget, select the title tag, and add a class.

• CSS: This option allows you to change the design of the widget using CSS.

• JS: If you need to add custom JavaScript code for the widget, you can use this option.

If you want to add a new section to your page, go to the Settings tab and navigate to the Layout section.

Add another blank section by clicking on the desired option.

Once the new section is added, you can drag and drop another widget into that section.

Once you’re satisfied with your changes, don’t forget to save them!

Page Content Editor Settings

The Page Content Editor in WebCommander provides a variety of settings to customise your website’s pages. You can choose to display different widgets within a section or adjust their settings specifically for that section. This provides a high level of customisation and control over the appearance and functionality of your webpage.

Section: This allows developers to select the specific section of the page they want to edit, such as the header, footer, or main content area. By choosing the appropriate section, developers can ensure that their changes are applied to the correct part of the page.

Resolution: This allows developers to set the resolution of the page, which determines how it will appear on different devices. By selecting the appropriate resolution, developers can ensure that their pages look great on desktops, tablets, and smartphones alike. Follow Configuring Responsive Design in this section to gain knowledge about activating resolution for the template.

Widget: This feature allows developers to add a wide range of functional elements to their website pages, such as text boxes, images, videos, and forms. Users can get ideas for different widgets from this page. Developers can customise these widgets with a variety of settings, including the option to choose which section the widget is located in, a title for the widget, a CSS class name for styling purposes, and a display option such as full-width or centred. Additionally, developers can use CSS and JS to further customise their widgets and ensure they meet their specific design needs.

Layout: This section contains the Body Grids option, which allows developers to choose from various grid options for the page layout, such as a single column, two columns, or three columns. The number of columns selected will determine how many widgets can be added to the page and how they will be positioned within the layout.

Page Properties: This section in the WebCommander Page Content Editor is an important tool for developers who want to add custom CSS and JavaScript code to their pages. This can be useful for adding unique design elements or functionality to a website that may not be available through the pre-built widgets and layouts. With the ability to add custom code, developers can further customise their website and make it stand out.

Once you have finished designing your page, remember to save your changes by clicking on the “Save” button located in the top right corner of the screen.

To create a new page in Web Commander, first, navigate to the dashboard and click on “Page” from the Side navigation menu.

Click on the “Create” button located in the top right corner of the screen.

Enter a name and title for your new page.

Choose Your Layout & Navigation

• From the “General” section, the user can select an existing Layout & Navigation for the page.
• If you don’t want to use a layout, you can select “None” from the dropdown menu.

After making your changes, click on the “Save All” button located in the top right corner of the page.

Users can configure SEO ( Search Engine Optimisation ) details for a page by simply completing 3 section

SEO Configuration

Analytics & Custom Code

Click on the “Save All” button to create a new page with updated details.

If you want to edit the page creation details you can simply go to the Edit section from the gear menu.

Let’s get started with building your layout in WebCommander. Follow these straightforward steps:

Find the ‘Layout’ section in the ‘Web Design Tools’ menu.

Click the ‘Create’ button at the top right corner of the screen.

Give your layout a name, like “Main Screen,” and confirm your choice by clicking the checkmark icon.

Editing the Header & Footer Section

To customise the header in WebCommander, follow these simple steps:

Start by clicking on the ‘Kebab Menu’—that’s the three dots you’ll see. From the menu, select ‘Edit Header Section’ to access the header customisation options.

Once you’re in the live preview, you’ll notice a specific area marked for header editing. This is where you’ll make all your changes.

In the Content tab, you can add widgets and design elements to your header. If you’re looking for a specific widget, you can use the search bar to find it. And if you have some favourites, you can save them using the star icon.

To add a widget, simply drag it onto the live preview area.

The Widgets in Section tab gives you an overview of all the widgets you’ve placed in the header. Here, you can customise properties like colours and sizes to make your header look just right.

If you want to copy a header from another layout in WebCommander, follow these steps:

On the right side of the screen, you’ll find an action button. Click on it.

From the options that appear, select “Copy Header”.

Once you click on “Copy Header”, you’ll be taken to the “Get Header from Layout” page.

On this page, you can choose the layout from which you want to copy the header. Look for your desired layout and select it.

After choosing the layout, click on the “Update” button.

At this point, you’ll be asked to confirm your decision. Make sure you’re copying the header from the correct layout, and then confirm your choice.

Once you confirm, you’ll see that the header is successfully copied to your current layout.

Save your design changes by clicking the ‘Save’ button.

To customise the footer in WebCommander, you can follow similar steps as you did for the header:

Start by clicking on the ‘Kebab Menu’ (the three dots) and select ‘Edit Footer Section’ to access the footer customisation options.

You can also change what you want to edit from the ‘Settings’ tab. In the ‘Settings’ tab, you’ll find a ‘Section’ dropdown. From there, you can select whether you want to edit the header, footer, or body of your website.

The Positioning settings in Layout Editor allow you to precisely control the placement and size of the header & footer on your webpage. Here, SW means section width and SH means section height. You can set “SW” to 0 to make the section full width, and “SH” to 0 to make the section height 0. X and Y refer to the horizontal and vertical coordinates of the header’s & footer’s top-left corner, while W and H refer to its width and height, respectively. By adjusting these settings, you can position headers & footers exactly where you want them and ensure that they fit perfectly into your webpage’s layout. This level of precision can be especially important when working with complex layout designs or when trying to achieve a specific aesthetic. Follow this section to get more ideas.

Layouts are useful during website design when you want to create a consistent design for various pages on your website. Here are some specific use cases:

Header and Footer Sections of your website tend to remain consistent across all pages. By creating a layout for these sections, you can ensure that they have a consistent layout and design throughout your website.

Specific Content Types of content that you use frequently on your website, such as blog posts or product pages, you can create a layout for these pages. This can help you maintain consistency in layout and design, making it easier for users to navigate your site and find the information they need.

Sidebar Sections of your website that contain specific types of information or links, you can create a template for this section. This can help you ensure that the sidebar has a consistent layout and design throughout your website, and can make it easier for users to find the information they need.

By using layouts, you can ensure that your website has a consistent design, making it easier for users to navigate and find the information they need.