» Layout

Layout

In WebCommander you can easily customise your store layouts using our Layout feature. To start creating your Layout, you need to be logged in to your WebCommander account.

Create a new layout

1. On the home page, Select WebDesign>>Select Layout

    2. Click on the '+ Create' button on the top right

      3. Enter the layout name of your new layout in the Name field. and click the ‘tickmark’ beside the box to save it

      4. Your New Layout is Created

      Edit the Layout

      Select the desired layout to be edited and click on '3 dots' beside your layout 's name and from the drop-down ,select the desired 'action’ you want to perform.

      Actions

      Navigation: Web Design >> Layout >> Select Layout (Left Tab View) >> Select three dots to perform desired action from the listed options

      Attached Pages: By clicking on this option, one can find the pages that exist in a layout.
      Copy
      : To copy the whole layout, click on this option.
      Edit Header Section
      : Modification of the header part will be executed by clicking on this option. Follow the Edit Header Section page to know the modification process elaborately.
      Edit Content Section
      : Contents of a layout can be edited by clicking on this option. To know elaborately about these options, click on Edit Content Section
      Edit Footer Section
      : Users can also edit the footer of the layout as per their requirements. Follow the Edit Footer Section page to know the modification process elaborately.
      Rename
      : One can rename the name of the layout by clicking on this option.
      Set as default layout
      : By clicking on this option one can set this layout as default.
      Remove
      : To remove an individual layout, click on this option.

      Edit Header Section

      Navigation: Web Design >> Layout >> Select Layout (Left Tab View) >> Actions >> Edit Header Section

      1. SW: Set the width of the section as per requirement.
      2. SH: Set the height of the section as per requirement.
      3. X: Set the position vertically by dragging the widget.
      4. Y: Set the position horizontally by dragging the widget.
      5. W: Set the width of a widget between the section.
      6. H: Set the width of the height between the section.
      7. Undo: Click on this button to undo the changes.
      8. Redo: Click on this button to redo the changes.
      9. Action: There are three types of actions can be taken in the header part. These are-

      Revert: User can reset all the changes by clicking on this option.
      Clear All Widgets
      : To clear all the widgets of the header, click on this option.
      Copy Header
      : Click on this option to copy the header section.

      The options described below will work for multiple widgets. So, select the widgets to make the changes of alignments and grouping as per your requirements.

      1.  Align Left: Click on this button to align the widgets to the left side.
      2.  Align Right: Click on this button to align the widgets to the right side.
      3.  Align Top: Click on this button to align the widgets to the top.
      4.  Align Bottom: Click on this button to align the widgets to the bottom.
      5.  En group Them: By clicking on this button, the widgets will be in a group. To verify the changes, the user has to go to the inspect option. Here, the user can observe that the widgets are kept in the same div class.
      6.  Ungroup Them: To ungroup the widgets, click on this option and verify it on the inspect page.

      Edit Content Section

      Navigation: Web Design >> Layout >> Select Layout (Left Tab View) >> Select three dots to perform Actions >> Select Edit Content Section

      Section

      Body Section:

      Body Grids


      Edit Footer Section

      Navigation: Web Design >> Layout >> Select Layout (Left Tab View) >> Actions >> Edit Footer Section


      SW: Set the width of the section as per requirement.
      SH
      : Set the height of the section as per requirement.
      X
      : Set the position vertically by dragging the widget.
      Y
      : Set the position horizontally by dragging the widget.
      W
      : Set the width of a widget between the section.
      H
      : Set the width of the height between the section. 
      Undo
      : Click on this button to undo the changes.
      Redo
      : Click on this button to redo the changes.
      Action
      (Three Horizontal bars icon): There are three types of actions can be taken in the footer part. These are-
      Revert
      : User can reset all the changes by clicking on this option.
      Clear All Widgets
      : To clear all the widgets of the footer, click on this option.
      Copy Header
      : Click on this option to copy the footer section.


      Newsletter
      Share this page