**This procedure outlines the creation and use of the Container component, allowing you to structure your content.** Edit a "Container" Component in the Back Office involves three steps: ## Step 1 : Access and edit the Container ![grid component edition ](/sites/g/files/dvc2391/files/styles/media/public/image/2025/01/Design%20sans%20titre%20%287%29%20%282%29.gif?itok=F77GHtLu) Once the **title**, **hero banner**, and **content push** of the page have been updated, you can start working on the content by adding a **container**. ### Add a Container: - Click on the arrow next to **"Add Quote to Component."** - From the dropdown menu, select **"Add Container."** - Assign an **admin title** to the container, visible only in the back office. This makes it easier to organize and manage future edits. ### Customize the Container Background: - Choose a **background color** from the dropdown menu or upload a media file from the media library or your local files. - Select the **background format** that best suits your design: - **Top - Bottom - Centered - Cover** - **Cover Full Width** (most frequently used). ## Step 2 : Define the Container width ### Wide ![wide](/sites/g/files/dvc2391/files/styles/default/public/image/2024/12/narrow.png.webp?itok=pgEz21-I) ### Standard ![standard](/sites/g/files/dvc2391/files/styles/default/public/image/2024/12/srandard.png.webp?itok=gd7XedG2) ### Narrow ![narrow](/sites/g/files/dvc2391/files/styles/default/public/image/2024/12/NARROW.png.webp?itok=LzI66_5h) - Define the **container width** by selecting one of the following: - Wide - Standard - Narrow ## Step 3 : Add Content to the Container ![add content on a container GIF](/sites/g/files/dvc2391/files/styles/media/public/image/2024/12/Design%20sans%20titre%20%285%29%20%281%29.gif?itok=DWCGHRhH) ### Add Content to the Container: - 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 Container: - [**Text**](/text "Text "): Add customizable text with font styles, sizes, and media like CTAs, images, or videos. - [**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 ")**:** Create two-column layouts for side-by-side content. Learn more about setting up Content with Aside here. - [**Tab**](/tab "Tab")**:** Add interactive sections for easy navigation. - [**Webform**](/webform-pages/webforms "Webforms")**:** Collect user input through forms. - [**Card**](/card "Card")**:** Display key information visually with images, titles, and descriptions. **Save Your Changes and Change the status to "Published".** ## Examples: **Dynamic** Site Factory enables flexibility and agility in website management. Whether you need to launch a new campaign or adapt to evolving user needs, the platform ensures swift updates and seamless scalability. **Secure** Security is at the heart of Site Factory. The platform is built with industry-leading protocols to safeguard your data and protect against cyber threats, ensuring a trustworthy digital presence. **Group Supported** Site Factory is fully supported by the Group’s digital communication and IT teams. This guarantees consistent updates, expert support, and alignment with the Group’s strategic goals. **Multiple Profiles** With Site Factory, teams can collaborate effectively using customizable profiles tailored to different roles and responsibilities. From content creators to administrators, everyone has the tools they need to excel. ![](/sites/g/files/dvc2391/files/styles/crop_freeform/public/image/2024/12/Frame%2030%20%281%29.png.webp?itok=HGbJPude) ## Why Choose Site Factory? ![](/sites/g/files/dvc2391/files/styles/default/public/image/2024/12/centralized.png.webp?itok=3gw4EILj) Centralized Management ![](/sites/g/files/dvc2391/files/styles/default/public/image/2024/12/efficiency.png.webp?itok=I8QJ0jHU) Cost Efficiency ![](/sites/g/files/dvc2391/files/styles/default/public/image/2024/12/wheelchair.png.webp?itok=5cre-xwn) Accessibility & SEO Compliance ![](/sites/g/files/dvc2391/files/styles/default/public/image/2024/12/scalable%20%281%29.png.webp?itok=KOWqPyv1) Scalability ![](/sites/g/files/dvc2391/files/styles/default/public/image/2024/12/illustration.png.webp?itok=x6FctgjE) Customizable Design ![](/sites/g/files/dvc2391/files/styles/default/public/image/2024/12/analytics.png.webp?itok=j_NJcq2U) Comprehensive Analytics ![](/sites/g/files/dvc2391/files/styles/default/public/image/2024/12/collaborative-innovation-network.png.webp?itok=8hQgDFBP) Streamlined Collaboration ![](/sites/g/files/dvc2391/files/styles/default/public/image/2024/12/platform.png.webp?itok=at2qvBnG) Future-Proof Technology ### 2023 Recap ## 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) ](/content-carosel)[Content Carosel](/content-carosel) ### [Content Carosel](/content-carosel) ![](/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)