Formatting Recipe Posts on SS

Did you ever think it would MATTER how you formatted a recipe? Well it does matter 100% so let's go through the possibilities. You ready to break it down and learn a few lines of code?

Recipe Post Formatting on Squarespace

One of the biggest questions I get from food bloggers is "how do I display a recipe correctly". Oh well that's a tough one. It depends on who you are talking to. BUT in my method I use now, it's SUPER easy. We are going to format with simple - super simple normal text. The reason why will come later - but we want to be sure that we are creating a site that is really mobile friendly (works best with regular text) and potentially updatable - if you changed the body copy in the site you want it to edit the recipe in the blog post (which is why code blocks would take YEARS to update each post). 

So let's go over what we are going to do here.

1. First thing we are going to do in this post is design a great recipe. Purely the recipe.

2. Later this week we are going to talk about printing recipe options.

3. Google Recipes - we are also going to touch on Goolgle + Pinterest (our biggest search engines) and how to format the DATA for those ;) The first step is to make the recipe great.


DESIGN • Legibility + Hierarchy

Design of a Recipe is INCREDIBLY important. You heard me crazy bloggers who right align your text. You hear me designers who add in icons to their clients bullet points. Simplicity is absolutely best. Because we are NOT talking about the part of the site where branding is important, we are talking about functionality and instructions. Ready for some examples?  


SEO • Content + Hierarchy

The SEO content and hierarchy is more on the how to organize your data. Remember, Google doesn't "see" anything so it has to read everything. So paragraph text is NOT as important as a header. So this counts for recipes too. In recipe's case, it's Heading One and it should be the title of the recipe. End of story. Then you can have fun with the serving size, it doesn't have to be in a data form, just there and legible. THEN you have either h2, or h3 for your ingredients/instruction/directions section titles. You want these to be really clear headers but not take away from the rest of the data. The next thing are the actual items. Bullet points and numbered lists are already IN there, USE them. This keeps this formatting for our printed recipe section later, so I highly suggest using them for data legibility. That way when someone is on their cell phone making your recipe that they can GLANCE and see bullet points and KNOW it's the ingredient section. 


 
Recipe Formatting for Squarespace
 

Summerfield Delight Recipes

RECIPE TITLE: In Heading One Always Do yourself an SEO favor and tell Google that the title of your recipe is important. Here we made H1 a little bit smaller for the blog. This can be a fun way to style up your blog post as well, make H1 a bit different than the rest of the site. Try the code below for the Brine Template - add this to the global style editor to edit H1 in the blog section only.

 
.BlogItem h1 {
  font-size: 18px;
}

Serving Size Fun Styling: This can be fun, so let it BE fun! Here we are actually using a BUTTON to make this really fun and pretty. Yes, that is a button! We are just making the button full width, and adding a little border on the left, and then formatting the text to sit within the button. See the code below for this button style for BLOG only on a MEDIUM size button. Make sure you are using the style editor to define the color/font selections for the major part of the design. The border color is in the last line in the hex code - please reach out if you have trouble!

This again only works on the Brine template - if you want to use it on ALL medium size buttons on  your site, remove the .BlogItem section in the beginning.

 
.BlogItem .medium-button-style-solid .sqs-block-button .sqs-block-button-element--medium {
    padding: 7px 0px 5px 12px;
    width: 100%;
    text-align: left;
    border-left: solid 3px #aabcc5;
}

Styling for H2 with Dashed Line:  This is one of my favorite styles for a "classic" recipe look. Like a dashed line on a recipe card. We are adding this to ONLY the blog post H2 on the site. Notice here in the code below I am using an hsla color code - this is just because I pulled it from the style editor, but hex codes, rgba etc. all work. Same deal, this works in BRINE. 

 
.BlogItem h2 {
    border-bottom: dashed 1px hsla(200, 19%, 72%, 1);
}


Sid in the Kitchen Recipe Formatting:

This is an oldie but goodie. One of the things here you will notice is we just CENTERED the recipe with the button underneath. This WORKS because the button is full width. The other thing we do here is add in a little bold tag to the button for the difference between the "Serves" and then the data following. To do this, just add in a bold tag around the text. So your button text reads:

<b> serves: </b> one  -- <b> prep time: </b> 10 minutes

So you can see the above there is a <b> before the bold section starts and a </b> when it ends to basically make that section contained by the bold tag.

Line height. The other thing here is that the line heights are done very carefully. The ingredients are done so that it isn't at 2em line height, like you might want the rest of your blog body copy. So instead bring down the line height for the bullet and list text in the blog posts.

 
.BlogItem li {
    line-height: 1.6em;
}

Note you don't need to add the .BlogItem in front here if you arent using lists elsewhere on the site, otherwise if you've read this post, you know the .BlogItem works in brine only :)

Margin Under Paragraph The last thing you are going to do here is add some padding UNDER  your ordered lists aka the directions. This will allow the directions to not be tight together, and have that space between the paragraphs, while keeping them in the same list.

 
ol li {
    padding-bottom: 20px;
}

 
Abby Capalbo Styling www.abbycapalbo.com

Abby Capalbo Styling www.abbycapalbo.com

 

Abby Capalbo Styling!

This site technically goes live tomorrow (wednesday) but it's a great example of doing a few of these things with SIMPLICITY. You can see we did the last to items from the above with the line height of the lists, and the padding under the ordered lists to make this really gorgeous. We didnt have to edit the h1 and the h2 for the title and the sub-titles that much for the blog (or at all even), but with the RIGHT typographical system you can create GORGEOUS recipes in no time. For us bloggers that's huge!


I hope you enjoyed some of these examples. A few of these little type css edits will change your world on making recipes look and read beautiful and also keep your google heirarchy for data :)