# Assigning ZOO elements to Apps {% embed url="" %} There are two core Apps (Blog and Pages) that has been added as an example. Let's add an instance called News with Blog App:

Click on Blog App and on the next step you should assign the App a template:

Just remember the template name you have selected since it will be required on next steps. It is default in our example. In case if the name has been forgotten or you are going to add new elements to existing site you always can change the template in App configuration (click on Config link). ### Adding elements It is time to add elements. Click on gear icon to manage elements of the App. It is also can be called as App Config, but has another features.

Edit App configuration — Click on Gear button to go to App configuration

On next step you will must select the App to configure:

The App has various types of content related to specific features. By default there are two types in Blog: Article and Author. To the right there is a list of Template Layouts. We need to manage layouts of the template which was selected in App config (see above). In our case it was default template. Now we can see a list of content types and template layouts. First of all, let's add new elements to the content type. Click on Edit elements link below the Article.

Edit elements for article type — Edit elements for Article

On the right side you can see Element Library. Click on the elements which you want to add to the App type. You also can configure elements here (see Social Share settings on the screenshot below). Let's add Social Share and Open Graph, give these elements a name, play with its settings and save the article type. Let's construct a new view: which elements should be displayed in the selected layout.

Each template has the following layots: * **Edit** - edit layout in the item edit view. * **Feed** - feed layout for all kinds of feeds like RSS or Atom. * **Full** - item view. * **Submission** - submission layout in submission view. * **Teaser** - teaser layout in the frontpage, category, alphaindex and tag. In our example we need Full and Teaser. Click on Teaser.

Adding the element to a position and override its options

We see positions on left and elements on right. We can add required elements from right and assign them to the positions. Using drag'n'drop move Social Share element to the preferable position. Moreover, you can override its settings. You can add as many elements as it is needed.

Front-end: Social Share buttons in teaser view

You can add any required element to be rendered on the teaser page. Let's add the same elements to Full page too and change some params to make elements looks different. Click on Full layout. Now add Social Share element with drag'n'drop and play with its settings to make it different from teaser layout.

Customized Social Share buttons in full layout (Position: Fixed Left)

Using this approach you can add any elements to content types, then assign these elements to required positions and change its settings in each layout. As a result, you can customize layout views according to your needs. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.norrnext.com/joomla-tutorials/assigning-zoo-elements-to-apps.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.