Cool Section Breaks
When you click the “+” tool, you can insert our standard section break by selecting the “- -” icon. But if you’ve ever read a story in Backchannel, you’ve seen their unique blue section breaks:
These are just images! Here’s how to do your own:
- Find an image that will work as a section break. It is up to you what shape or size. I chose this artsy snake:
2. Shrink it waaay down in an image editing program. Constraining the dimensions, I made this one 75 pixels high, but it might be trial and error for you. It’s best to save the image as a transparent .png. I also chose to lay three of the snakes side by side, but many stories just use a single image.
3. Drag it in to the spot you would normally have a section break, and choose for the image to be centered.
4. Bam. You have a cool snake break!
Drop caps are also just images, set to certain dimensions and formatted specifically when you layout your Medium story.
- Find an image of the letter that starts your paragraph. You can do this by taking a screenshot of a letter on your computer, or finding something on the internet.
- Set the image size by opening it in an image editor. The “G” above is 140 x 140 pixels.
- Drag the image into your Medium story.
- Select the “left-align” option for the image
5. Type your text to the right of the image. And you’re all done!
Drop caps are fun and easy. And they make you look super fancy like the pros over at Matter! They have all the tricks to make things look great. You can make it part of the paragraph when you keep typing to make it look really good. Just make sure you have enough to write, because I’m running out of things to say to fill out this example. Ok, that looks right. I’m done now.
Sometimes you want to make a quote or paragraph pop by putting a color behind the text:
Can you guess how to do this? Right. “Images.”
- Find a picture of the solid color you want to use. Adjust the height to about 10 pixels, and make it wide enough to stretch across the screen (at least 1900 pixels wide).
- Type your text. You can center it or make it a pull quote.
(I like to use a larger pull quote, and then remove the italics. You can do this by highlighting your text, clicking the quote icon twice, and then the italics icon once.)
3. Next, put the standard section breaks above and below your text. (This won’t work with the cool section breaks.) Insert these by hitting cmd+enter.
4. Mouse over the left margin so the background image tool pops up:
Click the landscape icon and select the solid color image from your computer. If you did it all correctly, the image will fill in the space behind the text from one section break to the next.
This is the dramatic part of my post. You know it is important because it is on a black background.
And there you go. Instant gravitas.
Table of Contents
Matter did this. Can you?
They made that post the launching pad to seven different stories using a very cool trick: Image Links!
- Get your images together. Matter chose seven that are 2000 × 656 pixels. I found a picture of a snake, put a “1” on it with an image-editing program, and set it to full-width in my story:
2. Find your target. It could be any different story or internet page, either on Medium or off.
3. Click the image so it has a green border, and type Command+K on Mac or Control+K on PC. Paste your URL into the link box. (You can make any image in any Medium story a linked image as well)
4. Repeat for every image you have, click, and enjoy!
There you go.
If you use these simple tricks, you too can look just like a million snakes.
Got any other tricks you use on Medium? Let us know at firstname.lastname@example.org.