How to Save Dev Time Using WordPress


Important Links

// Visual Composer Plugin

// Jupiter Theme

// Uncode Theme

Hey Digital Fam, my name is John D Saunders, and in today’s Digital Block we 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 WordPress developers, there’s a significant tool to increase productivity. 

It’s called Visual Composer.  

Visual Composer is a page builder plugin for WordPress that lets you take full control over your site. Essentially, you can build any layout you can imagine with intuitive drag and drop editor – no programming knowledge required.

Comparing two similar, small projects, Visual Composer cut development time by 47%.  Not to mention, it’s a simple page builder anyone can use, especially a client or business owner who prefers to be more hands on with their website.  

I know we always offer free tools for your marketing endeavors and Visual Composer is usually bundled free with a TON of paid WordPress themes that generally cost around $50.  

I’ll include a few links below to my favorite themes for you to browse.You can also purchase Visual Composer as a stand plugin for $34 bucks.  

Trust me, it’s well worth it.  We’ve actually built these sites using Visual Composer after coding the designs.Visual Composer works with countless WordPress themes, is responsive to all devices and includes a ton of different tools I’m going to go over shortly.  

So, let’s dive into Visual Composer on a few of our recent web projects:

Go ahead and log in to your WordPress dashboard. Once 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 we manipulate Visual composer, we’ll be able to see it live on our site. Now, go back to your homepage backend.

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 convert this to a user-friendly drag and drop interface. So if I head back in editor again, it will take me back to the Visual Composer and if you look at this page and you will look into our homepage, you can see that the formatting is similar. Here, there are 4 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 the 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 can do that by hitting this button. If I do, you can see that it duplicates the content. Now, if I want to hit this button, that would trash the current component that I added to this site.

Now, we’re going to go over Visual Composer but we’re not going to edit and add the content until the next lecture because I wanted to dedicate a lot of 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. We 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 the page section. This page section can be broken up into rows. So if you highlight your mouse over this, you can break it down as is. You can do half, a third, 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 it’s only taking 1/4 of the screen. That’s how we got these icons to work that way because we broke the page section into 4 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. If I 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 roll and select the layout you 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 see 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 then it’ll 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 About with tour section, a description in accordion, 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 to Visual Composer are the page elements. To utilize page elements, you can either hit this plus button here and then it’ll 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 WordPress theme and 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. We can add a Google map, a pie chart, a Flickr feed. We 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 can manipulate with your own content.

You can 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 wanted to go to, and if I wanted 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 our button is right there. Let’s preview it. Let’s scroll to the bottom and you can see our button is right there.

Now, it’s not necessary for what we’re doing right now so 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 Edge Slider to, say, above the icons or if we want to drop it even lower above the fancy title. Everything is changeable and movable. We can make this three different rows. The possibilities are endless on 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.
Thanks for watching The Digital Block!  If you haven’t subscribed yet, just hit that button right here.  Also, check out our giveaway in the upper right.  I’ll see you guys next week!  Peace!