Gravity Forms 05 – Add Gravity Form to a Page in Visual Composer

Gravity Forms 05 – Add Gravity Form to a Page in Visual Composer

Get a copy of the transcript of this guide (pdf)

gravity-forms-05-add-gravity-form-to-a-page-in-visual-composer

Click on Preview

gravity-forms-05-add-gravity-form-to-a-page-in-visual-composer-1

In this series of tutorial, we have already created a form, change the settings of the form, change the email notification settings of the form, and change the confirmation settings of the form.

Let’s preview the form that we have created. To do that, click on the Preview menu at the top of part of the page.

Inquiry form

gravity-forms-05-add-gravity-form-to-a-page-in-visual-composer-2

This is how our inquiry form looks like. Now, what we’re going to do is to place this form into our homepage.

Click on Pages

gravity-forms-05-add-gravity-form-to-a-page-in-visual-composer-3

In order to be able to edit our homepage, let’s click on the Pages menu which is located on the sidebar menu.

Click on edit

gravity-forms-05-add-gravity-form-to-a-page-in-visual-composer-4

As you can see, our homepage is appended with a “Front Page” word. Let’s edit the page by clicking on Edit option or just by clicking the title.

Change the row layout from 1 to 2/3 + 1/3 columns

gravity-forms-05-add-gravity-form-to-a-page-in-visual-composer-5

Let’s change the layout of our row to 2/3 + 1/3 columns.

Click on the + icon to add an element

gravity-forms-05-add-gravity-form-to-a-page-in-visual-composer-6

There is a Visual Composer element for gravity forms. If you’re not using the Visual Composer, you can still add the gravity form by inserting shortcodes. Let’s add a gravity form element by clicking the + icon in the newly added column.

Select the Gravity Form

gravity-forms-05-add-gravity-form-to-a-page-in-visual-composer-7

Select the Gravity Form element. If you’re having a hard time finding the Gravity Form element, go to the Contents tab to filter out some of the elements.

Gravity Form Settings

gravity-forms-05-add-gravity-form-to-a-page-in-visual-composer-8

We are now seeing the Gravity Form Settings. The following are the properties that you can modify inside the Gravity Form settings:

  • Form
  • Display Form Title
  • Display Form Description
  • Enable AJAX
  • Tab Index

For the form property, we need to choose the form that we want to embed/show. Let’s select our inquiry form. For all the other properties, let’s leave it as default. Once done, click Save Changes then Close to close the settings.

Click on Preview Changes

gravity-forms-05-add-gravity-form-to-a-page-in-visual-composer-9

Right now, as we can see, our inquiry form is already embedded in the second column. Let’s preview our work by clicking on Preview Changes.

Submit an inquiry

gravity-forms-05-add-gravity-form-to-a-page-in-visual-composer-10

There you go. We have successfully embedded our inquiry form. All the required fields are indicated with an asterisk (*) symbol beside the name of the field.

Let’s try to submit an entry in our form. Once done, click on Send Inquiry.

Our confirmation text

gravity-forms-05-add-gravity-form-to-a-page-in-visual-composer-11

As you can see, the confirmation text that we have configured is here. The inquiry form disappeared and the confirmation text appeared.

Click on Update

gravity-forms-05-add-gravity-form-to-a-page-in-visual-composer-12

If you have no more changes, click on Update to commit our changes to the database.

There you have it. This is how we embed our gravity form inside a page. And this ends our series on how to create a form to embed a gravity form.

Nested Rows within the Visual Composer Columns

Nested Rows within the Visual Composer Columns

Get a copy of the transcript of this guide (pdf)

nested-rows-within-visual-composer-columns

Use the back-end editor of the Visual Composer

nested-rows-within-visual-composer-columns-1

Embedding a row within a column is very useful if you need to subdivide a column but you don’t really want to break it out. Let’s try to add a row inside a column. To do that, let’s use the back-end editor of the Visual Composer. It is much easier to do this in the back-end than in the front-end because you can see where the rows and columns are much more likely.

To add a row in a column, click on the + icon to add an element.

Select the Row element

nested-rows-within-visual-composer-columns-2

We will be presented with the Add Element box after clicking the + icon. To add a row element, select on Row. If you’re having a hard time looking for the row element, click on the Content tab to filter out some of the elements.

Select the 1/3 + 1/3 + 1/3 row layout

