This article is outdated. You can read the Managing Tinloof-powered websites article instead.
Sanity is a content platform that is used to unify, structure, and deliver the content of an organization.
In this guide, we'll go through the workflow our clients follow to create content.
If you prefer watching instead of reading, here's the YouTube video:
In short, businesses produce content to attract and retain users online.
By building high-quality content, they establish themselves as a relevant source in their industry, create trust with prospects and current clients, and elevate their brand image.
All of that has an impact on the revenue bottom line, and enables them to have an edge over competitors.
To help them produce high-quality content, we offer them a high-quality set-up that allows them to rapidly create and test content, collaborate with colleagues, and optimize for search engines.
A website is a collection of pages that live under a single domain.
For example, www.tinloof.com is a website that has a Homepage, an About Page, a Blog, etc. You get the gist.
When you open Sanity, you are presented with this simple interface from which you can create and edit pages.
Note that not all interfaces across this guide look the same, because each interface is tailor-made according to the client's goals and requirements.
To create a page, you simply click on the pencil button, and fill in the fields to populate this page.
You can create as many pages as you wish without the involvement of developers.
Well, a page is simply a set of modules stacked on top of each other. You pick which modules you want to show on the page, and order them.
A module is a visual element that contains content that spans throughout the whole width of a site.
For example, on the Tinloof homepage (as of writing this), we have multiple modules.
First, we have a Hero module:
Then we have a Featured work module:
If we keep scrolling, we see that there's a Clients module:
And so on.
You can imagine modules as Lego blocks stacked on top of each other.
We can distinguish the following modules on Tinloof's homepage (as of writing this):
The hero module doesn't appear in the screenshot above because we have Hero modules enabled by default on all pages.
You may ask yourself: where do these modules come from?
These are created either by your or our designers in the design phase, and are then implemented on the frontend in the development phase.
From Sanity you can order them to control the layout of a page.
To ensure consistency across the website, we like to use a design system to ensure that typography, colors, and spacing are well defined.
What's great about modules, is that they are flexible and can be designed in a way to support your requirements. For example, they can be integrated with analytics or come with different variations.
Let's say you have a module with text and image, it can have the following two variations:
Before adding a module to a page, you're exposed to a preview so you know what it looks like before adding it:
Modules can contain text, images, videos, or even custom elements (e.g. YouTube embed, Google Maps, forms).
Sanity offers a rich text editor that allows you to format text like on Google Docs or Medium, to show your content as text, tables, links, code blocks, etc:
We can customize this to your preference, for example if you want to add a highlighter or a special divider.
The text editor above is so customizable, that we can add custom elements like YouTube embeds or forms.
For example, we've enabled the content team at Zego, a London-based insurance, to embed forms directly in their content.
We've also integrated Google Maps for Betty's Eddies website, to power their store locator feature and avoid manually typing geolocations.
Images and videos can also directly be added from the editor above (yes, it's that flexible), or can be a standalone module.
To enable you better handle media, we have a dedicated Media pane where you can search, filter, sort, tag, and bulk upload.
Filtering is very convenient, especially when you want to know which media is not in use or which assets lack tags or alt texts.
You can crop images directly from Sanity:
It is possible to fetch media directly from other providers like Mux, Cloudinary, or Unsplash.
In some instances, you may have pages that are not modular and follow a fixed layout instead, like this article you're on.
Instead of using modules, this article displays fixed information like author, date of publication, title of the article, and the content.
Regardless of modular of fixed layout, once you create a page, you can decide to keep it as a Draft (meaning it's not live yet) or publish it (it'll be live and Internet users can access the URL).
Later you can also unpublish a page to take it out from the web, and if you're making changes you're not happy with, you can discard changes.
In fact, you can even visualize how your page looks like while editing thanks to the Live Preview feature.
You can see real-time how your content looks like before it gets published:
I would go further and say this is even more enjoyable when you have a large screen you can split in two (like I do!).
Monitor: LG 38WK95C-W 95
You can go further and even decide if to have the page indexed by Google or not.
If you've decided to have your page indexed by Google, that means you want your content to rank high in search engines.
We help you control elements like meta tags, alt texts, indexation, slugs, structured data, redirects, and auto generate sitemaps.
We go more into detail in this article about SEO best practices to follow on Sanity (YouTube video available).
If you control redirects from Sanity, it is convenient to have the ability to deploy the site directly from the interface.
We can enable it with platforms like Vercel or Netlify.
Here's how it looks like on LAK Gallery's interface:
Aside from SEO fields, you can also control social fields, and even automate the creation of your social images.
These appear as a preview image on Slack, LinkedIn, Twitter, and other media.
Not only you can control SEO and social fields, but you can also decide to add scripts by yourself on a per-page basis, or across the whole site:
After you've created a page, you may decide to have another one similar in structure but different in terms of content. You can easily duplicate a page:
You may create different variations of a page and want to test conversion.
We can enable an integration with LaunchDarkly (or another tool of your choice) to create different variants of a landing page and control traffic variants.
We've implemented this for Zego (YouTube video available).
Speaking of conversion, you can increase it with localization, should your organization be present in multiple countries.
We discuss the optimal localization strategy in this article.
This is how the dashboard looks like for Exakt Health:
As you keep creating content, you may decide to team up with your colleagues and share a preview URL to collaborate:
As of writing this, available only on Team plans or higher
In some instances, you may want to schedule your content for future publications and organize upcoming releases.
This is how it looks like on Heavybit's interface:
In some instances, you may want to have the ability to change the color of a module, background, or any other element - a key feature for any web design company.
We can embed a color picker:
The plugin is called Color Picker
As the content creator, you're not limited to the creation of pages only.
You can also control global elements like the header or footer:
Or other global settings like a "fallback" social image when you don't select one for a page, local business information, or IDs for contact forms:
Not only you can create pages and control global settings, but you can also connect content by referencing one another, or with classification methods like tags.
For example, in this article, I am referencing to the author "Omar Benseddik", and have selected the tag "Beginner friendly":
What does this allow us to do?
We can create a dedicated page to the author "Omar Benseddik" with all his articles, or add a filter to the blog to read only "Beginner friendly" articles.
You can visualize what content is referenced directly from the dashboard:
As you keep adding more content, you have the ability to order them, like what we did for Tinloof's testimonials:
As you keep creating content and adding pages, it can get harder to find what you're looking for.
Luckily, Sanity comes with a Search functionality built-in, which you can open with CMD+K (on the latest versions).
Not only is search convenient as your content base grows, but also the ability to make bulk actions (e.g. delete, publish, unpublish).
This is how we've done it for LAK Gallery:
The plugin is called Superpane
Lastly, if search and bulk actions are not enough, we can enable a query panel on Sanity if you wish to communicate directly with the database.
This is practical when you want to extract information such as "articles published in 2021" or "all the videos in which James appears".
If you don't know code, don't be afraid of this.
The used query language is called GROQ (Graph-Relational Object Queries), and enables very precise output.
We can provide your team with queries to run and instructions to bulk export data, should you need that.
Here's an example on Heavybit's dashboard, where we query all documents that are "persons":
The plugin is called Vision
All of the above can be overwhelming, especially for newcomers in your company.
That is why we add a guide at the beginning of every single Sanity interface we deliver to cover key topics on how to get started, how to build pages, and how to optimize for search engines:
And we also make the interface easy to use by adding informative descriptions in most entry fields:
As you can see, one of the great advantages of using Sanity is flexibility.
You can customize your dashboard as you wish, and are not forced to have unnecessary UI.
If you wish to have a certain integration that is not listed above, you can reach out to us.
A designer needs to implement the design, and the developer will implement that on the frontend and port it to Sanity.
Because the architecture is modular, it is very easy to add modules without affecting other pages.
We built the frontend using a modern React framework, usually withor .
No. It's very easy to use. In fact, with the onboarding guide and the modules preview, it becomes child's play.
Also, after we've implemented it for you, you can always reach out to us in case of any doubt.
No. You can have pages that have a fixed layout, but we highly encourage you to follow the modular mindset so that you can reuse the content and code on other pages.
Yes. The dashboard is responsive. Have a look here:
Yes. With the integration of a 3rd party tool like LaunchDarkly, we can enable split-testing.
Yes. We can restrict/allow access for documents based on roles.
Yes. Sanity is compliant with multiple standards, including GDPR.