Save Dev Time Using Visual Composer | Ep.13


Hey digital fam, my name is John D. Saunders and in today’s Digital Block we’ll discuss the one tool to cut WordPress development time by 45%. Thomas Edison once said time is really the only capital that any human being has and the only thing he can’t afford to lose. It’s one of those things that when leveraged correctly can change how we leverage our day, our time with family, and the way we can be ultra productive in our endeavors. For my fellow workers developers, this is a significant tool to increase productivity. It’s called Visual Composer. Visual Composer is basically a page plug-in built for WordPress that lets you take full control of your site. So essentially you can build any data you want with an intuitive drag-and-drop editor with no programming – HTML with CSS. Comparing two similar small projects, Visual Composer cut development time by about 45%, not to mention it’s a simple page builder anyone can use, especially a #[1:04] business owner who prefers to be more hands-on with their site. I know we’ve always offered free tools for your marketing endeavors, and Visual Composer is usually bundled free with a ton of paid WordPress themes. They cost around 50 bucks. I’ll include a few links below to my favorite games that you can browse. However, you can also purchase Visual Composer as a stand-alone plug-in for 34 bucks. Trust me, it’s well worth it and will save you tons of time. So #[1:29] Visual Composer on a few of our recent web projects. Go ahead and log in to your Word press dashboard. Once you’re in your dashboard, highlight your mouse over Pages and hit All Pages. Let’s start with Home. Scroll down until you find the homepage and click it. Also, highlight your website URL, copy it, and open it in another window. That way, as you manipulate Visual Composer, we’ll be able to see it live on our site. Now go back to your homepage back end. As you can see, this is Visual Composer. Now usually, a page looks like this. You can see a lot of HTML code here. What Visual Composer does is converts this to a user friendly drag-and-drop interface. So if I hit back in editor again, it will take me back to the Visual Composer. And if you look at this page, and you look at our homepage, you can see that the formatting is similar. Here, there are four icons, text, and a paragraph. If I go back to Visual Composer, you can see that the same thing is here. Visual Composer mimics what’s on your live site with a drag-and-drop interface. The great part about having a theme with the data already in it, means that we can work with the current Visual Composer components that are on the site right now. So, for example, let’s look at the homepage. At the top we have this banner which is called the edge slider. If I go back to Visual Composer, I can see it right here. Now you have three options once you highlight your mouse over this content. You can hit the pencil to edit it. You can hit the clone edge slider. This will clone anything within the square. So if I wanted to add another banner under it or above it, I could do that by hitting this button. If I do, you can see that it duplicates the content. Now if I wanted to hit this button, that would thrash the current component that I added to the site. Now we’re gonna go over Visual Composer, but we’re not going to edit and add the content until the next lecture because I wanted to dedicate all our time to show you just how Visual Composer works. So, now that we have edge slider here, we can do a few things. Let’s say that we wanted to put these icons on top of the banner. You most likely wouldn’t want to do that but I’m going to do it as a test just to show you how it works. If I take this, click and hold, and drag up, you can see that it moves, and then release. Now you can see that edge slider is below the icons. Let’s hit preview. Now we can see that the icons are above our banner, and we did that in one swift motion. Let’s go ahead and switch those back. So I’m going to take edge slider and move it back up. To make sure that you’re saving your changes periodically, make sure you hit Update to update your page content to make sure that you’re saving your work. The structure of Visual Composer works like this. This area surrounding edge slider is a page section. This page section can be broken up into rows. If you highlight your mouse over this, you can break it down as is. You can do half, a third, a quarter, and when you click that button, the formatting of the page changes, and now the edge slider is only in this location. So for example, if we do preview changes just to see what it looks like, you can see that this only takes you one-fourth of the screen. That’s how we got these icons to work that way because we broke the page section into four rows. If I go back and I change this back to 1, you can see our content continues to stretch all the way to the right. Let’s scroll down a bit. You can see here that this page is broken up into 1, 2, 3, 4 rows. Rows make it possible to add columns in just one click. Just hover over the yellow paragraph at the top left corner of your row and select the layout you’d like. Let’s take a look at the menu items for Visual Composer. Here, this will take you to the website homepage. This button will show you your website templates. You can actually #[5:42] your template layout of your page. So for example, if we wanted to replicate what we had on the homepage, we could hit template name, home, and hit Save Template. Now, when we choose that option on another page, all we have to do is open template, click this, and it will add all the content automatically to our page. This is easy if you’re cloning content on other pages and trying to replicate it. There are also default templates, so you can append default templates to the current layout. You can add an #[6:16] tour section, a description with #[6:19] a description page. The possibilities are endless, and Visual Composer gives you tons and tons of content to work with. You can even have product breakdowns with an image, some text, and social media buttons. They really make it robust enough for you to do some really cool content. This button lets you add a new page section. If I click it and scroll to the bottom of the page, our blank page section is right here, and we can customize it with a few rows. Now another important aspect of Visual Composer are the page elements. To utilize page elements, you can either hit this plus button here and it will automatically add the element at the bottom of the page, or within your content you can hit the plus sign under an existing page element. If I hit plus, there are lots of options for adding text boxes, headings, social sharing, images, and galleries. Also, depending on the word pristinely compatibility plug-ins you’re using with the Visual Composer, you’ll be able to see more or less page elements. Since Jupiter integrates really well with Visual Composer, we have tons of options here. You can add a Google map, a pie chart, a flicker feed. You can put a message box, a scrolling image gallery. There are so many options to choose from it can be a little bit overwhelming. That’s why we chose to add and upload all the dummy data so you had a layout to work with that you could manipulate with your own content. You could click on any element to open the options for that element which ranges from choosing colors and alignments, to making decisions about slider transitions or recent post categories. So if I hit Button for example, I can choose the text that I want on the button, the URL I want it to go to, and if I want it to open in a new window or the same window. I can also choose the color, I can add an icon, choose the size, and then hit Save Changes. Now if I scroll to the bottom you can see that the button is right there. Let’s preview it. Let’s scroll to the bottom, and you can see that our button is right there. Now it’s not necessary for what we’re doing right now. We’re actually going to go back and delete this. The drag-and-drop element of composer also drops into different page sections. So if we wanted to add an edge slider to, say, above the icons, or if we wanted to drop it even lower above the fancy title, everything is interchangeable and movable. We can make this three different rows. The possibilities are endless to what you can do. Thanks for watching Digital Block guys. If you haven’t subscribed yet, just hit the button right here. Also check out our giveaway in the upper right. I’ll see you guys later. Peace.