What is the Relationship of Elements, Container, and Block?

From the bigger perspective, let us look at the structure (in a layman’s term)

Website >> Web Page(s) >> Block(s) >> Container(s) >> Element(s)

1. A website consists of one or more web page(s) e.g. a yoga website may consist of 3 web pages (Home, About Us, Contact Us)

2. Each of the web pages consists of one or multiple blocks in it. For example, a Yoga Home Page has 3 blocks (i.e. Our Services, Why Choose Us, Our Gallery)

3. Each block holds one or multiple containers.

4. Each Container will usually have an element.

For Point (3) and (4) above, let illustrate with the example screenshot below.

If you look at the elements breadcrumb, you’ll see that the highlighted question mark icon contained in a container, and that container resides in yet another container. (by the way, the 2nd container holds the question mark icon as well as the “Feature 5” text in the above example)

And all these containers and element are subset of the block.

Understanding the structure above will help you to see a bigger picture to not only understand the relationship of the block, container, and element, it will also help you when it comes to design the website more effectively with GroovePages.

Was this helpful?

0 / 0