Using MotoPress in your WordPress Website

Sep 24, 2015 | Responsive Design, WordPress Plugins, WordPress Wednesday

If you’ve ever needed a great and EASY page builder to help you create better page layouts for your WordPress website – we’re going to suggest you check out MotoPress. Here’s a video to show you the basics on how to use it. If you’re interested in purchasing Monstroid the theme we’re talking about from – here’s the link and remember to use Coupon Code “webtegrity” to receive 20% Off your purchase.

Full Video Transcript by Mally LaPete

Hey, y’all. Welcome to another WordPress Wednesday. My name is Kori Ashton. … but … you probably already know if you’re a subscriber to my channel, today’s not Wednesday. Today is Thursday.

Just yesterday I gave a review about a Theme from Template Monster called Monstroid. I’ve gotten really great feedback from everybody. One of the things inside of this incredible theme that I wanted to talk about is MotoPress. That’s this content editor. We’re going to get into that today. I’m going to walk you through and give you a very quick overview of how to use MotoPress. I’m telling you, it’s going to revolutionize the way that you’re building out your website. Super simple to use drag-and-drop environment.

Monstroid, if you don’t know what this theme is about yet, I’ll put the link right here for you. Go check out my review on it. It really is probably one of the only themes you would ever have to purchase. It has WooCommerce inside of it. It has some preset total designs that you can choose from. There are child themes that you can choose from. Immediately, all the demo content is sitting in there for you to make all sorts of edits to. And it looks just like the demo version literally within minutes. And I walk you through this in this link right here. So be sure to check that out.

Now, if you’re interested in purchasing this, I have the link in the description box below. Be sure to use the code WEBTEGRITY to get 20% off. Template Monster was very kind to set that up for us so that y’all can get a little bit of money off. But, the other thing that you get inside of this is a premium plug-in called MotoPress. It’s normally $29 [US]. If you’re interested in buying this just by itself, I’ll put the link in the description box below. Check that out. You can purchase this and put it inside of any theme out there. In my opinion, it should work.

There might be some theme conflicts, especially if there are other page builders inside of an existing theme but you could use this builder … I’m going to use this builder on 2015 which is a free WordPress theme. Stay with me. Let me show you exactly what this does. Normally, when you come to your page, you’re going to see a bunch of nerd code or just regular text. This is called short codes. If you’re watching our channel, you understand what short codes are. They’re typically inside of brackets just like this. And they cause something to happen, some sort of greater function to happen inside of your page.

Right now what this is doing is it is saying that it should be in columns. Well, a lot of plug-ins already do that. They already make you lean on dropping in short codes. That’s not what MotoPress does. It writes it all for you in a drag and drop, Wysiwyg environment. You get this page or post which now comes with this button here that says MotoPress Content Editor. When you activate this (click on this) it builds the page out for you and gets you this environment. This says drag objects here (from the left side over here) just drag them here and begin to build your page. Or you can choose from one of the pre-defined layouts. I’ll come back to this toward the end of our tutorial here.

But these are just as incredible. They immediately put in these layouts for you and you just click on them and move forward. Let’s go ahead and start with something. Let’s add an image, drag and drop it here. I want the image to be full width across my screen. So I’m going to do that and just click Set Image. Now you’ve got some options over here. Do you want it to be full, large, medium, thumbnail. You can have a custom size. You can link the image. You can have that link open in a new window. You have alignment things going on here. So, just clicking on that, and then clicking off of it. That’s all I’ve had to do. There’s my beautiful image.

Let’s say now I want to have some really nice, large text down below it. I’m going to come over here to the Tee area for text options and grab a title and just drag and drop it down below. Let’s just say “big text here.” I’m going to click off of it. So there’s some big text. What if I wanted that centered on the page. I can just double-click and it activates the editor, and just choose center alignment. And there it is, nice and centered on the page. You’ll notice though as I was dragging this over, it gives me an option automatically (you see here) it says column or as I drag down below it says column there, or drag it here and do a row, or do an insert. It gives you all sorts of options here that you can place these things in different areas.

Let’s say I just add a second one, and I didn’t really mean to do that. Well, up here at the top, is delete object. Clicking that deletes it, removes it from your layout. I know, we’re not impressed just yet, right? A lot of page builders move like this. One of the things I love about MotoPress is that is cleans out your dashboard. Nobody is distracted with other navigation going on or what options happen here on the right side, typically. It’s just a clean page for you to play with. Let’s get creative. Let’s go in here and add a paragraph. I’m going to grab this and drag it down below and make a new row out of it. I’m going to type some text here. Let’s put a comma, and make this area kind of larger with more text here. And just for the sake of giving it more room, I’m just going to duplicate that a little bit and make it a nice big text area.

Now I’ve got some text going on with big text here and here’s a big picture. What if I wanted this to be a two-column layout, more like a newspaper scene (side by side). Let’s see how easy that is. I’m going to grab another paragraph area here and come here. Notice immediately it says “column.” Drop it there. I’m going to paste in the text and make my columns running side-by-side. That’s kind of impressive, right? What if I wanted a two-thirds, one-third? Or maybe three or four columns. You just simply continuously drag and drop, drag and drop.

Let’s say on this particular one right here, I want it to kind of be two-thirds and one-third, so I’m going to just slide that over and see how I expand that out by just grabbing and dragging it over. And now I have more of a two-third, one-third option here. I love this. It’s so cool. Let’s get more advanced. Let’s come up here and do a quote area. Maybe I want a quote between these two. And let’s say, “Loving me some MotoPress.” Let’s me cap it for them…MotoPress. And I’ll put my name in there, our company name [WebTegrity]. This is how you spell the coupon code for Template Monster. “Loving me some MotoPress.”

