--- title: Adding elements to your publication description: Follow this guide to quickly learn the basics of building a catalogue. --- [Skip to content](https://help.aviou.io/migration/adding-elements-to-your-publication#main-content) English Show submenu for translations ![Publisher logo](https://help.aviou.io/hs-fs/hubfs/Publisher.png?width=200&height=40&name=Publisher.png) Open main navigation Close main navigation - English Show submenu for translations Hello. How can we help you? - There are no suggestions because the search field is empty. 1. [Help Center](https://help.aviou.io/migration) 2. [Working in liveeditor](https://help.aviou.io/migration/working-in-liveeditor) # Adding elements to your publication ## Follow this guide to quickly learn the basics of building a catalogue. ### 🧱 Adding Elements to Your AVIOU Publication Follow these steps to build a visually rich, shoppable catalogue using different AVIOU element types. --- #### 1. ➕ Add a New Element - Go to **Editor Mode** - Drag-and-drop your desired **element type** into the section where you want it displayed ![](https://help.aviou.io/hs-fs/hubfs/Sk%C3%A6rmbillede%202022-07-11%20kl-%2009-17-47-png.png?width=688&height=462&name=Sk%C3%A6rmbillede%202022-07-11%20kl-%2009-17-47-png.png) --- #### 2. 🧩 Element Types Explained | Element | Purpose | | --- | --- | | **Single** | Displays **one product** with full info from the feed | | **Combo** | Displays a **lifestyle image** with **clickable hotspots** for products | | **Slider** | Displays **multiple products** in a **swipeable carousel** | | **Content** | Used for **images or text only**, no product data | | **Video** | Add short **videos or GIFs** for a dynamic feel |   1. ![](https://help.aviou.io/hs-fs/hubfs/Sk%C3%A6rmbillede%202022-07-11%20kl-%2009-21-38-png.png?width=459&height=590&name=Sk%C3%A6rmbillede%202022-07-11%20kl-%2009-21-38-png.png) 2. ![](https://help.aviou.io/hs-fs/hubfs/Sk%C3%A6rmbillede%202022-07-11%20kl-%2009-20-50-png.png?width=508&height=598&name=Sk%C3%A6rmbillede%202022-07-11%20kl-%2009-20-50-png.png) 3. ![](https://help.aviou.io/hs-fs/hubfs/Sk%C3%A6rmbillede%202022-07-11%20kl-%2009-22-21-png.png?width=525&height=589&name=Sk%C3%A6rmbillede%202022-07-11%20kl-%2009-22-21-png.png) 4. ![](https://help.aviou.io/hs-fs/hubfs/Sk%C3%A6rmbillede%202022-07-11%20kl-%2009-23-50-png.png?width=528&height=598&name=Sk%C3%A6rmbillede%202022-07-11%20kl-%2009-23-50-png.png) 5. ![](https://help.aviou.io/hs-fs/hubfs/Sk%C3%A6rmbillede%202022-07-11%20kl-%2009-24-38-png.png?width=1023&height=449&name=Sk%C3%A6rmbillede%202022-07-11%20kl-%2009-24-38-png.png) > 🧠 Products are pulled from your **feed source**, unless you add or edit them manually. --- #### 3. 🎨 Customize the Layout - **Resize an element** by dragging the arrow in the bottom-right corner - AVIOU layout uses a **1200px wide grid** (e.g. 12 x 5 = full width, 500px tall) - **Choose a template** from the right-side panel - Assign a product from your feed to the template ![](https://help.aviou.io/hs-fs/hubfs/Sk%C3%A6rmbillede%202022-07-11%20kl-%2009-25-59-png.png?width=688&height=192&name=Sk%C3%A6rmbillede%202022-07-11%20kl-%2009-25-59-png.png) ![](https://help.aviou.io/hs-fs/hubfs/image-png-Jul-11-2022-07-26-26-46-AM.png?width=264&height=462&name=image-png-Jul-11-2022-07-26-26-46-AM.png) --- #### 4. ➕ Add Sub-Items (for Slider or Combo) - Click on the **element** (Slider/Combo) - Select **“Add sub item”** - Then click each sub item and assign a **product** > 🔄 This allows you to display multiple products inside one visual component > > ![](https://help.aviou.io/hs-fs/hubfs/image-png-Jul-11-2022-07-26-58-57-AM.png?width=253&height=217&name=image-png-Jul-11-2022-07-26-58-57-AM.png) --- #### 5. 🔀 Reorder Elements - Simply **drag an element** to move it within a section or into another section --- #### 6. 📱 Device-Specific Layouts - Use the **Device Switcher** at the top of the editor (Desktop / Tablet / Phone) - Adjust layout and sizing **per device** - Start with **Desktop**, then fine-tune Tablet and Phone > 📝 Changes made under “Tablet” or “Phone” views **do not affect** Desktop layout ![](https://help.aviou.io/hs-fs/hubfs/image-png-Jul-11-2022-07-27-25-34-AM.png?width=485&height=73&name=image-png-Jul-11-2022-07-27-25-34-AM.png) - [Getting started](https://help.aviou.io/migration/getting-started) - [Working in liveeditor](https://help.aviou.io/migration/working-in-liveeditor) - [Working with feeds and data](https://help.aviou.io/migration/working-with-feeds-and-data) - [Publishing](https://help.aviou.io/migration/publishing) - [Tracking](https://help.aviou.io/migration/tracking) - [PDF publications](https://help.aviou.io/migration/pdf-publications) [![Publisher logo](https://help.aviou.io/hs-fs/hubfs/Publisher.png?width=200&height=40&name=Publisher.png "Publisher logo")](https://help.aviou.io/) Help Center Copyright © 2026, AVIOU ApS