nested-rows-within-visual-composer-columns-3

After adding the row element, we have now our row embedded inside the column. Let’s have the layout of our embedded row into 1/3 + 1/3 + 1/3 columns.

Add an image in each column

nested-rows-within-visual-composer-columns-4

Let’s add an image in each of these columns. After adding an image, let’s preview our changes by clicking on Preview Changes.

Output

nested-rows-within-visual-composer-columns-5

Now, as you can see, the images are neatly presented inside the row that we have embedded.

Add other images to the other columns

nested-rows-within-visual-composer-columns-6

Let’s try to add other images in different columns then let’s preview our changes.

Output

nested-rows-within-visual-composer-columns-7

The images that we added inside those columns are still neatly presented. This is a really good way of having a varied number of columns.

Having a row with different columns

nested-rows-within-visual-composer-columns-8

It is impossible for us to have a row with 7 columns. WordPress does not support column formats like seven 1/14.28 just to have a row with seven equal columns. So, in order to have a row with seven columns, first, let’s add a row with 2 columns or in ½ + ½ layout. Afterward, in our first column, let’s embed a row and have that row with 3 columns or in 1/3 + 1/3 + 1/3 layout. In our second column, let’s embed a row with 4 columns or in ¼ + ¼ + ¼ + ¼ layout. That’s how we can achieve a row with 7 columns and that’s the real purpose and use of an embedded row.

Media Grid Image Gallery in Visual Composer

Media Grid image gallery in Visual Composer

Get a copy of the transcript of this guide (pdf)

media-grid-image-gallery-in-visual-composer

User the back-end editor of the Visual Composer

media-grid-image-gallery-in-visual-composer-1

Image grids are a great way of showing a collection of photos in a grid pattern. Let’s try to add media grid element using the back-end editor of the Visual Composer.

To add an image grid element, click on the + icon in a column.

Select the Media Grid element

media-grid-image-gallery-in-visual-composer-2

After clicking the + icon, the Add Element box will pop-up. Select the Media Grid element. If you’re having a hard time finding the Media Grid element, click on the Content tab to filter out some of the contents.

Media Grid Settings will pop-up

media-grid-image-gallery-in-visual-composer-3

After selecting the Media Grid element, the Media Grid Settings box will pop-up. To select the images that we need to add inside the media gallery, click on the + icon.

Select the images that you want to add inside the grid

media-grid-image-gallery-in-visual-composer-4

We are now in our Media Library. Let’s select 9 images to be part of our image gallery. At the bottom of the Add Element box, we can see the images that we have selected. Also, if you still need to upload the images that you need to add inside the media gallery, click on the Upload Files tab to upload the files that you want. Once done, click on Add Images.

Edit some of the properties then click Save Changes

media-grid-image-gallery-in-visual-composer-5

As you can see, the image that we have selected is now added inside the media gallery. These are also some of the properties that we can manipulate inside the Media Grid Settings:

  • Display style
    • Show all
    • Load more button
    • Lazy loading
    • Pagination
  • Grid elements per row
    • 1, 2, 3, 4, and 6
  • Gap (the gap between images)
    • 0px, 1px, 2px, 3px, 4px, 5px, 10px, 15px, 20px, 25px, 30px, 35px
  • Initial loading animation
    • None
    • Attention Seekers
      • bounce
      • flash
    • Bouncing Entrances
      • bounceIn
      • bounceInDown
    • Fading Entrances
      • fadeInDown
      • fadeInDownBig
    • Flippers
      • flip
      • flipInX

For Grid elements per row property, let’s have 3 since we’ve got 9 images inside your grid. For gap, let’s have 10 pixels. For Initial loading animation, let’s have fadeIn. Once done, click on Save Changes then Close to close the settings.

Output

media-grid-image-gallery-in-visual-composer-6

Now, as you can see, we have now our 3-grid elements per row grid. The neat part about this is you can click on the picture to view it in a bigger size.

Image inside a lightbox

media-grid-image-gallery-in-visual-composer-7

When you click on an image, the image will be placed inside a lightbox. You can now see the image in great detail. For your convenience, you can also see the other messages by hovering over the picture and click on the navigation bar or you can select the image located at the bottom of the lightbox.

Sliders and Faders with Visual Composer Image Gallery Element

