Blog Formatting Tips and Templates - Dividers

I love to style my blogs in exuberant or fancy ways. It makes the blog look like it was made with love, time, and effort, but also just looks appealing in general (I hope). So, I will give y'all some of my favorite styling methods with dividers to use for formatting your blogs!

For the purposes of this blog, although it pains me, I will make this blog's formatting simple, so the actual styling aspects stand out more. I don't want it to become clustered.

See this official JetPunk blog about the basic overview of making blogs, if you don't already know how. I'm assuming you know the basics of making blogs already.

Also see the second part for more tips and templates!

Using dividers is what I think is the best way to make your blog look fancy. There are many things you can do with dividers, and I tend to play around with them until I find a style that suits my blog. Above is the basic divider, unedited. It will be fine for most cases, but if you want to spice up your blogs a little, see the details below. The most simplistic way to use dividers is to stack them. One divider can suffice of course, but I think one divider is best when separating text boxes.

Like above, just a simple divider is good enough for separating text. If you want to go above this, you can stack multiple dividers for "more separation". This will literally separate the text more, but also give the idea that the text should be separated, or that there isn't much connection between the texts.

Of course, I'm not separating ideas here, just demonstrating how you could use them. All I did was add one divider by clicking on it (or you can drag it to the specific spot you want), fixing it up the way I want, then duplicating it and adjusting those new dividers. Another example:

The dividers don't have to be exactly like my example. Play around with the formatting options to find a style that you like. This is really simple stuff, so let's move on.

For this style, I use two stacked dividers, the blue one set to Align Left and the yellow one set to Align Right. These directions can be swapped if you like. Note that they can be any thickness or width, but I prefer to use full thickness and keep it on 75% width. You can make the widths different for each, as that looks just as nice. You can use any color combos you want of course, but my advice is to pick colors that go well together, or just different hues of the same color. I personally think the colors below don't go together, but that's up to you.

Something I like to do with these simple guys is to add a Heading component in between them. This gives the heading a bit more ring to it, and catches people's eyes. It can also separate your heading from your text more, if that's something you want to do.

I recommend you edit the Heading component a little here. What I did was change the Above and Below heading margins to 0 each, and Align Center the heading. This way, the large gap above the normal heading is gone, and the heading itself is properly aligned with the offset dividers. Again, this is just my way of doing it. I suggest you play around on your own and see what you like the best. These are just templates.

These are some of my favorites, as there are so many different possibilities to play around with. You can add text and headings to the unoccupied side of the split, or HTML if you need something better. I've used the style below many times and think it works well replacing a simple heading.

Let's debrief on this formatting. The blue divider is the exact same as the one in the Stacked Offset Dividers section. Below the blue divider, I added a Split View component. I then inserted the exact same yellow divider seen in the previous style into the right split, and added a Text component to the left split.

Something that makes this look better is if you put the yellow divider's width at 100%. This way, it takes up the full length of it's respective side. I set the Text component in the left split to Align Center, so that it looks clean. You don't have to do that. You can use a Heading component or an HTML component instead of the Text component, as all look great.

Also make sure that the Split Component itself is set to a proportional Position, so that the bottom divider is offsetting the top divider. What this means is that when you insert the Split View component, it will autoset to 50% on each side, with each side being half of the component's split. Change this to be larger or smaller on one of the two sides, by moving the Position bar in the edit menu. In the example above, I set my Position to 35%. The yellow divider is noticeably shorter than the blue divider, but I like it that way. If you don't like that, you can make the blue divider's width shorter to match the yellow divider's width.

Also note that you can do the Split View for both dividers, like this:

This is the same thing as the first example, just with the blue divider. It is just flipped correspondingly, meaning that I set the top Split Position to 65% in contrast to the bottom Split Position, which was 35%.

Below is an example of this style with an HTML component:

You can do a lot with this format style, so play around with it. See some HTML formatting blogs like these to get a good understanding of how to add HTML to your blogs. It adds so much more.

This is one of, if not, the best looking style I have here. It isn't hard to make, but takes a bit of adjusting to find the right spot and length. Below is the best example I have for you.

Let's talk about what all is happening here. There are two Split View components here, one on top of the other (both vertical). For the top Split View, add another Split View component to the right split, and for the bottom Split View, add another Split View component to the left split. Then, I added a final Split View component to the farthest side of the second inserted Split View component. There should be three Split View components used for the top and bottom, making four boxes on both the top and bottom. I have laid out the order below for which Split View components go in first. The "1" divider goes in the largest box of the Split View component, and the rest follow suit.

The third Split View will give you two boxes, which, in addition to the two boxes you should have already, is all that you need. Note that the blog functioning system has a maximum amount of Split View components you can add to other Split View components. So, I think that the example above is perfect.

Now that the layout has been created, set the largest Split View on top to a Position of 65%, and set the largest Split View on the bottom to a Position of 35%. Leave the specific splits set to 50%. In other words, only the original Split View component's Position should be changed. This works best. Now that this is ready, set the largest two dividers on both the top and bottom to 100% width. The next largest divider on both the top and bottom should be set to 85% width, and the smallest divider on both the top and bottom should be set to 50% width. After all the widths are set, Align Center the largest three dividers on both the top and bottom. Align Left the smallest divider on the top, and Align Right the smallest divider on the bottom.

This should be adequate instructions for making this style. If you still don't understand this, ask me in the comments and I can try to give a very clear step by step process.

This is just one divider instead of a stacked divider, but you can make this style stacked by mirroring the top to the bottom. For the Text component added, you can use a heading or HTML, all work fine.

For this, it's a Split View component with another Split View component on the right side. The Position of the largest Split View is 65%. Don't change the Position of the other Split View component. The long blue divider's width is 100% and its Align is Center. The Text component is Align Center, and the small blue divider's width is 50% and its Align is Left.

Example with stacked dividers:

Make sure you set the smallest divider's width on the bottom to Align Right, since it's countering the top. Other than that, it's just a mirrored version of the top.

Well, that's that. If I find any more cool uses for dividers, I might make a part two. If people want more styles, I will also consider making a part two. I think I have used all of these before, and I hope the explanations are understandable. Again, I recommend you play around on your own with dividers to see how they can be used. Thanks for reading, and consider using these styles in your next blog!