Introduction
Using Sitely
Elements
How to
Sitely’s top Toolbar gives you quick access to some of the most commonly used elements you will need when setting out your webpages. To see the full range of tools available to you, just click on the + icon in the toolbar. This will open a window where you can choose from all the available elements. If you want to change or add the elements in the toolbar, you can right-click and choose Customize Toolbar.
Text Box
This is the element you use to add text to your page. Initially, the box is shown filled with simulated text. Click in the box to start adding your own.
Image
This adds an image placeholder to the page in which you can add your own image.
Video
The video element puts a video placeholder on the page, ready for you to add your own video from a variety of sources.
Map
The Map element allows you to insert a Google Map into the page.
Image gallery
The image gallery adds an image slider to your page which you can populate with your own images.
Audio
The Audio element allows you to add an audio player to your page for the playing of music.
Lottie animation
The Lottie Animation element allows for the addition of Lottie animations to your page.
Image/video grid
The image/video grid creates a grid into which you can place your own video or image content.
Blog Tags
The Blog Tags option will only be active if you have created a blog page in your website - see the section about Blogs for more information.
Box
The Box element adds a box to your page which can be styled from the style panel. Styling options include fill and border as well as rounding to create other shapes including circles.
Wide box
The wide box option creates a special box that spans the entire web browser window. This is commonly used for creating wide hero sections, footer areas and navigation blocks.
Popup
The Popup element creates popup widows that can be triggered by clicking a link within the page, or automatically trigger upon some other event, such as a time delay.
Layout Block
The layout Block acts like a container into which you can add other elements. These are ideal for breaking pages down into manageable sections. If you subsequently move a layout block on the page, all its content goes along for the ride. Check the section about layout blocks for more information.
Layout grid
The Layout Grid is very similar to the Video/Image Layout Grid except that a standard Layout Grid can be used for other content. These are perfect for creating evenly spaced content areas across the page.
Menu
The Menu element creates a navigation menu for your website. It can be styled any way you wish and can include drop-down sub-menu items. Menus can be created automatically from your web pages, or can be created manually.
Button
The Button element is your go-to place for creating buttons for your website. This element offers a wide range of styling options from Sitely’s style panel. More information about buttons can be found later in this guide.
Text input
Text Input is an element for creating form fields for the collection of information from your site visitors. Each text input field can be given attributes to ensure only correct information is entered - such as email addresses. Check the forms section of this guide for more information about creating forms.
Checkbox
The checkbox is another form element that allows site visitors to check various options you may include in your forms.
Radio Button
Radio Buttons are another way to allow users to make selections on a form. These are often used when a user is required to make a single choice from a range of options.
Option Selection
Option Selection creates a drop down list of options on forms. Users will be able to select an option from the list instead of typing into a text field.
Slider
The slider is a form element that lets users select a numeric value by moving a slider.
File Attachment
File Attachment creates a field and a find button. This allows users to search for a file to upload with their form submissions.
The monetization section of the toolbox contains various elements that allow integration with third-party applications, and include access to popular payment gateways, booking and calendar apps and the addition of Ad Units to your web pages. These options will require you to have account access to the relevant service providers.
The social section offers integration tools for popular social media platforms.
Embed
The embed element allows you to add third-party code into your web page.
Scroll Location
This is a location marker that can be added to your pages to signify the beginning of important page sections. In web terms, it would be called an ‘Anchor’. These can be targeted by links in navigation to take site visitors to specific parts of the page without having to scroll.
Site Search
This provides a handy site search option. It places a site search box on the page through which site visitors can search for specific information in your website.
Page Settings
89%
In addition to the element tools, Sitely’s toolbar also gives you access to other important features while designing your web pages. You will also find the page settings which give the ability to zoom into your pages, select a device, and set up a design grid. The device icon displayed in the toolbar will change as you switch from one device to another.
Site Settings
The toolbar is also where you will find your Site Settings. These tools include an SEO assistant to help you manage search engine optimization of your site, a general site-wide settings icon, which offers many options that will be explained later in this user guide, A live preview icon that allows you to see a live preview of your pages in your installed web browsers, and finally, a publishing icon that allows you to publish your site, either directly to your web server, or as a local disk file.
Please report any shortcoming in this documentation and we’ll fix it as soon as possible!
Updated for Sitely 5.6