In Part I I started showing you some thing on layouts. We are continuing our two-part series on the advanced layouts with Visual Composer.
Full Video Transcript
Hey y’all, welcome to another WordPress Wednesday. My name is Kori Ashton and today we are continuing our two-part series on the Visual Composer. I’ve already taught y’all a little bit about the overall of what the Visual Composer can do. I have a link to that video in the description box below. But, the other video I had, started this two-part series on taking a simple theme like this one behind me here.
This theme is called Olsen. O-L-S-E-N. Olsen is the WordPress theme that I’m using here. It kind of has a very minimalist approach. Very simple, very clean layout structure. Sometimes, you wanna have a little bit more of a wow factor to your website; but, you don’t really want to change the template. So, you can do cool stuff by having a page builder inside of your WordPress website.
And the page builder we’re talking about, of course, is the Visual Composer. That’s this one right here. It’s $34 and I’ve already started this tutorial, teaching you how you can take this exact same template and turn it into a page that looks like this.
Look at this, you guys. It has the full-width, parallax. We’ve got three columns. We have this Mother Theresa quote here with the color behind it and this really cool masonry blog area. Again, this is the exact same theme.
So, how do you do that? How do you make something really cool like this? I’ve already started this tutorial. The link to that video is in the description box below. I taught you how to make this parallax area here and these three columns. Now, I’m gonna continue on, on how to make this break out blockquote area and this post area in the masonry grid.
So, let’s get to it. Of course, we’re already working inside of this page. We have our “Call to Action” area up here. We have our three columns and now we just want to click plus (+). We’re gonna add another row and, of course, we want this row to have this blue color here.
So, I’m gonna just grab that blue color code. We’re gonna go back here. This is how you affect the background of this row. We’re gonna click the pencil icon. Of course, last tutorial I taught you about this stretching the row option, and then, we want to have design options and put a background color on it.
And, of course, I have that blue color on my clipboard. So, I’m gonna click “Save Changes”. And now I’ve got this little blue dot sitting right here that allows this whole row to be stretched across the full width and have that blue background.
Now, I want to put our quote inside of it. So, I’m just gonna grab that quote here and put it on my clipboard. Copy.
And we’re gonna go into our row and we’re going to add a text block. Of course, it has default text. So, we’re just going to put this in there. And…capitalize here. So, that looks good; but, of course, this is way small. It’s not in the center and we want to just add some formatting to it, so I’m going to click “Center”. I’m gonna take it up to an H1 to make it nice and large. We’re gonna put a break in here, so that Mother Theresa will be towards the bottom. And, of course, I need this text to be in white.
So, if you don’t have this secondary row here, you want to click the toolbar toggle icon. That will open up these additional options. We want to click “White”. Of course, in this preview, it looks like it disappears.
But, it’s sitting there. It’s white text. I’m gonna click “Save Changes” and of course that’s gonna sit in this area. I’m gonna go ahead and click “Preview” and see what we’re doing on the front side of things. Here’s our parallax, there’s our three columns and here’s our beautiful quote area. So, I love it.
Let’s look at what we’re going to do for our masonry grid area. So, I want to add another row. So, we’re gonna click plus (+) and we’re gonna say “Row”, and we are going to stretch the row. We might even stretch the content. Let’s see what that does for us on this. Why not? That might be kind of cool. To just see what happens. Let’s also put a photo behind this. I’m gonna do a parallax photo behind all of these, just to give it some color and have it not be on just a plain, white background.
Who knows what background…How about this one? I like this one. We’re gonna do that one. “Set Image”, let’s do that. Who knows how this is going to look? Let’s see. “Save Changes”. So, that affects now, this row and the background. I want to put our grids on top of it (Our most recent blog posts). We are going to choose this one. “Post Masonry Grid”. There are different options; but, this is the one we’re going to go for. “Post Masonry Grid”
Now, again, sometimes my students and even our YouTube fans don’t read what happens whenever these windows pop up. Stop for a second and just read down the options; because, you might want this to look different and you’re not sure how to make it look different. You just tinker and play with these different options. It will help you.
We do want post to come here and display how many items total. We want 6. We want to display all. Sure the style. Why not? How many items per row? We want 3 happening per row. How much space do you want between each one? Up to you.
Initial loading animation. Do you want it to fade in or have just default? That’s up to you again.
Do we want to show a filter? Do we want to have a load more option? We could do that. How many posts per page? Let’s do 12, so that we’re staying consistent with our math here and just click “Save Changes” for now. Let’s see what we’ve got. I’m gonna click “Preview”. We’re gonna go back up over here. Here’s our testing parallax. Our three columns. And, check this out. You see our picture back here? You see our picture back here, so it’s not a white background?
And here’s our cool masonry blog area with our footer. You guys, that’s how cool the Visual Composer can be and I hope this helps you to stay tuned.
Be sure to subscribe.
Every single WordPress Wednesday we’re releasing some sort of video like this for you. I have over 200 videos sitting right here on this YouTube channel that can help you improve your online marketing.
Have a great one. Look forward to hearing from y’all.
Give us a shout out over on Twitter or come over to our website and schedule a call with me if you’re having questions about the Visual Composer. I’d love to talk with you. Bye bye, y’all.
How do you find Images that are free or legal to use on your WordPress website? Kori gives you a few resources to make that step simple.
Hey y’all! Welcome to another WordPress Wednesday. My name is Kori Ashton here at WebTegrity in San Antonio, Texas.
You guys, I’m so sorry that I missed last week. I missed y’all and I know you’ve chimed out to me on Twitter and on our YouTube channel here even commenting that you miss me. I’m sorry! As you can see, I’m in a totally different office space. That’s what we’ve been doing. We’ve been moving office spaces (nightmare.) Anyway, I can’t miss another WordPress Wednesday so I wanted to pop in here just this week and give you a couple of my favorite resources for finding stock photography.
Photos can make or break your website. If you have cheesy photos that are distorted, or kind of pixelated, or because you had a such a tiny image you took with your cell phone you had to blow it out of proportion-just don’t do it. You want to invest just a little bit if you can into some really great images. While (personally) stock photography is not always the best option because google loves seeing fresh photos, original content, your content. Right? You can always just do that by taking a quick picture with your cell phone of a happy customer or take a quick picture with your cell phone with (you know) a really cool hamburger if you’re a restaurant. Whatever it is, take a great shot from your cell phone.
If you can’t do that though and you’re like,”No I really want to lean on the professionals to get my website looking spectacular.” Here are a couple of websites online where you can go do that.
Alright. So let’s check this out.
There’s (of course) in the Envato marketplace, there’s one called ‘Photodune’ right here. So you can check that out. You’ll just go to photodune.netand come see some really great images. One of the things I like about these guys is if you have a budget of $1 you can buy a photo here. What that does is it gets you license to use that image (basically anywhere without re-selling it)and you can use it in your website if you buy a large enough size for $5 you can use it in print. So in your brochures or whatever you’d like so that you’re keeping that same beautiful branding across the board wherever people are finding you whether it’s on your Facebook-all your social media. You can use it that way, alright. You’ll want to checkout photodune.net.
There’s also Dollar Photo Club. I’m trying to keep us in the budget (right) and figure out if we can just afford a couple of bucks to get some really nice images. Very typically across these sites you’re going to see that you can buy smaller images for $1. If you want larger images for the fullwidth size (where it’s spreading the fullwidth of the screen like this example) then you want to buy the larger size and have it fit in there.
There’s also istockphoto.com. These are going to get a little bit more pricey though. This is a company by Getty Images. You’re definitely going to be spending more dollars here but these are a little bit more elites they’re not used as often because they are more expensive and you’re going to have a lot more to
choose from here.
If you’re doing a search, what you’re looking for are royalty free images or ‘stock images.’ That’s the phrasing that you’re looking for so that you can legally use these images once you purchase (basically) a license for a couple of bucks to use these images.
Then there’s also this one which I just think is pretty spectacular because of its name. It’s called ‘Death to Stock.’ It’s basically the fact that stock photography sucks and this company decided to go out and find some really great photographers that are creative and resourceful and just kind of give us a totally different look so you can pop in here and checkout all the different photographers and their style and grab some of their images for a very reasonable price as well.
So, I hope this helps y’all. I hope you take time to really invest in quality imagery for your websites. Truly that’s going to set you at a different level of professionalism to anybody who visits your website. I hope that helps and I hope you’re sticking with me in this awesomeness of WordPress Wednesday.
Be sure to click on the ‘subscribe’ button and I hope to let y’all see my whole office here evolve into the crazy creation that I ultimately love to have around me.
You may be missing an entire area on your website that could increase sales and drive conversion. The footer area on your website can be key in creating the best possible user experience. Think about it – where do you search on a website for contact info? Typically the top right-hand side or the bottom… If you haven’t built your website to have some great options in that footer area – you might just be frustrating visitors. Let’s fix it!! Watch this video to find some great ideas for content in your WordPress footer area.
In 2014 we saw pretty much every website have this rotating slideshow on the home page that companies would bog down with 3, 5, 10 slides. First of all – that drags your load time down drastically and the truth is – who is going to sit and watch those slides? No One! So ditch the slideshow and use great professional photography instead. Large photos (that load quickly) are the new 2015 trend.
#2 Large Fonts
Typography will be another focal point on websites this year. As we see more and more clean and simple websites appearing we find LARGE FONTS becoming eye-catching and really user friendly – giving them instant confirmation that they’ve found what they’re looking for and giving them clearer navigation.
We’ve all been told that Content is King. But the question came to us over and over in 2014 – how much content do we need? What’s the magic word count? Our answer to that was always – The perfect text count is when you’ve told the story. Don’t beat a dead horse, but also don’t have such slim text on a page that you waste a user’s time.
This complaint would naturally be said, “But I can’t write 2,000 words when I blog.” Folks are getting around that by Storytelling. Not only is it more interesting for the end user to read, but it also is a very natural way to write. We’ve found that you can quickly go from 300 words to 5,000 – just by telling a story.
The end user becomes engaged quickly and will read and read, click and click to follow the story and become interactive… Goal Accomplished!!
#4 Longer Pages
As the blog article word count has increased – we’ve seen the page length predictably increase as well. This has been embraced by the end user and is once again acceptable. In 2015 we’ll see longer pages.
#5 Faster Loading Pages
With the larger images and the longer pages – you’d think that your website would severely slow down. However – website owners are going to push this year for faster load times. Hosting companies will start to brag and use as a selling point – their ability to load your website in under 2 seconds. That’s what you want! Faster if possible – and it is!
Be sure as you implement these new trends that you monitor your users’ experience and your analytics to gain insight directly from your customers. The last thing you want to do is frustrate them or cause them to lose interest in your website.
Monitor the time spent on the website. Monitor how many pages are visited per user. Be sure that any changes you make increase these numbers. Your bounce rate is another statistic that you always want to work toward lowering.
We here at WebTegrity hope that 2015 is a success for you online and that your website brings new business and more loyal customers! Happy New Year!
Would you like to start collecting email addresses and alerting folks when you’ve added something to your WordPress website? You can also collect email addresses to send out other email notifications like newsletters, sale ads & event notices. There’s all sorts of great reasons to collect email addresses and it’s done pretty easily. Check out this video for full details.
Let’s make your WordPress blog kick tush! Here’s some quick tips to improve the user experience on your website. If you learn how to use these different features on your blog – you’ll create a dynamic site that offers some fun visible engagement and easier navigation.
I’ll cover these topics in this video: