Sanity Studio

Sanity Studio is where staff edit the website's blog, community pages, project spotlights, certifications, homepage logos, and the office addresses in the footer. Open it at blueskyroofing-blog.sanity.studio. Anyone an admin has invited can edit and publish.

Editor guide, at the top of the Studio next to Presentation and Structure, opens the website section of this guide in a new tab. On a narrow screen, open the menu to find it.

Sign inCopy Anchor Link

1. Open the Studio.
2. Sign in with the account your invite was sent to.

Your roofingBoss sign-in doesn't work here. If the Studio says you don't have access, ask an admin to invite you.

Find the right documentCopy Anchor Link

The Structure tool lists everything you can edit under Content.

Under a document's name, the lists show a short note when it isn't fully on the site:

Search at the top of the Studio finds documents by their words. Results and their order can differ from what you're used to, so if a document doesn't come up, try another word from its title or open its list here. The document status icons look different from older versions of the Studio.

Most documents split their fields into tabs at the top of the form, such as Content and SEO. On an SEO tab, SEO Meta Title Override and SEO Meta Description Override replace what search results show. Leave them blank to use the page's own title and description. Where it appears, Do Not Index This Page keeps that page out of search engines.

Share image (also on the SEO tab) is the picture shown when someone shares the page on Facebook, LinkedIn, iMessage, Slack, or X. Use a 1200 × 630 JPG or PNG under 1 MB, keep text and the subject away from the edges, and set the hotspot to choose the crop. Leave it blank to use the page's main photo where it has one, or else the site's default share image.

Publish or save liveCopy Anchor Link

Documents save in one of two ways.

• Publish when ready: Homepage, Footer, Site pages, Blog landing, Posts, and Authors. Your edits stay a draft that only Studio users can see. Click Publish to put them on the site.
• Saved live: everything under Blue Sky Cares, Project spotlights, Roof manufacturers, and Certifications. Each edit reaches the site as you make it. There's no draft and no Publish button. The info icon next to the document type, at the top of the form, says so too.

Published changes show on the site shortly after you save or publish. You don't need to rebuild or refresh anything.

Set a slugCopy Anchor Link

A slug is the end of a page's web address, such as storm-damage-checklist in /blog/storm-damage-checklist. Posts, events, project spotlights, and roof manufacturers each have one.

• Click Generate next to Slug to make one from the title or name.
• Use lowercase letters, numbers, and one hyphen between words. The Studio shows an error for spaces, capital letters, other characters, or a hyphen at the start or end, and says what to change.
• Changing a slug moves the page to a new address, and links to the old one stop working. On a published post the Studio warns you before you publish (see Blog). On a live document, the new address is live as you type it.

Preview a page before you publishCopy Anchor Link

1. Click Presentation at the top of the Studio. The website opens in a frame next to the editor.
2. Go to the page you want to change.
3. Click a heading or paragraph on the page to open that field in the editor. Photos and logos open their field too (see Click a photo or logo).
4. Make your change. The frame shows your draft as you type.
5. Click Publish when it looks right.

The frame shows drafts, but the public site doesn't until you publish. You can also start from a document: the bar at the top of its form lists the pages that use it, and picking one opens that page in Presentation.

Going to a page in the frame opens the document behind it in the editor. A blog post opens its post, the blog page opens Blog landing, and the same goes for the homepage, the community page, community events, and project spotlights. A hidden project spotlight or community event says "Hidden from the site" in that bar. Its page still opens in the frame, with a Hidden from the site notice at the top, while visitors can't see it (see Preview a hidden project and Preview a hidden event).

Click a photo or logoCopy Anchor Link

In Presentation, these photos and logos open their own field when you click them:

• a project spotlight's cover photo and its before, after, and detail photos, on the homepage slider, the Projects page, and the project's page
• a certification's logo, on the homepage, the certifications page, and the Certified by row
• the As seen in logos on the homepage
• an event's image and recap photos, and a partner's logo, on the community page and event pages

Clicking a photo there opens its field instead of the photo's popup or link, and a logo opens the document it belongs to, such as the certification or the partner. Photos can't be dragged into a new order from the page, so a slip of the mouse can't rearrange a live page. Reorder them in the form instead. Visitors' pages don't change: this only works in Presentation.

If a Preview mode bar appears on the website in your own browser, you're seeing drafts. Click Exit to see what visitors see on the same page. The bar doesn't show inside Presentation, which has its own controls.

Pages you view in Presentation, or with the Preview mode bar showing, don't load the website's tracking tags, so your editing doesn't count as visits in Google Analytics or the ad platforms.

Type and edit textCopy Anchor Link

In rich-text fields, such as a post's body, an event's body or recap, and a project's story, the Studio formats text as you type: straight quotes become curly quotes, two hyphens (--) become a dash, three dots become an ellipsis (…), and (c) becomes ©. That's what visitors see on the site too. Plain fields like titles, summaries, and alt text stay as you typed them.

A post's body can also hold tables, with links in their cells following the rules in Add a link. See Add a table.

Long lists in a form, such as photos or offices, show their first few items with a Show all N items button underneath (for example Show all 12 items). Lists collapse after 4 items, and photo grids after 8. Click the button to see and edit the rest.

