Introduction

Your site is managed by a custom installation of WordPress.
The basic content types of WordPress are Pages and Posts. In your installation there are two more custom content types: Products and Publications.

Please follow these general rules when writing content through the admin interface:

Write content in Text mode (NOT in Visual mode disabled by default in your Profile).
Write content in normal type cases: upcase / downcase. When applicable by the chosen templates, some texts will be automaticaly uppercased.
If you wish to maintain the cases you type, just add <span class="text-normal"> to the text. Example:
```
More of the <span class="text-normal">CELLnTEC</span> story
```
Write relative URLs: /products/ rather than https://www.cellntec.com/products/. Always end the URL with a slash.

HTML tips

The site is coded in HTML 5, the appearance is ruled by CSS 3.
For easier maintenance it is strongly advisable to use semantic markup.
If you need styles not covered by the current CSS, it's better to modify the CSS rather than apply presentational markup or inline styles.

In order to avoid weird rendering and validation errors, please follow the following rules when you write HTML in the content field:

Never use element h1 (that is reserved to page header).
Use presentational classes (i.e. colors) ONLY if strictly necessary.
Avoid inline styles.
Never use element font.
Never use attribute align.
In mailto links, the attribute target="_blank" is not necessary.

Templates

Templates are structures of content.
They control how your pages will be displayed, mixing dynamically generated content and editable content in predefined order.
Set the appropriate value (if present) under Page / Page attributes / Template.

Legend: D = dynamically generated; E = editable through the admin interface

Home	Automatically applied to Home page.
Section	Apply to pages: Products, Services. Content (E) Footer menu (D)
Category	Apply to most pages descendants of Products (i.e. Skin or Skin / Keratinocyte 2d) and Services. Category menu (D) Content (E) Products Table (D only for Products) Info related block (D only for Products, if checked) Footer menu (D only for Products)
Full width	Apply to pages with full width text (i.e. Ordering Europe).
Product	Automatically applied to single Product page (= Pod). The content is editable under Products. Product menu (D) Content (E) Info related block (D) Footer menu (D)
Publications	Automatically applied to Publications list page (= Pod). The content is editable under Publications.
Publication	Automatically applied to Publication details page (= Pod). The content is editable under Publications.
News	Automatically applied to News pages (index and single news). The content is editable under Posts.
Sitemap	Automatically applied to Sitemap page.

Patterns

Patterns are snippets of content you can put in Pages. Here there are: usage description, markup and preview.

#focus

One per page. Recommended at the beginning of the page.

In More fields set a value for Background focus (the image to be used as background, placed on bottom right of the block).
The image must be a transparent PNG, 760 x 720px.
If the Background focus is empty, the fallback background will be the image you see in the example below.

In section Products the title of the focus will automatically get the color of the respective category (pink for Skin, green for Oral, etc.)

<div id="focus">
  <div class="text">
    <h2>Title of the focus <span>Optional subtitle</span></h2>
    <p>First paragraph.</p>
    <p>Another paragraph.</p>
    <p>Another paragraph. Please mind the overall length of the text. The block is fixed height.</p>
    <p><a href="#"><i class="arrow">»</i></a></p>
  </div>
</div>

Title of the focus Optional subtitle

First paragraph.

Another paragraph.

Another paragraph. Please mind the overall length of the text. The block is fixed height.

If you want a text link (instead of the icon only) use this markup:

<p class="link-primary"><a href="#">Text link with icon</a></p>

Text link with icon

.teasers

One or many pairs per page.

In section Products the title of the teasers will automatically get the color of the respective category (pink for Skin, green for Oral, etc.)

<div class="teasers">
  <div class="odd">
    <h2>Title of the odd teaser <span>Optional subtitle!</span></h2>
    <p>Text of the teaser. The length of this text must be approximately equal to the one of the paired teaser. Look right: are the lengths equal?</p>
    <p class="link-primary"><a href="#">Product features</a></p>
  </div>
  <div class="even">
    <h2>Title of the even teaser <span>Subtitle required if used in the odd teaser</span></h2>
    <p>Text of the teaser. The length of this text must be approximately equal to the one of the paired teaser. Look left: is it everything ok?</p>
    <p class="link-primary"><a href="#">Powerful simplicity</a></p>
  </div>
</div>

Title of the odd teaser Optional subtitle!

Text of the teaser. The length of this text must be approximately equal to the one of the paired teaser. Look right: are the lengths equal?

Product features

Title of the even teaser Subtitle required if used in the odd teaser

Text of the teaser. The length of this text must be approximately equal to the one of the paired teaser. Look left: is it everything ok?

Powerful simplicity

In case of adjacent pairs of teasers, divide them by adding the element <hr> (horizontal rule).

<div class="teasers"> … </div>
<hr>
<div class="teasers"> … </div>

.article

One or many per page.

The article is made of an image and a text.
By default the image is placed on the left; the title color is blue light and the background is white.

In section Products the title of the article will automatically get the color of the respective category (pink for Skin, green for Oral, etc.).

<div class="article">
  <div class="image">
    <img src="https://placehold.it/320x320" alt="">
    <p class="caption">Optional caption.</p>
  </div>
  <div class="text">
    <h2>Title of the article <span>Optional subtitle</span></h2>
    <p>First paragraph as long as you need.</p>
    <p>Another paragraph as long as you need.</p>
    <p class="link-primary"><a href="#">Optional link</a></p>
  </div>
</div>