Create an Elementor Blog Post

Create an Elementor Blog Post

So you want to create an Elementor Blog Post

Okay, you’ve just taken delivery of your freshly designed Elementor Word Press website and want to create your first blog post. We’ve put together a step my step guide on doing just that. So hold tight, here we go. Log into your WordPress site with the details we would have sent you.

 

Step 1 Create a blog post

Once you are logged into your WordPress website, you will have a black bar at the top of the screen with all the options you have at your disposal.

Elementor Blog Post Step 01

From the top tool bar you will have a drop down menu under +New. This will allow you to create content for your website. Blog stories come under the Post category. Select this from list.

 

Step 2 Give your blog a title

Give your blog post a title that best describes what your article is about. The best way to go about this is to think about what you would type in Google to found out about the subject you are about to post.

Elementor Blog Post Step 02

 

Step 3 Save a draft 

Once you have you SEO friendly title in place you can save a draft of your post. It is best practise to do this before you publish so an unfinished blog does not get out into the big wide world before its ready.

Elementor Blog Post Step 03

 

Step 4 Edit your post with Elementor 

This is where the fun starts. You can now switch to editing in Elementor instead of the basic WordPress editor. The post will still be in the default template mode but will have all the possibilities of a Elementor page.

Elementor Blog Post Step 04

Now you will have all the tools we have when we create your website to create your blog. As we would have created all the rules on how the web site should function all you need to do is type away and drop a few images in… well kind of.

Elementor Blog Post Step 05

 

Step 5 Add text to your blog post

Time to get you opening paragraph in to the blog. Drag the Text Editor element on to the deposit areas on the blog page. 

Elementor Blog Post Step 06

You will now be presented with the text editor with some Lorem ipsum dummy copy. Delete this and we can start getting you blog post started. There are a few rules you will need to follow in order for your post to look good for Google and help it with its ranking. Just like with a book headers and contents play a part in blogging good practice.

 

Elementor Blog Post Step 07

Here comes the science

The title of your post would be the name of the book, the thing that makes someone want to read it. This is know as the H1 TAG. You can have one of these only so the search engines now what your article as about. You then use  H2 TAG’s in the same way contents work in a book or magazine.  So with the Get Fit Stay Fit Norfolk blog post in the example the phrase “Shoulder Trauma” was selected as the term that Google would be offered as a search term. This is the SEO (Search Engine Optimisation) that we will use throughout the post to allow it to be listed under that phrase.

Elementor Blog Post Step 08

As we have already set up the type formatting for the site the when you add headings they will automatically take on the look assigned for headings, one less thing for you to worry about. As you can see the text in the editor on the left shows the unformatted text but the preview on the right has picked up the typography we have assign for the H2 TAG. 

 

Step 6 Add an image to your blog post

Its always a to have images throughout a blog post. It helps to break up reams of text and is another opportunity for a little bit of SEO. In the same way we added the text box to the blog we and drag in the image element.

Elementor Blog Post Step 09

When we created your website we would have set rules on how images would work on your site. This goes for on page images and your featured image which we have covered in another blog. Its not just a case of dragging a picture in from your mobile phone… that just wont cut it.

Elementor Blog Post Step 10

When adding images to your website its a must to make sure they tie in with the content and are not larger than they need to be. When an image will be displayed full width on your web site the default size will be pulled from the theme settings. You can format any pictures you want use in a free site called PIXLR. When you save your new masterpiece you need to have the search terms you used in the file name. Lets face it IMG1234.jpg gives nothing away about what the picture is of. 

Elementor Blog Post Step 11

Now you have your image ready to go in the body of your blog post and can click on the dummy image place holder on the left hand editor and you will be prompted to import your image. You can either drag the file on to the import media panel or click the file rester, which ever is your prefered way of getting a file in to a document.

Elementor Blog Post Step 12

Here comes some for of the science… As we created a file name that reflects the content of the blog post title we can edit the properties of the image and how it will be indexed by your website and searched by Google. Images must have an ALT TEXT this will also include the SEO search term. Then you have the option to add a caption for image. This can be displayed in the image to inform of any credits or copyright normally. Its now alway required to be displayed on the screen and can mess with a clean look.

Then you can add a disruption for the image. This is not displayed on the screen but it indexed on the site and crawled by the search engines. Again its always good to have the SEO term listed in here as well.

Elementor Blog Post Step 13

If your image refers to another page on your website and a link on another site you can add a hyperlink here. You should always have links on a web page or blog post both to your own website and an external site or social media content. Google uses this to see how your brand is working. We used this in this post to good effect. We have linked to a couple of our own services and also a external link to the Get Fit Stay Fit Norfolk website.  We also like to make any external links open in a separate browser tab so we dont take the viewer away from your own site if they choose to follow the link.

Elementor Blog Post Step 14

Now you’ll need save all your hard work. This can be done by simply clicking the green box at the bottom help of the screen. If you have not already published your page it the green button will say PUBLISH, if you have come back to makes some edits to your blog post it will say UPDATE. You must click this button to ensurey you do not loose all the work you have done. 

Elementor Blog Post Step 19

You are now ready to add the finishing touches to you blog post.  You will need to add a featured image. We have an article on creating the perfect blog post image in our how to articles, Check out how to create your post featured image. It is well worth a ready to make sure your imagery performs on all the devices it could be view on.

 

