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;
How to implement the ‘floating’ text box within the banner image, and giving it an opaque tone.
How to create and place the green featured tile so that it leaks halfway onto the banner image.
Creating the ‘floating box’ featured tile;
As you will see from viewing the ‘view’ and ‘layout’ screenshots, I have;
Created a three column row.
Used a background image on the row, configuring it to be full width, and adding padding/margins as required.
Dragged a featured tile into the second column on the row.
To configure the featured tile;
Horizontally- I have adjusted the size and positioning of the columns to place the featured tile to the location and size specifications I desire.
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.
I have made some colour changes to the featured tile;
Added in the reddish background colour (#b40b0b)
Changed the text colour to white (#ffffff)
Adjusted the opacity of the tile so that it blends in to the background image on the row (50%)
Creating the featured tile which leaks halfway onto the row above;
As you will see from viewing the ‘view’ and ‘layout’ screenshots, I have;
Created a one column row.
Added a featured tile onto the column.
Added in a background colour on the column (#276442).
Changed the text colour to white (#ffffff).
To configure the featured tile;
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.
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.
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;
Publications tile configuration;
On the settings for the row;
I have implemented a blue background colour (#103980).
On the setting for the column which holds the publications tile;
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)
I have also changed the link colour to white (#ffffff)- This consists of the content titles.
List tile configuration;
On the settings for the row;
I have implemented a blue background colour (#103980).
In the content size tab, I have configured the row to be;
Full width, so that the blue background colour stretches across the page.
Fixed content width, so that the content in the list tile remains central.
Added a margin both top and bottom (20) to give the row space above and below.
Added padding on the bottom (30) to balance the blue background colour above and below and the content.
In the settings for the column;
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).
I have changed the link colour to white (#ffffff)- This consists of the content tiles (for example- News Item 5).
Add Comment