105 lines
3.1 KiB
Plaintext
105 lines
3.1 KiB
Plaintext
|
~~USETHEME:landing~~
|
||
|
|
~~NOTOC~~
|
||
|
|
<container>
|
||
|
|
===== The landing pages must be kept clean. =====
|
||
|
|
* Use short sentences
|
||
|
|
* Clear and easy language.
|
||
|
|
* Meta Tags give good and correct signals to Search Engines
|
||
|
|
* Use a **title** that reflects the page content, ideally the H1 of the page or the actual window title. Will show in Google, Facebook, Twitter as headline.
|
||
|
|
* **Description** is a rephrase of existing page content. Will appear on Google, Facebook, Twitter as summary.
|
||
|
|
* Link the **share-image** for open graph and twitter cards. When shared it looks more engaging that way.
|
||
|
|
* **Keywords** have to be words used in the page, which have relevance to the topic. Keywords are not interpreted by major search engines, but meta-search-engines.
|
||
|
|
* Use boostrap containers to visually separate context and create easy bites of information.
|
||
|
|
* Interrupt the white desert with a ribbon where applicaple
|
||
|
|
* Best use ribbon for a very relevant section of the page
|
||
|
|
* keep the word-count low and the significance high.
|
||
|
|
* Keep the footer clean. Only a few helpful links is enough. Imprint is the bare minumum.
|
||
|
|
* Use H1 for the first headline - it will be prefixed to the page title.
|
||
|
|
* Use H2 for later sections and when nesting, increment accordingly
|
||
|
|
* Do not used headlines "just for the look".
|
||
|
|
* Introduce classes in the template CSS where adjustments / special cases are needed
|
||
|
|
* Do not put styling elements into the wikitext
|
||
|
|
* Do not create "more margin" with extra newlines. Create a class in the template.
|
||
|
|
* Update translations immediately.
|
||
|
|
|
||
|
|
</container>
|
||
|
|
|
||
|
|
<container>
|
||
|
|
===== Container =====
|
||
|
|
Every vertical visual section goes into a <container> Tag.\\
|
||
|
|
Containers cannot be nested.\\
|
||
|
|
This is a regular container.\\
|
||
|
|
Containers can be fluid (full width) or not.
|
||
|
|
|
||
|
|
Inside containers you can stuff whatever you want.
|
||
|
|
Give a class to a special container so you can style the content individually - or use a predefined class.
|
||
|
|
</container>
|
||
|
|
|
||
|
|
<container>
|
||
|
|
<code>
|
||
|
|
<container>
|
||
|
|
Your stuff here
|
||
|
|
</container>
|
||
|
|
</code>
|
||
|
|
</container>
|
||
|
|
|
||
|
|
|
||
|
|
<container class="lpd-ribbon">
|
||
|
|
===== Ribbon =====
|
||
|
|
This is a regular ribbon container
|
||
|
|
</container>
|
||
|
|
|
||
|
|
<container>
|
||
|
|
<code>
|
||
|
|
<container class="lpd-ribbon">
|
||
|
|
Your stuff here
|
||
|
|
</container>
|
||
|
|
</code>
|
||
|
|
</container>
|
||
|
|
|
||
|
|
<container fluid="1" class="lpd-ribbon">
|
||
|
|
===== Fluid Ribbon =====
|
||
|
|
This is a fluid ribbon container
|
||
|
|
</container>
|
||
|
|
|
||
|
|
<container>
|
||
|
|
<code>
|
||
|
|
<container fluid="1" class="lpd-ribbon">
|
||
|
|
Your stuff here
|
||
|
|
</container>
|
||
|
|
</code>
|
||
|
|
</container>
|
||
|
|
|
||
|
|
<container fluid="1" class="text-center">
|
||
|
|
===== Center content =====
|
||
|
|
You can use the text-center class from Bootstrap to center the content of a container.
|
||
|
|
</container>
|
||
|
|
|
||
|
|
<container>
|
||
|
|
<code>
|
||
|
|
<container fluid="1" class="text-center">
|
||
|
|
Your stuff here
|
||
|
|
</container>
|
||
|
|
</code>
|
||
|
|
</container>
|
||
|
|
|
||
|
|
<container class="ribbon">
|
||
|
|
===== Custom Styling =====
|
||
|
|
When you create custom stylesheets make sure your classname is unique.\\
|
||
|
|
**Styles are located in the theme "landing".**
|
||
|
|
</container>
|
||
|
|
|
||
|
|
<container>
|
||
|
|
<code>
|
||
|
|
<container class="very-unique-class">
|
||
|
|
==== Your stuff here ====
|
||
|
|
|
||
|
|
Foo bar
|
||
|
|
</container>
|
||
|
|
|
||
|
|
.very-unique-class p {
|
||
|
|
font-size: 200px;
|
||
|
|
color: #deadee;
|
||
|
|
}
|
||
|
|
</code>
|
||
|
|
</container>
|