Color control lets you choose the main colors that will be displayed on your website.
In PlatformPro, you had to individually configure 24 different color selectors, keeping your Secondary & Tertiary elements slightly darker than your Primary elements. In PageLines 2.0, we've made this easier.
Using color math, PageLines 2.0 automatically calculates the proper levels for Secondary & Tertiary elements. The calculation is based on the Primary element color that you set. This reduces the number of color options from 24 to 8, making it easier than ever to set up good looking elements that work well together. As always, you can still edit these selectors manually by using CSS. Checkout How to use CSS Inspection Tools for more information on how to know which color CSS selector to use.
Color Control can be found inside the WordPress Administration Panel by clicking on PageLines > Settings and selecting Color Control from the menu.
These are the main features of Color Control:
You can choose which design mode you would like to display on your site.
Use these settings to change the colors of your layout backgrounds. You can enter 6 digit hexadecimal code or click the icon to the left of the hex numbers to use the color selector.
It is important to note that the Body Background color will only appear if the Content Width Page is selected in the Site Design Mode. The Page Background color will appear when Full-width Sections are selected in the Site Design Mode.
Use these options to customize the colors of the main text on your site.
You can upload your own background image to your site here and control how and where it is displayed.
Lets see how changing the Basic Layout Colors is going to affect your site. The default setup is a transparent Page Background and transparent content Background. Because of this only the Body Background color is being displayed.
Based on the colors you choose, Color Control will automatically change the secondary and tertiary colors and pick the best complimentary colors for you. You can change these colors with custom code if you like.
The best way to describe what the Page Text Colors do is to show you where they make changes.
Lets add some elements to a page that will be affected by the color changes.
If you would like to set the background to something other than a single color; you can upload your own image here.
Lets go over adding your background image and positioning it on the page:
If you would like your background to fill the entire size of a browser window, you can super size your background: