Skip to main content

Move elements

Last updated on Apr 22, 20262 min read

In short​

With the „Move Elements“ feature, you can easily move an element on your website. Click on the element and move it using the arrow icons that appear above it.

How to use the function​

Click on an element in the Varify.io editor that you want to move. The selected element is framed. Above the frame you will find an "arrow up" and an "arrow down".

You can move elements within a group. This means that if you want to swap the element with the next element, click on the down arrow. If you want to move the element one position earlier, click on the up arrow.

Depending on which element or element container (div) is clicked, the element moves horizontally or vertically within the parent element.

Selected headline in the Varify editor; the two arrow buttons of the toolbar that move the element are highlighted

Move elements horizontally​

If the selected element is located in a container (div) in which there are other blocks to the right or left of it, the element is moved horizontally to the right or left accordingly.

The element can be moved to the right or left until it has reached the start or end of the container.

important

Important: The element is only moved within its own container.

In this example, the black belt is moved to the third position of the product slider.

Product row before and after: the black belt moves from the first position to the third

Move elements vertically​

If you move an element or a container that spans the entire width of the page, for example, or if there are no other containers in the same parent container to the right or left of it, it will be moved vertically up or down.

important

Important: The element is only moved within its own container.

In this example, the container for the navigation has been selected and moved to the top.

The navigation before and after moving: it sits below the logo first, above it afterwards

Select the right element​

It is not always possible to select the correct element with a mouse click. For example, you want to move a parent element, but you can only click on the inner element.

The breadcrumb selector helps you here. When you click on an element, the elements/containers in which the element is nested are displayed. You can then select the parent element.

You can find a complete article on the function here: Breadcrumb Selector

Breadcrumb of the editor: from the single link „a“ the selection moves up to „div.navbar“, which picks the whole navigation