- Getting Started
- WPMU DEV
- Installing Plugins & Themes Via Composer
- Using WPMU DEV
- Installing the WPMU DEV Dashboard Plugin
- Download WPMU DEV Plugins & Themes
- Download Plugin & Theme Previous Versions
- WPMU DEV Translations
- How to Open a Support Ticket
- Get Support from the Community
- Getting Live Support
- Grant WPMU DEV Support Access
- Support vs Custom Development
- How Free Trials Work
- Live Chat – House Rules
- The Good Support Ticket
- Plugins & Themes
- Setup, Usage & Integration
Elements & Presets
In Upfront, elements are the building blocks of your layouts. They range from simple things like Text & Image, and can get very feature-rich, much like Slider or Posts Elements.
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
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.
Typically, most Image & Text elements in your theme would 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 that reason, we highly recommend creating your own presets.
Creating, Selecting, Editing and Deleting Presets
A preset can be created in three simple steps:
- Go to an element’s settings
- Expand the Appearance accordion
- 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 and 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.
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.
Appearance Settings and Preset CSS
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.
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 its done:
- Open an element’s settings
- In the Appearance Section, scroll all the way to the bottom and click Edit Preset CSS button
- Add your Element CSS here (keeping in mind that whatever CSS you type will be preceded with
.presetNameto prevent CSS from leaking outside the element).
The CSS Panel is pretty easy to work with. The top bar displays four clickable options:
- Insert Font – allows you to insert Font name & style to your css
- Link Theme Image – used to link css sprites
- Link Image – used to link any of user uploaded images
- 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.