**We’ve prepared seven page templates designed to simplify creation and integration, while ensuring consistency across our websites. Feel free to use them and customize them to suit your needs.**



 

 

 



[Homepage](/node/2056)

 

   ![Hompage template full screenshot](/sites/g/files/dvc2391/files/styles/default/public/image/2025/12/screencapture-sf-userguide-veolia-node-2056-2025-12-23-10_13_17%20%281%29.png.webp?itok=LBQILZ9m)   





 

 

 

 

 

 



 

[Market](/hub-page-market-example/template-market)

 

   ![Market page template fullscreenshot](/sites/g/files/dvc2391/files/styles/default/public/image/2025/12/screencapture-sf-userguide-veolia-hub-page-market-example-template-market-2025-12-23-10_19_09.png.webp?itok=4ifhPDLG)   





 

 

 

 

 

 



 

[Case study](https://www.sf.userguide.veolia.com/template-hubpage-case-studies-copy-purple)

 

   ![Case study hubpage template full screenshot](/sites/g/files/dvc2391/files/styles/default/public/image/2025/12/screencapture-sf-userguide-veolia-template-hubpage-case-studies-copy-purple-2025-12-23-10_22_35.png.webp?itok=eTWHxVWY)   





 

 

 

 

 

 



 

[Case study](https://www.sf.userguide.veolia.com/bonneuil-en-france-transforming-wastewater-green-energy)

 

   ![Case study specific template full screenshot](/sites/g/files/dvc2391/files/styles/default/public/image/2025/12/screencapture-sf-userguide-veolia-hub-page-business-cases-example-no-map-template-specific-case-study-2025-12-23-10_25_17.png.webp?itok=66nUqTV0)   





 

 

 

 

 

 



 

 

 





 

 

 

 





[Solution - water](/hub-page-solutions-example/template-solution-water)

 

   ![solution water page template full screenshot](/sites/g/files/dvc2391/files/styles/default/public/image/2025/12/screencapture-sf-userguide-veolia-hub-page-solutions-example-template-solution-water-2025-12-23-10_50_16.png.webp?itok=jinfGnci)   





 

 

 

 

 

 



 

[Solution - energy](/hub-page-solutions-example/template-solution-energy)

 

   ![solution energy page template full screenshot](/sites/g/files/dvc2391/files/styles/default/public/image/2025/12/screencapture-sf-userguide-veolia-hub-page-solutions-example-template-solution-energy-2025-12-23-10_39_57.png.webp?itok=GqjYOB8r)   





 

 

 

 

 

 



 

[Solution - waste](/hub-page-solutions-example/template-solution-waste)

 

   ![Solution waste template full screenchot](/sites/g/files/dvc2391/files/styles/default/public/image/2025/12/screencapture-sf-userguide-veolia-hub-page-solutions-example-template-solution-waste-2025-12-23-10_47_35.png.webp?itok=hCECpPLB)   





 

 

 

 

 

 



 

[Combined solutions](/hub-page-solutions-example/template-solution-combined-solutions-0)

 

   ![combined solutions template page](/sites/g/files/dvc2391/files/styles/default/public/image/2026/06/screenshot-https---www-sf-userguide-veolia-com-hub-page-solutions-example-template-solution-combined-solutions-0-no-back.png.webp?itok=78AxpIfq)   





 

 

 

 

 

 



 

 

 





 

 

 

 





## Import templates to your website



 

 

 



You will find all **these templates** in a **Google Drive as a .zip file**. **Download it** and extract it on your computer.

Then, **import the files into your back office** using the import feature. This [**userguide page**](https://www.sf.userguide.veolia.com/site-configuration/import-and-export) will help you import and export content in Drupal and easily create new pages.

Once the templates are successfully imported, you can **start to customise** components.



 

 

 



 

 

   ![Download picto](/sites/g/files/dvc2391/files/styles/default/public/image/2025/12/download-page.png.webp?itok=95EdArGo)   



[Download .zip files to import](https://drive.google.com/drive/folders/1NxMOb6r5U0I7lDzvWOqGAAOQ79k-4_GK?usp=drive_link)

 



 

 

 

 

 

 





 

 

 

 





 

 

 

 





Access the **Figma board** with customizable, ready-to-use elements.

[Discover elements](https://www.figma.com/design/L9PHa1Ok1ddr1ZhWxV8MQG/Media-for-page-templates?t=qc2QWrN3yry22BcT-0)

 



 

 

 

 

 

 



 

This **video tutorial** shows you how to replace an image in the hero banner and download it.

[Tutorial](https://drive.google.com/file/d/1g_6J5qZdjAJ6Ur82talrcUlhtVEO90mX/view?usp=sharing)

 



 

 

 

 

 

 



 

 

 





 

 

#### Explore **Figma media elements** that you can customize for your websites. 

**Start by making a copy** of the Figma board, then adapt the elements as you like, following **the video tutorial** that visually guides you through each step.



 

 

 

 

 

 





 

 

 

 





 

 

 

 





## Ask for support

**We use ServiceNow to track all of your requests and question**

[Create a ticket now](https://veglobal.service-now.com/s3c?id=service_catalog&root=fcec05201b1649504d79dce2b24bcb50)

 



 

 

 



 

 

   ![worker in an orange bridge](/sites/g/files/dvc2391/files/styles/crop_freeform/public/image/2026/01/capture_video-0008%20%282%29.jpg.webp?h=d94f8f28&itok=zlz1Cgq6)   





 

 

 

 

 






:root{
  /* Shared centered rail for the complete modern page */
  --vsf-tpl-content-width:980px;
  --vsf-tpl-side-space:clamp(96px,18vw,360px);
}

.vsf-tpl-hidden-original{
  display:none!important;
}

.vsf-tpl-page{
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #ffffff 8%,
      #fffaf7 18%,
      #fff4ee 34%,
      #ffe8dd 58%,
      #fff3ed 78%,
      #ffffff 100%
    );
}

.vsf-tpl-wrap{
  position:relative;
  left:50%;
  width:min(
    var(--vsf-tpl-content-width),
    calc(100vw - var(--vsf-tpl-side-space))
  );
  max-width:none;
  margin:0 0 80px;
  padding-top:40px;
  transform:translateX(-50%);
  font-family:inherit;
}

/*
 * Every visible block follows the same central rail,
 * creating identical white space on the left and right.
 */
.vsf-tpl-hero,
.vsf-tpl-grid,
.vsf-tpl-resources,
.vsf-tpl-support{
  width:100%;
  max-width:100%;
}

.vsf-tpl-hero{
  background:
    radial-gradient(
      circle at 92% 10%,
      rgba(246,91,42,.18),
      rgba(246,91,42,.06) 30%,
      transparent 58%
    ),
    linear-gradient(
      135deg,
      rgba(255,255,255,.98) 0%,
      rgba(255,252,250,.98) 52%,
      rgba(255,235,226,.94) 100%
    );

  color:#1f1f1f;
  border:none;
  outline:none;
  border-radius:32px;
  padding:36px 48px;
  margin:0 0 48px;
  box-shadow:
    0 24px 60px rgba(246,91,42,.08),
    0 8px 22px rgba(0,0,0,.03);
  overflow:hidden;
}

.vsf-tpl-hero::before,
.vsf-tpl-hero::after{
  content:none!important;
  display:none!important;
}

.vsf-tpl-hero span{
  display:inline-block;
  background:#f65b2a;
  color:#fff;
  padding:7px 13px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  margin-bottom:16px;
  border:none;
}

.vsf-tpl-hero p{
  max-width:820px;
  margin:0;
  color:#4b4b4b;
  font-size:18px;
  line-height:1.55;
}

.vsf-tpl-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
  margin-bottom:42px;
  padding:10px 0 12px;
}

.vsf-tpl-card{
  background:rgba(255,255,255,.96);
  border:none;
  border-radius:24px;
  overflow:hidden;
  text-decoration:none;
  color:#0f172a;
  box-shadow:
    0 14px 32px rgba(0,0,0,.06),
    0 2px 8px rgba(246,91,42,.05);
  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.vsf-tpl-card:hover{
  transform:translateY(-5px);
  box-shadow:
    0 22px 46px rgba(246,91,42,.15),
    0 8px 18px rgba(0,0,0,.05);
}

.vsf-tpl-img{
  height:320px;
  background:
    linear-gradient(
      180deg,
      #fffaf7 0%,
      #ffffff 100%
    );
  overflow:hidden;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:14px;
}

.vsf-tpl-img img{
  /*
   * The image element now follows the real proportions of the
   * screenshot instead of filling the complete media container.
   * The radius therefore applies to the visible image corners.
   */
  display:block!important;
  width:auto!important;
  max-width:100%!important;
  height:100%!important;
  max-height:100%!important;
  margin:0 auto!important;
  padding:0!important;
  object-fit:contain!important;
  object-position:top center!important;
  border:0!important;
  border-radius:6px!important;
  background:transparent!important;
  box-shadow:none!important;
  outline:0!important;
  clip-path:inset(0 round 6px)!important;
  -webkit-clip-path:inset(0 round 6px)!important;
}

.vsf-tpl-content{
  padding:22px;
}

.vsf-tpl-pill{
  display:inline-block;
  color:#f65b2a;
  background:#fff1ea;
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  font-weight:800;
  margin-bottom:10px;
}

.vsf-tpl-card h3{
  color:#1f1f1f;
  font-size:22px;
  margin:0 0 10px;
  line-height:1.15;
}

.vsf-tpl-card p{
  color:#555;
  font-size:15px;
  line-height:1.5;
  margin:0;
}

.vsf-tpl-resources{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-bottom:32px;
}

.vsf-tpl-box{
  background:rgba(255,255,255,.96);
  border:none;
  border-radius:24px;
  padding:28px;
  box-shadow:
    0 14px 32px rgba(0,0,0,.06),
    0 2px 8px rgba(246,91,42,.04);
}

.vsf-tpl-box.dark{
  background:
    linear-gradient(
      135deg,
      #1f1f1f 0%,
      #3a241d 100%
    );
  color:#fff;
}

.vsf-tpl-box h2{
  color:inherit;
  font-size:26px;
  margin:0 0 12px;
}

.vsf-tpl-box p{
  color:inherit;
  opacity:.82;
  line-height:1.55;
  margin:0 0 22px;
}

.vsf-tpl-btn{
  display:inline-block;
  background:#f65b2a;
  color:#fff!important;
  padding:12px 18px;
  border-radius:999px;
  text-decoration:none;
  font-weight:800;
  border:none;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.vsf-tpl-btn:hover{
  background:#e94f21;
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(246,91,42,.24);
}

.vsf-tpl-support{
  background:
    radial-gradient(
      circle at 90% 15%,
      rgba(246,91,42,.25),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      #1f1f1f 0%,
      #3a241d 100%
    );

  color:#fff;
  border:none;
  border-radius:28px;
  padding:38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  box-shadow:
    0 22px 50px rgba(246,91,42,.16),
    0 8px 22px rgba(0,0,0,.08);
}

.vsf-tpl-support h2{
  color:#fff;
  margin:0 0 10px;
  font-size:32px;
}

.vsf-tpl-support p{
  margin:0;
  color:rgba(255,255,255,.82);
  max-width:650px;
}


@media(max-width:1100px){
  :root{
    --vsf-tpl-side-space:96px;
  }
}

@media(max-width:760px){
  :root{
    --vsf-tpl-side-space:48px;
  }
}

@media(max-width:480px){
  :root{
    --vsf-tpl-side-space:32px;
  }
}

@media(max-width:1000px){
  .vsf-tpl-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .vsf-tpl-resources{
    grid-template-columns:1fr;
  }

  .vsf-tpl-support{
    display:block;
  }

  .vsf-tpl-support .vsf-tpl-btn{
    margin-top:22px;
  }
}

@media(max-width:650px){
  .vsf-tpl-wrap{
    width:min(
      var(--vsf-tpl-content-width),
      calc(100vw - var(--vsf-tpl-side-space))
    );
    padding-top:20px;
  }

  .vsf-tpl-grid{
    grid-template-columns:1fr;
  }

  .vsf-tpl-hero{
    padding:30px 24px;
    border-radius:24px;
  }

  .vsf-tpl-img{
    height:280px;
  }

  .vsf-tpl-img img{
    border-radius:5px!important;
    clip-path:inset(0 round 5px)!important;
    -webkit-clip-path:inset(0 round 5px)!important;
  }
}
 
(function(){

  function ready(fn){
    if(document.readyState!=="loading"){
      fn();
    }else{
      document.addEventListener("DOMContentLoaded",fn);
    }
  }

  ready(function(){

    var page =
      document.querySelector("article.readspeaker-content") ||
      document.querySelector("main") ||
      document.body;

    if(!page || page.dataset.vsfTplEnhanced==="true"){
      return;
    }

    page.dataset.vsfTplEnhanced="true";
    page.classList.add("vsf-tpl-page");

    function cleanText(el){
      return el
        ? el.textContent.replace(/\s+/g," ").trim()
        : "";
    }

    function esc(value){
      return String(value || "")
        .replace(/&/g,"&")
        .replace(/,"<")
        .replace(/>/g,">")
        .replace(/"/g,""");
    }

    function getImageSource(img){
      if(!img){
        return "";
      }

      return (
        img.currentSrc ||
        img.getAttribute("src") ||
        img.getAttribute("data-src") ||
        img.getAttribute("data-lazy") ||
        ""
      );
    }

    var links = Array.prototype.slice.call(
      page.querySelectorAll("a")
    );

    var allImages = Array.prototype.slice.call(
      page.querySelectorAll("img")
    );

    var templates = [
      {
        title:"Homepage",
        match:["homepage","home page"],
        desc:"A complete structure to introduce your website and guide users to key content."
      },
      {
        title:"Market",
        match:["market"],
        desc:"Present a sector, audience or business market with a clear editorial structure."
      },
      {
        title:"Case study - Hub",
        match:["case study"],
        desc:"Gather and organize several case studies in one structured page."
      },
      {
        title:"Case study - Specific",
        match:["case study"],
        desc:"Present one project, one story or one concrete result in detail."
      },
      {
        title:"Solution - Waste",
        match:["solution - waste","waste"],
        desc:"Present waste activities and solutions with clear sections and reusable blocks."
      },
      {
        title:"Solution - Energy",
        match:["solution - energy","energy"],
        desc:"Showcase energy solutions with a structured and readable page layout."
      },
      {
        title:"Solution - Water",
        match:["solution - water","water"],
        desc:"Explain water-related expertise with dedicated content blocks and visuals."
      },
      {
        title:"Combined solutions",
        match:["combined solutions","combined"],
        desc:"Combine several services or areas of expertise into one coherent page."
      }
    ];

    var usedLinks = [];
    var usedImages = [];

    function findLink(item){

      var found = links.find(function(link){

        var label = cleanText(link).toLowerCase();
        var href = (link.href || "").toLowerCase();

        return (
          usedLinks.indexOf(link) === -1 &&
          item.match.some(function(keyword){

            var slug = keyword.replace(/\s+/g,"-");

            return (
              label === keyword ||
              label.indexOf(keyword) !== -1 ||
              href.indexOf(slug) !== -1
            );
          })
        );
      });

      if(found){
        usedLinks.push(found);
      }

      return found;
    }

    function findNearbyImage(link){

      if(!link){
        return null;
      }

      var imageInside = link.querySelector("img");

      if(
        imageInside &&
        usedImages.indexOf(imageInside) === -1
      ){
        return imageInside;
      }

      var candidates = [
        ".paragraph",
        ".container",
        ".field__item",
        ".views-row",
        ".card",
        ".media",
        ".content-push",
        "figure"
      ];

      for(var i=0;i<candidates.length;i++){

        var parent = link.closest(candidates[i]);

        if(parent){

          var image = parent.querySelector("img");

          if(
            image &&
            usedImages.indexOf(image) === -1
          ){
            return image;
          }
        }
      }

      var current = link.parentElement;
      var depth = 0;

      while(current && depth<5){

        var nearby = current.querySelector("img");

        if(
          nearby &&
          usedImages.indexOf(nearby) === -1
        ){
          return nearby;
        }

        current = current.parentElement;
        depth++;
      }

      return null;
    }

    function findImage(item,link,index){

      var nearbyImage = findNearbyImage(link);

      if(nearbyImage){

        usedImages.push(nearbyImage);

        return getImageSource(nearbyImage);
      }

      var byKeyword = allImages.find(function(img){

        var alt = (img.alt || "").toLowerCase();
        var title = (img.title || "").toLowerCase();
        var src = getImageSource(img).toLowerCase();

        return (
          usedImages.indexOf(img) === -1 &&
          item.match.some(function(keyword){

            var compact = keyword.replace(/\s+/g,"");
            var dashed = keyword.replace(/\s+/g,"-");

            return (
              alt.indexOf(keyword) !== -1 ||
              title.indexOf(keyword) !== -1 ||
              src.indexOf(compact) !== -1 ||
              src.indexOf(dashed) !== -1
            );
          })
        );
      });

      if(byKeyword){

        usedImages.push(byKeyword);

        return getImageSource(byKeyword);
      }

      var usableImages = allImages.filter(function(img){

        var src = getImageSource(img).toLowerCase();
        var alt = (img.alt || "").toLowerCase();

        var excluded =
          src.indexOf("logo") !== -1 ||
          src.indexOf("icon") !== -1 ||
          src.indexOf("picto") !== -1 ||
          alt.indexOf("logo") !== -1 ||
          alt.indexOf("icon") !== -1;

        return (
          usedImages.indexOf(img) === -1 &&
          !excluded &&
          img.naturalWidth > 200
        );
      });

      var fallback =
        usableImages[index] ||
        usableImages[0] ||
        null;

      if(fallback){

        usedImages.push(fallback);

        return getImageSource(fallback);
      }

      return "";
    }

    var cards = templates.map(function(item,index){

      var link = findLink(item);

      return {
        title:item.title,
        desc:item.desc,
        href:link ? link.href : "#",
        img:findImage(item,link,index)
      };
    });

    var zipLink = links.find(function(link){

      var text = cleanText(link).toLowerCase();
      var href = (link.href || "").toLowerCase();

      return (
        text.indexOf("zip") !== -1 ||
        text.indexOf("download template") !== -1 ||
        href.indexOf(".zip") !== -1
      );
    });

    var figmaLink = links.find(function(link){

      var text = cleanText(link).toLowerCase();
      var href = (link.href || "").toLowerCase();

      return (
        href.indexOf("figma") !== -1 ||
        text.indexOf("figma") !== -1 ||
        text.indexOf("discover elements") !== -1
      );
    });

    var tutorialLink = links.find(function(link){

      var text = cleanText(link).toLowerCase();
      var href = (link.href || "").toLowerCase();

      return (
        text.indexOf("tutorial") !== -1 ||
        text.indexOf("video") !== -1 ||
        href.indexOf("tutorial") !== -1
      );
    });

    var ticketLink = links.find(function(link){

      var text = cleanText(link).toLowerCase();
      var href = (link.href || "").toLowerCase();

      return (
        text.indexOf("ticket") !== -1 ||
        href.indexOf("service-now") !== -1 ||
        href.indexOf("servicenow") !== -1
      );
    });

    var wrapper = document.createElement("section");

    wrapper.className =
      "vsf-tpl-wrap vsf-tpl-generated";

    wrapper.innerHTML =
      '<div class="vsf-tpl-hero">' +
        '<span>Drupal essentials · Templates' +
        '<p>Browse ready-to-use templates, import them into Drupal and customize them with Figma and tutorials.' +
      '

' + '' + cards.map(function(card){ return ( '[' + '' + ( card.img ? '![' +
                        esc(card.title) +
                      '](' +
                        esc(card.img) +
                      ')' : "" ) + '

' + '' + 'Template' + '### ' + esc(card.title) + '

' + '' + esc(card.desc) + '

' + '

' + '](<' +
              esc(card.href) +
            '>)' ); }).join("") + '

' + '' + '' + '## Import templates

' + 'Download the ZIP files and import them into your Drupal back office.

' + '[Download ZIP files](<' +
            esc(zipLink ? zipLink.href : >)' + '

' + '' + '## Access Figma

' + 'Open the Figma file to preview the layouts and design structure.

' + '[Open Figma](<' +
            esc(figmaLink ? figmaLink.href : >)' + '

' + '' + '## Tutorials

' + 'Follow the tutorials to import, edit and adapt templates on your Drupal website.

' + '[View tutorials](<' +
            esc(tutorialLink ? tutorialLink.href : >)' + '

' + '

' + '' + '' + '## Need support?

' + 'Create a support ticket if you need help importing, adapting or troubleshooting templates.

' + '

' + '[Create a ticket](<' +
          esc(ticketLink ? ticketLink.href : >)' + '

'; var first = page.querySelector("h1") || page.firstElementChild; if(first &amp;&amp; first.parentNode){ first.parentNode.insertBefore( wrapper, first ); }else{ page.insertBefore( wrapper, page.firstChild ); } Array.prototype.slice.call( page.children ).forEach(function(child){ if( !child.classList.contains("vsf-tpl-generated") &amp;&amp; !child.contains(wrapper) ){ child.classList.add( "vsf-tpl-hidden-original" ); } }); }); })();