User Manuals

Learn how to use WordPress – and take advantage of its advanced features.

  • Setup, Usage & Integration

Using Drag & Drop

Drag and drop provides the foundation for creating infinite layouts in Upfront that fit the vision you have for your website. You can create virtually any layout by dragging elements into the grid area, re-sizing them and modifying their appearance and content. Drag and drop in Upfront uses the snap to element logic, which means any side of any element in the layout acts as a “snap point.”

Snap to element

You can see in the image above that when you drag an element, the boundaries of where you can place it become visible. Moving an element over either side of the grid area creates a thick purple line, indicating the location of where the element would be placed when released.

snap to element variations

In the image above, each column illustrates what happens with different drop points and where a particular element would “fall” when released.

By default, dropped elements occupy 100% of the available width, and dropping an element to the side of a 100% wide element would split it into two elements of the same width. Adding more elements to a row will result in a row of elements all of the same width, when possible. The same logic is applied when elements are removed from a row. Below you can see a GIF example of the logic in action.

Spacers

If you want to increase the space between adjacent elements, you can do this by inserting spacers in-between or around them. For example, you might want a layout where a slider element is 18 columns wide and is centred within the layout. In order to accomplish this, you need to insert three columns to the left and right sides of the slider, which can be done by pulling the left and right re-size handles in. This also works for single elements, but what if there are two 12 column wide sliders side-by-side and you want each slider to have a one column gap on each side (left and right)? In this scenario, you can still use the re-size handles to create space between the edge of the layout and sliders, but you also need to create a spacer in-between the two elements. This can be accomplished by hovering over the re-size handle in-between the elements and clicking the “+” icon that appears. The images below demonstrates how spacers work.

spacer elements in upfront

To remove a spacer, simply collapse it using the same re-size handle.

For the most part, the column snapping logic works really well, however, there are instances where a workaround might be more preferable. For example, consider this scenario: You have created a three column layout with image and text elements in each column, a very common scenario across the web. Now, you want to add a button to each of the columns, but you don’t want the button to occupy 100% of the width of the column. There are two ways you can accomplish this. One way would be to snap-align your buttons to the bottom of each column and then adjust the padding using the Advanced Settings » Customize Padding control. Alternatively, instead of aligning the buttons to the bottom of the columns, create a new row with three buttons and align them how you want by creating spacers. Both methods have their advantages and drawbacks. You can see both approaches illustrated below.

Vertical Alignment

You can achieve vertical alignment in a number of simple ways. The first – and possibly the easiest – way is to select an element and use the up and down keys for vertical alignment. In addition to that, all elements have a padding control that is located inside the “Over Element” panel and extra padding control inside the advanced settings panel.