If your website was built by Tinloof, you should be able to self-manage it without any guide.
We wrote this article just to make sure you're not missing out on any feature that helps you manage your website more effectively.
When you launch the CMS, a sitemap navigation panel is available on your left, providing direct access to every page on your website.
Sorting and search are available so you can easily find any page.
When you enter a page, you will immediately get a screen on the right that shows you how the page looks like and updates while you're editing it.
On the left, you have the content panel
In there, you're able to make changes to the page, adjust the URL, modify SEO elements, and update the social sharing image.
From the action button on the bottom right, you can unpublish, delete, and duplicate a page, or discard draft changes.
You also have access to a version manager, to review recent changes and revert to earlier versions if necessary.
On the right, you can have the live preview screen
You can pick the device responsiveness, refresh the live preview, and open it in a new tab.
You can also resize drag the panel around to resize it and see how your page looks like on different viewports.
You can use the actions menu on the top right of the navigation panel of any folder, including the root one, to create a new page in the folder.
When creating a page, you have access to multiple page models (e.g. blog post, modular page).
When you create a page, it will be in "Draft" mode so it's not visible to your users.
The "Publish" green button is available to you as soon as your page has enough content and has no errors. Once you press it, your page is immediately published and available to users.
While some content elements remain exclusive to specific pages, others like the header, footer, or author information for blog articles are reusable across the website.
Page models are created when modelling the content of your website.
Let's go through the most popular ones.
Most of your website pages probably use this page model
These pages are built with a series of blocks stacked sequentially (e.g. Hero, Video, CTA).
These blocks are custom-designed according to your brand guidelines and can be used on any page and filled with unique content.
When you choose to Add item, a Blocks Picker is presented, allowing you to search for a block, preview different variants, and then add them to the page.
You can easily adjust the order of blocks, even inserting a block before or after a specific existing block.
Pages with rich text
Pages like blog articles or legal pages have a Medium-looking rich text field.
The content is mostly textual (headings, text in bold/italic) but you can also embed images, videos, or any other type of content that is fitted to such pages.
For example, you can write a blog article and embed a CTA block or Youtube video at any point of the article.
These pages are typically dynamically generated, with limited content that requires editing.
For example, a blog page retrieves all blog articles and displays them. The page header might be edited by content managers, but the remainder is usually a grid displaying the latest blog articles.
Dynamic generation benefits these pages by automating features such as pagination, filtering, and tagging.
Images can be found under the “Media” tab of the CMS.
There, you look for your images through a free text search or various filters such as the title, alt text, file type, size, and many more.
The number of images will naturally grow with your website content so it’s a good practice to create tags to organise your images through tags.
You can upload images from the field where there are directly used.
Here’s an example of uploading an image in the hero of the homepage:
You can also upload images from the Media tab. This is especially helpful if you’d like to upload images in bulks:
It is useful though to crop images if they don’t have the right aspect ratio or if you want to only have a specific part of the image visible to users.
You can crop an image by pressing the Crop icon on the top right corner of the image field.
You’ll then select an area of the image you always want visible and the frontend will automatically take that into consideration when displaying the image:
Upload the highest resolution possible.
This will make sure the image is crisp regardless of the user’s device.
You don’t have to worry about the size served to your websites’ users, as this is automatically adjusted by the frontend code.
Provide an alt text to images when uploading them
To ensure the accessibility of images and their ranking on search engines, make sure to add an adequate Alt Text when uploading them.
To streamline video upload and delivery, we rely on a video-streaming Sanity partner called Mux.
When integrated into Sanity, MUX provides a minimalist video input where you can upload videos directly in the content where they are used.
You can also browse already uploaded videos and select one of them:
MUX makes it possible to generate poster images that show while the video is loading.
The great part is that it’s done automatically from the frontend code by selecting the first frame of the video.
MUX makes it possible to deliver videos in the smartest and fastest way possible.
The frontend code uses their APIs to deliver videos in the optimised sizes and formats based on the user’s browser.
You have the capability to create links to both external and internal webpages, with the option to open these links in a new window.
To link to an external page, simply input the full URL, such as https://www.website.com, into the designated text field.
When linking to an internal page, use the search box to find the page directly or use the dropdown menu to navigate through all the pages currently on the site.
Choosing an internal page from the dropdown or search results, rather than manually entering its URL, safeguards against broken links. If the URL of the linked page changes in the future, this method ensures the link will still direct to the intended page, avoiding any 404 errors.
You also have the flexibility to link to specific sections of a page and to add UTM parameters for tracking purposes. This makes it easy to guide your users to the exact information they need while also keeping track of traffic sources and campaigns.
We'll see how to manage your website content across languages and countries.
A key term here is 'locale', which refers to the language and/or country of your audience. For instance, 'en' is for English speakers, while 'en-us' is for English speakers specifically in the U.S.
We'll explore how to navigate, create, and manage localized content, making your website globally accessible.
Navigating between website translations
You can use the locale selector, which is visible in the header of the left content editing pane, to navigate between various localised versions of the website.
Navigating between translations of a specific document
When you’re editing a page or a reused document (e.g. Header), you can use the “Translations” tab to navigate between various translations (i.e. localised versions) of the pane.
Creating a localised page
On the content editing pane of the page or document you’d like to translate:
Copying content from 1 locale to another
Let’s say you want to content from the English homepage to the French one:
The CMS is engineered with SEO guidelines in mind. You can customize on-site elements on a per-page basis, while most technical SEO components are automated.
Each page can be set to one of three states:
Set the page title, with guides in place to help maintain recommended character lengths. Automation for this process can be configured based on client needs.
Create a concise overview of the webpage's content. Guidelines are provided to ensure character limits are met. Automation is available depending on client preferences.
Alt text for images can be manually entered or edited as needed.
To avoid issues with duplicate content, a page can be designated to point to an original or more relevant page.
An automated process ensures that Google Search Console always retrieves the latest sitemap, eliminating the need for manual updates by content managers. Image sitemap generation is also available when needed.
These are automatically generated in the frontend, and decided on at the design phase.
For multi-language sites, hreflang tags are generated automatically.
Structured data enhances the search results and provides engaging rich results for search engines such as Google. According to Google, this can result in increased traffic and better engagement.
Redirects can be managed directly from within the CMS.
A social sharing image, also known as OG (short for Open Graph) image, is the image that accompanies a link to your website when it's shared on social media platforms like Facebook, Twitter, or LinkedIn.
When you post a link, the social media platform automatically fetches and displays this image along with the title and description of the page, if such metadata is available.
Social images within the CMS can be managed individually for each page. There are several methods to upload these images:
If needed, you have the flexibility to have social images generated automatically, and manually override it whenever required.
This is how it would look like on Twitter:
The CMS facilitates teamwork, allowing multiple members to concurrently work on a page. You can join a colleague's page by clicking their icon in the header.
Once content is finalized, you can publish instantly or schedule it for later. A click on 'Publish' makes the page live within seconds, no redeploy required.
The CMS also keeps a detailed history of page edits and publish dates, enabling easy reversion to past versions if needed.
Marketers often employ a variety of tools such as CRM, analytics, newsletter services, and job boards.
Thanks to our headless architecture, we can integrate with any 3rd-party tool via APIs, provided there is documentation. This scalable architecture lets you add, replace, or remove any service as needed.
If you need to add a new integration, simply request it from your development team.
Common use cases:
Examples: Google Tag Manager, Google Analytics, Hotjar, pixels (FB, Pinterest, TikTok, etc).
Integration with your preferred analytics tool for behavior tracking is possible.
Examples: Hubspot, Salesforce, Pipedrive.
Integration with your chosen CRM to enable content editors to add lead-capturing forms on any page.
Examples: Klaviyo, Mailchimp.
A newsletter CTA can be set up to point to your chosen signing list by entering the ID in the form.
Examples: OneTrust, Cookie Monster.
We can implement your chosen cookie integration if necessary.
Examples: Lever, Greenhouse.
We can integrate with your preferred job board platform.
You can create as many pages as needed.
A new block will need to be designed by a designer and implemented by a developer. This addition will not disrupt any existing pages.
Yes, you can duplicate the page and change its URL.
Some pages like the Homepage or Collection pages (e.g. Blog) cannot be deleted. The latter can be removed by a developer, but this is usually never required.
Locales are configured by the developer and can be easily changed at any point.
No there isn’t and Sanity’s pricing is unaffected by the number of locales you configure on your site.
Absolutely. Developers have access to a configuration option to decide on that.
It’s very common to have a “Settings” document and not have it translatable.
Yes. You have to request that configuration from a developer.
We use tools like Ahrefs or SEMRush. You are free to use whatever tool you prefer.
Yes. You have to request this behavior from a developer.