Sliders and Faders with Visual Composer Image Gallery Element

Get a copy of the transcript of this guide (pdf)

sliders-and-faders-with-visual-composer-image-gallery-element

Use the back-end editor of the Visual Composer

sliders-and-faders-with-visual-composer-image-gallery-element-1

The image gallery element in the Visual Composer is a great little image slider. So, if you want to show a few images in a sequence, this is the way to do it.

Let’s try to add an image gallery element. First, click on the + icon to add an element inside a column.

Select Image Gallery element

sliders-and-faders-with-visual-composer-image-gallery-element-2

After clicking the + icon, an Add Element box will pop-up. Select the Image Gallery element. If you’re having trouble finding the Image Gallery element, proceed to the Content tab to filter out some elements that are not under Content.

Image Gallery Settings box will pop-up

sliders-and-faders-with-visual-composer-image-gallery-element-3

After selecting the Image Gallery element, its settings will pop-up. These are some properties that you can manipulate inside the Image Gallery Settings:

  • Widget title
  • Gallery type
    • Flex slider fade (fade in and fade out between the images)
    • Flex slider slide (shoots the images to the left as you progress between them)
    • Nivo slider (kind of tiled or column slide-up)
    • Image grid
  • Auto rotate – The number of seconds between the rotation.
    • 3, 5, 10, 15, and Disable
  • Image source
    • Media library
    • External links
  • Images
  • Image size
    • thumbnail
    • small
    • medium
    • large
    • full size
    • custom size (200×300, 450×320, and etc.)
  • On click action

To be able to select the images that we want to be added to our gallery, click on the + icon under Images property.

Add images to the gallery

sliders-and-faders-with-visual-composer-image-gallery-element-4

Let’s select three images to be added to our gallery. As you can see, at the bottom of the Add Images box, your selected images are also shown. If you want to clear your selection, you can click on Clear. If you want to upload the images that you want to select, click on the Upload Files tab. Once done selecting, let’s set our images by clicking on Set Images.

Save Changes

sliders-and-faders-with-visual-composer-image-gallery-element-5

As you can see, we have now added the images in our gallery. If you have no more changes, click on Save Changes then Close to close the settings.

Click on Preview Changes

sliders-and-faders-with-visual-composer-image-gallery-element-6

As you can see, inside the column is our image gallery. We can also see the images that we have set inside the Image Gallery Settings. To preview our changes, click on Preview Changes.

Output

sliders-and-faders-with-visual-composer-image-gallery-element-7

So this is a great way of doing a little image gallery in Visual Composer. You can manually slide the image by clicking on the black circles located under the image or you can also hover your mouse over the image and you can see an arrow to slide the images.

Add a Block to Columns with the Backend Editor of Visual Composer

Add a Block to Columns with the Back-End Editor of Visual Composer

Get a copy of the transcript of this guide (pdf)

append-an-element-to-a-column-with-the-back-end-editor-of-visual-composer

Append an element to the column

append-an-element-to-a-column-with-the-back-end-editor-of-visual-composer-1

Appending an element to a column in the back-end editor is really simple. I often prefer this view because you can definitely tell where you’re going to add that element because of the spacing between the rows.

To add an element, hover your mouse over the column where you want to add the element and click on the + icon.

Select any elements that you want to add

append-an-element-to-a-column-with-the-back-end-editor-of-visual-composer-2

Choose any element that you want to add. Whether it’d be a Text Block, a Separator, or even a Video Player element. In my case, I’ll choose the Separator element.

Separator Settings box will pop-up

append-an-element-to-a-column-with-the-back-end-editor-of-visual-composer-3

Once done with the changes, click on Save Changes and close to close the separator settings box. If you want to add as many as elements as you want, just continue the process and click the + icon again to add another element.

This is one of the beauties of the Visual Composer. You can manipulate these elements as you want. You can move them around and edit it’s properties easily.

Add Separators to a Column with Visual Composer

Add Separators to a Column with Visual Composer

Get a copy of the transcript of this guide (pdf)

add-separators-to-a-column-with-visual-composer

Add a Separator element

add-separators-to-a-column-with-visual-composer-1

There are two types of the separator. First is the standard separator wherein it’s just a horizontal line across the page. Let’s try to add the standard separator. To do that, you can click on either of the + icons.

Select the Separator element

add-separators-to-a-column-with-visual-composer-2

