6. Upfront Elements
In Upfront, elements are the building blocks of your layouts. Ranging from image and gallery elements to complex slider and code elements, you’ll find everything you need to personalize your site while meeting all your needs.
In the document below, we’ll explain the foundations of drag and drop, then give you examples of each element’s default preset, a modified new preset, and in some cases, some custom CSS you can use on your own Upfront sites.
The element examples below all use Issue, for consistency, but you’ll find similar (if theme-specific) settings in any Upfront starter theme you’re using.
6.1 Using Drag & DropLink to chapter 1
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.”
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.
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.
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.
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.
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.
6.2 Text ElementLink to chapter 2
The test element is the backbone of Upfront, just like text is the backbone of your site. Many sections of this chapter will be applicable to other elements, so we’ll cover them in depth here, and touch lightly on them in further sections.
The default preset for the text box is quite flexible, using only the styles controled by the text box WYSYWYG edtior. In the example below, I added a text box to highlight a pull quote, and drug it between the title and the main content. At first, I tried italic text, but it didn’t have the right punch.
Changing to a blockquote, however, gives us this:
A cool feature in the Upfront WYSYWIG editor is the alternative styles for some of the text formatting tools. Take a closer look at the editor. Notice the small dots under some formatting options? Those allow you to toggle through any available styles right in the text edtior.
Note that I did not edit the default preset itself. Why? Like we mention in the Presets doc, editing the default will change the styles for that element theme-wide. If you’re creating styles for one of your elements that you don’t want to be universal, which will be most of them, you’ll create a new preset, which you can edit safely. After you save this new preset, you’ll be able to apply it to other text elements throughout your site.
Next we’re going to make a new text element preset, and tweak just a handful of the default settings.
Start by clicking the text element you want to create a new preset for, then click the gear to bring up the settings.
You should see something like this:
Unless this is the rare instance you’d need to edit the default, you’ll want to click the dropdown under Choose or Create Preset, which will bring up a list of available presets for this element…
…and a blank field for creating a new preset.
If you choose door number two, and create a new preset, you’ll be presented with settings like these:
I left the background colorless, bur changed the typeface to lovely Verdana, and adjusted the weight/style to regular italic. I also changed the font color to dark gray.
Here’s the result:
Let’s apply some CSS to give the block quote a little more interest, here we’ll apply a letterpress-type look.
1. Go back to the Upfront editor
2. Click your text element, and then click on the gear to bring up the settings.
3. Choose the new custom preset you created above.
4. Then choose “Custom CSS” in the editor panel.
5. Paste the following CSS code in the Upfront CSS edtior, and save.
6. After you save, you’ll be presented with a modal asking if you want to apply any layout changes to this post or page only, or to all posts/pages of this type, like so:
7. Make your choice, then save your element, and save Upfront before previewing live.
6.3 Image and Gallery ElementsLink to chapter 3
Images and image galleries can help add a beautiful, visual element to your site. Let’s look at Upfront’s image and gallery elements.
Default Image Elements
Image elements are pretty straightforward.
- Drag the image element icon into your design panel.
- Click the plus sign (+) in the element to choose an image from your media library or to upload a new image.
- Adjust image position and save.
Default Gallery Elements
When you first drag in a gallery element, you’ll see a modal asking what you want to happen when a gallery thumbnail is clicked. Your options are showing a larger version of the image or going to the linked image page.
Next, you’ll select which images you want to appear in your gallery, and they’ll be arranged according to the default settings. In Issue, the gallery default includes an image overlay with caption.
You can change or edit the images in your gallery by clicking the ellipsis button (…) at the top of the element. Default padding can be adjusted with the center button, and clicking the gear will bring up the gallery settings.
Gallery elements have three settings sections: General settings, which can be changed without editing the default preset, Appearance settings, which will edit the default preset, unless a new preset is created, and Advanced, which at this time is used to make your element an anchor.
Image Element Presets
Image with new preset
Gallery Element Presets
Gallery alternative preset settings
Live with lightbox
Gallery Element Custom CSS
6.4 Slider ElementLink to chapter 4
Slider elements replace bulky, cumbersome slider plugins, and allow you to create dynamic, eye-catching elements anywhere on your site.
6.5 Map ElementLink to chapter 5
Default Map Element Settings
Map with Snazzy Maps overlay settings
Link to this style: https://snazzymaps.com/style/27/shift-worker
Map with Snazzy Maps overlay live
6.6 Menu ElementLink to chapter 6
Upfront makes adding navigation menus wherever you’d like on your site simple and fun. Need different menus on different pages? No problem, Upfront lets you control every detail.
6.7 Widget ElementLink to chapter 7
The Widget element is where Upfront really comes to life. Most WordPress themes limit your use of widgets to sidebars, footers, and every so often, the header. Upfront lets you use widgets anywhere you’d like, which really opens up how creative you can be with your site’s content presentation and functionality.
Most widgets from third-party plugins will work great with Upfront, as well as most widgets in WPMU DEV products.
6.8 YouTube and Like Box ElementsLink to chapter 8
YouTube elements make embedding videos super easy, and simple to customize.
Add a Facebook LikeBox to show off your fans and encourage new fans to show their support.
6.9 Contact ElementLink to chapter 9
The Contact element also eliminates the need for an additional contact plugin, and gives you simple way to capture input from your site’s visitors.
6.10 Code ElementLink to chapter 10
The Code element is used to embed scripts and other code you want to run on your site, not to be confused with specially formatted text like you’d be able to create in a text editor. The code box is super handy if you need a little js to work with your CSS, or if you’d like to embed content like Tweets, Instagrams, or videos from distributors other than YouTube.
6.11 Tab and Accordion ElementsLink to chapter 11
Tab and Accordion elements allow you to maximize the real estate on your pages, showing and hiding content the user selects.
6.12 Button ElementLink to chapter 12
Much as you’d expect, the Button element lets you build beautiful buttons, from navigation to CTAs, with just a few clicks.
6.13 Login ElementLink to chapter 13
Many site owners like to skip having a link to a login page by adding a convenient login widget right on the site. The Login element mimics a login widget, with the freedom to add it anywhere in your site’s design.
6.14 Posts ElementLink to chapter 14
Finally, the Posts element is a great way to highlight your favorite, most popular, or newest blog posts for users, with tons of flexibility.