Drupal・3 min read・Last update on June 28, 2022 # Top 10 things you should know while working on a Site Studio project ![Top 10 things you should know while working on a Site Studio project](/sites/default/files/remediation-media/6536096304d80c7d18530764_Top_10_things_you_should_know_while_working_on_a_Site_Studio_project.avif) Table of contents - [Let's Begin! ](#let-s-begin) We have shared our experiences with Site Studio and covered all the features and how this low-code tool helps marketers. In this blog post, we will be covering the top 10 things you must keep in mind while working on a Site Studio project. ### Let's Begin! 1\. First, go through all the task/ticket OR sprint wise task/ticket and write down your findings in the ticket comment like, - Is there BE work that needs to be ready before starting to work on the component/template - If form fields are not mentioned for component building then What form fields are required? to build a component - If any design is missing for that component/template. - Missing Acceptance criteria/Implementation details 2\. Create **sub-theme** using **Site studio Minimal** theme and used only required files to create sub-theme like, - .info.yml - .libraries.yml (if any custom style or custom js required which we are not able to handle from site studio) 3\. Website setting → **It's a good idea to set these up at the start of your project** as per the style guide. So that once it’s done we can take other tasks/stories/tickets to work on and there will be no re-work and no re-testing. - Base unit settings - Colour palette - Default font settings - Font libraries - Icon libraries - Responsive grid settings - SCSS variables 4\. Set Base styles */admin/cohesion/styles/cohesion\_base\_styles* and custom styles /admin/cohesion/styles/cohesion\_custom\_styles depending on the style guide provided. 5\. While setting H1-H6 styles - Build it from base style */admin/cohesion/styles/cohesion\_base\_styles* and also from custom styles (under Heading category) /admin/cohesion/styles/cohesion\_custom\_styles so that it will be directly available in the **Custom style** options list of components/templates. ![Top 10 things to know while working on a Site Studio project](/sites/default/files/styles/uncropped_960w_webp/public/c3-body-media/da8d51cab856fe45cbae13f3.png.webp?itok=TV2n_qjz) 6\. CTA can be both types like Button or Links so it’s better to create both custom styles (under Button and Links category) /admin/cohesion/styles/cohesion\_custom\_styles so that it will be directly available in the **Custom style** options list of components/templates. ![Top 10 things to know while working on a Site Studio project](/sites/default/files/styles/uncropped_960w_webp/public/c3-body-media/94d3b6079dba7ca30a022445.png.webp?itok=8pBvUCPg) 7\. Set default master template after analysing design structure that can be boxed or fluid. 8\. On layout canvas, for a component, if we are providing content editor/Site manager access to upload/update image so in that case in your component inside **Component form builder** for image uploader form field **keep default image added** to get rid of popup notification - **Failed to load preview image and Server error please try again**. 9\. If anything is updated in SS Component like field settings, default content, etc. and if that component is already in use somewhere for example Site header component is used in Master template fluid/Master template boxed so in that case, that updated things will not be in your master template. So in that case you need to Rebuild the settings by accessing */admin/cohesion/developer/rebuild* Or terminal command *drush dx8:rebuild* Or We need to update it manually where it is used or we can remove that component and again drag/drop the same component then you will get updated content, settings, styling etc. We need to do it locally and re-export the master templates when this happens. 10\. Block → If you want to use any drupal block or custom block (except menu & breadcrumb) in site studio component/template/views template then first you need to place that particular block in the **Site Studio hidden region** ![Top 10 things to know while working on a Site Studio project](/sites/default/files/styles/uncropped_960w_webp/public/c3-body-media/1a9880641a455a9ca3f47517.png.webp?itok=oZ60ulNK) and now you can add or drag/drop a particular block in site studio component/template/views template using *Drupal core elements***block** from sidebar panel. ![Top 10 things to know while working on a Site Studio project](/sites/default/files/styles/uncropped_600w_webp/public/c3-body-media/25ce2ac2e267bf82bfa246e2.png.webp?itok=DEl15Z-l) ![Top 10 things to know while working on a Site Studio project](/sites/default/files/styles/uncropped_960w_webp/public/c3-body-media/43c78f2f71a9e3bcf55c52bb.png.webp?itok=ntsvd5uw) Once the element is in layout canvas → Double click on it to edit. ![Top 10 things to know while working on a Site Studio project](/sites/default/files/styles/uncropped_960w_webp/public/c3-body-media/781fc0141d614e4938de76b2.png.webp?itok=1-jVs96l) Select your theme(sub-theme if created) and a particular block from the hidden region and save. 11\. In the **content template** if you want to show content-type field data which is having WYSIWYG editor then use Drupal core elements **field** directly ![Top 10 things to know while working on a Site Studio project](/sites/default/files/styles/uncropped_600w_webp/public/c3-body-media/b47ed19aba8141c341d1236d.png.webp?itok=AVsQ-cia) and by double-clicking on the field element, you can select a particular field directly for e.g: body field ![Top 10 things to know while working on a Site Studio project](/sites/default/files/styles/uncropped_960w_webp/public/c3-body-media/ecbb20776c773bac5bbb8036.png.webp?itok=zdTTLcRn) Or use **Inline element** from Content elements section ![Top 10 things to know while working on a Site Studio project](/sites/default/files/styles/uncropped_600w_webp/public/c3-body-media/2d6b971c4c761782e7db9890.png.webp?itok=uQtZx6z0) and by double-clicking on the inline element you can add a token of body field for e.g: \[node:body\] and select HTML element Text only. ![Top 10 things to know while working on a Site Studio project](/sites/default/files/styles/uncropped_960w_webp/public/c3-body-media/138f675972b63dce35838c52.png.webp?itok=GVMSaInj) Because if you use a field element with a paragraph element then it will create/add multiple break tags on the front-end even if there is a single line break added while creating content. ![Top 10 things to know while working on a Site Studio project](/sites/default/files/styles/uncropped_960w_webp/public/c3-body-media/df9924bab94864d55c74f194.png.webp?itok=xQWwUl29) ![Top 10 things to know while working on a Site Studio project](/sites/default/files/styles/uncropped_960w_webp/public/c3-body-media/7a36bbf5b40fa7f957b50ff0.png.webp?itok=JRoNyUtp) #### Thank you for reading! Written by Kiran Kadam ## We'd love to talk about your business objectives [ Contact Us ](/contact)