Select the Separator element to add the standard separator.

Separator Settings box will pop-up

add-separators-to-a-column-with-visual-composer-3

These are the general properties that you can manipulate inside the separator settings:

  • Color
  • Alignment
  • Style
  • Border width
  • Element width

Once done with the changes, click on Save Changes.

Another type of separator – select Separator with Text element

add-separators-to-a-column-with-visual-composer-4

The other type of separator is the Separator with Text. After selecting the Separator with Text element, a Separator with Text Settings box will pop-up. These are the general properties that you can manipulate inside the Separator with Text settings:

  • Title – This is where you’ll place the text in the middle of the separator.
  • Icon
  • Title position
  • Separator alignment
  • Color
  • Style
  • Border width
  • Element width

Once done with the changes, click on Save Changes. Now, let’s preview our changes by click on Preview Changes.

Standard Separator and Separator with Text

add-separators-to-a-column-with-visual-composer-5

As you can see here, we’ve got the text separator and the standard separator and that’s the difference between the two.

Add a Video to a Page with Visual Composer

Add a Video to a Page with Visual Composer

Get a copy of the transcript of this guide (pdf)

add-a-video-to-a-page-with-visual-composer

Add a video player element

add-a-video-to-a-page-with-visual-composer-1

Embedding a video to a page is really easy once the video is on YouTube or Vimeo. Let’s place a video player element to our page. First, we need to be in the back-end editor of the Visual Composer. To add a video player element to our page, click on the + icon.

Add Element will pop-up – select video player element

add-a-video-to-a-page-with-visual-composer-2

After clicking the + icon, the Add Element box will appear. Select the video player element. If you’re having a hard time finding the video player element, click on the Content tab to filter out the elements.

Edit the video link property

add-a-video-to-a-page-with-visual-composer-3

After selecting the video player element, a video player settings will appear. The only thing we have to worry about for a basic video embed is to remove the temporary link that the Visual Composer has set. Afterward, let’s paste the link of the video that we prefer.

Get the link of the video

add-a-video-to-a-page-with-visual-composer-4

Let’s use this video to embed on our page. The only thing that we need to do is to get the URL of this video and it is in the address bar located at the top portion of this page. Paste this link as the Video Link property of the video player settings.

Video successfully embedded

add-a-video-to-a-page-with-visual-composer-5

As you can see, we’ve got the embedded video down there and ready to go. The size of the video will depend on the size of the column it is embedded.

Add a Button to a Page with Visual Composer

Add a Button to a Page with Visual Composer

Get a copy of the transcript of this guide (pdf)

add-a-button-to-the-page-with-visual-composer

Use back-end editor of the Visual Composer

Adding a button with Visual Composer is a really cool way of linking between pages and drawing attention to the actions available on that page. So, let’s start creating a button. First of all, we need to add the button element. To do that, click on the + icon inside the box.

Select the button element

After clicking the + icon, an Add Element box will pop-up. Select the button element. If you’re having a hard time looking for the button element inside the All tab, you can filter them out when you go to the Content tab.

Button Settings will pop-up

Inside the Button Settings, a number of properties will be seen. These properties are:

  • Text – Sets the text of the button.
  • URL (Link) – URL of the page that you want to link
  • Style
    • Modern
    • Classic
    • Flat
    • 3D
    • Custom
    • Outline custom
    • Gradient
    • Gradient custom
  • Shape
    • Rounded
    • Square
    • Round
  • Color
    • Classic Grey
    • Classic Blue
    • Classic Turquoise
    • Classic Green
    • Classic Orange
    • Classic Red
    • Classic Black
    • Blue
    • Turquoise
    • Pink
    • Violet
    • Peacock
    • Chino
    • Mulled Wine
    • Vista Blue
    • Black
    • Grey
    • Orange
    • Sky
    • Green
    • Juicy Pink
    • Sandy Brown
    • Purple
    • White
  • Size
    • Mini
    • Small
    • Normal
    • Large
  • Alignment
    • Inline
    • Left
    • Right
    • Center
  • Set full-width button – Sets the size of the button to full. If the button is placed inside a column, the full width of the button is the full width of the column.
  • Add Icon – Sets an icon to the button. You can have the icon either before the text or after the text.

Set the URL Link

If you already have the link and it’s ready to be pasted, just paste the link inside the URL box. However, if you don’t have the link, you can either search the name of the page on the Search textbox or you can scroll down the list of pages under the Search textbox. Once done, click on Set Link.

Set the other button properties

For styles, let’s have it in flat because it’s a nice simple flat shape. For shapes, let’s have it in rounded. For color, let’s have it in classic black. For size, let’s have it large. For alignment, let’s have it in the center. Let’s also set the button to full width. After everything, let’s save our changes by clicking the Save Changes button. After closing the Button Settings box, let’s preview our changes by clicking on Preview Changes.

How our button will look like after some changes

This is how our button will look like after the changes we’ve made. Clicking the button will take us to the page that we have set in the URL (Link) property.

Rearrange Columns and Elements in Visual Composer

Rearrange Columns and Elements in Visual Composer

Get a copy of the transcript of this guide (pdf)

rearrange-columns-and-elements-in-visual-composer

Back-end editor of Visual Composer

rearrange-columns-and-elements-in-visual-composer-1

Rearranging elements and rows and columns in Visual Composer is one of the great features which makes reconfiguring the layout of a page very simple. I find it easier to do from the back-end editor than the front-end because you can see the structure of the page more clearly.

Let’s have this page as an example. Our page got three columns and each column contains two elements in it. The current layout of the row in 1/3 + 1/3 + 1/3 structure.

Rearrange a column

rearrange-columns-and-elements-in-visual-composer-2

Let’s rearrange this page wherein all the columns that contain an image be placed on the right side. To do that, we need to drag the first column next to the second column. This will automatically place the second column to the first column. Now, this gives our first column a space in the middle column and drop it. To see our changes, click on Preview Changes.

Before editing the first column

rearrange-columns-and-elements-in-visual-composer-3

This is what the page looks like before we transferred the first column to the second column.

After editing the first column

rearrange-columns-and-elements-in-visual-composer-4

After editing, you can see now that the images are already placed next to each other. The neat part about this is that you don’t have to do any recoding. You can just move the columns to where you want to go. The same is true for the elements on the page.

Let’s go back to our back-end editor.

Edit the elements of a column

rearrange-columns-and-elements-in-visual-composer-5

So, if I decide to put the headers above the image on both of these columns, I can just drag the heading element up. All you need to do is to click and hold the header then drag it up and drop. The text image element will automatically slide down once you drag the heading element up.

To see our changes, click on Preview Changes.

Headers are now placed above the images

rearrange-columns-and-elements-in-visual-composer-6

Now, the headers are already placed above the images. It’s really quite simple.

Let’s go back again to our back-end editor.

Important reminder

rearrange-columns-and-elements-in-visual-composer-7

You just have to be careful when you are moving an element around. You need to watch where it’s dropping into because you might get into trouble finding the element you dropped. You might end up seeing it placed in a different column or whatsoever.

You can drag and drop an element like dragging and dropping an icon in your desktop.

Make an Image Link to Another Page with Visual Composer

Make an Image Link to Another Page with Visual Composer

Get a copy of the transcript of this guide (pdf)

make-an-image-link-to-another-page-with-visual-composer

Get the link of the page

make-an-image-link-to-another-page-with-visual-composer-1

What we’re going to do is that we need to make this picture, highlighted in the red box, a link to another page. First, we need to work out on which page we’re going to link to. I’ve decided to have the Service 1 page as the link to my image.

The first thing that we need to do is to get the URL  of the Service 1 page. To do that, we need to go to the page.

Get the link of Service 1 page

make-an-image-link-to-another-page-with-visual-composer-2

The link of the page is located in the address bar at the top of the page. Highlight or select all the link and copy.

The other way of getting Service 1’s link

make-an-image-link-to-another-page-with-visual-composer-3

The other way of getting Service 1’s link is to instantly right-click on the link and select Copy Link Address.

Edit the page using Visual Composer

make-an-image-link-to-another-page-with-visual-composer-4

Now that we have the link, let’s start editing the page. To edit the page, click on Edit with Visual Composer if you want to edit using a front-end editor or you can just use the back-end editor to do so. If you want to edit using the back-end editor, click on Edit.

Edit the image’s properties

make-an-image-link-to-another-page-with-visual-composer-5

We’re now on the front-end editor using the Visual Composer. To start, hover your mouse over the image and a green bar will appear. Click on the pencil icon inside the green bar.