Step 7 Add a featured image to your post

WordPress websites use the featured image as an eye catching way of getting your blog posts noticed. The featured image will also be used when a page or blog post is being shared on social media. As you have been editing your blog in Elementor you are going to need to get back the the WordPress dashboard for you post. This can be done easily by clicking on the burger menu at the top left of the screen.

Elementor Blog Post Step 20
Elementor Blog Post Step 22

When you get the drop down you will have the option of EXIT TO DASHBOARD. Click this and you will be back on the wordpress side of the post. Now you will have the option to add the featured image at the bottom right of the side bar on the right of the screen. 

Elementor Blog Post Step 22

Click the Set featured image link and you can select the jpeg or if you are using the new and smaller format for images WEBP file.  After a couple of seconds you will see the featured image showing.

Elementor Blog Post Step 24

Okay, that is it. You have created your very own blog post. One last thing you need to do. At the top of the right hand side bar you will the the Publish details for you post. Click on the Update button and Bobs you uncle. Your blog post is ready to view and share with the world. Happy blogging and we look forward to seeing how you get on creating your own blogs.

Elementor Blog Post Step 23

Creating your own WordPress Blog Post Featured Image

Pixlr image editing online steps

Okay, so you’ve got your gleaming new website and you want to add a WordPress blog post or product.

If you’ve had us COG media design your website we’ll have created rules and templates to make you’re life easy…. Honest. We would have set up the frame work for how images are used on your site so it always looks its best. We appreciate now everyone has the Adobe packages we use to create your site so we’ve created a crib sheet to help you on your way.

Before you get to post.

When taking images you’re going to use on your website it always good practise to shoot landscape not portrait. This will allow the images to work well on desktop browsers. But mobiles view sites vertically I hear you say. This is true but our thinking is you can still have you image on the screen and text or information abo9ut the image. The web site development system we use handles images intelligently, which is where are next nugget of advice comes in to play.  When you’re taking you’re photos try and keep you focal point in the centre of the image. so if you have a picture of a product, staff member or award.

landscape not portrait


Affordable Photo Editing

As we mentioned we get that not everyone will have access to the industry leading Photoshop from Adobe so we have a FREE to use online tool. Pixlr is a web based image editing platform with will have your images blog ready in no time. When we create your WordPress site you’ll get a Photoshop PSD file with branding options included which can be imported into Pixlr.

When we produce a  WordPress template for your website, a set of rules to allow a continuity across the look and feel will be put in place. This could not be more important than with blog posts and product images. For the purpose of this blog we use 1200 x 500 pixels.

 

Step 1

If you dont have Photoshop head over to Pixlr X. Follow this link and you’ll be ready to go. https://pixlr.com/x/#editor. You’ll be presented with the welcome screen. Press the open image button and load up the Photoshop PSD or file you want to work on. 

 

Step 2

We are going to continue using our Photoshop PSD file you would have been sent through for a blog featured image.  The demo file we have produced has branding in it as a layer with transparency. Great for keeping that corporate look across all your blog posts.

 

Step 3

Your are now ready to add your image that will be used to promote your blog post. Use the add element / image option the the left hand side of the page. 

 

Step 4

Ignore all the extras being offered to you and go for the add media option, We’re not going to teach you to suck eggs on how to find and load your images. 

 

Step 5

When you import an new element into any package it will usually end up as the top later. As we only have one layer it doesn’t have much of a choice. 

 

Step 6

Firstly we need to get the branding showing on the image (if you are going down this route. Pixlr is no different to Photoshop in ordering the layers. Simply click and hold the mouse button down and drag the image underneath the branding layer. 

Step 06 Pixlr drag image layer down
Step 06 Pixlr drag image layer down part 2

 

Step 7

This is where you get to be artistic. As you should NEVER use photos straight from your camera as they will be far to big for the browser. But more importantly will rank poorly with Google when it comes to your search listing. The bigger the file the longer it will take to download. Lesson over back to the point in hand… Click the zoom out button to get you out 20% 

Step 07 Pixlr Zoom out

 

Step 8

Once you zoomed out you will be able to see handles that will you resize and rotate or image to the desired position. Click and hold the mouse button an any of the corner handles and drag away. Pixlr have made it easy for you to lock the aspect ratio so your image will not distort by holding down the shift key on your keyboard.

Step 08 Pixlr resize your image

 

Step 9

If you need to fine tune your image to get a horizon level or add a bit of flare to your featured image.

Step 09 Pixlr rotate your image

 

Step 10

When your masterpiece is ready you can save the file ready for the next important step to keeping Google and your hosting company happy. As the adage goes, size is important and in this case the smaller the better.

You will have a couple of option at this stage which we can throw some light on. There is a new kid on the block when it comes to images on the web. WebP is a impressive image format and one you may not have come across before. it supports solid images like jpegs and images with transparency like PNG all in one format. Sounds great but not all browsers supports them. Prime example is if you are running a older Mac that wont allow you to update for safari browser you will not be able to view WebP images… That is a decision you will ned to make. All its not lost as we can help with the reduction of the file size with another free to use website. So for our featured image we are going to use the Jpeg options with a medium amount of compress. Your image should still look good at a reasonable file size.

Step 10 Pixlr save your image