video1.0<iframe src="https://www.loom.com/embed/4ba700f0f468485eac246e8936d23d18" frameborder="0" width="1148" height="861" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>8611148Loomhttps://www.loom.com8611148https://cdn.loom.com/sessions/thumbnails/4ba700f0f468485eac246e8936d23d18-de1f995061d55462.gif1794.637This demo explains how to create, edit, preview, publish, and maintain content in DatoCMS. ### Key Steps   **1. Open the correct DatoCMS project and identify the main interface areas** [0:16](https://loom.com/share/4ba700f0f468485eac246e8936d23d18?t=16)  - Log in to the appropriate DatoCMS project. - Confirm whether you are working in the correct client or internal project. - Familiarize yourself with the three main tabs: - **Media** for assets - **Content** for pages and structured content - **Visual** for full-page live editing and preview   **2. Manage media assets in the Media tab** [0:55](https://loom.com/share/4ba700f0f468485eac246e8936d23d18?t=55)  - Open the **Media** tab to view all uploaded assets. - Use folders if you want to organize assets by topic, campaign, or page. - Switch between grid and list views depending on what is easier to scan. - Adjust thumbnail size if you need a broader overview or more detail. - Use filters and sorting to find assets by tags, file size, dimensions, or other available parameters. - Save useful filter combinations for repeated use.   **3. Review asset details and metadata before using an image** [2:18](https://loom.com/share/4ba700f0f468485eac246e8936d23d18?t=138)  - Click an asset to open its detail view. - Check the default file information such as extension and file size. - Review AI-generated color extraction if you need to reuse image colors in the website design. - Confirm folder or collection placement. - Add or verify metadata such as: - Title - Caption - Alt text - Author - Copyright - Add manual tags or review SmartTags to improve searchability. - Check which records are using the asset so you understand where it appears on the site. - Use the replace option carefully if the asset needs to be updated everywhere it is used. - Use the built-in image editor only when cropping, annotating, anonymizing, or resizing is required.   **4. Choose the correct content type in the Content tab** [5:21](https://loom.com/share/4ba700f0f468485eac246e8936d23d18?t=321)  - Open the **Content** tab to manage pages and structured content. - Select the correct content type from the sidebar before editing. - Use **Default page** for standard pages such as About, Privacy Policy, or other general pages. - Use specialized content types for specific needs such as: - Case pages - Team member pages - Knowledge Center posts - Homepage - Layout settings   **5. Update global site settings in the Layout content type** [6:24](https://loom.com/share/4ba700f0f468485eac246e8936d23d18?t=384)  - Open the **Layout** content type when you need to change site-wide elements. - Update shared items such as: - Logo - Navigation links - Footer content - Company information - Add, remove, or edit internal and external navigation links as needed. - Treat this area as the central place for global website settings rather than page-specific content.   **6. Edit a page’s core fields and URL slug** [7:10](https://loom.com/share/4ba700f0f468485eac246e8936d23d18?t=430)  - Open the page you want to edit. - Review the main fields at the top of the page. - Update the **Title** to reflect the page’s purpose. - If the title changes, click the refresh button to regenerate the **Slug**. - Confirm the slug is URL-friendly and matches the intended page URL. - Use the preview buttons if you want to check draft or published versions.   **7. Build the hero section and preview changes live** [8:39](https://loom.com/share/4ba700f0f468485eac246e8936d23d18?t=519)  - Edit the **Hero** section first, since it appears at the top of the page. - Add or update the hero title. - Include an optional description and image if needed. - Save your changes. - Use the preview option to check the draft version of the page. - If available, open the inline live preview to see changes reflected beside the form fields. - Use the linked field shortcuts in the preview to jump directly to the relevant editor field.   **8. Add and manage dynamic content blocks in the page body** [11:08](https://loom.com/share/4ba700f0f468485eac246e8936d23d18?t=668)  - Scroll to the **Sections** or content blocks area. - Add blocks based on the page’s purpose instead of relying on a single rich text field. - Choose the most appropriate block type, such as: - Image section - CTA section - FAQ section - People teaser section - Code section - Rich text section - Use blocks to create more flexible, visually engaging pages.   **9. Create a quote or testimonial block** [12:28](https://loom.com/share/4ba700f0f468485eac246e8936d23d18?t=748)  - Add a **Quote** or similar testimonial block. - Enter the quote text and author name. - Add an image if the layout calls for a more visual presentation. - Use SmartTags or the media library to quickly find the correct image. - Select the appropriate quote style, such as person quote or business quote. - Save and confirm the block appears correctly in the live preview.   **10. Build and format an FAQ section** [13:50](https://loom.com/share/4ba700f0f468485eac246e8936d23d18?t=830)  - Add an **FAQ** section when you need collapsible question-and-answer content. - Create each FAQ item with a question and answer. - Format answers using rich text options such as bold, italic, underline, and links. - Add icons if the FAQ design requires them. - Duplicate FAQ items when you need multiple similar entries. - Reorder items as needed to keep the section organized and readable.   **11. Add a call-to-action section** [16:03](https://loom.com/share/4ba700f0f468485eac246e8936d23d18?t=963)  - Insert a **Call to Action** section when you want to highlight an important next step. - Add a clear description or message. - Create a button label that is short and action-oriented. - Link the button to either: - An internal page already created in DatoCMS - An external URL - Choose the correct button style, such as primary, secondary, or link. - Add an image and background color if the design requires it. - Save and verify the CTA in preview mode.   **12. Publish or schedule page visibility** [18:06](https://loom.com/share/4ba700f0f468485eac246e8936d23d18?t=1086)  - When the page is ready, use the **Publish** button in the top-right corner. - Confirm that publishing makes the page available on the live website. - If the page should not remain live, use **Unpublish**. - For timed changes, use the scheduling option to: - Publish in the future - Unpublish at a future date and time - Always verify the schedule is set correctly before saving.   **13. Review page info, revision history, and related content** [18:27](https://loom.com/share/4ba700f0f468485eac246e8936d23d18?t=1107)  - Open the **Info** sidebar to review page metadata. - Check publishing status, creation date, publish date, and last update date. - Review related pages suggested by DatoCMS. - Use reference pages to see where the content is linked. - Open revision history to compare edits and restore a previous version if needed. - Use this area when troubleshooting or auditing content changes.   **14. Configure SEO settings before publishing** [20:47](https://loom.com/share/4ba700f0f468485eac246e8936d23d18?t=1247)  - Open the **SEO** tab for the page. - Fill in the SEO title and description. - Add the social sharing image used for platforms like X, Facebook, or LinkedIn. - Select the appropriate card type if available. - Decide whether the page should be indexed by search engines. - Use the SEO preview to confirm how the page will appear on search and social platforms.   **15. Edit other content types using the same structured workflow** [22:32](https://loom.com/share/4ba700f0f468485eac246e8936d23d18?t=1352)  - Open other content types such as Knowledge Center posts or case pages. - Follow the same general process: - Update title and slug - Add images and metadata - Build sections with content blocks - Complete taxonomy or related-item fields - Review SEO settings - For blog posts, add publication dates and teaser images. - For case pages, update case-specific visuals, colors, and related cases.   **16. Use the Visual tab for full-page live editing** [24:31](https://loom.com/share/4ba700f0f468485eac246e8936d23d18?t=1471)  - Open the **Visual** tab to work in a full live preview of the website. - Use this view when you want to edit content in context rather than inside a form-only layout. - Click directly on visible page content to jump to the linked field. - Make edits and save them to see the preview update immediately. - Use this mode to evaluate layout, spacing, and content presentation across the full page.   **17. Manage translations for multilingual pages** [25:38](https://loom.com/share/4ba700f0f468485eac246e8936d23d18?t=1538)  - Open a multilingual page and switch to the required locale. - Add a new locale such as Dutch Belgium or English as needed. - Choose whether to start from a blank page or copy content from an existing language. - Translate all relevant fields, including: - Title - Slug - Hero content - Sections and blocks - SEO fields - Save each locale separately and verify the translated version displays correctly. ### Cautionary Notes - **Do not publish** until the page has been reviewed for content accuracy, formatting, and SEO completeness. - **Be careful when replacing assets** because the replacement will update every location where the asset is used. - **Confirm alt text is present** for images whenever accessibility is required. - **Check scheduled publish/unpublish times carefully** to avoid accidental early or late changes. - **Avoid editing global layout settings** unless the change is intended to affect the entire website. - **Review translations separately**; copying content from one locale does not guarantee the final translation is correct. - **Use the built-in image editor sparingly** and only when the change is necessary for the final asset. ### Tips for Efficiency - Use folders, tags, and SmartTags to find assets faster. - Save commonly used filters in the media library for repeated searches. - Use live preview while editing to reduce back-and-forth checking. - Duplicate content blocks when creating repeated structures like FAQ items. - Use linked field shortcuts in preview mode to jump directly to the correct editor field. - Reuse existing internal pages when linking buttons instead of creating duplicate URLs. - Check revision history before making major changes so you can restore a previous version if needed. - Use the Visual tab for quick layout validation before publishing. ### Link to Loom