How to add new items to a web page in the editor

Hello, good time of day. Since we have made a new editor for creating web pages, then let's discuss how and what elements can be added to the editable page.

You are presented with a working window of the editor with an empty page

The main window of HTML editor

Using the Elements main menu item, you can add one of the element types to the page

The menu item Elements includes: Adding an element to the HTML editor
  • Header - element defining the header block or container for the page
  • Image - an element that allows you to display an image on a page
  • Container - the most common element, stores in itself other elements, is intended for positioning other elements
  • Text block - element designed to accommodate various textual information in it
  • Line element - an element that stores a small text fragment allows you to build them in a line, for example, hashtags
  • Single-line element - An element that stores text that will always be in one line
  • Side panel - An element intended for storing accessory information, for example, an additional menu, etc.
  • Form - An element containing input elements for sending to the server, for example, an authorization form
  • Input element label - element contain only input elements
  • Input element - element that allows you to enter information on the page from the user, includes text fields, check boxes, and so on.
  • Multiline field - element that allows you to enter a large text, such as a comment, a review, etc..
  • Small text - element with reduced texts relative to other elements
  • Table - element for displaying table information
  • List - element designed to create lists, as an option menu or other similar information
  • Navigation item - can contain links for navigation on the site, for example the main menu
  • List of definitions - block containing a description of any term
  • Video - input video from the resource Youtube or Rutube
  • Button - an element that allows you to click on itrself, but in contrast it can store other elements, for example, an image
  • Link - an element holding a link to another page in the project, clicking on which the transition occurs
After clicking on any of the elements presented above, will open the form for entering the initial information for the element


 Adding a header in the HTML editor Header - specifies the "header" of the site or element of header if the Main block header is installed, then the element specifies the site header in which you can insert other elements, otherwise the header element containing the header text
  • Header text - specifies the title text
  • Header level - determines the importance of the heading from 1 to 6. 1 - the most significant heading
  • Font - install the header font


Addition image in HTML editor Image - intended to display images on a web page in a graphic format GIF, JPEG ��� PNG
  • Image - select the image you want to use, upload it or select from your gallery
  • Width - width image
  • Height - height image


Addition the container in HTML editor Container � is a block element and it is intend to highlight a fragment of the document in order to change the content type
  • Inside / Wrap - insert or wrap the future element relative to the selected element
  • Text content - block text
  • Classes - width image
  • Insert N blocks - set the number of blocks to be inserted

Block text

 Adding text to the HTML editor A block of text is an element intended for storing in itself textual information, in this case, you can specify what type of information is contained inside, this is necessary for search engines
  • Text - element text
  • Type of text - block text
    • Paragraph - defines a text paragraph
    • Quote - is designed to highlight long quotes inside a web page
    • Text in one line - determines the text without hyphenation
    • Address - is intended for storing information about the author
    • Formatted text - defines a block of pre-formatted text
  • Font - binds a font to an element
  • Classes - binds classes to an element

Line element

Addition the line element in HTML editor Line element - is intended to identify small text elements of a web page
  • Text - element text
  • Font - binds a font to an element

Single line element

Addition single line element in HTML editor Single line element - it is intended for definition of small text inserts which is placed always in one line
  • Text - element text
  • Font - binds a font to an element
  • Classes - defines the classes for an element


Addition the side panel in HTML editor The side panel - is intended to store additional navigation on the site
  • Text - element text
  • Classes - defines the classes for an element


Addition form in HTML editor Sidebar - designed to store additional navigation on the site
  • Form name - the name of the form
  • Sending method - the method of sending the form, if the form of authorization or registration use the method POST
  • Files transfering - the form can transfer files to the server
  • Autocomplete fields - helps fill out form fields with text that was previously entered into them
  • Do not check fields - cancels the built-in validation of data entered by the user in the form for correctness

Input element label

 Add a label to the HTML editor Input element label - establishes a link between a specific label, which is usually a text, and an input element
  • Text - label text
  • Font - binds a font to an element

Multiline field

 Add a label to the HTML editor A multi-line field is a form element for creating an area into which you can enter multiple lines of text
  • Text - text in the element
  • Element name - is the name of the form element
  • Placeholder - Prompt text
  • Element classes - defines the classes for an element
  • Height of field in lines of text - height of element in lines

Small text

 Add a label to the HTML editor Small text - an element with a reduced text in comparison with common text
  • Element text - element text
  • Font - binds a font to an element

Input element

 Add an input element to the HTML editor Element input - allows you to create different interface elements and provide interaction with the user, in the form of text fields, various buttons, switches and flags
  • Type - is the type of the input element
  • Name - is the name of the form element
  • Placeholder - Prompt text
  • Value - is the value of the input element
  • Minimum - is the minimum value of the field (for numeric values)
  • Maximum - is the maximum value of the field (for numeric values) )
  • Step - is the increment step (for numeric values)
  • Read Only - disables the entry of a value in an element
  • Max characters - the maximum number of characters to enter in an element

Navigation item

 Add a label to the HTML editor The navigation element is a navigation element on the site, it keeps priority links on the page
  • Font - binds a font to an element

List of definitions

 Adding a list to the HTML editor List of definitions - the creation of a list of definitions, contains the term and its decoding
  • Term is the text of a term
  • Definition - the text of the decryption term
  • Font - defines the font of the list
  • Classes - for a list of definitions
  • Classes of the term are classes for the term element
  • Classes of definition - classes for the definition element


 Adding a list to the HTML editor Video - insert a video from Youtube or Rutube resources
  • Source - select source site
  • HTML code - HTML code link to the video


 Add a label to the HTML editor Button - a button that can store other elements in itself
  • Button text - text inside the button


Addition link in HTML editor Link - defines an element of a link in a web page
  • Link text - the text of the link element
  • Link - defines the project page to which the link is referenced or you can indicate yourself any other. To select links for other project pages, you must specify the project structure in the project menu
  • Opening method - the way to open the link is in this document or on a new tab
  • Classes - defines the reference classes
By default, you can enter no information into the fields at all, and add them later. After clicking on the Create button, the new item is added to the end of the page or selected item