The Sound Board

The Latest from LSTN

Blog Style Template Post

Last Updated 1/24/2018

How to make things look goodly, or: Max's guide to the LSTN blog.

I'm making this post to give you a visual representation of what all of the little options in the editor look like when you're making blog posts. For starters, you'll see a box labeled "Title" - this is where you put the title of your blog post (duh). After that you'll see the label 'Content" and a menu of options that looks like this:

The editing options in the WYSIWYG editor

Those are your basic options, and how you'll add, remove, and style every part of your post. That's what I'll be guiding you through here.

For starters, this is what a basic paragraph looks like. When you just start typing in the box, this is what it will look like.

If you're previewing your post and the normal text looks wonky (technical term), you can probably fix it by highlighting the text, selecting the "A ▾" and choosing 'Paragraph" (it's the first option). When you want to separate sections, I recommend going into the same menu and selecting 'Heading 3' - it will change your text to look like this:

Heading 3

In that menu, you'll see plenty of other heading and text options, so here's the breakdown:

  • Never use headings 1 and 2; it messes with backend google site ranking things (basically, every page should only have one Heading 1, as the title of the page. For these posts, it's automatically added to the blog title. Don't use it.)
  • Headings 3, 4, 5, and 6 are all fair game. Use them hierarchically, like if you were making an outline. This is basically the same as when making docs in Google Drive.
  • You may notice that this is a bulleted list - good eye! To make your text into this, all you have to do is click the icon that looks like this:

Bulleted list styles

  • Fun fact: you can nest lists into each other! Just use the 'Indent' button to move the text into a sub-bullet!
    • Like this
    • Ba bam
      • Going crazy!!!!
      • I only gave you 3 levels, any more indents will just repeat this last symbol. You probably won't need more than one sublevel, but it's nice to have options.
    • Use the 'Outdent' button to go back a level.
  • To stop making a bulleted list, just click the button again and it will resume normal paragraph-making. You can also make numbered lists; they look like this:
  1. Number one
  2. Number two
  3. Et cetera. These can also be subleveled, with the first indent giving little letters:
    1. See? Little letters.
    2. They're cute. You can go one more deep, too:
      1. Now they're little roman numerals
      2. It's like your own little super bowl.

Now we're back to regular paragraphs. You may find that the text doesn't look right after ending a list - you can fix that by highlighting the text, going into the "A ▾" menu, and selecting 'Paragraph'. If that doesn't work, try emailing Max because it's a stupid editor and it's easier for me to just go in and fix it.

You can also use a special blockquote style, which is especially nice for inserting highlight text, points of emphasis, or quotes. Just highlight whatever text you want quoted, and select 'Blockquote' from your trusty "A ▾" menu. It'll look like this:

I don't sing for free. It's my work. You're paid for what you do. And I work hard.
- Céline Dion

The other basic stuff you can do with paragraphs is pretty self-explanitory; you can make your text bold, or italic, or even underlined. You can even combine them all!!! If you want to insert a hyperlink, just highlight the text you want linked and click the button that looks like a chain:

Your links will end up looking like this. Way to go! You can also change the text's color, or make it look highlighted if you want - just use the A dropdown menu. To highlight, use the 'Background Color' menu. You can also change the text alignment if you want, but I don't recommend it for much other than image / video captions, since it can mess with positioning of some elements.


You'll probably want to add pictures, videos, and other media to your posts as well. It's simple to do so - just start at this section of the menu:

Media Menu

The one that looks like a grid can add tables. I don't think you'll ever need to do this, so if you think you do, talk to me so I can convince you not to (or at least do them for you in a stylish way). The next icon over (That looks like a circle over a couple triangles) is to insert images. A few things to keep in mind when inserting images:

  • All images will take the same width as the paragraphs do, so make sure they're decently sized. 800px wide is fine. When selecting size, choose "1024x1024" to make sure it's big enough.
  • You'll need to add 'Alt' text which is something that helps visually-impaired people browse websites, and is used by Google's algorithm as well. Basically, it's a written description of the picture.

Here's what a picture will look like. Neat!

A Nice Sunset Picture

Fun fact - you can also insert animated GIFs. Don't use too many on a page though, as they can greatly slow down the page load times. Look, animation!

Animated LSTN Wordmark

My feeling when inserting GIFs

Videos are the next icon over - it looks like an old-timey movie camera. When you put them in, you'll need to grab the 'Embed Code' from the video's page. This is usually found in the 'Share' menu.

If you want to embed a playlist from Spotify, you can do the exact same thing; just use the 'Copy Embed Code' option in Spotify's share menu. It looks like this when finished:

Final Steps

For the most part, that's it! You can now make blogs that look just as good as if I did them myself. There's just a few more things to cover before you can get to posting. First is the excerpt.

For this blog, the excerpt is just the picture that shows behind the blog's title (or directly above it on mobile). This thing:

Excerpt Example

It's very easy to add this. Just go to the excerpt-specific section (immediately underneath where you add all your main content):

The Excerpt Section

From here, just insert an image in the exact same way as you would in the content section. The only differences are:

  • Make sure to select the largest size option (2048x2048) since this will be stretching the full width of the page
  • Choose an image that is landscape orientation (longer sideways than vertically). Otherwise it will be v large on mobile, and on desktop will only show the top bit of your image. That looks bad.

That's it for the excerpt. You'll also want to add a featured image - you can do this on the right hand side of the screen in the section appropriately titled 'Featured Image'.

Featured Image Upload Section

For this one, just make sure it is a 1:1 (square) cropped image. It can be the same picture as the excerpt, just cropped. The feature image shows on the main blog page, as well as the home page (when the blog is one of the 2 newest posts.)

After that, go to the menu titled Organization (immediately below the Featured Image) and make sure your name is selected as the author of the post. The blog section should say 'The Sound Board', but this is selected by default so you shouldn't have to mess with it.

Don't worry about the tags, the 'Search Engine Listing Preview', comments, or anything. In the visibility menu, make sure the 'Hidden' option is selected - I will go in and give your post a final once-over before publishing it.

If you want to preview your post at any time, just click 'View' immediately under the title, at the top of the page:

How to Preview Your Post

You've done it!

Now you're officially a blogger. Past this is just some basic style stuff to help you visualize how various headers and such will look:

Heading 3

Heading 4

Heading 5
Heading 6

Blockquote Styles: I am a firm believer in the people. If given the truth, they can be depended upon to meet any national crisis. The great point is to bring them the real facts, and beer.
- Abraham Lincoln

Paragraph styles. Gentrify selfies umami sriracha meggings cray shaman quinoa raclette leggings. Lumbersexual master cleanse raw denim you probably haven't heard of them. Selfies brunch vice tote bag semiotics, lomo wayfarers man bun disrupt coloring book chia try-hard ramps unicorn meditation.

  • Bulleted (or unordered) list
    • Indented
      • Indented again
  1. Numbered (or ordered) list
    1. Indented
      1. Indented again

The Latest from LSTN