I Try To Change The Color for a Section but It Doesn’t Work?

In most website builders, how we usually change the background color of a section is we will first click to select the section that we wish to change the color, then we go to the element properties and select the color that we desire.

The problem is, sometimes there are too many elements on the page, exist very close to one another. This resulting in the user struggles to select the “right” elements. Imagine the text, column, block, image, etc appear next to other elements on the section of a page.

To illustrate, observe the following screenshot which shows a section that contains multiple elements. Assuming if you intend to change the color of the background but selecting the wrong section, then it may not give you the result that you desires. If you are familiar with website builder (whether WordPress-based or standalone), chances are you can relate this problem.

Well, thanks for GroovePages by indicating the active elements that are currently selected with breadcrumb elements and the element guide.

Elements Breadcrumb

At the bottom of the page in designing mode, GroovePages shows you the current elements, blocks, or sections that you are selecting (sort of hierarchy), making it easier without having you to clicking on the element multiple times (to select and de-select) just to ensure you are highlighting the correct elements to work at.

Elements Guide

The element guide is an arrow pointing upward. When clicked, it will move up the next higher level. For instance, if you are currently selecting a text within a container, when the text element guide is clicked, it will move up and highlight the container. (you know that an element is selected when there are white color filled handles surrounding it)

To illustrate an example, assuming you want to change the background of both containers (green and black) to yellow. Without the elements guide and breadcrumb, you would be struggling to accomplish this.

While you can change the color of each container individually, you will notice there is a white color gap in between. You will then need to adjust the margin of the containers. That involved too many steps and will lead to possible margin consistency issues.

The easiest and fastest way is to use the elements guide to ensure the section is selected (surrounded by white color filled handles) and this is confirmed by the elements breadcrumb which shows the layout is currently selected. You can then proceed to click on the Background and change the color accordingly.

It produces the end result as desired.

The elements breadcrumb provide you a birds-eye view of the element structure and allow you to jump to any elements/blocks/sections with a click. The elements guide allows you to select your desired elements/sections easily. Most people including the web designer will highly appreciate this feature as it comes in very handy.

Was this helpful?

1 / 0