the famous wpmu dev

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.

elements_toolbox

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 & Drop

Link 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.”

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.

6.2 Text Element

Link 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.

Default

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.

upfront_text_editor_wysywyg

Changing to a blockquote, however, gives us this:

upfront_text_element_default_blockquote

Much better.

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.

upfront_issue_blockquote_alternate

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.

New Preset

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:

upfront_dont_edit_default_preset

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…

upfront_preset_dropdown

…and a blank field for creating a new preset.

upfront_name_new_preset

If you choose door number two, and create a new preset, you’ll be presented with settings like these:

upfront_text_element_new_preset_settings

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:

upfront_new_blockquote_example

 

Custom CSS

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.

upfront_edit_preset_css

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:

upfront_save_for_all_or_this

7. Make your choice, then save your element, and save Upfront before previewing live.

Result:

upfront_letterpress_custom_css_live

 

6.3 Image and Gallery Elements

Link 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.

  1. Drag the image element icon into your design panel.
  2. Click the plus sign (+) in the element to choose an image from your media library or to upload a new image.
  3. 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.

upfront_initial_gallery_settings

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.

upfront_gallery_default_issue_after_upload

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

upfront_new_image_preset

Live:

upfront_image_new_preset_live

Gallery Element Presets

Gallery alternative preset settings

upfront_gallery_alternative_preset

Live

upfront_gallery_alternative_live

Live with lightbox

upfront_gallery_alternative_preset_live_lightbox

Gallery Element Custom CSS

upfront_gallery_custom_css_settings

Custom CSS

Live

upfront_gallery_custom_css_live

6.4 Slider Element

Link 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 Element

Link to chapter 5

Setup

upfront_map_element_enter_address

Default Map Element Settings

upfront_map_element_settings

Map with Snazzy Maps overlay settings

upfront_snazzy_map_code_applied_settings

Link to this style: https://snazzymaps.com/style/27/shift-worker

 

Map with Snazzy Maps overlay live

upfront_map_element_snazzy_live

6.6 Menu Element

Link 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 Element

Link 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 Elements

Link 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 Element

Link 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 Element

Link 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 Elements

Link 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 Element

Link 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 Element

Link 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 Element

Link 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.

Get help and support for ANY WordPress problem for FREE

Want expert help and support for ANY WordPress issue for free?

Sign up for a free trial now and let us help you out!

No obligation and super easy to cancel.

Awesome! Let’s get you set up with your free 30 day trial


Example: John
Already have a WPMU DEV account? Log In