**This procedure will guide you in creating and using the Story Panel component, designed to add unique graphic structure with a background (color or image) and a foreground for standard components.** Editing a "Story Panel" Component in the Back Office involves two steps: ## Step 1 : Access and edit the Story Panel ![edition story panel GIF](/sites/g/files/dvc2391/files/styles/media/public/image/2025/01/Design%20sans%20titre%20%289%29%20%281%29.gif?itok=b7A2bJtE) Once the **title**, **hero banner**, and **content push** of the page have been updated, you can start working on the content by adding a **Story Panel**. ### Add a Story Panel: - Click on the arrow next to **"Add Quote to Component."** - From the dropdown menu, select **"Add Story Panel."** - Assign an **admin title** to the container, visible only in the back office. This makes it easier to organize and manage future edits. ### Customize Your Panel Story: - **Add a title** and customize it (adjust the title color and alignment). Then, **anchor the title text** to add a unique identifier to it, allowing direct linking or smooth navigation to that specific section. - Choose a **background color** from the dropdown menu or upload a media file from the media library or your local files. ## Step 2 : Content of the Story panel ![story panel content options GIF](/sites/g/files/dvc2391/files/styles/media/public/image/2025/01/Screen%20recording%202025-01-16%2016.57.02.gif?itok=mb4jt624) ### Add Content to the Story Panel: - Click on the arrow next to **"Add Quote to Content."** - From the dropdown menu, choose the type of element you want to add. ### Content Options for the Story Panel: - [**Text**](/text "Text "): Add customizable text with font styles, sizes, and media like CTAs, images, or videos. - [**Carosel**](/carousel "Carousel"): Create a dynamic slider to display multiple items, such as images or content cards. - [**Accordion**](/accordion "Accordion")**:** Organize content with collapsible sections. - [**Grid**](/grid "Grid")**:** Use a grid layout for creative content structuring. Explore grid features here. - [**Content with Aside**](/content-aside "Content with Aside component")**:** Create two-column layouts for side-by-side content. Learn more about setting up Content with Aside here. - **Embed:** External content like videos, maps, or media using an [**Iframe**](/iframe "Iframe") or [**Integration code**](/integration-code "Integration Code"). - [**Tab**](/tab "Tab")**:** Add interactive sections for easy navigation. **Save Your Changes and Change the status to "Published".** ## Example: [ Anchor Example - Put a title here ](#panel_17386) ### Accordion 1 Discover how to edit an [Accordion](/accordion "Accordion") in the back office to enhance your page content with organized, collapsible sections. ### Accordion 2 Explore how to create and utilize an [Accordion](/accordion "Accordion") component. ### Accordion 3 Add text here... ### You can add cards to your story panel to visually display key information. [ ![Orange flower](/sites/g/files/dvc2391/files/styles/media/public/image/2025/01/Screenshot%202025-01-17%2010.10.13.png.webp?itok=xQ263aLX) ](/card)[Image card ](/card) ### [Image card ](/card) How to edit in the back office ? [ ![Flower ](/sites/g/files/dvc2391/files/styles/media/public/image/2025/01/Screenshot%202025-01-17%2010.10.23.png.webp?itok=FSxuPWdg) ](/card)[Image Card](/card) ### [Image Card](/card) Explore the tutorial by clicking here. [ ![pink flower](/sites/g/files/dvc2391/files/styles/media/public/image/2025/01/Screenshot%202025-01-17%2010.10.30.png.webp?itok=EEvlQHxz) ](/card)[Image card](/card) ### [Image card](/card) Discover more here. Tab 1 ### Enhance your story panel by adding Tabs. Found here how to edit a [Tab](/tab "Tab") in the back office ! Tab 2 [Discover this News (Example 1)](/listing/news-example-1-veolia-leads-way-treated-wastewater-reuse-qatar "Discover this News (Example 1)") "Veolia Leads the Way in Treated Wastewater Reuse in Qatar" [Click on News (Example 1)](/listing/news-example-1-veolia-leads-way-treated-wastewater-reuse-qatar) ## Explore Other Components to Enrich Your Website Pages [Discover all the components here](/drupal-essentials/components) [ ![content with aside icon ](/sites/g/files/dvc2391/files/styles/media/public/image/2025/01/Design%20sans%20titre%20%2810%29.jpg.webp?itok=HfKGf3A1) ](/content-aside)[Content with Aside ](/content-aside) ### [Content with Aside ](/content-aside) [ ![grid icon](/sites/g/files/dvc2391/files/styles/media/public/image/2025/01/Design%20sans%20titre%20%288%29.jpg.webp?itok=1FG3Iuew) ](/grid)[Grid](/grid) ### [Grid](/grid) [ ![content carosel icon](/sites/g/files/dvc2391/files/styles/media/public/image/2025/01/Design%20sans%20titre%20%2811%29.jpg.webp?itok=h0W8b7g1) ](/carousel)[Carosel](/carousel) ### [Carosel](/carousel) ![](/sites/g/files/dvc2391/files/styles/crop_freeform/public/image/2024/08/HP%20BG%20-%20grey%20very%20pale.png.webp?itok=OY0Zt4pI) ## Ask for support We use ServiceNow to track all of your requests and questions [Create a ticket now](https://veglobal.service-now.com/s3c?id=service_catalog&root=fcec05201b1649504d79dce2b24bcb50) ![](/sites/g/files/dvc2391/files/styles/crop_freeform/public/image/2024/04/image%2014%20%283%29.png.webp?itok=j1xAfftb)