Elements
Introduction
Using Sitely
These are some Sitely features that aid in editing or contribute to making a website feel more consistent and uniform.
Grouping
Multiple elements can be grouped so that you can move and resize them as a single unit. You can do this by selecting all the elements you want to group and then right-click or control-click and select ‘Group’ from the context menu. You can also group elements by selecting them and using the group option in Sitely’s Arrange menu. Locking an element (including groups) prevents inadvertently moving, modifying, or deleting it, either from the Arrange menu or the Arrange inspector.
Context Menu Option
Arrange Menu Option
Embedding
The "Embed" function allows you to insert HTML code snippets into a Sitely website. You typically use "Embed" to insert third-party content for which an "embed code" has been provided (sometimes indicated by the HTML code "<>" parenthesis), like a SoundCloud player or a chat bot.
The "Content expands vertically" checkbox is necessary when code produces content of variable height, such as the ecwid.com shopping cart.
To ensure visitor privacy and comply with privacy regulations, by default, the code is activated only after user consent (if the site is using Sitely’s privacy features), and the "When loading the content" setting ensures the page address isn’t shared with any loaded third-party service. These settings might need to be changed for compatibility with different services on a case-by-case basis; for example, the tawk.to chat service needs the page address.
Embed elements support being set to full width (in the Arrange inspector) for code snippets that support it.
A simplified use for the embed element is to enter just a URL in the code section; this will automatically create an iframe for you, effectively embedding the site within the embed element. It can also be used for displaying PDF files.
IMPORTANT: When adding a URL only into an embed element, the resulting iframe will be set at the width of the embed element on the canvas. However, its height will be of an indeterminant size. Therefore it may be preferable to add a piece of iframe code that sets the size of the iframe. Here is an example:
Clearly, coding is something the developers of Sitely wish to avoid, but when it comes to embedding you may have to get your hands dirty and try a little bit of coding. The embed element in Sitely is mostly intended as a stopgap while we develop more native Sitely elements. For example, the improvements to Sitely’s Image Gallery element and image/video grid provides for a significantly simpler method of adding PDF file to your pages.
Layout Blocks
Layout Blocks are another form of grouping that allow your pages to be segregated into blocks. For example, you could have a block that contains your navigation, another to contain your hero section, and yet other blocks for features, products, team members, etc. The idea is to have each block of your page express a single idea or theme. This allows you to easily style blocks to make them more visually segregated. But, they also have a significant advantage when it comes to reorganizing your pages. Essentially, if you contain elements within a block, the block can be moved up or down the page, automatically moving other block above or below the block you’re moving. Furthermore, all the elements contained within a layout block (including groups) will go along for the ride in their exact same position. We have a whole section in this guide about layout blocks, so check it out. For the time being, to create layout blocks you can either add them to your page just like any other element, or you can select all the elements on the page that you want converted into a layout block, and right-click or control-click to bring up the context menu. You then choose the option to ‘Move to Layout Block’
Although elements in a layout block move undisturbed when the block is rearranged on the page, you can still edit and move individual elements around within a layout block. This is particularly useful when rearranging content for display on mobile devices.
Element Keyboard Shortcuts
In Sitely, you can quickly add the most common elements to the canvas by simply pressing a key associated with the element. These shortcut keys are easy to remember as they are almost all based on the first letter of the element you may want to add. Letters can be upper or lowercase. Ensure there is nothing selected on the canvas and just press the appropriate key.
Element
Text Box
Map
Video
Image
Audio
Box
Wide Box
Layout Block
Image/Video Grid
Menu
Keyboard Letter
T or t
P or p
V or v
I or i
A or a
B or b
W or w
L or l
G or g
M or m
Please report any shortcoming in this documentation and we’ll fix it as soon as possible!
Updated for Sitely 5.6
This website makes use of cookies.
Please see our privacy policy for details.
It’s Okay
Deny
