How to make your Steemit posts look beautiful: A quick guide

in #steem-help7 years ago (edited)

Learn in three simple steps how to present the great content you create!


Many of Steemit users are creating wonderful content, but are struggling with the visual part. As a professional web / graphic designer, I am here to help. In this quick guide you will learn three elements of good design: how to use images, how to format text and what formatting practices to avoid.

frank-mckenna-135726-1600.jpg

1. Quality images matter and using them isn’t difficult

Images attract our attention first, greatly influencing the first decision a reader makes on your post: to read or not to read? That’s why I put them first in my list.

Select carefully the first image in your post — it’s is used as a thumbnail, so be sure it looks good in small size — easily recognizable, not too low in contrast or complicated by form.

Where to get free high quality images? Just a few options of many:

You can use a free editor like Pixlr to combine images with text.

There is a plenty of free vignettes on the internet, use google image search to find them or just grab and reuse this one :) No need to save the file, just use this code:

![divider-1024.png](https://steemitimages.com/DQmb9i2KiKpKHoj63jj482Z2HpRPSbx1UyAPXrRGYxXzhEj/divider-1024.png)

to get this:

divider-1024.png

2. Format text using Markdown

Steemit is very advanced in comparison with many other social media in allowing users to use Markdown, a simple tool to do common formatting such as headers, lists, links and emphasis. Below are the most important formatting tricks to make your text look beautiful.

6168680974_75dec7a1b9_o.jpg

Use link titles, not only urls

Urls pasted directly to text look ugly. Using Markdown allows create more readable links.

To get this: My link
Use this: [My link](http://myurl)

Use headers, not ALL CAPS

Instead of using CAPS or bold, try this markup:

To get this header size: My header 1

Use this: # My header 1

To get this header size: My header 2

Use this: ## My header 2

To get this header size: My header 3

Use this: ### My header 3

To get this header size: My header 4

Use this: #### My header 4

To get this header size: My header 5

Use this: ##### My header 5

Use lists instead of paragraphs where applicable

Formatting lists is very natural in Markdown.

  1. If you use numbers,
  2. they get formatted automatically.
  • To create an unordered list, use either
    * asterisks
    - or dashes.

Use dividers (sparingly :)

If you don’t want to bother with vignettes, simply use three dashes --- to get a divider like this:


How to center text or images

If you need to center a piece of text or an image, this is impossible with Markdown, but here comes a good news — Steemit supports some simple html tags and you’ll need exactly one of them.

To get this:

centered text

Use this: <center>centered text</center>

The same with images. Don’t overuse it though, or you’ll soon end with all the post content centered, which isn’t good for readability, if you don’t write poetry :)

How to use emphasis

Using emphasis selectively makes text more readable.

To get this: your text to make bold
Use this: **your text to make bold**

To get this: your text to make italic
Use this: *your text to make italic*

3. Some formatting practices to better avoid

Overemphasizing

The problem with overemphasizing is that it lowers the overall quality of communication. When everyone shouts, it’s equally hard to be heard for everyone and we’re entering the spiral leading to total noise.

shouting-man.jpg

Avoid using any form of emphasizing on large chunks of text such as:

italic italic italic italic italic italic italic italic italic italic italic italic italic italic italic italic italic

bold bold bold bold bold bold bold bold bold bold bold bold bold bold bold bold bold bold

And probably the most abused one on Steemit:

ALL CAPS

AND ALSO ALL CAPS BOLD!

AND FINALLY, HEADER USED FOR A PARAGRAPH TEXT!!!


divider-1024.png

That's all for now.

Ask questions in comments and resteem this post to help your friends and followers grow.


Images: 1 Frank Mckenna, Unsplash | 2 Alexei Zinin, Flickr | 3 Public Domain, Pexels

Sort:  

Up-voted and followed. Good stuff!

We are here to lift each other up. - Maya Angelou

#payitforward

: )

How get more readers for Your old steemit posts? Boost 🚀🚀your views

Add recommended posts to the bottom of your steemit post . follow my blog to learn how it works . Let your Followers See All your steemit posts in each one post

img

Do you want to learn how to display many posts in every Steemit post? Boost 🚀🚀your views, followers, upvotes with this method.

Excellent and informative post, thank you. Upvoted and following you ^_^

Thank you! Me too)

Thank you very much ! good description.

I have to relearn some of the html I forgot but steem makes it really easy to put a post together especially for novices.

@ppktech

Appreciated the vignette trick! I'll have to find some more divider styles like this one..

Hello,

I really needed this information and I'm happy to find your post that covers all of them. I noticed that at the end of post is your picture on the left and the text to the right. What code can I use to display the picture to the left or right?

Thank you. Have a nice day!

Very useful post, thank you so much! I will definitely be using your tips and guidelines from now on! Upvoted and resteemed!

Thanks a lot!)

Great tips, very good explained.

Why is there not a better tag for Centering? You would think they would have added that into the Markdown language?

Is it to complicated then?

no, the danger is mixing HTML and Markdown causes problems on Steem. Many have reported certain tags can crash the platform.