View on GitHub

Website Builder Interface

On this page

This entire interface is designed to behave and work as if you were coding a HTML page for your application. It has the required flexibility and granularity offered in conventional coding and yet enforces all the restrictions included as part of a HTML document. It has all the elements included in HTML5, all pre-built styles from CSS3 and full support of JavaScript for developing the front-end for your web application.

  • On the top section, you have the Menu Tooltips Bar that includes frequently-used functions for the interface, as buttons.
  • On the left pane, you have the Toolbox that contains all the elements supported by HTML5 and our custom-built Wizards for easier design of your front-end
  • In the centre, the white portion is the Canvas - depending on which Layout you decided to go ahead with from the previous step, you may see different elements included as soon as you open up the Web Builder interface
  • On the right pane, you have the Attributes area that comes into view when you click on any elements present/created on the canvas

Menu Tooltip Bar

New York
  • Logo : contains a brief description of what Codevify is all about

    • contains the following options:

    Save, Close, Preview

    • Save: Just save the current page you’re working on.
    • Save & Close: Save and close the current page you’re working on.
    • Close: Just close the current page without saving.
    • Preview: See a functional preview of the current page you’re working on.

    Show Source Code

    A new tab opens on the right containing the entire source code for your application. You may even directly edit the source code and observe the Preview to reflect your changes.

    Preview Options

    • Preview: Preview your front-end design in the same tab, click on the red box with an X to close the preview.
    • Preview in New Tab: Preview your front-end design in a new tab that opens up to the right, click on the tab’s X to close the preview.

    Device Layouts

    • Desktop View
    • Tablet View (Portrait)
    • Mobile Landscape View
    • Mobile View (Portrait)

    Toolbox Options

    • Open Toolbox: Opens the Toolbox if it’s not present on the left pane.
    • Hide Toolbox: Closes the Toolbox if it’s present on the left pane.

    Text Formatter Options

    • Open Text Formatter: Opens the Text Formatter, when it is not present on the canvas as a modal.
    • Hide Text Formatter: Closes the Text Formatter when it is present on the canvas as a modal.

    Attributes Options

    • Open Attributes: Opens the Attributes area if it’s not present on the right pane.
    • Hide Attributes: Closes the Attributes area if it’s present on the right panel.

    Move Up/Move Down elements

    • Move Up button: Move the element one row above.
    • Move Down button: Move the element one row below.

    Undo/Redo

    • Undo button:Click on the Undo button in the toolbar to revert the last action. Five undo steps may be available, allowing you to step back through several recent changes.
    • Redo button: Restores the last undone action.

    Copy/Cut/Paste

    • Copy button:>Duplicates the selected content and places it on the clipboard without removing it from its original location.
    • Cut button: Removes the selected content and places it on the clipboard..
    • Paste button:Inserts the content from the clipboard into the desired location.

    Table Settings

    Contains a list of configurations to design and format any tables you might be building on the page.

    • Table Colour
    • Table Border
    • Border Color
    • Responsive Table
    • Header
    • Footer
    • Vertical Align
    • Caption Text
    • Caption Position
    • Striped Rows
    • Striped Columns
    • Hoverable Rows
    • Small Table
    • All the above configurations have the same concepts and definitions as defined in HTML5 Tables.