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.
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:
to get this:
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.
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.
- If you use numbers,
- 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:
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.
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!!!
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
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
ya
Thanks!
Excellent and informative post, thank you. Upvoted and following you ^_^
Thank you! Me too)
Thank you very much ! good description.
@ppktech
Appreciated the vignette trick! I'll have to find some more divider styles like this one..
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!)
https://steemit.com/happiness/@arsalanahmed/happiness-is-self-contentedness
upvote comment share and follow i'll do back :)
Great tips, very good explained.
Thank you!
Thank you so much @vitkolesnik :)
Glad to help!
@vitkolesnik Thanks for sharing those awesome tips. I'm following you now to ensure I don't miss a thing!
Thanks @faraicelebr8, followed you, too!
Those are all the tricks I use. Good to put this info out for all the new people.
Thanks, are there some I've missed?
I'm sure there are many more. The one's you included are the ones I use daily.
Thanks for the info. Very helpful!
You're welcome!
Why is there not a better tag for Centering? You would think they would have added that into the Markdown language?
no, the danger is mixing HTML and Markdown causes problems on Steem. Many have reported certain tags can crash the platform.
I didn't know how to make words center; it helped me a lot. Proper formatting and visual presentation is importunate for a good content :D @vitkolesnik
very great
Thanks!)
Thank you for valuable tips, I will definitely use them when I will start to write my own articles.
Good luck, followed you and am looking forward to your posts!
thank you so much for this and also the three links to free image banks.
this post is so helpful. thank you.
vitaly, can you perhaps answer a puzzle i have.
i have done a lot of editing to my posts and comments
QUESTION: each time i edit my comment in my post where i have mentioned a user ie @username,
does that user get a notification?
You're welcome!
Wow! Where's the "favorite" button around here? Thanks for this great post! Now I know how to beautify my stuff :D
Really useful for us newbies! Thank you :)
Very helpful 😁
You've really written a great piece of information for making posts beautiful. Thank you @vitkolesnik. You can visit my page if you like @vinaypsychic.
This post is very needed on Steemit. The horror of all those all caps headers...
Do you have a good way to make image captions? I've tried with dividers and with italized text, but none of them are really good. Ideally I'd like text that was a little smaller than normal.
Thank you. As far as I know, there's no official way to make a text smaller using Markdown, but there's a workaround:
use
<sub>Caption text</sub>to get this effect:Caption text
Thank you very much! I've been looking for a way to do image captions for ages! :D
Thank you! very helpful! trying this out with blog now
will be sharing this with my friends
keep up the good work
<3
You're welcome!
thank you.Great useful post!
Way to go dad, I wish you all the best success with your effort on Steem. I really hope it pays off. I have 5 children myself never ending fun and drama right?
thanks! sure, drama, fun and everything in between :)
Upvoted and following. You supplied me with great advice while I was writing my latest blog post especially when it came to public domain image linking. Thank you so much!
You're welcome!
very good information, I never knew
Thanks for this post! I found the styling guide really confusing, so this helped a lot!
You're welcome!
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!
Thank you,
A question, I have a blog to post and it is grayed out (the post button) All my content is in the one block, is that the problem. Lots of tags in the content.
Check if you have put at least one tag in the tags field under the text area.
Good post @vitkolsnik
Do you know how to use markdown or html formatting?
Here's my question, I use a custom #hashtag on some of my posts (one example: #bffood)
Is there a way to create a link for Trending or New for @bluefinstudios and a specific hashtag? Or even just trending or new for @bluefinstudios.
Hi nice post
How do you put a small image on the left at the end?
Happy new year ~
Like this:
<div class="pull-left"><img src="https://steemitimages.com/image.jpg" /></div>thank you so much !
This a very helpful guide. Up voted and following!
Thank you!
Thank you so much!
It really helps me alot. <3
You're welcome!
Awesome post, lost of help! Thanks a boatload :D
Thanks for the details on formatting! Much appreciated. Looking to write my first post soon for Steemit, will use this as a reference!
Thank you so much I am definitely going to be using this as reference until I master what you just taught. Keep it coming, please.
I use this post almost every time I post just for reference. Thank you!
You're welcome!
Who is still reading to this in 2018?
FOLLOWED!!!
Your post is very useful for newbie like me. Thanks a lot. Have a good time
Testing,
My link
You legend! This helped hugely! Followed. Thank you!
Like so much ur guide here. Very helpful to a minnow like me! Keep it up @vitkolesnik ;)
Hi @vitkolesnik I am a newbie in Steemit and was googling to find some tips and tricks for Steemit. Really glad to find this post of yours.
Thanks for the appreciation and good luck on Steemit!
The post may be few months old but it still benefits young steemiters like myself.. Glad to bump into this great stuff.. Followed you already.
Thanks for the appreciation!
Perfect, thanks!
Thanks for the post haha. I come here every other day for the divider url code.
You're welcome!