1. 1. Upfront Installation and Overview
    1. 1.1 Upfront Basics
    2. 1.2 Choosing and Installing an Upfront Starter Theme
    3. 1.3 Installing the Upfront Builder Plugin
  2. 2. Upfront Admin Settings
    1. 2.1 General Settings
    2. 2.2 User Restrictions
    3. 2.3 Experimental Settings
  3. 3. Upfront Editor Tour
    1. 3.1 Activating the Upfront Editor
    2. 3.2 Basic Editor Tools
    3. 3.3 Media Management
    4. 3.4 Manage Posts and Pages
    5. 3.5 Drag and Drop Elements Toolbox
    6. 3.6 Global Theme Settings
    7. 3.7 How to Enable and Disable Responsive Mode
    8. 3.8 Toggling the Grid View
    9. 3.9 Saving and Exiting the Upfront Edtior
  4. 4. Upfront Theme Global Settings
    1. 4.1 Global Background
    2. 4.2 Regions
    3. 4.3 Global CSS
    4. 4.4 Fonts
    5. 4.5 Theme Colors
  5. 5. Upfront Regions and Backgrounds
    1. 5.1 Editing, Adding, and Deleting Regions
    2. 5.2 Region Types
    3. 5.3 Region Backgrounds
    4. 5.4 Custom Region CSS
  6. 6. Upfront Elements
    1. 6.1 Using Drag & Drop
    2. 6.2 Text Element
    3. 6.3 Image and Gallery Elements
    4. 6.4 Slider Element
    5. 6.5 Map Element
    6. 6.6 Menu Element
    7. 6.7 Widget Element
    8. 6.8 YouTube and Like Box Elements
    9. 6.9 Contact Element
    10. 6.10 Code Element
    11. 6.11 Tab and Accordion Elements
    12. 6.12 Button Element
    13. 6.13 Login Element
    14. 6.14 Posts Element
  7. 7. Upfront Presets
    1. 7.1 Default Presets
    2. 7.2 Creating, Selecting, Editing and Deleting Presets
    3. 7.3 Appearance Settings and Preset CSS
  8. 8. Upfront Pages and Posts
    1. 8.1 Create A New Post
    2. 8.2 Create a New Page
  9. 9. Using the Upfront Builder
    1. 9.1 Requirements
    2. 9.2 Options
    3. 9.3 Modify Existing Theme
    4. 9.4 Create New Upfront Theme
    5. 9.5 Make Your Masterpiece
    6. 9.6 Save Your New Theme
  10. 10. Upfront MarketPress and WooCommerce Integration
    1. 10.1 Getting Started with MarketPress and WooCommerce and Upfront
    2. 10.2 Creating Upfront Store Pages with MarketPress or WooCommerce
    3. 10.3 MarketPress and WooCommerce Store Pages in the Upfront Editor
    4. 10.4 Preview of WooCommerce Pages in Upfront Starter Themes
    5. 10.5 Preview of MarketPress Pages in Upfront Starter Themes

Presets are your Upfront secret weapon.

Upfront elements (except Map, YouTube, Likebox, Code and Login), make use of presets (found in Element Settings » Appearance). A preset is essentially a re-usable collection of an element’s appearance settings. They allow you to create a style and save it, making it available to all elements of that type. For example, a user could create a preset named Rounded, which will apply a border-radius and square shape to an image element, making it a circle. The user could then apply that preset to any other image element to get the same result.

7.1 Default Presets

Link to chapter 1

Typically, most Image & Text elements in your theme use the Default preset. It’s also the preset that is automatically applied to each new element that’s placed into a layout.

Users should be aware that modifying the Default preset will apply the modification to all instances of that preset. For example, giving a Text Element’s Default Preset a green background and 5px border will most likely apply the same style to 90% of Text Elements in the theme. For this reason, we highly recommend creating your own presets.

7.2 Creating, Selecting, Editing and Deleting Presets

Link to chapter 2

A preset can be created in three simple steps:

  1. Go to an element’s settings
  2. Expand the Appearance accordion
  3. Click Choose or Create Preset select, enter a name for your preset, and click Add.

That’s all you need to create a preset. Now, you can go and modify any of its appearance settings. When you save the element, all those modifications will be saved to that preset.

Similarly, in order to select a created preset, click Preset Select Control and select your created preset from the list.

Any preset can be edited at any time by modifying its appearance settings and saving the element.

element presets screenshot

After some time, you may find that you have created too many presets and are only using a some of them. In this case, you may want to delete some presets. To do this, click the Delete button next to Preset Select.

7.3 Appearance Settings and Preset CSS

Link to chapter 3

Upfront provides a wide array of element styling options that allows you to style your content without having to manually adjust the CSS. The styling options work in real-time, so when you change a setting the results are immediately reflected on your site. You can either Save or Cancel your changes. Below, you can see an example of two button elements using different settings.

element appearance settings

As we continue to work on improving Upfront, more styling options will become available for things like shadows, gradients, animations etc. In the meantime, you can add custom CSS to element presets to further subvert the styling on your site. Here’s how it’s done:

  1. Open an element’s settings
  2. In the Appearance Section, scroll all the way to the bottom and click Edit Preset CSS button
  3. Add your Element CSS here (keeping in mind that whatever CSS you type will be preceded with .presetName to prevent CSS from leaking outside the element).

The CSS Panel is pretty easy to work with. The top bar displays four clickable options:

  1. Insert Font – allows you to insert Font name & style to your css
  2. Link Theme Image – used to link css sprites
  3. Link Image – used to link any of user uploaded images
  4. Color Picker – will insert HEX value into CSS for the color picked

Below those is the actual CSS Input window. This is where you should write the code. The right sidebar contains shortcuts for available selectors. We strongly recommend using those for your custom styling. Hovering over a particular selector will highlight it on the element so you can see what part you are styling. The number of selectors can vary, some elements have as few as one while others can have dozens.

Below you can see how you can improve the button by giving it some custom CSS animations.

Here’s the CSS for the above: