How to set up the Template of a responsive website

2020-07-16 19:39

Modified on: Fri, 6 Sep, 2019 at 10:59 AM


WebSite X5 Evo and Pro

If you think about how a website is displayed on different devices, you'll realize that the graphic template needs to adapt itself too, so that the contents are always displayed in the best way on each device. As the screen resolution gets gradually lower, there may not be enough room to display some parts of the template and so you may prefer to remove those which are less important.

In WebSite X5 you can work on the Template to indicate how this is to change in the various Viewports, between the active breakpoints.
  • Go to Step 2 and access the Template Structure window: as you are creating a responsive website, you will find a Responsive Bar on the left.
  • The Responsive Bar displays all the intervals which result from the breakpoints set up in the Resolutions and Responsive Design window: select the Desktop viewport and use the available options to specify how the template must appear in this viewport.
  • Once the Template for the Desktop Viewport is complete, select the next interval on the Responsive Bar and make the necessary changes to the template.
  • Follow this procedure for all the intervals in the Responsive Bar, making the appropriate changes to the Template for each one.

#tip - Default templates. All the default templates in WebSite X5 are optimized for creating responsive websites: this means that a certain set of breakpoints is set up by default for each template and becomes active when you select the Responsive Site option in the Resolutions and Responsive Design window. You can change these default breakpoints as necessary.

When the template layout has been defined, you can customize the Header and Footer: these sections may also vary according to the resolution the Website is displayed at.
  • On Step 2, go to the Template Content section. Because you are working on a responsive website, the Responsive Bar also appears in this window.
  • Select the Desktop viewport interval on the Responsive Bar and create the template's Header/Footer.
  • Select all the intervals in turn on the Responsive Bar and make the necessary changes for each one.
  • In each Viewport, it is possible to:
    • Add new Objects. The new Object will be visible in the current and following Viewports, but not in the previous ones (where it will be automatically hidden).
    • Hide Objects. Select an Object, then click on the 5DtsQGje5vzd8cAtbJaP_Pz3ZdmrKJCLtw.png?1550489538 Show/Hide Object button and indicate whether it is to be hidden only in the current viewport or in all subsequent Viewports.
    • Show previously hidden Objects. Click on the LUAhPa7yMeY2J_VKIrwXO6E4kTyNAkY-yw.png?1550489547Show/Hide Object button to open the menu and then click on Hidden Object Management. A new window opens where you can select the Object to work on and select the Visible option.
    • Change the position and/or size of the Objects. All the other object properties remain unchanged in all the Viewports.

#tip - Automatic re-positioning. It may be that some Objects are not completely visible in some Viewports: in this case they are automatically re-positioned, which means they are moved but not re-sized. You may find that some Objects now overlap each other. Use the Preview to check how the Objects behave in the Header and Footer in the various breakpoints.

Total Reply 0

Total 104
Number Title Author Date Votes Views
Join a Microsoft Teams meeting
author | 2020.09.22 | Votes 0 | Views 1800
author 2020.09.22 0 1800
How to delete songs and albums from your Google Play Music library
author | 2020.09.19 | Votes 0 | Views 1959
author 2020.09.19 0 1959
Watch Prime Video on Chromecast
author | 2020.09.14 | Votes 0 | Views 1724
author 2020.09.14 0 1724
How to Fix the Win­dows 10 We Could­n’t Con­nect to the Update Ser­vice Issue (2)
author | 2020.09.09 | Votes 0 | Views 2445
author 2020.09.09 0 2445
IONOS Joomla! Standard Installation
author | 2020.09.02 | Votes 0 | Views 994
author 2020.09.02 0 994
How to improve the life of a Battery: (1)
author | 2020.08.25 | Votes 0 | Views 1012
author 2020.08.25 0 1012
Laptop battery not charging
author | 2020.08.21 | Votes 0 | Views 1306
author 2020.08.21 0 1306
Plugged in, not charging (1)
author | 2020.08.21 | Votes 0 | Views 1133
author 2020.08.21 0 1133
How to add reCaptcha plugin to a custom form on my WordPress website?
author | 2020.08.13 | Votes 0 | Views 1266
author 2020.08.13 0 1266
I can't log in to the WordPress admin dashboard after installing and activating Limit Attempts plugin
author | 2020.08.13 | Votes 0 | Views 932
author 2020.08.13 0 932