Add a linkCopy Anchor Link

Select words in a rich-text field, click Link, and enter the URL. The site makes a link only from:

• a full web address that starts with https:// (or http://), such as https://www.nhc.noaa.gov
• a path on this site that starts with /, such as /estimate
• mailto: and an email address, or tel: and a phone number
• # and a section name, for a spot on the same page

Anything else, such as spaghettimodels.com without https://, shows on the site as plain words. The Studio marks it with an error that starts "Start with https:// or /", and suggests the full address when it can. A post with this error can't be published until you fix the link.

Add photosCopy Anchor Link

• Give every photo Alt text: a short description of what it shows, for screen readers and search engines. The Studio flags a photo without one, including photos inside rich text.
• Set the hotspot with the image's crop tool. The hotspot is the part of the photo that stays in frame when the site crops it for a card or a slider.
• Upload photos at least 2,000 pixels wide. The site sends each screen the size it needs, up to the size you uploaded, so a smaller photo looks soft on large screens.
• While a page's main photo, or the first row of photos in a list or gallery, loads, visitors see a blurred preview of it. You don't need to do anything for this.
• For a logo, use the crop tool to trim empty space around it. The site shows every logo at its own shape and the same height, so a logo with wide margins looks smaller than the rest.
• Where a field takes several photos, you can drag a batch in at once and drag them to reorder.

Edit the footer officesCopy Anchor Link

Open Footer. Each office has:

• Name: the heading above its address, like Largo or Corporate office.
• Street address: the full street line, including any suite, like 801 W Bay Dr Ste 100.
• City, State (two letters), and ZIP code.
• Phone (optional): the number visitors see and can tap to call. Use the same number as the office's Google Business Profile, so search engines see one consistent number. Leave it blank for an office without a public number.
• Corporate office: turn it on for Blue Sky's main business address, and for that office only. Search engines read it as the company's address and the other offices as its branches. Until you turn it on, an office named "Corporate office" or "Headquarters" counts as the corporate office.
• Google Business Profile link (optional): the office's listing on Google, where its reviews are. See Add an office's Google profile.
• Google place ID (optional): Google's ID for the same listing. The Reviews page uses it for a Write a review link.

Every page shows the offices in the footer, and search engines read the addresses for local results, so keep them exact. Drag offices to reorder them, then click Publish. With more than four offices, click Show all N items first so every office can be dragged.

While the list is empty, the footer shows the built-in offices: Largo, St. Petersburg, Sarasota, Brandon, and the corporate office on West Bay Drive. Adding any office replaces that whole list, so add every office you want to show. The built-in offices have no Google profiles, so add the offices here before you add their profile links.

Add an office's Google profileCopy Anchor Link

Each office's Google Business Profile is where its reviews, hours, and directions are. Once you add an office's profile link:

• Its address in the footer opens the profile. Without one, the address opens a Google Maps search for the address.
• On the Reviews page, that office's Read and write a review on Google link opens the profile, and the office is listed under Find us with a Directions and hours link. Find us shows only the offices that have a profile, and stays hidden until one does.
• Search engines read the profile as the office's own listing. For the corporate office, it's read as the company's.

To get the profile link:

1. Open Google Maps and search for the office, for example "Blue Sky Roofing Largo".
2. Open the office's listing, the one at the address in the footer.
3. Click Share, then Copy link.
4. Paste it into Google Business Profile link. It starts with https://maps.app.goo.gl/.

A link to the listing on Google Maps (https://www.google.com/maps/...) or a https://g.page/ link also works. The Studio shows an error for any other link, such as the business.google.com page you manage the profile from, which visitors can't open. A https://g.page/r/.../review link from Ask for reviews opens Google's review form, so the Studio warns about it: use the Share link here, and the place ID below for reviews.

To get the place ID:

1. Open Google's Place ID Finder.
2. Type the office's name in the search box and pick the listing at the office's address.
3. Copy the Place ID it shows, which usually starts with ChIJ, and paste it into Google place ID.

With a place ID, the office's card under Find us also has Write a review, which opens Google's review form for that office. Leave both fields blank for an office without a Google listing. Click Publish when you're done.

Edit the homepage logosCopy Anchor Link

Open Homepage. Only these parts of the homepage are edited here:

• As seen in label: the small label in front of the logo row. Leave it blank to show "As seen in", or type something like "As seen on" or "As featured in". The site shows it in capital letters.
• As seen in: the logo row under the headline. Each item has a Name, an optional Logo, and an optional Link. Forbes, ABC News, and BBB show a built-in wordmark until you upload a logo.
• Certifications layout: whether the homepage's certifications sit in a row or rotate. The certifications themselves are under Certifications. See Certifications.
• SEO tab: the homepage's title and description in search results.

Drag logos to reorder them, and keep the list to eight or fewer so it fits. Click Publish when you're done.

While As seen in is empty, the homepage shows a starter set: Forbes, ABC News, and BBB. Adding even one logo replaces the whole starter set, so add every logo you want to show.

The review count, the project team, the Start with your address box at the end of the page, and the rest of the homepage aren't edited in the Studio. The project slider comes from project spotlights, the certifications from Certifications, and the events strip from community events.