Compatibility:

WebSite X5 Evo and Pro

WebSite X5 includes more than 100 preset templates you can choose for your project. On top of that, you can also find more on our Marketplace. 


All the templates have been carefully developed and can be used as they are. Still, you may need to customize them, possibly by changing some images, so the layout better suits your activity, your field of the kind of products you want to sell. 


The good news is that you can edit any template element, including the images.


The steps you need to follow vary according to the place the image is to be found. These are the most typical cases:


Before moving on, we have 2 tips for you:

  1. Use the preview- Don't forget you can check out the local Preview of the project at any time: this will help you understand how the template is organized and which are the parts that need customization.
  2. Manage the files wisely - By right-clicking on a filed you can use to import a file, you can open a context menu from which you can remove an imported file, open it in the folder it is stored in or save a copy. In this way, you can find the original files and possibly make a copy before substituting them. 

How to substitute an image used as page background of the website

The page background is the area outside the page, which is displayed when the website is opened on a browser having a higher resolution than the one set for the website itself.



In this example, the page background is the blue area.


If you want to substitute the page background image used on a template, you need to:

  • Go to Step 2 - Template Settings > Template structure and set the Page Background as Page Section.
  • Click on the icon of the Image File option and import the image you want to use.


#tip - Do you want to work on the page background for a specific page without editing the whole template? See How to set a page background that differs from the general template settings


How to substitute an image used as page content background 

The page content background is the area where the page contents are placed. It is another template element you can customize.


In this example, the page content section is the blue area.


In this case, the steps you need to follow are similar to those we already explained the previous paragraph:

  • Go to Step 2 - Template Settings > Template structure and set Page Contents as Page Section.
  • Click on the of the Image File option and import the image you want to use.


#tip - If you want to work on the page content background for a specific page without editing the whole template see: How to set a page content background that differs from the general template settings


Header and Footer are two sections which are practically always available on a website, because they report some important details such as the logo or the main menu.


If you want to edit the image or the color used as Header/Footer background, you need to:

  • Go to Step 2 - Template Settings > Template structure and set the Header or Footer  as Page Section.
  • Click on the of the Image File option and import the image you want to use or use the Color option instead.
  • Don't forget you can use the Extend to the width of the browser window option to make the Header or the Footer as wide as the browser window.


#tip - You can also define the contents for your Header and/or Footer. See: How to change Header and Footer


How to substitute an image used in the Row Formats

WebSite X5 templates are real mini-sites, so apart from customizing the images used for the template, you may also need to access those which have been used for the single pages. 


You may for instance want to change an image used as the background of a page horizontal band. In most cases, to create this effect we work on the row formats, which also allows setting up a nice parallax effect. In such cases, please proceed as follows:

  • Open on Step 4 - Page Creation the page you want to work at.
  • Select the wished row that corresponds to the band and select Row Formats.
  • If a background image has been used, you will notice the option Image is selected in the Background section.
  • Click on the icon of the Image File option and import the image you want to use. 
  • Use the available options to define the position and opacity. 
  • You can also define a different content for your Background, such as a color,   gradient, a gallery, a video or a map.
  • Finally, for any background you set except the colored one, you can possibly set up the parallax effect: click on Parallax and use the available options to get the wished result.


#tip - Learn how to make the most out of the row formats here: How to work on the layout grid rows For more information about the parallax effect, see: How to set the parallax effect


How to substitute an image used as Object style

Apart from the horizontal bands, there can be boxes on a template with their own background, title and content. In some cases, the style of such boxes is defined in the Object style section, which you can customize like this:

  • Open on Step 4 - Page Creation the page you want to work at.
  • Select on the layout grid the wished cell and click on Style.
  • If a background image is available, you will find the Image background or the Fit to Cell background option set on Style > Background.
  • Click on the of the Image File option and import the image you want to use or use the Color option instead.
  • You can possibly edit all the other elements as well, such as colors, alignment, margins and texts.
  • You can save the style you created so to apply it more easily to other cells : go to Library and click on Add.


#tip - For more information about the Object style, see: How to create a background box for an Object


How to substitute an image used in the Image, Gallery or similar Objects

Finally, images can also be added as part of the page contents: you may need to substitute them with your own as well.


This kind of images can be used in the Image Object, Gallery Object, Button Object etc. Regardless the Object, the procedure is always the same:

  • Open on Step 4 - Page Creation the page you want to work at.
  • Select on the layout grid the Object you want to modify and click on Content or double-click on the Object itself.
  • Use the options available in the settings window to substitute the image and define the relative settings.