7. Upfront Presets
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
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 PresetsLink 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 PresetsLink to chapter 2
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. 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.
7.3 Appearance Settings and Preset CSSLink 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.
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:
- 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.
Here’s the CSS for the above: