Visual Composer – Web Design with WordPress

Adding and Inserting image in Visual Composer 8.1

1. From the Visual Composer editor, click Add Element. 2. Under Add Element box, search for Single Image and click it. 3. The Single Image Settings box will appear. Below that, click Add Image. 4. In the Set Image box, you can either upload a new image or use the existing image in the media [...]

How to change font size and type using TinyMCE Advanced

TinyMCE Advanced is a WordPess plugin that allows WordPress users to change font type and size easily. We use this plugin in most Jezweb websites. On this tutorial we will try to change the font size and font type. It is presumed that your WordPress site has this plugin ready installed, otherwise you can get the plugin [...]

How to use Simple Slider in Visual Composer

Simple slider is an add-on extension to Visual Composer. This will allow you to add an image slider in your Wordpress site in an easy way. Please check this link to see the sample output of this add-on. We created a simple tutorial for our Jezweb clients on how to use this plugin. See below. 1. [...]

Updating Image in Revolution Slider

This tutorial will guide you how to quickly edit/update your slide(s) in Revolution Slider. 1. Login to your Wordpress Admin and click on Revolution Slider at the left pane,then click on Edit Slides. 2. From the slides list, look for the specific image that you would like to change or update, then click on Edit [...]

New Default templates in Visual Composer

The new version of Visual Composer comes with default layouts that you can choose from. You can obviously see them when you create a new page. Try to select Landing Page and noticed that after clicking on it, the page will be populated with temporary content. You can click each of the element and replace [...]

How to edit text in Visual Composer

In this tutorial we will try to edit the text in the homepage as shown below. 1. Login to your WP admin and open the page / post that you want to edit. 2. In Visual Composer mode, point your mouse to the text area and click on the Edit Text Block pencil icon. 3. [...]

Add media grid in Visual Composer

Media Grid allows you to display your images in a beautiful way or you can customise it if you like. Here is a quick guide on how to add a media grid easily. 1. Add a new page/post. Write the tile and click on Add Element > Media Grid 2. Click on + button to [...]

Visual Composer: Old vs New

Visual Composer has a new version. Here are some of the comparisons that jezweb documented for your reference. User Interface Old Visual composer New Visual Composer Old Visual Composer Add element page New Visual composer Add element page Additional Tools and Features Choosing a layout is pretty easy from the main Visual Composer page. It displays [...]

Add an FAQ accordion using Visual Composer

Do you want to have an FAQ page on your site using Visual Composer? Here are the steps on how to do it. Step 1 Login to your WordPress control panel Step 2 In this tutorial, we will add a new page for the FAQ. Go to Pages > Add New Step 3 Enter the [...]

Adding a photo to your website

Adding a photo to your website using Visual Composer Step 1 Login to your WP Dashboard Step 2 On the side bar, click Pages, choose the page the photo is go onto Step 3 On the Visual Composer bar, click Add Element > single image Step 4 Click on green plus (+) sign on the [...]

Creating custom mailto link

Using a hyperlink to link from one page to another is a cool thing. It will allow your website visitor to quickly jump to a page where you can separately discuss a specific thing. Now, what if you want people to send you an email from your web page, you can use the mailto: command. [...]

Duplicate row including its content

One of the reasons why we want to duplicate a row in Visual Composer is to save time applying the same layout like alignment and text effects (color and style etc.). Below is a short tutorial on how we can duplicate row including its content. 1. First we need to make sure that you already [...]

Creating custom bullet list

Today, we are going to talk about how to add custom bullet lists into your website. To achieve this we will use woo shortcodes for custom lists and visual composer for rows and columns. Although there is a shortcode in woo for rows and columns but we intentionally use visual composer to give us the [...]

Add 5-column layout in Visual Composer

1. In Visual Composer mode, click on Add Element and add row. 2. Hover your mouse on the column icon and choose 6-column. 3. Add your content on the 5 columns and let the 6th column to be empty or blank. 4. Click on edit row icon. 5. Add an extra class name (ex. home_box_wrap). This class will [...]

Putting MP3 into your website

Putting a playable mp3 file into your website does not require a special plugin. With the new latest version of Wordpress, you can now integrate mp3 file and play it right into your web page. Here is a simple and quick way on how to do this. 1. Create a page or go to your [...]

Adding Paypal Button and Shopping Cart

In this tutorial, we will use a plugin called "WordPress Simple Paypal Shopping Cart". This will allow you to add an 'Add to Cart' button for your product on any posts or pages. This simple shopping cart plugin lets you sell products and services directly from your own wordpress site and turns your WP blog [...]