Single Image Settings will pop-up – modify On Click Action

make-an-image-link-to-another-page-with-visual-composer-6

If you scroll down a bit further, you will see the On Click Action property. By default, it is set to None. It means that nothing will happen when you click the image. What we’re going to do is to change it to Open Custom Link. After selecting Open Custom Link, an extra property will appear wherein you need to supply the link for the image link.

Supply Image link

make-an-image-link-to-another-page-with-visual-composer-7

After supplying the link for the Image link, click on Save Changes. Afterward, click on Close. Now, hover your mouse over the image, it changes the cursor of the mouse. Clicking on the image now will link us to the Services 1 page.

To commit the changes to the database, click on Update. Afterward, click on X to exit the front-end editor if you’re using Visual Composer.

Create a Text Link within a Text Block with Visual Composer

Create a text link within a text block with Visual Composer

Get a copy of the transcript of this guide (pdf)

create-a-text-link-in-a-text-block-with-visual-composer

Edit a page using Visual Composer

create-a-text-link-in-a-text-block-with-visual-composer-1

Let’s make a text link to another page. To do that, first, we need to edit the page where that text is located. To edit the page, click Edit with Visual Composer.

Edit a Text Block

To edit a text block, hover your mouse to a text block and click on the pencil icon in the green bar.

Text Block Settings will pop-up

create-a-text-link-in-a-text-block-with-visual-composer-3

In the red arrow indicated in the image above, you can see the Insert/Edit Link icon. It looks like a little chain link.

To hyperlink a text, first, you need to highlight the text that you want to link. After highlighting the text that you want to link, click on the Insert/Edit Link icon.

Hyperlink a text

create-a-text-link-in-a-text-block-with-visual-composer-4

After you click the Insert/Edit Link icon, a textbox will appear. This is the textbox wherein you place the link of the page to hyperlink a text. However, if you don’t have the link of the page, you can click on the cog icon at the rightmost side of the textbox.

Search for the page that you want to be linked

create-a-text-link-in-a-text-block-with-visual-composer-5

If you manage multiple pages, you can directly search the page that you want. Type the name of the page in the Search textbox. If you already found the page, click on it and the URL textbox will be automatically filled with the page’s link. Once done, click on the Add Link button.

Text already linked

create-a-text-link-in-a-text-block-with-visual-composer-6

As you can see, the text that we highlighted is already linked to our desired page destination. If you have no more changes, click Save Changes. Afterward, click Close to close Text Block Settings.

Update page

create-a-text-link-in-a-text-block-with-visual-composer-7

After closing the Text Block Settings, click on the Update button. This will commit the changes to the database. Afterward, click X to exit the Visual Composer.

Link ready

create-a-text-link-in-a-text-block-with-visual-composer-8

As you can see, the text is already linked and is now ready to be clicked by everyone.

 

Change the Number of Columns in a Row with Visual Composer

Change the Number of Columns in a Row with Visual Composer

Get a copy of the transcript of this guide (pdf)

changing-the-number-of-columns-in-a-row-with-visual-composer

Visual Composer columns

changing-the-number-of-columns-in-a-row-with-visual-composer-1

Columns are one of the great features of Visual Composer. As you can see in the image above, we’ve got one row and three separate columns.

Now, if we hover over the column editor, highlighted in the red box, you can see that we’re already on the three columns which give us 1/3 + 1/3 + 1/3.

There so many possible combinations of columns using Visual Composer. These are some of the possible combination of columns in Visual Composer:

  • 1/1
  • ½ + ½
  • 2/3 + 1/3
  • 1/3 + 1/3 + 1/3
  • ¼ + ¼ + ¼ + ¼
  • ¼ + ½ + ¼
  • ¼ + ¾
  • 3/4 + ¼
  • 1/6 + 1/6 + 1/6 + 1/6 + 1/6 + 1/6
  • and so many other combinations to choose from

¼ + ½ + ¼ column combination

changing-the-number-of-columns-in-a-row-with-visual-composer-2

Let’s try to have our columns in ¼ + ½ + ¼ combination. As you can see, both first and last columns got narrower while the center column got wider. Let’s preview our changes. To preview our changes, click on the Preview button indicated in red arrow.

¼ + ½ + ¼ column combination preview

changing-the-number-of-columns-in-a-row-with-visual-composer-3

There you have it. The ¼ + ½ + ¼ column combination.

Custom layout

changing-the-number-of-columns-in-a-row-with-visual-composer-4

With Visual Composer, you can also customize your column layout. To create your own custom layout, click on the Custom Layout highlighted in the red box.

Row layout box will pop-up

changing-the-number-of-columns-in-a-row-with-visual-composer-5

So, instead of having a ¼ + ½ + ¼ combination, you want it ¼ + ¼ + ½ combination. So to customize your layout, enter the combination that you wanted in the “Enter custom layout for your row” textbox. After typing your desired combination, click Update. In the image above, after clicking Update, the columns were already in your desired layout.

To preview our changes again, click on Preview Changes.

¼ + ¼ + ½ customized layout

changing-the-number-of-columns-in-a-row-with-visual-composer-6

Now, we’ve got our ¼ + ¼ + ½ customized layout.

Add a Text Block to a Page with Visual Composer

Add a Text Block to a Page with Visual Composer

Get a copy of the transcript of this guide (pdf)

add-a-text-block-to-a-page-with-visual-composer

Add a text to a page

add-a-text-block-to-a-page-with-visual-composer-1

This is one of the most basic elements that you could need and you want to use a textbox because you want to put some words into the page. To add a new row, click the + sign.

Add a Text Block

add-a-text-block-to-a-page-with-visual-composer-2

Clicking on the + sign will pop-up the Add Element box. To add a Text Block, click on the Text Block box.

Filter the elements

drop-down-menu-configuration-3

If you’re having a hard time locating the Text Block, click on the Content tab to filter out the elements to contents only. Clicking the Content tab will eliminate the elements that are not part of the content writing.

Text Block settings

add-a-text-block-to-a-page-with-visual-composer-4

Clicking on the Text Block will pop up the Text Block settings. Now, we’re presented with a pretty normal text editor. If you’ve already edited a website, you’ll be pretty familiar with this toolbar. If some of the formatting elements were hidden, click on the little icon that says Toolbar Toggle. This will give us some of the underlying formatting elements for the texts.

After formatting and editing your text block, click on Save Changes.

New row for Text Block

add-a-text-block-to-a-page-with-visual-composer-5

We’ve now got our text block in a new row at the bottom of the page. To check our page, click Preview.

Adding a Text Block with Visual Composer

add-a-text-block-to-a-page-with-visual-composer-6

And that’s how we add a text block using Visual Composer.

Replace Images with Visual Composer

Replace Images with Visual Composer

Get a copy of the transcript of this guide (pdf)

replacing-images-with-visual-composer

Edit a page by clicking on the Edit Page menu from the top toolbar

replacing-images-with-visual-composer-1

Changing a picture is a really common thing to do on a website. You might just want to freshen up the look of your website, you might have a new product, or you’ve taken a bit of photo.

So let’s edit a page. To edit a page, click on the Edit menu.

Backend editor of the Visual Composer

replacing-images-with-visual-composer-2

After clicking the Edit menu, this will drop us to the backend editor for the visual composer.

As you can see in the image above, we’ve got three image elements. Hover your mouse over the first one and click on the little pencil on the green bar.

Add an image

replacing-images-with-visual-composer-3

After clicking the pencil on the green bar, a pop-up box will appear wherein you can set the properties of your image.

Now, to add an image, click on the box with green ‘+’ sign. Clicking the plus sign will take us to the media gallery.

Upload an image

replacing-images-with-visual-composer-4

If the image you want to add was already uploaded in the gallery, you can select the image, but if it wasn’t, then you can click the Upload Files tab to add more images.

Upload Files tab

replacing-images-with-visual-composer-5

In the Upload Files tab, you have two ways in uploading your images. You can either drag and drop the files in your computer directly to WordPress or you can click Select Files and file selector will pop-up.

Select Files pop-up

replacing-images-with-visual-composer-6

Select the images that you want to upload. You can select one image or multiple images at the same time. After selecting the images, click Open.

Uploaded images in progress

replacing-images-with-visual-composer-7

After selecting the image that you want to upload, a progress bar will be seen. It means that the image is currently uploading.

