Recipes

Step-by-step instructions for the things people do most often. Each one assumes you've opened Studio from your project's Edit site button.

Launch checklist

Every new site starts from the same sample home page and settings. Before you share your site, replace everything that's still sample content:

  • Site name and Site description (settings) are yours, not Your Brand.
  • Logo icon, Primary color, and Neutral color (settings) match your brand.
  • Heading font and Body font (settings) are set on purpose.
  • Favicon (settings) is your own icon.
  • Navigation (settings) points at sections and pages that exist. Remove Features / Overview / Details / FAQ if you changed those sections.
  • Header button (settings) has your label and link, or is empty to hide it.
  • Footer text, Footer links, and Social links (settings) are yours. The starter site includes a Deep Woods social link. Remove it.
  • The home page hero, images, stats, testimonials, FAQ, and pricing are your real content, not samples.
  • The contact form sends to you (forms → contact: either Send with email and your own Notify address, or your own Send submissions to URL), or you've removed it.
  • Every page has a Title and Description (Page Settings).
  • Test pages are deleted.
  • You've checked the preview on your phone.

Build a standalone campaign page

A full-screen page with no site header or footer, such as a campaign or app download page.

Create the page

In Content, click New file and name it, for example spring-sale.

In Page Settings, turn on Hide header and Hide footer. Set Page background if the page needs a specific color, for example bg-white text-gray-900.

Add a full-screen hero

Type /, choose Page Hero, and in Edit props turn on Fill. Add a Logo from Media, a Title, and a Description.

Add the buttons

Click inside the hero, type /, and add Cta blocks. For big app-store-style buttons, turn on Pill. Set Target to _blank for links that go to other websites.

Publish and share

Publish, then share the page's address (/spring-sale). It isn't in your menu, so only people with the link will find it.

Add a page to the header menu

  1. Create the page (see Pages).
  2. Open Content → settings → site → Navigation and click Add.
  3. Enter a Label (such as About) and a Link (/about).
  4. Use the arrows to move it into place.

Make a menu item scroll to a section

  1. In the code editor, add an ID to the block, such as id: pricing. See Linking to a section.
  2. In Navigation, add an item with the Link #pricing. From other pages, use /#pricing (the home page) or /page-name#pricing.
  1. Create pages named privacy and terms, and add your text. For a plain text page, type headings and paragraphs straight into the page body.
  2. Open Content → settings → site → Footer links.
  3. Add Privacy Policy → /privacy and Terms → /terms.

If your policies are hosted elsewhere, use their full https:// addresses and set Open in new tab to _blank.

Add your social profiles

  1. Open Content → settings → site → Social links and click Add.
  2. Enter a Label (Instagram), a Link (https://instagram.com/yourname), and an Icon (search instagram).

Match your brand

  1. Content → settings → site: set Primary color and Neutral color, choosing the closest match.
  2. Set Heading font and Body font, or add your own font. See Brand fonts.
  3. Set Logo icon and Favicon.
  4. Leave Appearance on Light unless you've checked every page in dark mode.

Add a Klaviyo signup form

  1. In Klaviyo, copy your site's onsite script, the one Klaviyo says to add to every page.
  2. In Studio, paste it into Content → settings → site → Code for the head of every page.
  3. In Klaviyo, open your embedded form and copy its embed code. It's a short line like <div class="klaviyo-form-ABC123"></div>.
  4. On your page, type /, add a Form Embed, and paste the line into Code.
  5. Publish and check the form on your preview site.

Add a HubSpot, Mailchimp, Typeform, or Jotform form

  1. Copy the form's embed code from the service.
  2. In Content → embeds, click New file (for example contact) and paste the code into Embed code.
  3. On your page, add a Form Embed and set Embed to contact.

Send your own form's answers to email

  1. In the Deep Woods dashboard, open your project, go to Form Settings, and click Connect email to connect your email service (SendGrid, Resend, Postmark, or any service with SMTP details, such as Gmail or Microsoft 365).
  2. In Studio, open Content → forms → contact, set Send with to email, and fill in Notify (your address) and From (an address your email service allows).
  3. Add a Form Block to your page with Form set to contact, and add your fields, including one named email so you can reply straight to the visitor. Or paste the complete example.
  4. Publish, create a preview, and send yourself a test.

See Get submissions by email for details. If you'd rather not connect an email service, a submission service such as Formspree or Basin can email you instead. Paste its form URL into Send submissions to and leave Send with on webhook.

Add a thank-you page after a form

  1. Create a page named thank-you. Turn on Hide header if you like.
  2. In Content → forms → contact, set Redirect after sending to /thank-you.

Put an image beside text

  1. Add a Page Section and set Orientation to horizontal.
  2. Click inside the block, type /, choose Image, and pick your image.
  3. Turn on Reverse to put the image on the other side.

Add an image under the hero

  1. Select the Page Hero and choose Add slot → bottom.
  2. Click inside the slot, type /, choose Image, and pick your image.

Announce something at the top of the page

Add a Banner as the first block on the page. Give it a Title, an optional To link, and turn on Close so visitors can dismiss it. Give it a new Id each time you change the announcement.

Copy a block to another page

  1. Hover over the block, click its handle (⠿), and choose Copy to clipboard.
  2. Open the other page, click where you want it, and paste (Ctrl+V, or Cmd+V on Mac).

Or open the first page's code editor, copy the block's text from ::name to its closing ::, and paste it into the other page's code editor.

Grow from a Landing Page to a Microsite

Create a second page. That's it. Your project becomes a Microsite when you publish it from the dashboard, as long as your plan's allowance covers it. See Page limits and upgrades. Add the new page to Navigation so visitors can find it.