**This procedure outlines the creation and use of the Grid Component, enabling you to efficiently create and structure content into columns.** Editing a "Grid" Component in the Back Office involves two steps: ## Step 1 : Access and edit the Grid ![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 Grid: - Click on the arrow next to **"Add Quote to Component."** - From the dropdown menu, select **"Add Grid."** - 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 Grid Layout: - **Choose the background color:** You can choose between **white** or **gray**. - **Set the number of columns:** Choose the number of columns for your grid, ranging from **1 to 4 columns.** ## Step 2 : Add Content to the Grid ![Grid content edition](/sites/g/files/dvc2391/files/styles/media/public/image/2025/01/Screen%20recording%202025-01-13%2012.25.34.gif?itok=E-Pl_ht9) ### Add Content to the Grid: - 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: - **Embed:** Add an external content like videos, maps, or media using an [**iframe**](/iframe "Iframe") or [**integration code**](/integration-code "Integration Code"). - [**Tab**](/tab "Tab")**:** Add interactive tabs for easy navigation between sections. - [**Webforms**](/webform-pages/webforms "Webforms")**:** Collect user input directly through forms. - [**Activity Card**](/card "Card")**:** Visual layout highlighting specific content with images and animations. - [**Card**](/card "Card")**:** Clean visual layout presenting key details. - [**Image Card**](/card "Card")**:** Clean visual layout presenting images prominently. - [**Media**](/drupal-essentials/media "Media")**:** Add various media types, such as videos or audio. **Save Your Changes and Change the status to "Published".** ## Examples: [ ![Montains with a lac](/sites/g/files/dvc2391/files/styles/media/public/image/2025/01/Screenshot%202025-01-16%2014.24.04_0.png.webp?itok=blLMlyaS) ](/card)[Add a Card component inside your Grid](/card) ### [Add a Card component inside your Grid](/card) [ ![montains landscape ](/sites/g/files/dvc2391/files/styles/media/public/image/2025/01/Screenshot%202025-01-16%2014.48.21.png.webp?itok=E8N_L_fC) ](/card)[How to edit a Card component ? ](/card) ### [How to edit a Card component ? ](/card) [ ![hand in the snow](/sites/g/files/dvc2391/files/styles/media/public/image/2025/01/Screenshot%202025-01-16%2012.23.21.png.webp?itok=2LUNQSHO) ](/card)[Click here to know how to edit a Card.](/card) ### [Click here to know how to edit a Card.](/card) [ ![summer montain landscape](/sites/g/files/dvc2391/files/styles/media/public/image/2025/01/Screenshot%202025-01-16%2015.00.13.png.webp?itok=IApyG5Y7) ](/card)[Edit a Card component](/card) ### [Edit a Card component](/card) [ ![Veolia Expert in mountains ](/sites/g/files/dvc2391/files/styles/media/public/image/2025/01/Screenshot%202025-01-16%2011.49.19.png.webp?itok=1T70sU1I) ](/card)[How to edit a Card component ?](/card) ### [How to edit a Card component ?](/card) ## **30% water consumption reduction** at Les Orres ski resort through smart sensors by Birdz. ## **15% energy offset** by hydro and solar installations in mountain resorts. [ ![veolia employees in montains](/sites/g/files/dvc2391/files/styles/media/public/image/2025/01/Screenshot%202025-01-16%2011.47.32.png.webp?itok=i0hy4gEG) ](/card)[Some help to create a Card like this one ? Click here.](/card) ### [Some help to create a Card like this one ? Click here.](/card) ### **Veolia: Driving Sustainability in Mountain Regions (Example)** Veolia is making a significant impact on mountain sustainability through innovative solutions. At Les Orres ski resort, the company **has reduced water consumption by 30%** through smart sensors deployed by its subsidiary Birdz. In addition, Veolia’s renewable energy initiatives, including hydro and solar installations, offset **over 15% of energy consumption** in the resorts it manages. In the Himalayas, Veolia’s "Tri-Haut pour l’Everest" project has successfully collected and **treated over 1,000 tons of plastic waste**. The company also e**ducates more than 3,000 residents and tourists** **each year** in Alpine regions on resource preservation, setting a strong example for sustainable tourism and environmental stewardship. ## Discover Other Components to Enrich Your Website Pages [Explore 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) [ ![container icon](/sites/g/files/dvc2391/files/styles/media/public/image/2025/01/Design%20sans%20titre%20%2812%29.jpg.webp?h=b202b291&itok=vmeeKQt-) ](/container)[Container](/container) ### [Container](/container) [ ![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)