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 3174
author 2020.09.22 0 3174
How to delete songs and albums from your Google Play Music library
author | 2020.09.19 | Votes 0 | Views 3349
author 2020.09.19 0 3349
Watch Prime Video on Chromecast
author | 2020.09.14 | Votes 0 | Views 3353
author 2020.09.14 0 3353
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 4158
author 2020.09.09 0 4158
IONOS Joomla! Standard Installation
author | 2020.09.02 | Votes 0 | Views 2100
author 2020.09.02 0 2100
How to improve the life of a Battery: (1)
author | 2020.08.25 | Votes 0 | Views 2135
author 2020.08.25 0 2135
Laptop battery not charging
author | 2020.08.21 | Votes 0 | Views 2440
author 2020.08.21 0 2440
Plugged in, not charging (1)
author | 2020.08.21 | Votes 0 | Views 2249
author 2020.08.21 0 2249
How to add reCaptcha plugin to a custom form on my WordPress website?
author | 2020.08.13 | Votes 0 | Views 2431
author 2020.08.13 0 2431
I can't log in to the WordPress admin dashboard after installing and activating Limit Attempts plugin
author | 2020.08.13 | Votes 0 | Views 2105
author 2020.08.13 0 2105