3. Upfront Editor Tour
The Upfront editor is the control panel that allows you to tweak, add, remove, and enhance all the pieces of your Upfront theme.
3.1 Activating the Upfront EditorLink to chapter 1
To activate the Upfront editor, click the Upfront link in your WordPress admin bar, which is the black bar that runs across the top of your WP sites.
After activating, you’ll see the Upfront loading screen while the editor is loading. If this is the first time you’ve run the editor, it can take a little bit of time before you’re ready for editing. This load time will be smaller the next time you load the Upfront editor.
If this is the first time you’ve activated the editor for a particular starter theme, an alert will ask if you want to import the starter theme’s included images, or if you wish to ignore them. If you’ll be adding your own images, you can safely ignore the themes images and not import them to your media library.
3.2 Basic Editor ToolsLink to chapter 2
The basic editor tools help you open and close the Upfront editor, access other areas of your site including wp-admin and your profile editor.
Clicking the Upfront icon/text will exit the Upfront editor. If you have unsaved changes, an alert box will make sure you really want to leave the editor before your live site loads.
Clicking the ellipsis button (…) will bring up options to visit your wp-admin area, close upfront, or take you to open a support ticket.
Clicking “edit profile” will close the Upfront editor and take you to your profile edit screen in your wp-admin area.
3.3 Media ManagementLink to chapter 3
Managing media in Upfront is even simpler than managing it with the standard WP media library. First, media management can easily be done from the front end of your site, and we made the process as simple as possible.
You can access your media library by clicking the “Media” link in the Upfront editor. This will bring up the media library interface, which looks like this:
From here, you can upload new media, search your existing library, edit image details, and run a filtered search.
To upload new media items, click the Upload Media link in the upper right corner of the media library pop-over.
Search, navigation, and the OK button can be found under the media library display.
3.4 Manage Posts and PagesLink to chapter 4
From the Upfront editor, you can select any existing post or page, as well as add new posts or pages.
As you can see in the screenshot above, there are a few links to help you manage your posts and pages. The two large buttons are pretty self-explanatory. Clicking either one will trigger a new Upfront page or post to appear in the working panel of the Upfront editor.
The other option, under these two buttons, will bring up a modal with lists of all the current posts and pages on your site. You can use this tool to travel to the post/page in question to edit it, or to delete posts and pages you don’t need or want anymore.
3.5 Drag and Drop Elements ToolboxLink to chapter 5
The heart and soul of an Upfront theme is the elements. These are the pieces that allow you to customize your Upfront theme to do exactly what you need. We’ll go into using and editing elements in much more detail in a later chapter, but this should give you a general idea of the options available to you. Most of the elements are named for what they do, but you can find a brief overview of each one below.
Text Element: This element lets you create text elements anywhere on your site pages.
Image Element: This element will allow you to add and adjust a single image.
Gallery Element: Much like the name implies, this element is for creating galleries of multiple images.
Slider Element: If you love a flashy, dynamic slider, this is the element you need to create one in Upfront.
Map Element: As you probably guessed, this is a map element. Not just any map element, however, because our element comes with support for creating gorgeous custom map styles.
Menu Element: Sometimes you need an extra menu, sometimes you just want one. We’ve got you covered with the map element.
Widget Element: The widget element one of our coolest elements, it lets you place a widget anywhere you’d like on your site. Headers? Sure! Mid-content? Sure!
YouTube Element: This is Upfront’s video element, which makes adding video to your site very simple.
Like Box Element: Display the fans of your Facebook page and let new users give you a Facebook like without leaving your page.
Contact Element: Create a quick and easy contact form you can drop anywhere.
Code Element: The code element is for entering code you want to run on your site, not for displaying code snippets. This element is handy for scripts, as well as embedding videos and content from non-YouTube sources.
Tabs Element: The tab element lets you feature more content in less site real estate, with unique content in each tab.
Accordion Element: Similar in purpose to tabs, an Accordion hides and shows content with clicks, so you can give your readers more content in less space.
Button Element: Create fantastic buttons with ease.
Login Element: Save your users a trip to wp-login with a well-styled login element.
Posts Element: This element is for displaying post lists, such as recent posts, featured posts, favorite posts, etc.
3.6 Global Theme SettingsLink to chapter 6
We go over the individual Global Theme Settings in great detail in the next chapter, but they can be found in the Upfront editor panel, by clicking on Theme Settings.
With these settings, you can access and edit global backgrounds, global regions, global CSS, global typography, and global colors. These changes will be applied to your entire site, not just the page or post you may be editing with Upfront.
3.7 How to Enable and Disable Responsive ModeLink to chapter 7
Upfront’s editor includes support for creating beautiful themes that display exactly how you want on any device. Responsive mode will be covered in greater detail in later chapters, for now we’ll introduce you to the settings.
Responsive mode is activated with the button at the bottom of the Upfront editor panel.
When activated, responsive mode will give you options to toggle between mobile, tablet, and default view at the top of the design panel.
3.8 Toggling the Grid ViewLink to chapter 8
Upfront’s grid view is very handy when arranging elements and checking alignment.
Enable the grid by clicking the small button next to the Responsive Mode button.
Here’s what your design panel looks like when the grid is enabled.
3.9 Saving and Exiting the Upfront EdtiorLink to chapter 9
Saving in Upfront has two parts.
- Saving the element/region/layout you’re working on, and
- Saving the entire project.
We’ll discuss how to save individual parts as we explain how to use them in later chapters, and note that Upfront is great about making sure you save before you exit the editor, using alerts if you try to exit with unsaved work.
To save your project, click the big green Save button at the bottom of the Upfront editor.
After your project is saved, you can safely exit the Upfront Editor. As we mentioned in the Basic Editor Tools chapter above, you can exit Upfront by clicking either the Upfront icon/logo, or the ellipsis button (…). Refreshing your browser or using browser navigation tools will trigger an alert asking if you want to stay and save before closing the Upfront editor.