Mockup for the Customizer layout that has the 3 options grouped under each area
It illustrates the mutually exclusive aspect of the options
If Main area Expand is checked, none of the sub area options should be used, a warning and visual clue is made
If a sub area option is checked while the Main area Expand is, it will uncheck the main area Expand option.
If Sub areas options have been checked and the user checks the Main area Expand, it will uncheck the Sub area options and show the warning
Finally only one of the three modes (Expand/Extend BG/Extend Col) can be checked at once for any given area. Checking a second one will uncheck the previous one
Header Area:
Expand content: Extend BG Attributes: Extend BG Color:
Expanding the Header area above also Expands all sub Areas!
Uncheck the "Expand content" checkbox to set them individually.
Header Widget Area:
Expand content: Extend BG Attributes: Extend BG Color:
Header Image:
Expand content: Extend BG Attributes: Extend BG Color:
Branding:
Expand content: Extend BG Attributes: Extend BG Color:
Header HTML:
Expand content: Extend BG Attributes: Extend BG Color:
---------------------------