WebSite X5 Evo and Pro

If you want to highlight a certain kind of content, possibly by reporting it into a box having a different color from the Page background, you can work on the Object graphic style.

How to set up the Object style

If you want to set up the Object style, you need to follow these steps:

  • On Step 4- Page Creation, select the Object you want to work on and click on the  Style button to open the Object Style window.
  • In the Style section, choose the background you want to apply to the Cell containing the Obejct. You can choose among:
    • a colored backroung;
    • a gradient background;
    • an image background;
    • a background image which is automatically cut and fitted to the size of the Cell.
  • Use the availabe settings to customize the background and get the wished result.

How to use an image background

If you want to use an image background for the Cell, you can get different results according to the image  and the settings you use:

  • Example 1

The imported image has the same size the Cell containing the Object has.

You should use the following settings:

  • Background: Image background
  • Repeat: Do not repeat
  • Alignment: Top - Left
  • Example 2

The imported image has a pattern, so that if you flank one or more identical images vertically or horizontally, you won't be able to tell where the connecting point is.

You should use the following settings:

  • Background: Image background
  • Repeat: Title image
  • Alignment: Top - Left
  • Example 3

The imported image is a frame which will need to adapt to Cells having different sizes.

You should use the following settings:

  • Background: Fit to Cell background
  • Block width/Block height: set the appropriate width and block.

Notes on how the "Fit to Cell background" option works

Please have a look at the following images which will help you better understand how the "Fit to Cell background" option works, what blocks are and how to set their size properly:

Image 1Image 2Image 3

In the original image (Image 1), a very elaborate frame is well suited for being cut into blocks and for adapting to any size the Cell might have: the ornamental elements in the corners are in fact placed in a well-defined position and all the shades can be harmoniously pattern-like repeated.

In Image 2, it is necessary to set the size for the Block width  and the Block height. The measures are the same for the block width and height and are defined as a percentage of the original image width and height, and they can vary between 5% and 45%. In this case, you should set the size for both sides of the block at 35%, so the decoration in the corner can always be correctly included in the defined space.

As you can see in Image 3, the blocks A, B, C and D have been defined, to it is possible to see the a, b, c, d and e sections: starting from these sections of the original image, the program can obtain the image portions which build up the final Cell background. So, the images corresponding to the A, B, C and D blocks are kept as such and placed in the corners, while the a, b, c, d and e sections are repeated so to fit in the available space.

As you can imagine, this procedure allows a high degree of flexibility: starting from a single properly arranged image, it is possible to set the style for Objects whose Cells have substantially different sizes.