Color and Opacity
Each Siter.io element contains those two main properties.
Color is used to set the color of the element and/or for element properties.
For example color “red” has hex value “#ff0000” or its RGB value is rgb(255, 0, 0).
Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.
Important: Opacity property changes transparency for the entire element but color opacity changes opacity only for the applied color.
Color
The square that indicates fill color will open a color selection tool that gives the ability to change the color to any desired color from 16,777,216 different colors, or pressing on the color hex code title will allow enter a predefined color code or pressing the icon with four circles allows selecting color from color styles.
The selection tool allows selecting any color, choose between Solid or Gradient, predefined Swatches, or Site Colors (colors used recently on the entire site, all the colors from all the site pages included), or just press on the blue square with the picker icon (called Color Picker) that will allow selection for any color displayed on your device, just press through the selected color. On the image below is a sample of choosing a color from the uploaded image.
Opacity
Element: Once dragging or typing another value, transparency will change accordingly, it could be from 0 to 100.
Color: Once hovering on the drop icon should appear a left-right arrow that allows dragging to the desired opacity amount, just click and drag, and release after the ideal transparency was reached, alternatively pressing on the number will allow typing the exact opacity amount, from 0 to 100.
For the text element, the default color will be every time #000000 which means black.
For the rectangle element, the default color will be every time #EFEFEF that has the color name, White Smoke.
For the image element by default, there would be just a placeholder, choose the desired image from the device or use any free-to-use Unsplash image, press the fill switcher button and play around with the overlay color.
By default Fill property will be #FFFFFF (White Color) with an opacity of 50%.
Icon element default color is black – #000000
Button has two properties that have color options, background color which by default has Dodger Blue #2F80ED color, and White text color #FFFFFF.
Video has as well color property options, but for seeing them needs to be selected a preview image.
Once the preview image is selected Icon and Overlay color options would appear, for icon default color would be #FFFFFF, and the overlay color would be white with 0% of opacity but actually means hidden even if it’s applied.
Hint: If the preview image is a dark one, leave the icon color white. If the preview image is an image with predominantly white color, apply overlay color to black color #000000 with opacity from 20% to 96%.
For the slider element, there is a possibility to change the color of arrows and dots under the slider image.
By default, the arrow will have black color #000000 with 50% of opacity and dot icon #000000 color with solid 100% of transparency.
The form has a bunch of color options, color could be changed for fields, fields border, fields text color, button color, button border color (if applied) and button text color.
