Re-organizing Components Within a Page

Have you ever wanted to reorganize a page, but weren't sure how? Have you ever created a component, only to decide you want it to be placed in a collection? This guide explains how to move things around, including how to move items into or out of a collection.
﻿
Jump to: 
﻿ Moving items around the page⁠ ﻿
﻿ Moving items into or out of a Collection⁠ ﻿
Moving Items Around the PageChanging the order of components is relatively straightforward. From the editing interface, locate the specific component you wish to move. At the very left of each component, you'll notice a pattern of 6 dots, which can be found between carets pointing up and down. To move the component up or down one position, click the up or down caret, respectively. To drag the component farther up or down, click the corresponding caret the appropriate number of times, or click the 6-dot pattern and drag it to the desired position. Save your work when you have finished.
﻿
Screenshot of the editing interface. Two items appear in the main region, and the 6-dot pattern with up and down arrows at the left of each one is outlined to highlight its location. Screenshot of the editing interface. Two items appear in the main region, and the 6-dot pattern with up and down arrows at the left of each one is outlined to highlight its location. 
Moving an Item Into or Out of a CollectionWhile moving an item up or down within a page is pretty straightforward, the process of moving an item into or out of a collection requires an additional step. 
﻿
First, locate the option to "Drag & drop" components. This can be found in the blue Main Region bar, next to the "Edit all" button.
﻿
Screenshot of the editing interface of a webpage. At the very right on the bar for "Main Region" there are two buttons. The second button is "Drag & drop."Screenshot of the editing interface of a webpage. At the very right on the bar for "Main Region" there are two buttons. The second button is "Drag & drop."
﻿
Clicking "Drag & drop" will change the appearance of the components on your page. Each will have a more compact view, and the 3 dots on the left will be changed to a 4-pointed arrow.
﻿
Screenshot of the drag & drop interface. 4-pointed arrows exist at the very left of each component item and are outlined in yellow to highlight their location. Screenshot of the drag & drop interface. 4-pointed arrows exist at the very left of each component item and are outlined in yellow to highlight their location. 
﻿
To move an item, click the 4-pointed arrow and drag the item to your desired destination. Items can be dragged into a collection. They can also be removed from a collection and placed as a stand-alone element.
﻿
Click "complete drag & drop" when finished, and be sure to save your page.
﻿
Screenshot of the drag & drop interface. The button, "complete drag & drop" at the top of the section is outlined in yellow to highlight its location. Screenshot of the drag & drop interface. The button, "complete drag & drop" at the top of the section is outlined in yellow to highlight its location. 
﻿