Thank you for using the English version of the JTL-Guide!
We are currently still building up the English documentation; not all sections have been translated yet. Please note that there may still be German screenshots or links to German pages even on pages that have already been translated. This guide mostly addresses English speaking users in Germany.
We are currently still building up the English documentation; not all sections have been translated yet. Please note that there may still be German screenshots or links to German pages even on pages that have already been translated. This guide mostly addresses English speaking users in Germany.
Note: On 1 September 2024, JTL introduced new editions that bundle most of the previous individual services into different packages. In order for you to continue working as smoothly as possible, existing customers were automatically switched to the package configuration that best matched their existing contract. The individual packages differ in terms of limitations and/or range of functions. Therefore, some of the features described in the JTL-Guide may not be available to you as part of your booked JTL edition. You can change your package configuration in your JTL customer account. Find out more about the new editions and packages here. Check our FAQ for frequently asked questions about the product editions.
Centring content with the OnPage Composer
Your task/initial situation
You want to centre content such as images or texts on an online shop page using the OnPage Composer. You would like the margins of this content to automatically adjust to the screen size of different devices.
General information on margins in portlets
The margins of portlets are fixed, i.e. they do not automatically adjust to the screen size of the device on which the online shop is opened. For example, if you enter very high values as margins, this can lead to a lot of white space being displayed on mobile devices. Read the instructions on this page to create centred and responsive content.
Detail: You can edit the margins of portlets by selecting the portlet in the OnePage Composer, clicking the pen icon, and going to the Layout tab. For more information on this topic, click here: Detailed description: Layout tab.
Responsively centring content with the OnPage Composer
There are two ways to responsively centre content with the OnPage Composer.
Centring content with the container portlet
Details: Containers are used to group portlets. For example, if you want to group an image with the respective heading, create a container and add the image and the heading to the container. You can then conveniently move the image and its heading as one grouped element. Read more on the topic: Inserting containers with the OnPage Composer.
- Log in to the back end of JTL-Shop and switch to the front end of JTL-Shop.
- Open the page you want to edit and click the OnPage Composer icon at the top left of the page to open the OnPage Composer for that page.
- In the Portlets tab, in the Layout area, click on the Container tile and add the container to your online shop via drag and drop.
- Click on the pen icon to open the Edit Container dialogue box.
- Activate the Boxed container check box.
Detail: If you activate the Boxed container setting, the entire container is centred and restricted to a fixed width. Empty space is automatically created to the left and right of the container. The exact size of the container is determined on the basis of the available space on the device. The container automatically adjusts to different screen sizes.
- Click Save.
- In the Portlets tab, in the Content area, use drag and drop to add content to the container, such as a heading and an image.
You have successfully created a responsive container with content. You can move this container as required.
Centring content with the grid layout
Detail: With the grid layout portlet, you can add columns to your online shop, which you then fill with content. These columns behave responsively, i.e. the display of the columns automatically adjusts to different screen sizes. Read more on the topic: Inserting grid layouts with the OnPage Composer.
- Log in to the back end of JTL-Shop and switch to the front end of JTL-Shop.
- Open the page you want to edit and click the OnPage Composer icon at the top left of the page to open the OnPage Composer for that page.
- In the Portlets tab, in the Layout area, click on the Grid layout tile and add the grid layout to your online shop via drag and drop.
- Click on the pen icon to open the Edit Grid Layout dialogue box.
- To centre content, in the General tab, in the Segmentation area, set a segmentation of 3 columns, e.g. 3+6+3.
- Click Save.
- Add the desired content, such as an image, to the middle column of the grid layout portlet.
You have successfully created content using the grid layout portlet. Since you have not added any content to the left and right columns, the content is centred in the middle column. In addition, the column layout automatically adjusts to different screen sizes.