I wanted to put this article up as a bit of a guide for contributors, but contributors are in no way obligated to design their own pages as I will detail here. This is simply meant to be a brief introduction as to how best utilize the tools at your disposal.
Typically when I add a title to a page, I will drop the 'title' element into the page and center the text. If the title is short, I will make the title text the largest size available, but if the title is longer, I will reduce the title size by one click. You can also edit the color, make it bold, put certain words in italics, and so forth.
Once I've finished editing the title itself, I will then add a 'divider' above and below the title element, until the finished title looks the same as it does in the picture above.
The best format for editing
I notice that some contributors will copy and paste significant chunks of text from a Word document into the editor, but when you add a big chunk of text like that, you can only edit it as one big piece. Which means, if you add 4 paragraphs of text, you can only add one picture into the entire element. You also can't place an image between paragraphs when its all in one big element as shown in the picture below.
But if you notice in the picture below, I will usually add paragraphs into individual 'text' elements. This makes it far easier to add pictures, videos, quotes and anything else you might want to add.
So keep that in mind when you're designing your page. The more you individualize your elements, the more creative freedom you will have within your article. This is important to remember.
How to add pictures
There are a few different ways you can make a picture appear within your article, and most of it depends on where you release the 'image' element on your page. If you drag the image element over the top left corner of a text element, it will highlight blue as seen below, if you release it there.
The picture will appear as seen below, I find this best option for displaying tall images. You can click on the image and more options will appear too. You can make your picture appear on the right side of your text if you like, and if you place your mouse icon on the bottom right of your image, you can click and drag to re-size your image.
If you want to add a wider image to your article, all you have to do is release the image element in a different spot. This is where breaking up your text elements comes in handy.
Once you upload your image, it will appear across the length of your entire article, as seen below, instead of off to one side of it.
So I will usually add tall pictures within the text element, as seen in the first example. While I will generally add wider images, like wallpapers, in between the text elements. Choose which style best suits your article.
How to add a gif
Adding a gif image to your article is exactly the same process as adding a picture to your article. Just add an image element to your article, upload a saved gif image from your computer, and hey presto.
That's it, easy!
How to create columns
If you want to create columns within your article, it's easy, and as usual, it just depends on where you release your element. All you have to do is release another element directly beside the other element.
Once you've uploaded your image, it will auto-scale your elements and it should appear as seen below.
If you place your mouse icon in the middle of your two elements, you can drag one side over to the other, thus making one column larger or smaller than the other. You can also make columns with titles and text using the exact same method.
How to embed YouTube
If you want to embed a YouTube clip to your article, just drag the 'YouTube' element into your page and place it in between your text elements. It should appear like so.
Then go to your desired YouTube clip, and click the 'Share' button just under the video clip at YouTube. This will give you a specific link, copy that link and then come back to your article.
Then click anywhere on your YouTube element, an option box should appear with a YouTube link space, copy the link location you got from YouTube into that space.
Immediately after you do that, the YouTube clip will appear embedded within your article.
You will notice if you read my articles, that I like to combine pictures. I do this with an outside program called Photoscape. It's a small, free and powerful image editor. Using this I am able to combine any number of different images into one, like this for example.
Just select 'combine' when you open Photoscape, and play around with the settings until you're happy with the result. Photoscape also has the ability to easily crop images, I notice programs like Photoshop can be quite difficult to use, even for small jobs, but it's very easy to do with Photoscape.
How to take screenshots
I personally use Windows 7, and Windows 7 comes with a nifty little program called 'Snipping Tool', you can find it by typing its name into the search bar found in the start menu. With this tool, you can 'snip' screenshots of whatever you'd like, even movies.
I have taken screenshots of movies, and combined them into one big picture, as seen above. With Photoscape and Snipping Tool at your disposal, a lot can be accomplished.
The header image
The header image is the picture that appears at the very top of every article. Usually I will do this for every article, but only because it requires Photoshop to manipulate the image to fit the dimensions properly.
If you have Photoshop and would like to add your own header, you're more than welcome. The exact dimensions of the header image are 1100x500.
These are the basics of using the editor, so play around with it and get creative. I will also add the extra stuff in at the end of your article as seen below.
The share buttons, your name and link back to your homepage, and the disqus comments section. I will add all of this for you, so there's no need to worry about that. If you have any further questions, feel free to ask me at email@example.com