The Constructor page hosts the core elements and tools you will need to design, create, edit, save and publish your website(s). You can drag and drop many element widgets into the workspace. For example, dragging a Button Widget from the widget toolbar and dropping it into the workspace and then editing it's properties. For convenience and for the purpose of this user guide, the Constructor can be divided into 4 functional blocks. Namely:

• Top menu bar - located at the top of the page - block_1 in the picture
• Predesigned Elements Toolbox - located in the left sidebar - block_2 in the picture
• Toolbox - located in the left sidebar - block_3 in the picture
• Central Workspace - block_4 in the picture

Predesigned Elements or Core Widgets (block_2) top to bottom
AGGREGATOR	Template aggregator. Click to open modal dialog page, where you can filter and select separate section(s) from other templates and combine/use it with your current one. To select, click on the section image, the dialog page automatically closes. Decide the position on the page, where to drop the selected element - by moving the crossbar mouse cursor and green horizontal line across the page. Drop the element - by finally clicking the crossbar cursor.
TEMPLATES	Used to select and import new template into your project. Click to open a modal dialog page, where you can filter and select from a list of templates and combine/use it with your current one. To select, click on the template image, the dialog page automatically closes. Decide the position on the page, where to drop the selected template - by moving the crossbar mouse cursor and green horizontal line across the page. Drop the new template - by finally clicking the crossbar cursor.
MEDIA	Media Manager. Click to upload, insert, delete, crop, resize pictures, images and other media files in the media gallery.
PAGES	Click to create additional web page(s). You can also edit/modify web page name and url (link), SEO tags, duplicate or/and delete web page(s).
SETTINGS	Click to edit general site settings - favicon and site name.
DESIGN	Click to edit site global design - default background color, default text font and color.

Basic Element Widgets (block_3)
top to bottom

All elements in this group can be inserted only into the Central Workplace.

• Click the element's widget
• Move your mouse cursor to the central Workplace
• Decide the position on the page, where to drop the element - by moving the crossbar mouse cursor and green horizontal line up/down the page
• Drop the element - by finally clicking the Move or crossbar cursor

Each element widget has it's various properties. To access the properties, click the element's handle - the icon located on the top left or top right corner of the element. Alternatively, you can right-click on the element to do same.

Block	Invokes section element for insertion into the central Workplace. Section or block acts as container and is used to group together related elements - for example, one or more heading elements and additional elements presenting related contents such as column, text, image, etc. In fact, anything. See more details on using Block or Section widget
Slider	The
Column	XRipe grid system uses a series of containers, rows, and columns to layout and align content. The columns are build on the grid's flexbox architecture. Flexbox means you have options for changing individual columns and modifying groups of columns at the row level or inside a parent container. After you must have dragged-dropped the column element into the workplace. By default, column width is 100% across the page. You can choose to indicate the column width and height by editing it's dimension property. If not specified, column height will automatically adjust to the height of its content.
Inner Column	Holds same properties as columns. Unlike columns, which can be inserted into any part of the workspace, inner columns are designed to be inserted into a parent container.
Menu	Menu is used for creating context menu as well as lists menu. Menu represents an unordered list of items, each of which represents a text and link (or other command) that the user can activate. In most cases, menus are located at the top or/and the bottom of a web page.
Title	Title acts as heading text that can be formatted as may be necessary - consider a title at the head of a page or section of a book. Title (in respect to this user guide) should not be confused with html document's title that is shown in a browser's title bar or a page's tab.
Text	Can be used to define the single-line or multi-line text field on a web page. Some text elements may allow text formatting, in which case WYSWYG text editor is invoked.
Divider	Can be used to insert a horizontal rule or a thematic break in an HTML page to divide or visually separate document sections.
Button	Button is HTML element that represents a clickable button, used to submit forms or navigate to anywhere in a document. Click edit (from the context menu) to change the button attributes. Link - indicates the address (relative or absolute URL) of the page to which user is directed upon clicking the button. Text - visible text to be displayed on the button, e.g. Go, Submit, Buy Now, Order, Login, Register, Contact Us etc.
Contact Form	Contact Form widget holds collection of HTML and/or PHP codes, which can be used to send content of a form to your email address. After dropping the widget into your site page, open the context menu, click Edit. In the resulting window, type-in necessary information. Pay special attention to the Content >> FORM FIELDS and SETTINGS
Image	Provides the properties and methods used to manipulate image elements. In order words, the widget is used to embed an image in an HTML page - your website page. To insert/upload image into the image placeholder (after dropping the widget into your site page) open the context menu, click Edit. In the resulting window, click the small image placeholder. Wait for the media manager modal dialog page to load. Follow the instructions on the screen. Notes: If you have used MEDIA to upload image(s) into the image gallery earlier, then the image(s) will be displayed. You can select from the collection or upload a new image and then insert.
Icon	Icon is a glyph (small image) used in place of short text on a page. For example, arrow icons can be used to indicate a direction, audio & video icons can represent common ways to interact with audio and video, etc. Click Edit to open the icon properties window (Content tab), then click on the icon placeholder. Wait for the icon library modal page to load. Select necessary icon. To control the size, change the font-size and other properties of the icon, select the Style tab and make necessary edits.
Icon List	Handling Icon List is similar to the steps needed for Icon, except that you will be able to have the icons next to each vertical UL list item, in place of the normal bullets.
Icon Box	The Icon Box element allows you to style and customize with different options some cool icons and use them with (or without) a heading and a tiny bit of content.
Image Box	Image Box widget lets you add an image box that combines an image with a headline and text, which is often used in features sections, as an alternative to using the Icon Box widget. See more details on using Image Box widget
Video	Use the Video widget to easily embed videos on your website page.
Gallery	The
Carousel	Carousel widget allows you to add dynamic galleries to your pages.
Map	Fast way to embed Google Maps in your website. Can be useful for contact pages, display your physical address location on the map.
Accordion	The Accordion Widget is used to display text in a collapsed, condensed manner, letting you save space while still presenting an abundance of content. With the Accordion, visitors can scan the item titles, and choose to expand an item only if it is of interest. A similar widget is the Toggle widget, but there are two main differences between the Accordion widget and the Toggle widget. See more details on using Accordion widget
Social Buttons	Social Buttons - can be used to add icon links to all your social media profiles.
Custom Code	Using custom code widget gives you the flexibility to add code snippets anywhere in your website without editing original template files or using unnecessary plugins. For example, you can insert affiliate tracking codes, google analytics codes, write your own scripts or/and copy-paste css snippets. Possibilities are endless. See more details on using Custom code widget