The example above requires a Container for the image content and two additional containers for formatting the text details on its side:

To design this example, start by adding a container with four columns of width and put the image inside it.


Now, let's add the detailed information next to the image:

  1. Add a container with eight columns of width and type in the first three paragraphs of text;
  2. Add a second container for the two links below the one just added above...  It wraps to the bottom of the image!

Why does this happen? Well, HTML is structured as a document that flows from left to right and from top to bottom.

As such, adding the second container to a row that is full pushes it to the row below (right under the line of all containers in the above row), thus wrapping the image.

To make both containers aligned next to the image, a third container must be added to enclose the other two and force them to wrap within its borders, thus aligning them.

So, move the two containers into the enclosing container in one of two ways:

a) By dragging and dropping them directly on the canvas, or

b) By dragging and dropping them in the Widget Tree.

Finish up by adding  the text with the two links into the empty container and that's it!

For the final make up, simply format the two texts by applying styles you define in style sheets to the containers.

Video Recording

To see how the above steps were performed in Service Studio watch the video below.

See Also

About the Grid