Cover page tutorials- advanced

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.

Cover page design features can also be used to adjust and transform existing practical functionality, such as the list and publications tiles, shown in the screenshot on the right. There are several things to consider here;

1. Publications tile configuration;

   1. On the settings for the row;

      1. I have implemented a blue background colour (#103980).

   2. On the setting for the column which holds the publications tile;

      1. I have changed the text colour to white (#ffffff)- This consists of the tile title (Latest Publications), and the author information text below the orange tag (eg- 'Wanat M. et al, (2021), BMJ Open)

      2. I have also changed the link colour to white (#ffffff)- This consists of the content titles.

2. List tile configuration;

   1. On the settings for the row;

      1. I have implemented a blue background colour (#103980).

      2. In the content size tab, I have configured the row to be;

         1. Full width, so that the blue background colour stretches across the page.

         2. Fixed content width, so that the content in the list tile remains central.

         3. Added a margin both top and bottom (20) to give the row space above and below.

         4. Added padding on the bottom (30) to balance the blue background colour above and below and the content.

   2. In the settings for the column;

      1. I have changed the text colour to white (#ffffff)- this consists of the tile tile (List Tile) and the content descriptions (for example - a news story that can be used in demonstration and other content updates).

      2. I have changed the link colour to white (#ffffff)- This consists of the content tiles (for example- News Item 5).

As you will see from the screenshot on the right, you can configure buttons on top of background images when using featured tiles. This can be a great way to promote content or site sections in an engaging and aesthetically pleasing way. You will also notice that the two example rows have differing space in between the featured tiles.

To achieve something similar to the upper row I have;

1. Configured the layout of the row with three featured tiles, separated by two empty columns.

2. In the settings for the row;

   1. In the content size tab, I have configured the row to be;

      1. Fixed width, so that the featured tiles are constrained to the central space on the page.

      2. Equal column height- which will centre the content, despite there being an empty column space on right edge of the layout configuration (only 11 our of 12 column spaces used).

3. In the settings for the columns;

   1. I have pasted in the background images I wish to use.

   2. I have configured the images to my specifications;

      1. Background Size- Cover.

      2. Image position- Centre centre.

   3. I have added padding to the top of each image (in these instances- 150). This is to;

      1. Determine the height of the image I am using.

      2. Have the buttons (which can be added in the compose edit interface) populate at the bottom of the images;

         1. If I added the padding at the bottom, the button would populate at the top of the image.

         2. If I added equal padding at the top and bottom, the button would populate in the centre of the image.

As you will notice in the layout configuration of the lower row, I have not implemented blank columns in between the featured tiles to give space between content. This is because I have manually (using external software) added in borders on the edges of the background images, creating the illusion of space in between these tiles.

To achieve something similar to the lower row I have;

1. Configured the layout of the row with three columns, each hosting a featured tile.

2. In the settings for the row;

   1. I have used a grey background colour (#e8e8e8)

   2. In the content size tab, I have configured the row to be;

   3. Full width, stretching the grey background colour across the page.

   4. Full content width, stretching the featured tiles across the page.

3. In the settings for the columns;

   1. I have pasted in the background images I wish to use.

   2. I have configured the images to my specifications;

      1. Background Size- Cover.

      2. Image position- Centre centre.

   3. I have added padding to the top of each image (in these instances- 250). This is to;

      1. Determine the height of the image I am using.

      2. Have the buttons (which can be added in the compose edit interface) populate at the bottom of the images;

         1. If I added the padding at the bottom, the button would populate at the top of the image.

         2. If I added equal padding at the top and bottom, the button would populate in the centre of the image.

Creating borders on images;

There are several ways this can be achieved, using different software. I will describe my preferred method.

1. Download the images you wish to add borders to.

2. Adjust the sizes of the images so that they are all the same (eg 500X1000). This is to ensure that when you add borders to the images (eg a 20 pixel border), and upload it for use as a background image, those borders will configure as consistent in size, relative to the size of the image.

3. Add a border to your image, using your preffered border adding software (mine can be found here).

   1. Make sure that;

      1. The sizes of the borders are the same for each image in which you are adding them.

      2. The colour of the border is consistent with the background colour of the row you are adding them to (in this instance- #e8e8e8).