Create button that links to PDF

Downloading and sharing PDF files over the Internet is a very common everyday task nowadays. Here is a quick tutorial on how to create buttons that link to a PDF file. 1. Go to your WP Dashboard and upload your PDF file. You can do this by going to Media > Add New. 2. Click [...]

Linking to embedded PDF

Sometimes we just want to put PDF (Portable Document Format) into our website. We find it easier to just add the document right directly into the website without sacrificing its quality and layout. Today, I am going to share to you a very basic yet effective way of integrating PDF into your website. 1. First, [...]

Working with Links between pages

Hyperlinks are the backbone of webpage design. It wouldn't be a web page without a hyperlink - otherwise, it's just like the pages of an ordinary paper - flat and non-interactive. What is particularly nice about hyperlinks in website design is that they allow you to introduce material that is relevant to the place where [...]

Embed Slideshare with Visual Composer

SlideShare is otherwise called as“YouTube for PowerPoint presentations” allowing anyone to integrate and share presentations anywhere on the web. Here is a quick way on how to upload your powerpoint file and embed it as slideshare into your website. 1. Login to slideshare.net. 2. Once you are inside the slideshare admin, click on the arrow [...]

Embed Youtube and remove related videos

Integrating videos in our website from Youtube is one of the coolest way we can present ideas in more fast and accurate way regardless of whatever things we want to relay to our website visitor. Youtube by default however shows related video links at the end of the video playback and this is not good [...]

Create columns with Visual Composer

The basic idea behind good web design is to partition your web page into various sections and columns to give it a professional allure and to make it more user friendly. Creating columns in a page of a website is one of the techniques in helping you organizing the layout of your page. Here is [...]

Copy the contents of one page to another

Using the templates in Visual Composer it is possible to save a copy of a page and then place that into any other page. Open and edit the page you want to replicate Select Templates, Save current page as a template Enter a name for the template Add a new page or open an existing [...]

Thumbnail gallery

Adding a thumbnail grid gallery with Visual Composer is a great way to get a a set of thumbnail images displaying on a page in an orderly grid which when you click on one of the thumbnails it opens a popup of a larger full scale view of the image. Add an image gallery module [...]

Editing the homepage with Visual Composer

Updating the homepage of your website is really quite simple. The homepage of your website is typically the most frequently visited of all your websites pages so it is a great place to put your most important customer benefits, latest news and essential offers. Login to the administrator area To find the admin login page [...]

Column background colours using CSS

Visual Composer now includes design controls for selecting colours for the columns and rows and text boxes so that you don't have to use css to achieve much of what is outlined below. Giving a column in Visual Composer (by WP Bakery) is not quite a point and click option in the latest version (as [...]

Two column layout

If you have some texts and you want to neatly place an image to the side of that texts without them overlapping or wrapping around the top or bottom if the image then a two column layout in Visual Composer is a handy way to achieve it. Step 1 Login to WordPress control panel Step [...]

Icon Boxes

Icon Box – Informative Boxes for Visual Composer Informative Boxes with Icons! Don’t they make your webpages beautiful and present the content in more meaningful way? This plugin will help you create those nice looking icon boxes very easily. List of features Font Awesome Icons Real Time Icon Search Box Styles Extendible & Flexible Font [...]

Editing Tables

Adding tables to a page or post in WordPress is a little fiddly to do but its possible. There are a few different ways it can be done such as with the Advanced TinyMCE plugin and the Visual Composer Tables extension. TinyMCE Advanced Adding more buttons to the WordPress text editor This plugin will let [...]

Text on Background Images

With Visual Composer adding a background graphic to a row is a quite a simple process and can create visual interest in the content of a web page. Here are the steps on how to add texts on background image Step 1 Login to WordPress control panel Step 2 In this tutorial, we will create a [...]

Visual Composer vs Classic Editor

Once you are editing a page in Visual Composer mode it is unwise to switch to the Classic Editor. If you do switch and make changes to the page then you are likely going to break the Visual Composer shortcodes and then the entire page will turn into a useless mess of code. To show [...]

Text on Background Colours

With Visual Composer adding a background colour to a row is a quite simple process and can create visual interest in the content of a web page. 1. Create a new row or using an existing one click the pencil icon [Edit this Row] 2. The row edit popup presents the background color and text color [...]

Introduction to Visual Composer

Let's look at how a standard WordPress page layout differs to one that is constructed with the Visual Composer. Web page text is designed to flow around embedded images. If we want to have more interesting page layouts with columns and rows of text, images, buttons, boxes and videos then we can use the Visual [...]