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:

Bulleted list styles

  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.

Media

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:

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:

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.

  1. Numbered (or ordered) list
    1. Indented
      1. Indented again






The Latest from LSTN