Whether you are a developer, marketer, designer or a business owner, managing your blog with Solodev is very easy. With its comprehensive set of features, you can create, schedule posts, improve the SEO of your articles, optimize images and easily format the text. In this article, we'll walk you through all the blog features and teach you how to manage your blog in Solodev.
Creating Blog Posts
We'll start by adding a blog post from scratch.
Note: If you don't have a blog module in your Solodev website yet, you can follow the steps over here to install the blog module. We recommend installing the modules in the web files -> managers folder.
Click on the the blog manager in the filetree on the left side menu in your Dashboard. If there are existing blog posts, you'll see a list of them. To add a blog post, click on the Add Entry button.
A side window will appear on the right where you can enter the title and other specifics of the blog post. These are the fields you will see on the window: Name, Status, Content, Intro/Excerpt, Featured Image, Schedule, Categories, Tags, and Groups.
Name is the title of the blog post. This field is mandatory to fill out before hitting the Submit button to create the blog post entry. You can always change the Name field later on.
In the Status dropdown menu, you can set the status of the blog post to Draft or Publish.
Go ahead and hit Submit to create the blog post. We'll cover all the other sections in detail below.
Editing Blog Posts
After you create the blog post, you'll end up on the blog post edit page. All the fields in the blog edit page are the same as the ones on the initial Add Entry Blog window.
This is the main body content of the blog post. It has a Visual Editor as well as a Source editor where you can type in HTML code and see the entire blog post in HTML format.
The Solodev Visual Editor, also known as a WYSIWYG editor, is an easy-to-use, browser-based content editor that enables you to author, capture, and format HTML data without the requirement of coding knowledge. The WYSIWYG gives you access to text editing functions and file enhancements and also allows you to view something very similar to the end result while the document or image is being created. This gives you the ability to visualize what you are producing.
You can switch between the WYSIWYG editor and Source editor by clicking on the Source button on the right. When you switch to the Source panel, all the other visual editor tools will be disabled:
Tip: If you have some HTML knowledge, we definitely recommend using the Source panel because it is easier to fine tune the formatting of the content and spot errors.
By hovering your mouse over the WYSIWYG buttons below you will be able to see what each one represents. Some of the most popular options are Paste from Word, Image and Hyperlink.
Cut & Paste from Word
The Paste from Word button allows you to insert text from Microsoft Word without importing extraneous document formatting that will affect the look of your site content. To keep your site consistent from page-to-page, it’s best to allow the site’s style sheet to dictate font face, font site and color.
The only changes you should need to make to formatting for font face and font size should be done through the Paragraph Format button on the left, which allows you to select Normal for paragraph text and Heading 1, for page headlines and Heading 2 to Heading 6 for sub heads. The styles for those options will be dictated by your style sheet so any change to your style sheet will affect all site content with that style. That keeps you from having to edit each page individually.
If you have content that you are cutting and pasting from a Microsoft Word document, please follow the instructions below. This will strip out all of the extra formatting that could impact the appearance of your site.
- Copy the text you would like to paste from Word.
- Use the instructions above to get to the file that corresponds to the page.
- Once in the file, place your cursor where you would like to insert the text that was copied from Word.
- Select the Paste from Word button.
- Another small window will appear, titled Paste from Word. As instructed in the box, please do not “right click” paste the text, rather hit the CTRL & V buttons together to paste the text.
- Once the text is pasted, click OK. Your text will appear in the original field where you placed your cursor.
Solodev has a comprehensive image tool that allows you to optimize your images for the post as well as setting URL links for the images. There is also an Advanced tab where you can add ids, classes and custom styles to your images.
It is best to size the images before inserting it into the file so you will need to determine beforehand how large you want your photo. Avoid using images with big file sizes as they will slow down the time it takes to load the page.
Note: The image file should be saved as a .jpg, .png or .gif. Make sure there are no spaces or periods in the file name. You can have dashes or underscore marks.
There are two ways of adding images:
- By browsing the server for already uploaded images.
- By uploading a file from your computer.
When you install the Blog module in your website, you'll automatically have an _Assets folder that comes with the module folder:
In this Assets folder you can upload anything related to that module, in this case, the blog module. The easiest way to manage your blog assets is by uploading all your images and other documents in the Assets folder.
To insert an image to your blog post, click on the image button. An image modal will pop up:
When you click on the Browse Server button, the window below will pop up:
Clicking on the folder button on the left will allow you to browse the images you already uploaded to your Solodev website. If you'd like to upload an image from your computer directly, click on the file button on the right and you can select and drag the files to be uploaded on the site.
Once the image is uploaded and selected, image properties will pop up:
- Alternative Text allows you to add a description of the photo. This text will be used by special needs viewers. This description will also help with search engine optimization if you incorporate your targeted keywords.
- Width & Height of the photo will be set according to the dimensions of the photo you uploaded. You can manually adjust the size of the image to some degree, but any large changes should be done by re-sizing and uploading the photo again.
- Border allows you to put a black border around the photo. Insert a numeric value to set the pixel width if you want a photo border.
- HSpace/VSpace windows allow you to put padding around the image so it does not crowd the text. In this instance, the H stands for horizontal and puts padding to the left and right of the photo and the V stands for vertical so it puts padding above and below. You generally will not need to put padding above or below the photo because of the line spacing in the text, but horizontal padding of 10 pixels is generally accepted as adequate.
- Align drop-down you have the opportunity to move the photo to the right or left. By default, the image will align to the left margin where you place your cursor. If you leave the alignment <not set>, the text will appear above and below the photo. If you select right or left, the photo will align to that margin and the text will wrap around the photo.
You can link the image to another website by clicking on the Link tab and entering a URL. You can also set whether clicking on the image with a link will open the link in the same window or in a new window:
Finally, the Advanced tab settings will allow you to add id, class names to the image as well as custom styling and set the language direction:
After you have set all of your parameters, click the OK button and your image will be placed on the page. When you are ready, don’t forget to click the Publish button to make your page live. When uploading images you have the option of where to place them, how much space you want between the image, the site text, and even put a border around the photo.
Adding a Hyperlink
The hyperlink button allows you to link text and images to other web pages and even PDF documents. Click the hyperlink button to add a link to your content.
A Link Info Window will populate where you can specify link type, protocol, and URL. Click OK for the link to populate in the Visual Editor.
Just like with images, you can set the link to be opened in the same window or in a new window:
You can add custom properties such as id names and classnames to the link:
An excerpt is a summary of an article, often displayed on the blog posts index page and archives pages. Often the intro/excerpt is displayed with the featured image of the article and has a link to the main article page where the full content is displayed. Filling out the intro/excerpt section is required to publish the post. The intro/excerpt section has the same visual editor as the content section:
A featured image is an image that is unique to each individual blog post. Just like excerpts, they're displayed in blog index and archive pages. In Solodev, they're displayed on top of the page above the content.
Uploading a featured image is the same as adding an image to your blog post content: You can browse the server to pick and image or upload an image from your computer.
When used for news, a blog, or some other type that is not an actual event, the start and end time in the Schedule section is used to determine in advance when your entries appear on the website. For news and blog entries, the entry does not appear on the website until the posted start date/time and disappears after the stop date/time has passed. The stop date/time is initially blank and the start time is the time you create the post.
Categories are the main topic for your blog post. They help organize the blog and help people find the content they're looking for on your website. Normally, each blog post has one category.
Tags are like keywords that are specific to the things you mention in a blog post. For example, if you write an article related to architecture, you can set the category as architecture but if you mention Frank Lloyd Wright as an architect in your article, you can add "Frank Lloyd Wright" as a tag. Adding tags, just like adding categories is not required but they do help organize your content, help people find the content they're looking for on your website and drive more traffic to your website.
Optimizing Your Blog Posts for SEO
Writing good content and writing for people first, not for search engines, is the key to drawing more people to your blog and website. That being said, you should also optimize your blog for the search engines so that when the search engines crawl your website, they can extract the right information from your pages and serve them to the right audience. If your content is not understood by the search engines, your website and pages won't show up in the search results. This is where the meta data comes in.
With meta data, you can communicate with the search engines properly and describe what each post or article is about. The meta elements are all HTML elements that are displayed as tags in HTML file. There are several types of meta data:
Meta Title: The meta title tag specifies the title of a web page. The title of your blog is also the meta title. Meta titles are displayed on search engine results pages (SERPs) as the clickable headline for a given result, and are important for usability, SEO, and social sharing.
Meta Description: The meta description is a short summary of your page's content. Similar to a tweet, its character limit is up to about 155 characters.
Meta Keywords: Meta keywords are just like tags, they convey specific information about a page. The tags you choose for your blog post can be used as meta keywords.