Let’s see what we’ve done here. I’m going to preview it on the front side of our website. Remember that we’re using 2015. Here’s our page title. Here’s our beautiful picture. Here’s our quote pulled out here. Here’s some big text here, and our two columns. You want to see if that’s responsive or not. Let’s drag that down and show you that it is. Let me grab the screen and drag it around. Hold on. Wait for it. Here you go. Shrinking it down you are going to see everything gets into a beautiful, singular line. So it’s fully responsive. Hold on. I don’t really like how this quote is kind of sitting up against this image.

Let’s see what we can do about improve that. There is something right her. Space. Grab that option and drag it up and kind of insert it there. I’m just going to tell it to put 50 pixels in there to kind of move those apart in there. Let’s go even more advanced. Don’t be bored yet. Let’s go more advanced. Let’s go do some tabs. This is super cool. Drag and drop it right here. It’s going to immediately give you two options for tabs. The first tab … Let’s open this up and say “Services.” You’re able to have whatever text you want in there. Maybe we want an icon to kind of make this really look polished. We can put that all in there.

Just read through all these different options. You’ll see what all you get to make this look really spectacular. I’m going to do “About Us” here just so you’ll be able to see. I’m going to show you an icon we can use. Maybe a person there. And let’s change that icon to red. Really cool red. And, if you want it to be active instead of the “Services,” you can start with it being active, and then you would just click here to continuously add more tabs. Maybe we add another tab that says something like, “3rd One.” There’s a 3rd one. And you can put whatever you want to in there. Fun stuff. Once that’s done, you just click off of it and it has built it for you. Let’s preview this and see this on the front side of our website.

Scrolling down, here are our tabs: About Us. 3rd one. There they are. I didn’t have to write any nerd code. This is doing it for me. If I wanted this higher up, it’s just a matter of dragging and dropping. You guys, MotoPress is spectacular! It’s endless what you can do with it. Monstroid.

This theme over here has basically built every single page using this plug-in. So, you can see, that you can do parallax images behind the scenes, and have some cool fonts hovering over it. You can see the two-thirds, one-third layout. You can see all the columns with the pictures in it with the lazy load as it goes here. All of this has been built using the foundation of MotoPress and of course the Cherry Framework.

Be sure and check that out. I’m putting links all over this in the description box below.

I hope you are just as wowed as I am with it.
I’ll see you next WordPress Wednesday.
Be sure to subscribe to our channel.
Bye bye, y’all.

Part 2 – how to use predefined layouts

Full Video Transcript by Mally LaPete

Hey, y’all. This is part 2 on MotoPress because I forgot to mention in the last video (and if you missed that, I’ll put the link right here [pointing down] how to do these page layouts, these pre-defined layouts.
If you’re excited about using a page builder, and you don’t know what MotoPress is, I’ll put the link in the description box below. It is a premium plugin you can put inside of any theme. There might be some exclusions to that, considering that some themes already come with page builders. There might be some plugin conflicts.

This is the price [US] it would be for one website: [$29 personal, $79 business, $139 developer in October 2015] one license to put inside of one website. The theme I’m using right now for the example is 2015. It’s a free theme. I’m plugging it in.

This is a continuation of the last video I just did that walked you through how to use MotoPress completely. I want to show you what these pre-defined areas look like. This is comparable to what we were just building. Let’s do one where it’s something like this. This is pretty cool for a landing page. Just clicking it immediately activates it and puts the blocks here for me now to just kind of fill in the blanks, if you will. They did all the hard work with setting up the columns (if it’s hard; I don’t know). MotoPress makes it so easy.

They’ve got pictures and verbiage in here. Literally, this is all you do. I’m just going to click on it and it’s going to allow me to add a picture. It’s going to choose from my library. We’re able to go in here and grab anything we want from our own library. Set the image. It’s going to give me options here for large, medium, thumbnail, or custom size. You can play around with that and those options. Do you want this image to link anywhere? You can choose those options here and what alignment you want. Clicking off of it. That’s all it takes, and that’s set.

Coming down through here, this is all you do. Double-click on the options and go to town figuring out what image do I want to put in there. Watch this happen. I’m going to click on that image. Go in here. And let’s go grab this one. Set image. I’m going to leave it just like that. Click off. Double-click here. You’re going to get to see how quickly I go through here and just build out this page.

Of course, it’s going to put in the images in the exact size to make them look beautiful and match. Check this out. Isn’t this amazing?! Just a little bit taller there. You can do a custom and shrink that down if you wanted to or enter in the size that you want here. I’m not sure. Let’s just do 150×150. That’s more of a square though, huh? So you can see how tiny that is. I love it. I think that these options are just incredible to kind of tinker with and play around. If we want to change the verbiage we just double-click in that space, highlight it, and go to town making changes.

Let’s say for some reason that we wanted this to be 3 columns and this area to be maybe just 2, we can click in here and just delete object. That takes that out. Click in here. Delete object. And now we’ve got 2 columns and 3 columns. I know that I’m moving very quickly. You can pause this video, and walk through this easily and quickly. Just go through. Add whatever you want. Play around with this.

If you have any questions, put them in the description box below. I will say: If you have any conflicts, please don’t try to email me. I’m not the trouble-shooter on this. Be sure that you get full support for a year from MotoPress with your purchase. Be sure to connect with them. They’ve got all sorts of options over here. They’re very attentive.

I hope you’re going to nerd out with me and have all sorts of fun with MotoPress. If you’re interested in buying it, I’ll put the link in the description box below.

I’ll see you next WordPress Wednesday. Bye, y’all.