WordPress Posting with Visual Composer

WordPress Posting with Visual Composer

Hi! This is Dan Haak from bloom360 and you and I together are gonna be hanging out, and what we’re gonna be looking at during this e-session? We’re gonna be playing with some basic WordPress blogging. We’re gonna create a post and we’re going to add some text and some images. We’re gonna make a hyperlink or two and we’re gonna at the end admire our handiwork, ‘cause that’s just how we roll.

Alright. So, here we are at the website right now. This is the website that we’ll be using as an example. It’s a nice simple blog. What we’re gonna be doing to go…we’re gonna be going into the back-end and that’s where we’re allowed to create posts and create content and so on and so forth. The way that we get into the back-end is we take our usual URL and we make a slash and we go to wp/admin. So, having done that is gonna take us into the dashboard. Now, normally you’d be presented with a user id and password prompt; I’m already logged in, so we didn’t get that just this time. Let’s just have a quick look at the front-end one more time and I’ll just show you a post just so you can sort of see what’s going on before we get too far into this.

So if I open up one of these posts here, just click on the title and that’s gonna take us into the post screen. Alright, so you can kind of see what’s going on here. We’ve got some text and we’ve got some images and we’ve got a video. Through the powers of Visual Composer, the page is divided up into columns and that’s why it’s looking a little bit funky at the moment, but that’s OK. We can play with that stuff ourselves. Alright.

So you’ll notice over here, on the right-hand column, we’ve got some categories and we’ve got some tags and some other stuff as well. Categories and tags you should take notice of because we’re gonna be looking at those in the next few minutes. Alright.

Getting back into our Dashboard. Remember that most of the stuff here on the left-hand column you’ll never gonna need to touch at all. Very, very complicated stuff. Well, I shouldn’t say so but lots of it is very, very complicated stuff you’re never gonna need to touch but what you are gonna touch is Posts. So if I click on that, the first thing that’s gonna happen is we’re gonna be shown a screen full of the posts that exist in the system right now. If we have a look at these titles, you’ll recognize these from our blog list screen we were looking at just a few minutes ago. What we’re gonna be doing is we’re gonna be adding a new post.

Alright, so there are a couple of ways that we can do that. There are literally two ways that we can do that. We’ve got a Add New button here and there’s a Add New button over on the left-hand side as well. Either one is fine, just click on one of those, and we’ll be off and going. OK. So here we are presented with a new Posts screen, completely unpopulated as of yet. You can see that Visual Composer is ready to go. We’re gonna have a look at that in just a second.

The first thing that we add for a new post is a title. So, “Another amazing post” is gonna be our post title and like I was saying a second ago Visual Composer is ready to go. You can see here there’s some pretty ordain layouts. You can play with those on a rainy Sunday if you’ve got nothing better to do; we’re not gonna be going into those right now. Basically they just create rows and columns in a nice layout and save you a couple of minutes if you like that sort of thing.

Alright. So Visual Composer gives us the long road, which is Add Element and the short road which is Add Text Block. So we’ll just click on Add Text Block. OK. And you can see what it’s done. It’s created a new row in Visual Composer and put some text in. So we’ll just add a bit more text and we can do that by clicking on the pencil to add it in the first place and now I’m just gonna copy the text that’s here and make it a bit longer so it looks like we’ve actually done some work. These are nice paragraphs. OK, so we’ve got the paragraphs. We’re looking pretty cool. OK, not bad! OK. So we’ve got some text and what we’ll do first up is we’ll just publish that and we’ll admire our handiwork. And then we’ll have a look and see what’s missing and we’ll tick things off as I go. Alright.

