Page design and formatting
This page is to collect examples of visually appealing page layouts with examples, ready to use blanks and links to related documentation and other useful resources. Once it expands to a certain size it will be broken down into sub pages.
Please don't use visual editor on this page, it will probably break things.
Resources
[edit]
This section provides links to different resources that may be useful in understanding how to format and present pages.
Formatting resources
[edit]
Image resources
[edit]Open license images
[edit]- Wikimedia Commons
- Unsplash (all images uploaded after 5 June 2017 use a non-standard license which is incompatible with Wikimedia projects)
- Pixabay royalty free images (CC0)
Icons
[edit]
How to prepate images from the Noun Project for Commons
|
Proforma
[edit]Please use this format when adding a new section to this page including this heading.
Examples
[edit]Examples of the the formatting being used (screenshots are OK if it is not possible to make it work here).
Blanks
[edit]Blank versions that make it easy for people to reuse, if it is not possible to provide these here because of templates etc, please create them somewhere else and link to them.
Description
[edit]A description including tips, any issues or limitations, links to resources used etc.
Usage
[edit]Examples where this formatting has been used.
Icons with text
[edit]Examples
[edit]
Wikimedia websites are some of the most used educational resources in the world, they receive 14 billion page views per month from 500 million people. This includes access through zero rated services including Facebook Free Basics and Wikipedia Zero. Additionally, information from Wikipedia and Wikidata appear in Google Knowledge Graph and on Facebook.
Help more people to see your information
Data from Wikidata is used by many high traffic websites including Wikipedia which is one of the most used websites in the world </> receiving over 15 billion page views per month.
Blanks
[edit]
Text goes here
Title text
Body text
Description
[edit]This formatting is helpful for breaking up text heavy documentation into smaller pages, section heading can be used within the blocks. Icons come from The Noun Project.
Usage
[edit]
Title banners
[edit]Examples
[edit]UN Media
Overview of Wikimedia
Wikimedia projects
Blanks
[edit]Title
Description
[edit]An attractive way to do section headings, they still generate sections in the table of contents.
The <h> numbers define the heading type, e.g <h2> is equivalent to == == and <h4> is equivalent to ==== ====.
Usage
[edit]
Drop down menus
[edit]Examples
[edit]
Education for Sustainable Development
|
WikivoyageBlanks
[edit] Title text|
Text here |
Description
[edit]Drop down menus are helpful for providing quick reference to information and hiding long lists. Can be edited in Visual Editor (the edit window shows the list expanded).
Usage
[edit]- Wikiproject United Nations, used to transclude a section of another page for quick reference
- Wikiproject United Nations to hide huge lists that may be useful to some people but not others
Tables with no borders
[edit]Examples
[edit] |
Promote the project | Encourage other people to take part on social media including Facebook, Twitter and Instagram using the links above. |  2 minutes
|
 |
Suggest a person | Suggest a person who should have a Wikipedia article. | 3 minutes
|
 |
Suggest a list | Suggest an existing list of women who should have Wikipedia articles. | 3 minutes
|
Blanks
[edit] |
Section heading | Description text | Time
|
|
Section heading | Description text | Time
|
|
Section heading | Description text | Time
|
Description
[edit]Tables without borders are a good way of displaying information in a structured way without it really looking like a table.
Issues:
- The table shrinks to fit the width of the text inside it, this may be an issue in some situations using several tables which will look inconsistent.
Usage
[edit]
Galleries with icons in description
[edit]Examples
[edit]- Topics
-
Archives
-
Art -
Biography -
Biology -
Encyclopedia -
Entertainment -
Food
Blanks
[edit]- Title text
-
Text 1
-
Text 2
-
Text 3
Description
[edit]Useful for creating page with many options without using tables, icons from The Noun Project are useful.
Title and subtitle with graphic
[edit]Example
[edit]
|
Switched On Working with experts to build a worldwide database of sexuality education |
Blanks
[edit]
|
Title Subtitle |
Description
[edit]A good way of creating a title for a page, the subtitle size is a percentage of the title size so changing the title size will change the subtitle size automatically
Usage
[edit]Image blocks
[edit]Examples
[edit]
This simple guide will take you through the process of using the millions of high resolution photos on Wikimedia Commons which are free of charge to use, including for commercial use. This guide also applies to the other media (e.g audio and video) found on the website.
Wikimedia Commons has 1,964 freely licensed and public domain educational images, audio and video available to everyone, in their own language. Wikimedia Commons acts as the central media archive for the various Wikimedia projects including Wikipedia, it contains content from both organisations and individuals and is created and maintained by volunteers.
Wikimedia is a global movement whose mission is to bring free educational content to the world. Wikimedia strives to bring about a world in which every single human being can freely share in the sum of all knowledge.
Blanks
Example text
Example Text
Example text
Description
The background colour of the text block is based on a colour common in the image. Currently the images must be cropped to a specific format (2,100 × 550 pixels) to be included in the template.
Issues:
- The formatting messes up the Table of Contents and includes very long subsection headings, __NOTOC__ can be used on the page to remove the table of contents.
- The formatting for some reason make sections headings underneath break and restricts anything underneath to 1000 pixels wide.
- The formatting is very broken on mobile phones