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

Upfront’s global theme settings allow you to make site-wide changes to your theme from a single interface. With these tools, you can adjust your site’s typography, theme colors, and add/edit global CSS styles.


4.1 Global Background

Link to chapter 1

The Upfront Global Background setting allows you to create a consistent background for all the pages of your website.


The three types of global background Upfront allows are solid color, image, and video. This panel, accessed by clicking “Global Theme BG” in the upfront editor panel, will allow you to choose the global background type and adjust it, as well as setting a global width for any contained-width regions you’ll be using in the theme.

4.2 Regions

Link to chapter 2

Global regions appear on each page in your site, and each Upfront starter theme includes a handful of global regions. You can edit and delete these regions by clicking the Edit Global Regions link in the Upfront editor.


Global regions are handy for creating consistent headers, menu areas, footers, and sidebars.

4.3 Global CSS

Link to chapter 3

Upfront gives you several options for adjusting a theme’s CSS. Individual elements and regions can be customized with CSS while editing, but you may find you need to apply global styles. The Global CSS option in Upfront will let you do this simply and quickly.

Click the “Global CSS” link to get started.


4.4 Fonts

Link to chapter 4

Upfront has integrated with Google Fonts to make creating beautiful typography as simple as possible. You can add as many Google fonts as you’d like to your themes. Keep in mind that fonts can be resource intensive, so only include the fonts and font variations you need. We recommend no more than seven fonts to ensure your site runs smoothly. Your mileage may vary, depending on the type of server environment you’re using, and how resource-intensive your site is outside of Upfront.


Find the font you want to add from the menu on the left, and click “Add” to include it in your current theme.

4.5 Theme Colors

Link to chapter 5

Upfront also gives you a handy tool to manage the colors used in your theme. Clicking over to the theme colors tab shows you a list of each theme color currently used.


As you can see in the screenshot above, the Upfront color codes can be used just like HEX values in your theme CSS.