- 03 Oct 2023
- 4 Minutes to read
Page builder: How does height work
- Updated on 03 Oct 2023
- 4 Minutes to read
Example and layout explained
In this article, we're going to use the same example all the time, so let's start by explaining how the example is constructed.
The example looks like this:
This is a container (marked in red) containing four boxes (marked in yellow). The boxes have a black border and the container has some air to make it more clear in the example.
If I click on the first box in the container, you see in the navigation path in the lower left that "Box" is within a "Container".
An important clarification about the concept of height
In the page builder when we talk about "height" it really means minimum height. That is, if a box is set up to have e.g. 100 in height, it will actually mean that it should have at least 100 in height. When placing contents in the box, the box may automatically exceed the stated height. You'll get an example of this when I explain about "Customize side-by-side boxes and container"
By default, all boxes will follow the height of the container. If I select the container and drag the height adjustment point, the height of all the boxes will automatically follow. The reason this happens is that the container is set up to fill the height vertically.
I can see this setting by pressing the container and in the menu on the right selecting "Content placement". In the "Content vertical" field, it is set up as "Fill".
If I change it to "Top" the boxes will use their own height. This applies to the "Top", "Middle" or "Bottom" settings. These options tell where in the container the boxes should be placed vertically.
Now I can manually adjust the height of all the boxes to make it look like this.
In cases where you want to be very precise, you can adjust the height using numbers.
If I select box number two and select "Height" in the menu on the right, I will be able to see the height in pixels. There I can then enter the height I want.
Height Auxiliary Functions
In the menu on the right under "Height" there are three buttons to help you adjust the height. To demonstrate these I've added an image to box number four.
If I press "Customize" the height of box four will be set to the available height in the container it is located in. It would then look like this:
Adapt to content
This button will adjust the height of the box to the contents inside the box. In this case, there is only one image inside, so then the height of the box will be the same height as the image.
The result will then look like this:
Boxes with multiple levels of content and different heights
Now I've modified the example of filling the boxes with an article and made various changes to make it look very messy. When creating pages, symmetry is important. We're now going to make this look nice again.
Issue 1: The text has different heights
Each story has a different amount of text, which causes the box around the text to require a different height. The solution to this is to adjust the height of each text box to the same height. We do this by choosing the text that has the greatest height. Here's what we can see here:
Box 2 contains the most text. If we then click on the text in box 2 and look at what the height is, then we can set the manual height to the same value on the other text boxes. Then you tap on the other boxes and enter the same value in the height field.
The result looks like this:
Issue 2: The boxes have different heights
The next problem is that the boxes now have different heights. This problem can also be solved in the same way as the previous problem. The only difference is that you have to adjust the height of the boxes and not the text.
We choose to solve it in a different way using "Adapt to content". We see that box 1 has the height we want to achieve, so we don't need to do anything about it. First, click on the article in box 2 and open "Height" in the menu on the right. Since the article within box 2 is the same height as box 2, it is the article that is chosen. In the menu, tap "customize" for "Customize to content". I repeat the same process for boxes 2, 3 and 4.