Widget Content
----

If you want to add content to your website you have two options to do this:
<p>via the <span style="color:darkorange">Frontend</span> and via the <span style="color:cornflowerblue">Backend</span>.</p>
<p>We recommend to use the Frontend, so you won't have to insert the route manually.</p>


###<span style="color:darkorange">Frontend</span>

If you are on the frontend you'll find a **plus-button** on the upper right corner of the particular container which leads you directly to the backend.

___

By following these steps you can create **new content** :

- choose a **template**
- choose a **widget style** if needed 
- insert the **content** depending on the widget
- define on which site the content should appear by setting the **route** (e.g. <code>"app/site/index"</code>)
- choose one of the following container: <code>top</code>;<code>main</code>;<code>bottom</code>
- choose a **rank** to set the position of the widget (e.g. <code>"000"</code> for the header. We recommend to use at least 3 digits in case you want to put something in between later)
- click **create**

___

###<span style="color:cornflowerblue">Backend</span>

If you are on the submenu "widget content" a list of all added widgets is provided.

Here you have to click the <span style="color:mediumseagreen">**new**</span> button up left (see image below) and follow the previously said steps.


<code>/en/filefly/widget_template</code>


![filemanager](./images/widget_template.png)






------


Basic Widgets
----

###Content
- Provides a <code>headline</code>, a <code>subline</code> and as many <code>rich text paragraphs</code> as you want.
- If you want to insert a <code>link</code>, just mark a word or textpart and click on the link icon. By doing this a pop-up will appear where you can insert the URL.
- Each Paragraph is able to have a <code>button</code>. You can label the button right under the rich text area and also set the link.

*Usage example: Plain Text, Introduction Text*

![dashboard](./images/content.png)

___

###Content & Image
- Provides a <code>rich text area</code> and an <code>image</code>
- You're able to choose if the <code>text position</code> should be on the right or left
- By unselect <code>"Container on/off"</code> text and image will fill the whole width.
- Choose an <code>image</code> within the dropdown menu "image URL". In Case you haven't upload the image yet, go to [Media Files](http://doro.app-transporter.com.staging-1.oneba.se/de/help/default/index?file=firststeps/mediafiles.md).
- If you want you can add SEO key words for the image. By doing this you optimizate the process of affecting the visibility of your website in a web search engine's relusts.

*Usage example: create content with example image (content described by images are more attractive for visitors), Product Presentation*

![dashboard](./images/contentandimage.png)

___

###Content blocks (1-6)
- You can choose between one and 6 blocks
- each of it comes with an <code>image</code>, a <code>subline</code>, a <code>headline</code>, a <code>rich text paragraph</code> and a <code>button</code>

*Usage example: teaser for content on the second level*

![dashboard](./images/6block_img.png)

___

###Content Icon blocks (1-6)
- you can choose between one and 6 blocks
- each of it comes with a variety of predefined <code>icons</code> and let you choose one of it
- also you're able to insert a <code>headline</code>, a <code>rich text paragraph</code> and a <code>button</code>

*Usage example: Teaser for content on the second level, Presentation of Functions*

![dashboard](./images/6block_icon.png)

___

###Footer
- Gives you the option to insert a <code>logo</code> and as many <code>links</code> you want to add

*Usage example: impress, contact, partner, further links, social media links*

![dashboard](./images/footer.png)
___

###Header Image
- provides a <code>background image</code> with a <code>headline</code> and <code>subline</code>

*Usage example: Header, Teaser, Seperator, Visual Key, Introduction*

![dashboard](./images/header_image.png)

___

###Header Video
- provides a <code>background video</code> with a <code>headline</code> and <code>subline</code>
- To insert a video copy the ID of a youtube video (e.g. *https://www.youtube.com/watch?v=*<code>tNm_VYktQCo</code> so you have to copy: **tNm_VYktQCo** )

*Usage example: Header, Teaser, Visual Key, Video Presentation*

![dashboard](./images/header_video.png)

___

###Separator
- Let's you insert an <code>image</code>
- If you want you can add SEO key words for the image. By doing this you optimizate the process of affecting the visibility of your website in a web search engine's relusts.

*Usage example: Seperate content, Styling of your website*

![dashboard](./images/separator.png)

___

###Slider
- You can insert as many <code>images</code> as you want and add a discription

*Usage example: Gallery, Image Carousel*

![dashboard](./images/slider.png)
