Panel Dimensions and Colours Settings
To locate these controls - open your panel for editing and start at the Settings pane. Underneath the basic panel settings you will find these more advanced settings. These are tucked away to keep the system clean and friendly for most people who don't need this level of content access.
Panel Settings for height and colour
Panel Height
By default the height of a panel will depend on what it contains. Within the settings panel you can select from the "Panel Height" drop-down to select from a pick-list of commonly used heights. If needed you can also enter a custom value of your choice using percentages or viewport width (vw) or viewport height (vh) units.
Panel Colours
You can set overarching colours to be the default values for any panel. These can be prescribed as RGB or Hex Code values. You can override these values by specifying colours in individual Content areas.
Scroll Down Arrow
In situations where you have a panel that's 100% of the window height - then turning on the "Scroll Down Arrow" adds an arrow to indicate to website visitors to scroll-down to reveal more content.
The default appearance for the Scroll Down Arrow appearing on a web site panel is pictured below.
Style
The style field has some default options that are very useful. Place your cursor in here to see a list of options including Lighten Top, Lighten Right, Darken Bottom and so on. Explore how these work and keep these in mind to create nice graduated tinted effects to enhance photos or create better legibility for type that is sitting on top of a background image or video. Custom styles might also be implemented in this location that are specific to your particular web site styles.
Lighten Top
To lighten the top of your panel - select the 'lighten-top' style as shown:
If we look at the same panel showing the Scroll Arrow in place above, but this time with Lighten Top applied you can see the effect:
Darken Top
To darken the top of your panel - select the 'darken-top' style as shown:
- and this will be create the effect shown pictured below on our sample panel.
The other lighten and darken options allow you to control these tints in the same way for left and right hand side - so keep these up your sleeve!
Custom Styles
In our example above you may notice the 'parallaxes' style - and that's what we are using to trigger a cool animated effect for our graphics above.