After you've begun defining your landing page's structure using the various Containers, you can also start adding Elements to each available slot, filling the structure with content. Each Container you use comes with its own fully customizable group of Container settings. One of the most surprising options contained in the settings is the Background Color option available for each separate slot. Typically this setting is left as transparent, but the option is there if you want to use it.
Let's see what it does:
1. Click on the Settings symbol, appearing on the right side of the Container when you place your mouse over it, to open the Container settings.
Make sure that your Container has no Elements added to it, so that it's clearly discernible how changing the Background Color of each slot affects the look of your landing page design.
2. Scroll down and click on the Slot 1 option to expand its menu.
The number of Slot options (e.g. Slot 1, Slot 2 etc.) that will always correspond to the type of Container you have selected.
3. Click on the Background Color field.
A color palette appears. It consists of the following parts:
- The color gradient map
Use it to pick the gradient of the color you want to use.
- The color bar with all the colors available
Use it to pick the color that you want to use.
- The transparency bar
Set to the far let makes the colored area fully transparent, whereas on the far right setting any transparency is removed.
- The hex code for the current color choice
Enter the Hex code or the values for each color constituent separately (R is for Red, G is for Green, B is for Blue and A is for Transparency).
- The preset color options
Available are some preset color options for you to choose a color quickly.
4. Change the Background Color using the palette options.
Now that you're familiar with how the background color of each slot can be changed, make sure you take advantage of it to tweak your design and make it look amazing!