So you can see that the system has gone and created a URL based on the post title and that’s all very good. We’ve got this button here that says View Post and if I right click it at least on my PC, we can open up a new tab and we can keep two windows open. OK. So we can see we’ve automatically got a title, we’ve automatically got a comments form down here, we’ve automatically got the date. We don’t have to worry about that. And it’s all looking pretty good. We haven’t given it any categories at the moment or any tags and if we go to the home screen right now, what you’ll also gonna notice is that it’s missing a thumbnail image. So these are things that we need to look at. So the total is categories, tags and thumbnail image. Alright. So let’s fix all that up right now. Let’s get rid of this one. OK.

So first thing is we’ll give it some categories and we’ll say it’s Blue and it’s in Colours. And tags is “new post” and we put in a comma to make more tags and “cool things” and the next one is just “awesome”. OK. Click the Add button and we’ve got our tags. OK? All looking very good, you can see that that’s tag there. I can add one tag by itself at the same time if I want. OK. So one tag and you can see a single tag is added in there. Alright.

So if I scroll down a little bit further, you can see there’s a button here that says Featured Image. I’m gonna click on that and what this is gonna do is gonna set the thumbnail. Alright. You can see that we’ve been brought to our WordPress Media Library. This is where every image that has been so far uploaded into the website goes and we do have access to even old images that have been uploaded. Let’s just select one of these. That will do. You can see the image’s lined up and ready to go. I’ll click Set Image and you’ll see here there’s a thumbnail down at the bottom corner. Alright. So let’s click Update Now. OK. So we click Refresh here on our post. Alright.

So you’re not gonna see much of a change here, but if I click on one of these tags here – you might recognize some of these – cool things, there’s one that we just used a second ago. Alright, and there’s the post that we just created just a second ago and it’s got a thumbnail. If we go to the homepage, we’ll see that our post now has a thumbnail. So it’s important that you set a featured image. OK? Otherwise, things are gonna look a bit weird, like this one down here. It’s not looking all that crash all. OK.

So, let’s do a little bit more work on the post. What we’ve got so far is we’ve got some text. We wanna add an image as well, so I’m gonna click the little plus sign which exists within Visual Composer and this is gonna open the Visual Composer Element Library. What we want in this case is a single image and if you don’t know much about Visual Composer, we do have a video that’s able to explain that to you a bit more. Alright. So the first thing it’s asking for is an image so I’m gonna click the little green plus button and it’s gonna open our Image Library once more. I’m gonna click that image. That one’s very good. So it says Set Image and in this case the image size, which is important to set; we’ll take large. No, no, full. Full is good. So we actually have to type that in. The keywords that you would enter are here. Otherwise, it’s also explained down below that you’re able to set a size by pixels. That’s length by height. So click Save Changes.

We can see that our single image is queued up and ready to go. I click Update and if I click on Another Amazing Post, which is the post that we’re working on right now, we’ll see that our image has gone in. There’s a nice skinny one, that’s just the way it was. But that’s pretty good, isn’t it? It’s not bad.

Just one quick thing before we go, let’s play with some columns a little bit. So let’s add a row, so I’m gonna click the Visual Composer plus button here. So I’ll add a new row. Always remember you’re able to divide into columns and we do that by playing with this button that’s just here. There’s a button here that says half-half, so I do that and you can see that our new row has been divided into half-half. And of course, we’ve got our Visual Composer control here which allows us to drag & drop. Oops, missed it! We’ll just drag & drop into a column and you can see that the text has gone into one column now. I’m gonna copy this text just ‘cause it’s gonna save me some time and then I’m gonna put this text into. Oops, a little bit hard to grab it sometimes. OK, we got it eventually. OK. Alright.

So, we’ve got two columns of text and now we click Update and we’ll check out what we’ve got. OK. Click Refresh out here on the front-end and we’re looking pretty good. We got two columns of nice text, we’ve got an image here at the top and everything’s cruisy. So, remember we set some categories and we set some tags. We set a post title and that came at the top and yeah…

So, hopefully that explains everything that you need to know about posting to WordPress and if you have any questions just hit me up here at bloom360. Talk to you later. Thanks very much. Bye-bye.