Tailwind Logo

Share layouts in each language using Shared Layout

XM Cloud

Published: 2024-03-12

In the previous article, we created an English layout for the partial design. This time, we will create a common layout for each language.

Difference between Shared Layout and Final Layout

First, Sitecore offers two types of layouts: Shared Layout and Final Layout. Since the Partial Design that was created in the previous articles was not specified, the Final Layout was used to create the layout.

This can be easily verified by selecting the appropriate Partial Design in the Experience Editor and choosing Presentation - Datail. For example, a Final Layout has been created for the Footer as shown below.

sharedlayout01.png

If you switch to the Shared Layout tab, this section is empty.

sharedlayout02.png

In order to understand each of them, we will create one Partial Design as a trial and check it.

Working with Final Layout

First, create a Partial Design called Layout. After the actual creation, the language switch in the upper left corner shows that English is selected and the Shared Layout switch is turned off.

sharedlayout03.png

As is, we will place the two images in the top area. The finished product will look like this

sharedlayout04.png

In this state, if you check Layout Detail, it is placed as follows.

sharedlayout05.png

Since I had created the English layout, what about the Japanese part? Of course, it is empty.

sharedlayout06.png

By switching to Japanese and working in the same way, the same layout can be used in Japanese.

Working with Shared Layout

Then turn on the Shared Layout check box and work on it.

sharedlayout07.png

This screen shows the layout created as well as the one above. You can see that Shared layout is checked in the language section on the left.

sharedlayout08.png

What happens if you switch languages at this stage? It will look like this

sharedlayout09.png

As you can see in the Experience Editor, the information about the layout is shared. However, as you can see from the empty space for images, the data source to be specified (in this case, images) needs to be configured again.

Combination of Shared Layout and Final Layout

It is also possible to combine Shared Layout and Final Layout. For example, as shown below, uncheck the Shared Layout checkbox and place the image in the Footer section in English only.

sharedlayout11.png

In this case, the Shared Layout is reflected in the Final Layout while additional images are added. In this case, the Shared Layout is reflected in the Final Layout, and additional images are added.

sharedlayout12.gif

Summary

We have found that by using Shared Layout, we can share layouts in different languages, while adding any additional components that are needed in each language. By making good use of this feature in a multilingual site, it is possible to reflect the entire site by only working in the shared areas, such as Partial Design.

Tags