Page Comparison

To create something similar to the screenshot on the right, there are a few things to consider. We have already discussed inputting a full width banner image as the backdrop (further information on this can be found here), so this tutorial will inform the user;

1. How to implement the ‘floating’ text box within the banner image, and giving it an opaque tone.

2. How to create and place the green featured tile so that it leaks halfway onto the banner image.

1. Creating the ‘floating box’ featured tile;

   1. As you will see from viewing the ‘view’ and ‘layout’ screenshots, I have;

      1. Created a three column row.

      2. Used a background image on the row, configuring it to be full width, and adding padding/margins as required.

      3. Dragged a featured tile into the second column on the row.

   2. To configure the featured tile;

      1. Horizontally- I have adjusted the size and positioning of the columns to place the featured tile to the location and size specifications I desire.

      2. Vertically- I have added margins to the tile (in this instance- Top- 30, Bottom- 50) , to place it against the background image, with room above and below.

      3. I have made some colour changes to the featured tile;

         1. Added in the reddish background colour (#b40b0b)

         2. Changed the text colour to white (#ffffff)

         3. Adjusted the opacity of the tile so that it blends in to the background image on the row (50%)

2. Creating the featured tile which leaks halfway onto the row above;

   1. As you will see from viewing the ‘view’ and ‘layout’ screenshots, I have;

      1. Created a one column row.

      2. Added a featured tile onto the column.

      3. Added in a background colour on the column (#276442).

      4. Changed the text colour to white (#ffffff).

   2. To configure the featured tile;

      1. In the settings for the row, I have configured it to be fixed width, so that the green featured tile is nested within the constraints of the full width banner image.

      2. I have added a negative margin on the column settings (in this instance- Top- -75), which has pushed the tile up and beyond the bottom edge of the row above.

      3. Please take great care, and check in mobile view when adding in negative margins, as they can have a detrimental effect on aesthetics when implemented incorrectly or on too great quantity.