Tutorial for Page Constructor of MAD WWW

 

How to create new page

 

  1. Click on "Create" button on admin sidebar
  2. In dialog box opened please enter the name of new page, hover mouse on page template and click "Use" button on it.


  3. Page will be created. You will see a notification on right or left top corner. Click on it to open new page.

     

How to edit page 

  1. НOn admin sidebar click а Pencil button - you will switch on edit mode
    :

     

  2. Now you can edit any element on this page.
    Note! Forms are edited in separate
    Other elements are edited directly on page - just click on text or menu or image and edit it. Or click "Element settings" on sidebar then click on element and you will see a dialog box with element editor.
  3. Now let's edit a text on our page - just click on text and you tinymce editor bar will apper - it's similar to MS Word. You can edit styles insert images, links, anchors

  4. You can add rows, columns and elements on page. 

How to add row on page

  1. Let's try to add row using a row template. Click on "Add row" button on admin sidebar

  2. On top and bottom of rows you will see a "+" button (if there are no rows on page - skip this step)  - click on "+" button - row will be inserted on place of this button

  3. You will see a dialog box with row templates. Hower mouse on any template and click "Use" button on it. New row will be inserted.


  4. The page structure is following: 1. Rows. 2 Columns are inserted to rows. 3. Elements are inserted to columns. 

How to add a column to row

  1. Click on "Add column" button on admin sidebar

  2. You will see "+" buttons on places where you can insert a new column. You can insert multiple columns to every row. If there are more than one column in row - they will be inserted on left or right side of each other (depends on column width). Choose a place to insert new column and click "+" button.

You can add one or several columns to every row. You must set a column width for column:

  1. Set the column width for every screen size in dialog box appeared.
    How it works: page width is 100%. If you have 2 columns with 50% width - they will be inserted on right or left side of each other. If you have 3 columns with 33% width - they will be also placed on right or left side of eache other. If column doesn't fits - it will be placed on bottom of previous column.
    So you can set up columns to be shown on right or left of each for large screens and on bottom of each other for small screens.
    For example, if you need 4 columns - for large screen you will set 25% (columns are shown on right or left in same line) width for them, for small - 50% (4 columns are shown on right of each other in 2 lines), for extra small - 100% (columns are shown on bottom of each other on 4 lines).

    Set the column width and click "Create" button.

  2. Column will be added (Not that it's empty and won't appear before you insert any element inside)

How to insert element on page

  1. Let's add new text to column (you can add texts, images, cards and any widgets availablie in page constructor).
    Click "Add element" button on admin sidebar:

  2. Click a "+" or arrow "^" button in column or row where you want to insert new text:



  3. Dialog box will appear. You can choose any available basic element or element from templates (later we wil figure out how to create templates).
    We want to create a text. Please select "Text" on this dialog box.

  4. You will see a dialog box with all texts attached to this page (if you have any text that has been inserted to current page). Also you can find any other text attached to any other page or in another folder.
    To insert existing text - just click on "V" button on left side of text name.
    We will create a new text - click "Create text" button



  5. Type the new text title on dialog box appeared and click "create" button



  6. New text will be inserted to the page.
  7. Now you can edit it.


  8. Type text, insert images and click "save" button


    Note. Save button are separate for every text element. Do not forget to click "save" for every text element.

How to edit column width

  1. Let's set up columns to make 2 columns inline for large screens and one column under another for small screens.
  2. Let's change column width to  50%.
    Click "Change width" in "Columns" block on admin sidebar

  3. Click on column that we will edit
  4. Dialog box will appear. Enter different column width for screens: 50% for large and middle screen, 100% for small and extra small screens.
    Then click "save" button

  5. Now let's add new column on right of current.
    Click "Add column" on admin sidebar

  6. Click "+" button on right side of current column 


  7. Set a column width for every screen: 50% for large and medium screens, 100% for small and extra small screens.
    Click "Create" button

  8. Column will be created. Note that column won't appear because it is empty - no element created inside.
  9. Let's add new text to this new column.
    Click "Add element" button on admin sidebar


  10. Click "+" button inside new column - text will be inserted there.


  11. Dialog box will appear. You can choose any available basic element or element from templates (later we wil figure out how to create templates).
    We want to create a text. Please select "Text" on this dialog box.

  12. You will see a dialog box with all texts attached to this page (if you have any text that has been inserted to current page). Also you can find any other text attached to any other page or in another folder.
    To insert existing text - just click on "V" button on left side of text name.
    We will create a new text - click "Create text" button

  13. Type the new text title on dialog box appeared and click "create" button

  14. New text will be inserted to the page.

  15. Now we have 2 columns with texts. On large and medium screen they will be stacked in same line, on small screens they will be placed on different lines on bottom of each other. 
  16. That' it. You are ready to become a Jedi. 

Cookies help us improve our web content and deliver a personalized experience. By using this website, you agree to our use of cookies. Close this web site if you do not agree to our use of cookies.

Learn more about cookies