View on GitHub

Containers

On this page

Containers Contains elements/entities that do not need any configuration before being created. Drag the menu item on the Canvas OR click TWICE on the items to configure them. The items under this menu are:

New York

Button Block

  • Creates a DIV element within which you can place buttons as blocks, i.e. the buttons placed as direct children take up the entire width of their parent Button block.
  • Add buttons by clicking the sub-item Button within Button Group.
  • Every new button added is placed horizontally, i.e. below the original button .

Button Group

  • Creates a placeholder for a collection of buttons that can be visually grouped together.
  • Add buttons by clicking the sub-item Button.
  • Every new button added is placed vertically, i.e. on the right side of the original button.
  • NOTE: All buttons placed outside a Button block or a Button Group are placed vertically

Card

  • Creates a card with one header, one body and one footer by default.
  • Click and select the card to add more Card Header(s) & Card Footer(s) by dragging or double-clicking them. You can add as many as you like.
  • Add more elements to the Card body by selecting the body container and then drag-dropping your required HTML elements on it.

Details

  • Creates a disclosure widget from which you can obtain additional information or controls.
  • Add HTML elements to it by clicking on the created details container and drag-drop/double-click on the respective elements.
  • Added elements under details container are visible when the details is open (with đź”»).

DIV

  • Creates a DIV container to add elements as is allowed by HTML5 specifications.

Fieldset

  • Creates a fieldset whose Legend can be edited in the Attributes section.
  • Add various HTML elements, like form, label, input, card, etc. by drag-drop/double-click on the required elements, after you have selected the fieldset created.

Form Tag

  • The form element defines an interactive section of a web page for collecting user input. It typically contains various input elements like text fields, checkboxes, radio buttons, dropdown lists, etc.
  • The form tag can have attributes such as action, method, enctype, autocomplete, target, and novalidate, among others, which control how the form behaves and where the data is sent upon submission.

Input Group

  • Creates a container that visually groups related form elements together, often used to enhance the layout and functionality of forms.
  • You can add a combination of text inputs, buttons, or dropdowns by drag-drop/double-click on the respective elements.
  • Creates a container to create modal dialogs - UI components that overlay the main content of a webpage, providing a focused and often interactive view.
  • Drag-drop/Double-click on this item creates a button with the text “Open Modal” on the Canvas.
  • To view the created Modal, click on Preview to open the preview and then click on the “Open Modal” button to view the base layout of the modal.
  • To edit the created Modal, select your created modal from the drop-down in the top-right corner of the Webpage Builder Interface, above the Attributes pane
    • The modal is displayed on the Canvas, in the structure as:
      • 3 Div Tag elements as header, body and footer
      • modal-header contains a H4 tag element with the pre-filled text “Modal Heading” on the left side and a “X” button on the right side : this button has the inherent functionality of closing the modal.
      • modal-body contains a H5 tag element with the pre-filled text “Modal body…”
      • modal-footer is present as a Div tag container with no text but a “Close” button on the right side : this button has the inherent functionality of closing the modal
    • The pre-filled text of the default modal screen is directly editable from the Canvas, instead of the usual Attributes pane
    • You can remove the default H4 tag and H5 tag elements to place other HTML elements or just edit them as per your needs

Section

  • Creates a semantic HTML5 container that represents a thematic grouping of content within a webpage.
  • You can place elements like text, images, headings, etc by drag-drop/double-click on the respective elements.

Tab

  • Creates a common UI pattern used to organise and present content in a tabular layout.
  • You can place elements like text, media, forms, etc by drag-drop/double-click on the respective elements.
  • Drag-drop/Double-click on this item creates a tab with 3 default tabs on the Canvas, namely Tab1, Tab2, Tab3 where Tab1 is already selected.
  • To edit the created Tab, click on the Tab container with the Element type as `tab`. There are several containers within it:
    • a navbar that contains the tab headers:
      • edit the tab headers or any other containers within the navbar from the Attributes pane, after selecting them
      • change the title of the tab header by editing the last field Caption and hit enter to save the value.
      • change CSS attributes from the Style field
    • a div container that contains the tab body - place any element on the tab body after selecting the div container with the class tab-pane, by drag-drop/double-click on the respective elements
  • To switch between Tabs on the Canvas, go to Preview of your page, select the Tab you want to work on, switch off Preview and make the required changes to the new selected tab.
  • To add a new tab to the Tab container, drag a Tab Item from the sub-menu and place it on the navbar that has the tab header(s) as a child element. Its tab body is created by default. Use switching as above to change the attributes of the newly added tab