Note: Don’t upload images that are really huge files. If you’ve taken a file photo on a phone, it’s probably okay just to upload it as it is. But if you use a high-resolution camera, I recommend to bring the size down to under one megabyte. You can bring down the image up to 1200 or 1600 pixels. It’s perfectly fine and it’s pretty big enough for a website. Uploading a huge file will take a time to upload them depending on your internet connection.

Edit title and set image

replacing-images-with-visual-composer-8

A thumbnail will be seen to your uploaded images. The image size we uploaded was reduced a little bit because we’ve got our Smush setup. For SEO purpose, applying the proper title to your images is a great plus. Select the image that you want to be set in our first image element then click Set Image.

Save changes

replacing-images-with-visual-composer-9

You can see now the thumbnail of your selected image. Click Save Changes.

Update page

replacing-images-with-visual-composer-10

In our first image element, we can see the thumbnail of our selected image. To update the page, click Update. Clicking Update will commit the changes in the database. To see the changes of the page you edited, click on the permalink.

Edit with Visual Composer

replacing-images-with-visual-composer-11

Great! There’s the new image we set.

The other way to edit this is with the front-end editor for Visual Composer. To edit the page using Visual Composer, click on the Edit the Visual Composer menu.

Front-end editor: Visual Composer

replacing-images-with-visual-composer-12

On the little pencil again on the green bar, same from the process before. After clicking the green pencil, click the green ‘+’ inside the box and choose the image that you want to set. If you have already selected the image that you want to set, click Save Changes. Repeat the process until you’ve completed all the three elements.

Update page and close

replacing-images-with-visual-composer-13

Now, we have our three images lined up beautifully. If you’re happy with it, click Update and that commits the changes. Now, to close the Visual Composer, click X.

Page successfully edited

replacing-images-with-visual-composer-14

After clicking X to close the Visual Composer, we will be seeing the normal view of the page. That’s how we edit the page using the Visual Composer.

Open a Page for Editing

Open a Page for Editing

Get a copy of the transcript of this guide (pdf)

open-a-page-for-editing

 Login as administrator then click edit page from the top toolbar

Let’s edit a page!

If we’re on the page we want to edit and we’re logged in as administrator, we can click Edit Page.

You will now be on the backend editor view

After clicking the Edit Page, it will take us to the back-end view. In the image above, we can now see the page editing area. We’ve also got our visual composer editor here because this is a page which is set up in the visual composer.

To go back to the page we were on before, click on the permalink.

Or click Edit with Visual Composer

We can also see Edit with Visual Composer. So let’s click Edit with Visual Composer.

Now you are on the frontend editor

The Edit with Visual Composer is the front-end editor.

So, we still got all the features of visual composer but we can see our changes more real-time as we do them. If we’re finished, we can press update then close it. The update and close button can be seen at the top-right corner of the editor.

Or from the dashboard click pages

The other way you can get to edit a page, assuming that you were already in your dashboard, the back-end view of your website, is to go to Pages.

Click the name of page you want to edit

After clicking Pages, or if you’re already in Pages, we can see the list of pages we’ve already created. To edit the page we want, click on the title of the specific page or you can also click the Edit link below the title.

Add a Default Visual Composer Template to a New Page

Add a Default Visual Composer Template to a New Page

Get a copy of the transcript of this guide (pdf)

add-a-default-visual-composer-template-to-a-new-page

How to add a default Visual Composer Template to a new page?

When you’re starting a new page, sometimes it’ll be a bit daunting because it’s just a blank space. We’re going to make up rows and columns and put a lot of content in. So, if want to have a bit of a head start and you’re not really sure how to layout the page, there’s a great little tool called Visual Composer Default Templates.

The following are the steps on how to use the Visual Composer Default Templates:

Click on the icon where it says templates

First, in order for the templates to show, you will need to click either of the buttons. These buttons are enclosed in a red box for emphasis.

Click on the Default Templates tab

Next, click the Default Items tab beside the My Templates tab.

The Default Templates tab

After clicking the Default Templates tab, a list of all the default templates will be seen. Next, if you click on the About Section template, a template with 2 columns will be seen.

Click on the ‘+’ icon to use this template

If you want to use this template, click the ‘+’ icon.

Click on the pencil icon to edit the column

Lastly, if you want to start editing this template, you can hover your mouse to the selected division and a green option will appear. Click on the pencil icon to start editing.

That’s it. With this default templates from Visual Composer Default Templates, layouting your page will never be hard.