support.hostaan.com

Customizing appearance and responsiveness in Sitebuilder

Our website builder is a "drag and drop" editor that allows you to customize your website's appearance almost without limits. In this guide, we'll go through the editing functions of website builder elements and responsiveness.

When you hover your mouse over any text, image, or graphic element in the editor view, it activates and becomes framed. By clicking on the element, you'll see two function icons (in blue) in its frame as well as the element's distances relative to surrounding elements. The functions of the icons that appear over the element are as follows:

Move icon by grabbing with the mouse, you move the element (in the example, the "Contact us" button) to the desired block.
Pen icon By clicking with the mouse, you access each element's action menu, where you can choose what to do with the element (e.g., Duplicate element, copy, paste, or lock)

Select parent selection allows you to activate the upper-level element containing the element, i.e., the "Parent". This function is handy, for example, when you want to know in which structure the element is located
Copy and paste selections allow you to copy the desired element to the page. This easily duplicates, for example, buttons and other graphic elements on your pages, which would be laborious to format individually.
Lock selection allows you to lock the element to its current location so that it cannot be accidentally grabbed. This can be necessary in page areas with many overlapping elements.
Delete selection destroys the selected element
Edit text menu item activates the element's text content for editing and then formatting tools are also available.

A menu also opens over the active element, which allows you to change the element's orientation relative to the block in which it is placed. From the menu you can change the element's position in the block

Horizontally
Vertically, if the block is larger than the element
Stretch the element's content to full width or arrange the content centered
Additionally, you can arrange the parts inside the element either side by side or stacked

You can edit the active element from the menus that open on the right side of the page.

Elements have Layout, Size, Spacing, Displayed elements, Animation, and Advanced tabs, which can be found under the Page structure tab in the right-side menu.

In the Layout tab, you can edit the element's background image and border, and how, for example, an image inside the element is arranged. Additionally, you can define a drop shadow for the element.

In the Size tab, you can define the element's size relative to its parent element or set a forced size, for example in pixels. Remember that images forced to be large may not work responsively on mobile devices. Page template presets are often in percentages and automatically adaptive.

In the Spacing tab, you can set margin and padding for the element. Additionally, you can define how margin and padding scale for different screen sizes. The Use same values selection means that the element uses the values defined for its parent as margin and padding.

From the Displayed elements menu, you can choose whether you want, for example, a large image to be displayed only on larger screens, so it won't be shown at all on a phone or tablet. By default, all elements are displayed on all devices, but in some cases, limiting elements can be useful.

You can also choose on which pages the same element is displayed.

In the Animation menu, you can set animations for the element.

In the Advanced tab, you can change the element's link, set an anchor for the element, change the element's class and name, and add functions when the element is clicked.

Hostaan's website builder is implemented so that the site produced with the editor works fully responsively and adapts to the user's device screen size.

The site works and looks good regardless of whether the user browses the page with a smartphone, tablet, computer, or even a smart TV.

You can test how your site looks on different screen sizes either by narrowing/widening your browser window or by clicking the different-sized screens shown at the top of the editor view, which arranges the site into the corresponding size view.