Resend Gravity Forms Notification Emails

Resend Gravity Forms Notification Emails

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

resend-gravity-forms-notification-emails

Click on Forms menu

resend-gravity-forms-notification-emails-1

You can resend a notification from the entries that you have received from the gravity forms. To do that, first, let’s go to our forms page by clicking on the Forms menu found on the right sidebar. We can check the entries of our forms by clicking on the number of entries under the Entries column.

Select the entries that you want to resend the notification

resend-gravity-forms-notification-emails-2

We are now presented with all the entries inside of our Inquiries form. Let’s select Fred as an example. Click on Fred’s name or the View option under his name.

Tick the Admin Notification and click on Resend Notification

resend-gravity-forms-notification-emails-3

On the right-hand side of the page, you’ll see Notifications. If you tick on the Admin Notification checkbox, this will mean that the notification will be sent back to the default administrator of your WordPress. You can also send it to a different email address by supplying the email address in the box. Once done, click on Resend Notification.

Resend Notification to multiple entries

resend-gravity-forms-notification-emails-4

If you want to send it to a whole stack of entries, there is a checkbox on the left side of every entry. Tick the checkbox to select the entry. You can tick as many entries as you want. Then, on the top of the table, you can see a drop-down box. Select the Resend Notification option then click on Apply.

Tick the Admin Notification checkbox then click on Resend Notification

resend-gravity-forms-notification-emails-5

The same process as the individual resending of notification. Tick the Admin Notification and you can also send the notification to a different person by providing their email address inside the box.

Check Gravity Forms Entries from the WordPress Dashboard

Check Gravity Forms Entries from the WordPress Dashboard

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

check-gravity-form-entries-from-the-wordpress-dashboard

Clink on Forms on the sidebar menu

check-gravity-forms-entries-from-the-wordpress-dashboard-1

Although the inquiries from the gravity forms are emailed to you, sometimes it’s a good thing to be able to check those inquiries directly on WordPress dashboard.

Let’s go and check on the entries submitted into our gravity forms. To do that, click on the Forms on the sidebar menu.

Click on either the number of entries or the Entries option

check-gravity-forms-entries-from-the-wordpress-dashboard-2

We are now presented with the list of all the forms we have created. In my case, I have only created one form.

To see the inquiries, you can either click on the Entries option found under the name of the form or you can click on the number of entries of this form.

Click on the sender’s name

check-gravity-forms-entries-from-the-wordpress-dashboard-3

As you can see, there are 4 entries in our Inquiry form. If you want to view and respond to these inquiries, you can either click on the sender’s name or click on View found under the sender’s name.

The entry submitted by a person

check-gravity-forms-entries-from-the-wordpress-dashboard-4

This is now the entry being submitted by the person named Ben Smith. You can see all of his details submitted, the date it was submitted, and his IP address. To respond to this entry, you can type in the message inside the Note area then click on Add Note.

Add Notes to a Gravity Forms Entry from the WordPress Dashboard

 

Add Notes to a Gravity Forms Entry from the WordPress Dashboard

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

add-notes-to-a-gravity-forms-entry-from-the-wordpress-dashboard

Go to the Forms menu then select Entries

add-notes-to-a-gravity-forms-entry-from-the-wordpress-dashboard-1

When you receive entries in your gravity forms, you can check these entries by going to your form entries. To do that, hover your mouse over the Forms menu and click on the Entries submenu.

If you click on the entry, you’ll see a box for notes. Let’s try to submit a note. Place your note inside the box, in my case, I placed “Hey thanks for the inquiry.” Afterward, click on Add Note.

Send out a note

add-notes-to-a-gravity-forms-entry-from-the-wordpress-dashboard-2

After submitting the note, it will now be saved in the database then refreshes the page. This is a convenient way of managing the inquiries because you can easily keep track of them instead of going into your email.

Also, one thing that you can do is to respond to the notes and send it out like a thank you message.

Respond to a note

add-notes-to-a-gravity-forms-entry-from-the-wordpress-dashboard-3

You just have to bear in mind that the email or the user that is going to be the sender of these notes is going to be the one that is currently logged on to WordPress.

So, generally speaking, you probably just want to use this if you’re using a group website, say for entries for an event or something like that, rather than responding using your own email address. Of course, if you do want to respond using your own email address, just press reply, then you’ll get the details of your email like the email signature and etc.

I guess this is just a very specific example of a situation where you might want to use these notes system, not necessarily for contacting clients.

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.

Gravity Forms 04 – Configure Confirmation Text or Thank You Page

Gravity Forms 04 – Configure Confirmation Text or Thank You Page

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

gravity-forms-04-configure-confirmation-text-or-thank-you-page

Click on Confirmations tab

gravity-forms-04-configure-confirmation-text-or-thank-you-page-1

We have already created our inquiry form using gravity forms, change the settings for the form, and change the email settings of the form. Now, let’s change the confirmations setting of our form.

Once the form is being filled in, you’ll get a confirmation message showing that you have successfully submitted your information. The standard way of doing this is to set up in confirmation settings, say “Thank you for contacting us. We’ll be in touch with you shortly.”

To do this, let’s go to the Confirmation settings by clicking on the Confirmations tab.

Click on Edit

gravity-forms-04-configure-confirmation-text-or-thank-you-page-2

Let’s edit the Default Confirmation settings. Click on Edit to continue.

First type of confirmation: Text

gravity-forms-04-configure-confirmation-text-or-thank-you-page-3

There are three types to do our confirmation message. These are the following:

  • Text
  • Page
  • Redirect

The first type of the confirmation message is the text. After the person successfully submitted his/her information, the form will disappear and this confirmation message will be seen. Let’s place our message inside the textbox. We could put something like “Thank you for contacting us. We’ll be in touch with you shortly.” We can also append it with “Call us if you need an urgent assistance”.

This is now the message that the person will be seeing after he/she has successfully submitted the form.

Once done, click on the Save Confirmation.

Second type of confirmation: Page

gravity-forms-04-configure-confirmation-text-or-thank-you-page-4

The second way of having a confirmation is by a page. All you need to do is to select a page inside your website. Instead of showing a message after the person has successfully submitted the form, he/she will be transferred to another page, say  Home page or About page.

Third type of confirmation: Redirect

gravity-forms-04-configure-confirmation-text-or-thank-you-page-5

The third and last way of having our confirmation is by a redirect page. When the person has successfully submitted the form, he/she will be redirected to a page. For example, we can place our Facebook link as our redirect page. Just be careful in selecting a redirect page as your confirmation. Select the most appropriate page to redirect the person after he/she has successfully submitted the form.

This is how we set the confirmation page of a form.

Gravity Forms 03 – Admin Email Notification Settings

Gravity Forms 03 – Admin Email Notification Settings

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

gravity-forms-03-admin-email-notification-settings

Click on Notifications tab

gravity-forms-03-admin-email-notification-settings-1

In our previous video, we have managed to create a form and change its settings. What we’re going to do is the final configuration for notifications. What we want our form to do is to send to us an email once a person successfully submitted its information.

To do that, let’s edit the notification by clicking on Notifications.

Click on Edit

gravity-forms-03-admin-email-notification-settings-2

After clicking on Notifications, let’s edit the Admin Notifications which is set up default by WordPress.

Modify some properties

gravity-forms-03-admin-email-notification-settings-3

We are now inside the Admin Notification settings. These are the following properties that we can modify in the Admin Notification settings:

  • Name
  • Send To
    • Send to email
  • From Name
  • From Email
  • Reply To
  • BCC
  • Subject
  • Message

First, let’s change the Send to Email property. We want it to be sent to ourselves or to the sales or inquiries email. In my case, I’ll have it mail@jezweb.com.

For the From Name, let’s merge the tags of First Name and Last Name. We did this, so that, when we receive this email, we can reply to it directly back to the person who filled and submitted his/her information using the inquiry form. For the From Email, let’s use the Email tag.

We have successfully modified the basic settings.

Click on Update Notification

gravity-forms-03-admin-email-notification-settings-4

If you want, you could set a Blind Carbon Copy (Bcc).

For the Subject of the email, you can have the name of your website plus the word inquiry. With this, you can have a neat inbox and you’ll easily identify which email is an inquiry email and which is not.

The {all_fields} tag inside the body of the message will include all the fields inside your inquiry form. If you want to add more messages inside the body of your message, you can write anything that you want.

Once you’ve made your changes inside the Admin Notification settings, click on Update Notification.

Gravity Forms 02 – Form Submit Settings and Spam Honeypot

Gravity Forms 02 – Form Submit Settings and Spam Honeypot

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

gravity-forms-02-form-submit-settings-and-spam-honeypot

Click on Settings

gravity-forms-02-form-submit-settings-and-spam-honeypot-1

So, in our previous video, we’ve already made our inquiry form in gravity forms. If you haven’t seen the previous video, click here.

Next is to do a few changes to the settings. To do that, click on Settings.

Modify the button text

gravity-forms-02-form-submit-settings-and-spam-honeypot-2

Now that we are inside the settings, scroll down to the button text property. This is the main thing that I am interested in changing. The default text inside the button is ‘Submit’, but let’s be creative. Let’s change the text from ‘Submit’ to ‘Send Inquiry’ to make it look like a little bit more human-friendly and a little bit less computer-nerdy.

Enable the anti-spam honeypot and the animation

gravity-forms-02-form-submit-settings-and-spam-honeypot-3

After editing the button text, scroll down to the last part of the settings page. There are some properties that are interesting. Enable Save and Continue if you have a quite long form that you think people might want to save the details and come back later and fill it in further whenever they’re ready.

I’m not enabling the Save and Continue property. What I do want to enable is the anti-spam honeypot. This is a clever way that gravity forms can do to keep some of the spams out. Spams that might auto-generate the information inside the form and submit it. We’ll also enable the animations as well.

Once done, click on Update Form Settings.

Form settings updated successfully

gravity-forms-02-form-submit-settings-and-spam-honeypot-4

We’ve now configured our form by editing the button text and enabling the anti-spam honeypot and the animation. You’ll receive a message at the top of the page to inform you that the update was successful.

Gravity Forms 01 – Creating a Simple Inquiry Form

Gravity Forms 01 – Creating a Simple Inquiry Form

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

gravity-froms-01-creating-a-simple-enquiry-form

Add a new form

gravity-froms-01-creating-a-simple-enquiry-form-1

An inquiry form on your website is one of the most basic ways to capture and request people’s information. Gravity forms is a very simple to use inquiry form system. If that’s installed, let’s add a new form by hovering your mouse over the Forms menu, located on the sidebar menu, and click on New Form.

Name the form

gravity-froms-01-creating-a-simple-enquiry-form-2

Let’s give the form a name. Let’s name it Inquiries since its main purpose is to inquire information from the people. Once done, click on Create Form.

Add the important fields

gravity-froms-01-creating-a-simple-enquiry-form-3

First, let’s add the important fields of our form. The basic fields for most inquiry forms are a person’s name and email address. To add these fields, let’s go to Advance Fields box then let’s select the Name and Email fields.

Add the other fields

gravity-froms-01-creating-a-simple-enquiry-form-4

As you can see, the name and email address fields are already added inside our form. Now, let’s try to add our phone field. As you can see inside the Advance Fields box, there is a Phone field. Typically, we don’t use this field because of the formatting of the number. There are many phone number formats that exist and this will make our data inconsistent.

Alternatively, we can add a phone number field by using a simple single text line field. To do that, let’s go the Standard Fields box.

Other fields or standard fields

gravity-froms-01-creating-a-simple-enquiry-form-5

Click on the Single Text Line field. Also, click on the Paragraph Text field. We will use this field as a comments field.

Modify the properties of the Paragraph Text field

gravity-froms-01-creating-a-simple-enquiry-form-6

Let’s first modify the properties of the paragraph text. To do that, click on the field. Let’s name this field ‘Inquiry’.

Modify the properties of the Single Text Line field

gravity-froms-01-creating-a-simple-enquiry-form-7

Let’s go to the next field, which is the Single Text Line field. Let’s name this field ‘Phone’ and also tick the ‘Required’ checkbox under rules. Required fields need to be filled by the users. They cannot submit their information without filling the required fields.

Modify the properties of the Email field

gravity-froms-01-creating-a-simple-enquiry-form-8

For the Email field, tick the ‘Required’ checkbox. Having both the phone number and email address field required will ensure us that we can contact the person either via email or phone. We also did this, so that, in case when the person did not type the correct email address or phone number, we can still use either information to contact them.

Modify the properties of the name field

gravity-froms-01-creating-a-simple-enquiry-form-9

For the Name field, tick the ‘Required’ checkbox.

Click on Update Form

gravity-froms-01-creating-a-simple-enquiry-form-10

Great!

Now, we’ve got the basis of our standard inquiry form. Once we’ve put all the fields together, click on Update Form.

In a subsequent video, we’re going to show you how to set the form up to send to you as an email and some other settings that are quite important as well.

Upload Multiple Images into WordPress

Upload Multiple Images Into WordPress

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

upload-multiple-images-into-wordpress

Go to Media Library then Add New

Uploading multiple images is great if you’ve got a whole lot of images that you need to add in a hurry. Let’s try to add multiple images at once. To do that, go to your Media Library then click om Add New.

Add multiple images by dragging and dropping of images

There are two ways to add multiple images all at once in our media library. First, in your file browser, select all the images that you want to upload. Highlighted files mean that these are the selected files. Once done, drag those images to your WordPress Media Library. Don’t drop it yet, wait for the screen to turn into blue, it will say “Drop files to upload”, then drop the images.

Images are currently uploading

You have successfully uploaded many images all at once. The second way to upload many images at once is to go to your Upload Files tab.

Click on Select Files

Inside the Upload Files tab, click on Select Files. After clicking, your file explorer will pop-up.

Select all the files that you want to upload

Select all the files that you want to upload. Selected files are indicated in blue highlight. Once done, click Open. These are the ways that you can upload many images all at once in WordPress.

Anti-Malware from GOTMLS Plugin Review

Plugin Review of Anti-Malware from GOTMLS

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

plugin-review-of-anti-malware-from-gotmls

Register yourself

plugin-review-of-anti-malware-from-gotmls-1

Anti-Malware from GOTMLS.NET is a fantastic plugin. This has helped me on a number of occasions to remove a bit of junk that’s been inserted into someone’s website because I did not keep their plugins up-to-date. Before you can install Anti-Malware from GOTMLS.NET, you need to do a free activation. To do that, you need to register an account by providing your name and email address. Afterward, click on Register Now.

Download the definition

plugin-review-of-anti-malware-from-gotmls-2

After you have successfully registered, a message “Your installation Key is Registered” will be seen. Then, download the definition.

Confirmation message

Once the downloading of the definition was successful, an information box will appear to let you know that you have successfully downloaded the definition. Click OK to proceed.

Start the scan

plugin-review-of-anti-malware-from-gotmls-4

Now, you can start the scan by clicking on Run Complete Scan.

Wait for the scan to finish

plugin-review-of-anti-malware-from-gotmls-5

It’s now scanning the relevant files in WordPress and find something that shouldn’t be there. It will give you the option to remove the unnecessary files. There’s   Wait for the scan to finish.

These are Anti-Malware from GOTMLS.NET’s features:

  • Run a Complete Scan to automatically remove known security threats and backdoor scripts.
  • Firewall block SoakSoak and other malware from exploiting Revolution Slider and other plugins from known vulnerabilities.
  • Upgrade vulnerable versions of timthumb
  • Download Definition Updates to protect against new threats.

Premium Features:

  • Patch your wp-login and XMLRPC to block Brute-Force and DDoS attacks.
  • Check the integrity of your WordPress Core files.
  • Automatically download new Definition Updates when running a Complete Scan.

Now, it’s not perfect of course. All these types of scanning tools have their own limitations. But, if you’ve got a simple hack like code injection or some files that were not supposed to be there, in my experience, this is very good at finding those and get rid of it. There is also a donation function but the plugin is completely free.

It also runs nice and cleanly. It will just chew its way through the website without overloading the server. It’s a great plugin and I would give this a 5 out of 5 rating.

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.

Deleting Elements from the Page with the Visual Composer

Deleting Elements from the Page with the Visual Composer

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

deleting-elements-from-the-page-with-visual-composer

Use the front-end editor of the Visual Composer

deleting-elements-from-the-page-with-visual-composer-1

If you’ve been working with the Visual Composer for a while, you’ll definitely have had to remove something. Now, this is very simple.

Let’s try to remove an element using the front-end editor of the Visual Composer. It works as well with the back-end editor. To remove an element, hover your mouse over the specific element and click on the trash bin inside the green bar.

Verification to delete an element

deleting-elements-from-the-page-with-visual-composer-2

After you’ve clicked the trash bin icon, you’ll be prompted with a warning to verify and continue the deletion of the element. This is done to prevent the elements from accidental deletion. To continue, click OK.

Element successfully deleted

deleting-elements-from-the-page-with-visual-composer-3

Now, the button that we deleted disappears. You can also delete the whole row and its content. And that’s how we delete an element using the Visual Composer.

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.

Cloning Elements and Rows in Visual Composer

Cloning Elements and Rows in Visual Composer

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

cloning-elements-and-rows-in-visual-composer

Clone the Single Image element

cloning-elements-and-rows-in-visual-composer-1

Cloning an element in the Visual Composer is a great time saver. Let’s try to clone a single image element. To do that, hover your mouse over the image and a green bar will appear. Click on the button inside the green bar with a label Clone Single Image.

Single Image cloned

cloning-elements-and-rows-in-visual-composer-2

So now, we’ve got two identical single image element. The beauty of this is it saves you from reconfiguring the whole element. Now, the only thing that we need to do with the cloned element is to change the image. There’s no need for us to change the element’s whole property because we have already configured the element with our first image.

To edit the image of the cloned element, hover your mouse over the picture and a green bar will appear. Click on the pencil icon to edit the element.

Single Image Settings box will pop-up

cloning-elements-and-rows-in-visual-composer-3

To change the image of the single image element, click on the + icon beside the thumbnail of the current image.

Set image – Media Library box will pop-up

cloning-elements-and-rows-in-visual-composer-4

So, to change the image, select the images available in your Media Library. If you still need to upload the image that you want to use, you can go to the Upload Files tab and upload the image that you want. After selecting the image, click on Set Image.

Once you’re back to the Single Image Settings box, just click on Save Changes then Close to close the settings.

Image changed

cloning-elements-and-rows-in-visual-composer-5

So now, we have successfully changed the image of our cloned element. This is very helpful when you want to do stacks of pictures with the same properties because all you need to do is to configure the first image and clone it. Then, you can now change the image of the cloned element.

Cloning images from different columns

cloning-elements-and-rows-in-visual-composer-6

We can easily clone any elements that we want with the use of the Visual Composer. It works exactly the same with buttons, text blocks, and all the other elements of the page.

Cloning a row

cloning-elements-and-rows-in-visual-composer-7

You can even clone a row. When you hover your mouse over the row, expand the row selection settings then click on the button with a label Clone Row. This can save you a lot of time if you want to reuse the settings that are on that row without having to reconfigure it.

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

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

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

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

Use front-end editor of Visual Composer

It is really easy to add another element to a column in the front-end editor of the Visual Composer. Let’s try to add an element. To do that, hover your mouse over a column and you can see an orange button at the top.

Add a Text Block element

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

Select the Text Block element. If you’re having a hard time finding the Text Block element, you can either search it at the textbox located at the top-right side of the box or you can go to the Content tab to filter out some elements.

Text Block Settings box will pop-up

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

As you can see, our text block element is already added above the image. Once done with the changes, click Save Changes and close the text block settings.

Add a Separator element

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

Let’s try to add a separator element. To do that, select the separator element. If you’re having a hard time finding the Separator element, you can either search it at the textbox located at the top-right side of the box or you can go to the Content tab to filter out some elements.

Separator Settings box will pop-up

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

As you can see, the separator that we have added is already below the text that we’ve added a while ago. Once done with the changes, click on Save Changes and close to close the separator settings.

Add a Video Player element

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

Let’s try to add a video player element under the image. To do that, click on the orange button.

Select the Video Player element

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

Let’s try to add a video player element. To do that, select the video player element. If you’re having a hard time finding the video player element, you can either search it at the textbox located at the top-right side of the box or you can go to the Content tab to filter out some elements.

Video Player Settings will pop-up

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

Once done with the changes, click on Save Changes and close to close the video player settings.

Video Player was successfully added

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

As you can see, we’ve got our video player added under the image. It’s very easy to add elements. One important thing to remember is that to be careful and make sure that you have selected the right section when you add an element.

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.

Single Image Sizing with Visual Composer

Single Image Sizing with Visual Composer

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

Edit a page using the back-end editor of the Visual Composer

single-image-sizes-in-visual-composer-1

On our sample page, we’ve got two different sized images. We’ve got the large one on the right and a thumbnail on the left. Let’s try to change the size of the image on the right side in a way that it would fill the whole width of the column. Let’s go to our back-end editor. To do that, click on Edit on the top menu bar of your WordPress.

Hover your mouse over the right image and click the pencil icon

single-image-sizes-in-visual-composer-2

To edit the image, hover your mouse over the image that we want to edit and a green bar will appear. Click on the pencil icon.

Single Image Settings will pop-up – change image size from thumbnail to large

single-image-sizes-in-visual-composer-3

As you can see, the size of the image on the right image is ‘thumbnail’. So what we’re going to do is to change the image size from thumbnail to large. Make it all in lowercase then press Save Changes. So let’s preview our changes by pressing Preview Changes.

Image now set to large

single-image-sizes-in-visual-composer-4

Now, you’ll see that the image on the right got bigger.

Change row layout from three columns to two

single-image-sizes-in-visual-composer-5

Let’s have the layout of our row into two columns. To do that, click the option ½ + ½. So now we’ve got two column pictures. Let’s preview our changes again.

Row layout now changed from 3 columns to 2

single-image-sizes-in-visual-composer-6

As you can see, the pictures are still filling the entire column width. The trick with this is that the large image size is approximately 1024 pixels wide while the columns’ width is 585 pixels only. Now that the picture’s width is greater than the column’s width, it will automatically shrink to exactly fit into the columns entire width.

If we were going to change that picture’s size to medium, which is 300 pixels wide in default WordPress settings, will definitely leave empty spaces inside the column.

Change image size from large to medium

single-image-sizes-in-visual-composer-7

Let’s try to change the image size from large to medium. The same process as before. Hover your mouse over the image that you want to edit. Click on the pencil icon inside the green bar. Then, change the image size from large to medium. Afterward, click Save Changes and close the Single Image Settings. To preview our changes, click on Preview Changes.

Image changed from large to medium

single-image-sizes-in-visual-composer-8

As you can see, the image is leaving big space in between. Setting the image to medium will usually work to columns set to 1/3 or ¼.

Setting the image size approximately

single-image-sizes-in-visual-composer-9

If you’re going to set the size of the image, then you need to know the exact dimension that you want to set. For example, let’s set the size to 500×200 pixels. 500 is the width of the image and 200 is the height. So, this will give me a 500×200 pixels image.

Image now changed from large to 500×200 pixels

single-image-sizes-in-visual-composer-10

Now, as you can see, the image is now set to 500×200 pixels. We’ve also got a bit more room on the sides because the column’s width is wide than the image’s size.

These are the dimensions of WordPress’s default image sizes:

  • thumbnail – 150 x 150 pixels
  • medium – 300 x 300 pixels
  • large – 1024 x 1024 pixels
  • full size – image’s full size

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.

Frontend Editor for Visual Composer

Front-End Editor for Visual Composer

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

drop-down-menu-configuration front-end-editor-for-visual-composer

Edit the page using Visual Composer

front-end-editor-for-visual-composer-1

The front-end editor for Visual Composer makes it very easy to edit a page then see the changes instantly without even clicking the Preview button.

To edit using Visual Composer, click on Edit with Visual Composer instead of clicking Edit.

Let’s try to edit a text in Visual Composer

front-end-editor-for-visual-composer-2

After clicking on Edit with Visual Composer, this will give us the in-situ layout of the page we’re going to edit.

So, rather than having to imagine which image is not aligned, it’s all here, pretty much as you see it normally. You don’t see the rows and columns structures so much, but you can see all the elements.

Let’s try to edit the text highlighted in a red box. To edit a text block, hover your mouse to the text block and a green bar will appear. Afterward, click on the pencil icon.

Text Block Settings will pop-up

front-end-editor-for-visual-composer-3

A Text Block Settings will pop-up after you’ve clicked the pencil icon in the green bar. Let’s have this highlighted text deleted. If you have nothing else to edit, click on Save Changes. Afterward, click on Close to close the Text Block Settings.

Text Block successfully edited

front-end-editor-for-visual-composer-4

There we go, after clicking on Save Changes, we can instantly see the changes we’ve committed. Like what I’ve said earlier, you don’t have to preview it or guess what you’re website is going to look right now.

Next, let’s try to change an image. To do that, hover your mouse over the image that you want to edit. A green bar will appear then click on the pencil icon.

Single Image Settings will pop-up

front-end-editor-for-visual-composer-5

To select a new image, click on the box located on the right side of the thumbnail of the current image. This will take us the Media Library of our WordPress.

Set an image

front-end-editor-for-visual-composer-6

After clicking the box, a Set Image box will appear. We are currently on the Media Library tab wherein we need to select a new image. If you haven’t uploaded your desired image yet, go to Upload Files tab to upload your image. After selecting the image that you want, click on Set Image.

Image is now ready to be changed

front-end-editor-for-visual-composer-7

After setting an image, the thumbnail inside the red box will change to the image that we have set. Now, we’re one click away in changing an image. To finally change the image, click on Save Changes followed by Close.

Image successfully changed

front-end-editor-for-visual-composer-8

Now that we have successfully changed our image. Let’s try to commit these changes to the database. To commit, click on Update.

Changes successfully updated

front-end-editor-for-visual-composer-9

A message at the top of the page will appear to tell us that the page was successfully updated.

Now that our changes have been successfully updated and if you’ve got nothing else to edit the page, click X to close the Visual Composer.

Reminder: If we instantly click X without clicking on Update, our changes will not be saved in the database.  If we’re already sure with our changes, update the page right away.

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.

Dropdown Menu Configuration

Drop Down Menu Configuration

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

drop-down-menu-configuration

Subpages of a parent page

drop-down-menu-configuration-1

As you can see in the image above, we’ve got these service pages. There’s three of them and they’re subpages of Services.

Let’s go to our website and check the menus of our homepage. To do that, click the menu with the house icon at the top-left part of your dashboard.

Front-end view of our homepage

drop-down-menu-configuration-2

As you can see, we haven’t actually gotten the service pages to the menu yet. So, let’s add them. To add them, let’s go back to our dashboard, and to do that, click on the clock icon.

Menus under Appearance menu

drop-down-menu-configuration-3

To edit the menus of your website, let’s go to Menus under Appearance menu.

Add pages to the menu

drop-down-menu-configuration-4

Now, you can see that we’ve got our Services page here and it’s given us this little hierarchy so that we will know that these three pages are belonging to the Services page. They’re called the child pages. Let’s all add them to the menu. To add, select the pages that you want to be added to the menu then click Add Menu.

Selected pages already added to the menu

Now, as you can see, they’re lined up vertically in a straight line. Let’s try to save this. To save, click Save Menu. Let’s go back to our homepage to check the menus that we recently added. To go back, click on the house icon at the top-left part of the dashboard.

After we added the pages to our menu

drop-down-menu-configuration-6

The pages we added to the menu are all strung out on the top level of the menu. But what we really wanted to do is for 1, 2, and 3 to be a dropdown under Services. Let’s go back again to our Menus page.

Add these pages to Services page

drop-down-menu-configuration-7

The trick here is to drag up the page that you want then indent it from the parent page. You can see in the image above how I move the page to the parent page. After you have already placed the pages under the parent page, click Save Menu. This will commit the changes in the database. Let’s go back again to our homepage to check our changes.

We’ve got our drop down menu

drop-down-menu-configuration-8

Now, as you can see, we’ve got ourselves a drop-down menu on Services. So those three pages are now under the Service menu.

Upload Files to the Media Library

Upload files to the media library

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

upload-files-to-the-media-library

Add files to media Library

To add files in WordPress, we need to head over to the media library. To go to media Library and upload a file, click Add New under Media menu.

Ways to upload a file

After clicking Add New, we are now on the Upload New Media page. There are two ways on uploading a file. You can drag and drop the file directly from your computer to WordPress media library or you can click Select Files and a file directory will pop-up then you can select the desired files that you want to upload.

Ways to upload a file: Select Files

As what I’ve said earlier, a file directory pop-up will appear if you click Select Files to upload a file to your media library. In this case, I’ve got a PDF and I’m going to grab a stock photo and we’re going to upload both of those. If you are done selecting the files that you need to upload, click Open.

Uploading in progress

Once you click Open, you will now see the files being uploaded. On the image above, the second file is currently in progress for uploading.

Questions: Why would we want to upload something directly to the media library?

Well, the most usual case for this is when you want to get the link of the URL of the file. So, with an image, you’ll usually be uploading that in the page or the post where you’re doing the editing. However, if you wanted to link a text or picture to a PDF, you need to know the URL of the PDF.

So, once we’ve uploaded the file, click on the Edit to get the URL of the file.

Get the URL of the file

This is now the attachment page. Let’s not worry too much about what this is all about. What we’re looking for here it’s the URL of the file. To get the URL of the file, it is located on the right side of the page where it says File URL. Copy the whole link inside the box. You have now the URL of the file. You can already use it to link text or pictures to your file.

Repository of your uploaded files

Head over to the media library to check the files you uploaded. Once done, you can now see the files that you have uploaded.

Dashboard Sidebar Menu

Dashboard Sidebar Menu

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

wordpress-dashboard-sidebar-menu

WordPress dashboard menus

On the left side of your WordPress back-end dashboard, you can see the important menus. Let’s see what are inside these menus.

Posts

This is where you do your blog posts, normally. Under the Post menu are:

  • All Posts
  • Add New
  • Categories
  • Tags

Media

This is where the media library is. This is where you can upload your files like images, audios, and etc. Under Media menu are:

  • Media Library
  • Add New

Forms

This is where to place your gravity form section. Under Forms menu are:

  • Forms
  • New Form

Pages

This is where we put the pages of the website. Under Pages menu are:

  • All Pages
  • Add Now

Appearance

This is where you can modify the look-and-feel of your website. Under Appearances menu are:

  • Themes
  • Customize
  • Widgets
  • Menus
  • Header
  • Background
  • Editor

Plugins

This is where you can set your plugins. Under Plugins menu are:

  • Installed Plugins
  • Add New
  • Editor

Users

This is where you can manage your users. You can add, edit, or remove a user. Under Users menu are:

  • All Users
  • Add New
  • Your Profile

Settings

This is where you can set your overall settings of your website. Under Settings menu are:

  • General
  • Writing
  • Reading
  • Media
  • Permalinks
  • Mailgun
  • Others (plugin settings)

Group Pages Under One Parent Page

Group Pages Under One Parent Page

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

group-pages-under-one-parent-page

Let’s make a page under a parent page

Sometimes, in a website, you’ll have a hierarchy of pages.

What we’ve got here is a Service page and I want to make this a child page to the overall services page. On the right side of the page, you can see and modify the page’s attributes. To make it a subpage of the parent page Services, under Page Attributes, you will see a Parent property.

Under parent property, select Services.

Publish the page

After selecting Services as a parent page, click Publish. This is important from a search engine perspective because this now logically puts this page as a page under Services.

We also make it much easier to manage our pages when we got a lot of pages because if you have them grouped in the sort of sections like services or products, it is much easier when you come back and find that page in the dashboard.

Go to All Pages

If we want to check the output of what we did, let’s go to All Pages under Pages menu. Alternatively, you can also click directly the Pages menu.

Services 1 now a subpage of Services page

You’ll see that the Service 1 page is now indented from the Services page. It means that it’s already a subpage of Services.

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.

Dashboard Top Menu Admin Toolbar

Dashboard Top Menu Admin Toolbar

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

admin-toolbar-from-front-end-view

Click on the menu with home icon and your website’s name (backend)

Let’s have a look at the top menu bar on the WordPress interface. The very first thing that’s actually useful up here is the little house icon with the name of your website next to that.

Click on the menu with home icon and your website’s name (frontend)

If you click on that, it’ll take you to your homepage and it also changes the submenus. If you’ll click on the house icon again, it’ll take us back to the dashboard. Fantastic!

Hover your mouse over the New menu

Now, the other useful thing when you’re in the admin is the New menu. This menu lets you create new:

  • Post
  • Media
  • Page
  • Slide
  • User
  • Form

The options you have here will depend on what plugins are installed whether you have your custom post types or maybe WooCommerce or things like that. Basically, the New menu gives you a way of creating some content without having to go through the side menu.

Click on the menu with your name on it

Over to the upper right side, you’ll see it says “G’day” and whatever your username is. From here, you can choose to log out or you can edit the profile you have within the WordPress.

Create a New Page

Create a New Page

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

create-a-new-page

Let’s add a new page by clicking on the Add submenu under the Pages menu

Let’s add a new page. To add a new page, hover your mouse to the Pages menu and a submenu will appear. Click on Add New and a standard WordPress page editor will be seen.

The Add New Page

Right now, we’re in the normal, single column editor that comes with every WordPress website.

Name the page Contact

Let’s going to name our page Contact. If we’d like, we can use it just like a normal WordPress mode. We can put in some text, just like in the image above, and we can carry on and filling it just like normal.

Click on the Visual Composer’s backend editor

But what we’re really here is to use the backend editor. To proceed with the backend editor, click on the blue colored button with Backend Editor text on it below the permalink.

A guide will help you through the process

This is the visual composer controls. A guide will also help you through the process to help on how to use the visual composer.

Add a text block by clicking on Add Text Block

The most useful thing we can probably do right now is to add a text block. To add a text block, click on the green colored button with Add Text Block text on it.

Text block added

After clicking the button, this will give us a box with a default template that we can edit.

As you can see in the image above, we’ve got a text editor and we can also add some more columns and a few other things that would be quite useful.

Click on the permalink to preview the changes

Once finished, click on the blue colored button with Publish text on it to publish the page. To check your page, click on the permalink to visit your newly created page.

Admin Toolbar from Frontend View

Admin Toolbar from Front-End View

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

admin-toolbar-from-front-end-view

WordPress front-end view

Now, we’re logged-in as an administrator to our WordPress website. If we go back to the homepage, there’s an extra menu bar at the top of the screen.

Hover your mouse over the menu with a home icon and your website’s name on it

The useful parts here, if we click where it says the website name, that will take us back to the dashboard. It’s a great shortcut. If we want to go to our menu system to change our drop-down menus, we can select Menus in the option.

Hover your mouse over the New menu

There are also few other sections here that are quite useful like the New link to make a new page or post and, also, we’ve got out edit links as well for changing and editing the page.

Click on the menu with your name on it

Also, on the right, you’ve got your user thing. So if you want to logout, you can do it from here too.

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.

Add a Page to the Main Menu

Add a Page to the Main Menu

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

add-a-page-to-the-main-menu

How to add a page to the menu?

When you create a new page, it does not necessarily add to the menu. The following are the steps on how to add a page to the menu:

Go to Menus page

First, hover your mouse on the drop-down menu and choose Menus.

Alternative way to go to the Menus Page

If you were already in the dashboard, you can hover your mouse to Appearance then Menus.

Select the page and click on Add in Menu

Second, click View all to show all the pages you created. Afterward, select at least one page you desired to be added to your menu then click ‘Add to Menu’ button.

Set the structure of your menus

It will then be added to the menu structure. In the last step, we selected our ‘Contact’ page. So now, our ‘Contact’ page is already in the Menu Structure below the ‘Home’ page.

You can reorder the menus by dragging them up or down. If you’re already satisfied with the ordering of your menus, click the blue colored ‘Save Menu’ button. Both buttons work fine.

Output

To check if my menus were already added, I’ll go back to my homepage. As you can see in the image above, the ‘Contact’ menu already appeared.

The important thing to remember, adding a page does not automatically add the page to the menu. Once you’ve created your page, you have to add it yourself to the menus.

Disable Comments Plugin Review

Disable Comments

Get a copy of the transcript of this review (pdf).

disable-comments

What is Disable Comments?

Disable Comments 1

If you use WordPress as a content management system primarily as opposed to just a blog and if you’re anything like me, you’re probably sick of worrying about all the comment fields and all that sort of stuff.

So, one of the solutions that I’ve always used for as long as I can remember is a plugin called Disable Comments.

How use Disable Comments?

Disable Comments 2

It’s very easy, I mean, there’s really not many settings to it because, of course, well, all you’re doing is disabling comments. You can also do some stuff inside the theme. So, of course, you can leave out comments field. But what this plugin does is it actually removes the comments section from the dashboard. It actually takes away the whole spot where the comments would usually be. So it’s not even there to be clicked and bother anybody.

You don’t even know that there are comments built into WordPress essentially, which, from my point of view, that’s perfectly fine because, for the vast majority of sites we work on, we don’t want comments. They’re business websites. The only comments they want to go through are inquiry form, an email link, or something like that.

It takes all the fields away, all the boxes away. So, basically, all the comments just completely disappear and it doesn’t dumb stuff. They don’t have the things in the menu bar and all that kind of thing. You can pretend that comments don’t exist anymore.

If you’re looking for that in the WordPress repository, it is simply Disable Comments. There are 800,000+ installs and it is being kept current. So, the developer is looking after this well.

I’m using for some years now. I don’t have this really much else to say. It’s just such a simple plugin. It’s a really good example of just a plugin which does exactly what it should do and nothing more. I’ll rate this 5 out of 5.

For more information, click the link to visit Disable Comments.

Seriously Simple Podcasting Plugin Review

Seriously Simple Podcasting

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

seriously-simple-podcast

What is Seriously Simple Podcasting?

Seriously Simple Podcast 1

The podcast plugin that I use for the Beach Business Breakfast Show is probably, I have to say, the easiest plugin I could find for setting up a podcast in WordPress. I have used the BlueBerry one before and I found that it was a bit complicated in terms of configuring the settings and all that kind of stuff.

It’s actually named Seriously Simple Podcast plugin and the installation is really quite simple because, essentially, it’s adding a custom post type to the backend of WordPress which gives you the podcasting functionality. It’s got a nice little add-on for stats as well which is also free and fun that works quite well too.

WordPress dashboard: Podcast

Seriously Simple Podcast 2

From a back point of view, it looks like a whole bunch of posts and, I mean, that’s essentially what a podcast is. It’s a bunch of posts with mp3 attached. So you have all the usual functionality of posts like tags and you can drop in videos and things like that.

Podcast Episode Details settings

Seriously Simple Podcast 3

Each episode when you’re editing it, imagine you’ve got the normal view of a WordPress blog post.

Listed below are some of the fields that you can edit when you’re posting a podcast:

  • Description
  • Episode type
  • Podcast file (link of your podcast either inside of your media library or outside like Amazon S3)
  • Duration
  • File size
  • Date recorded
  • Set featured image
  • Explicit (you can block it from going into iTunes and Google Feed Play if you wish)

Depending on what you want to do with it, you can configure the page on the website to show however you wish to show them.

Podcast Settings: General

Seriously Simple Podcast 4

The settings are pretty basic. There’s not a whole lot to worry about.

Listed below are the general settings wherein you can decide on what to set on your page:

  • Podcast post types (posts, directories, field groups, grid builder, scans, events)
  • Include podcast in the main blog
  • Media player locations (full content, excerpt, oEmbed excerpt)
  • Media player position (above the content, below the content)

Podcast Settings: Feed details

Seriously Simple Podcast 5

Listed below are the feed details settings which will be used in the feed of your podcast so your listeners will know more about it before they subscribe:

  • Title
  • Subtitle
  • Author
  • Primary category
  • Primary sub-category
  • Secondary category
  • Secondary sub-category
  • Tertiary category
  • Tertiary sub-category
  • Description/Summary
  • Cover image
  • Owner name
  • and some details which are only optional

It’s really simple and I honestly like it. This just walks you through it pretty easily.

Graph Reports

Seriously Simple Podcast 6

When you look at the stats, so this is a free add-on for the plugin, it’s pretty simple but it gives you a good idea of what’s going on with your podcasts.

These are some of the details you’ll see in the report:

  • Your top episodes
  • How many lessons they’ve had
  • The percentage that has been played through audio or direct download or even in iTunes.

It’s got all the essentials, I think, for what you want to do a good podcast without getting too distracted.

So, I have decided for the rating that I will give this plugin. It’s 5 out of 5 because I really have not had any problems with it whatsoever and it does exactly what it’s supposed to do. If you’d like to have a look at the podcast that I run with, it’s Beach Business Breakfast. In my podcast section, you’re welcome to have a listen and it’s also on iTunes.

For more information, click the link to visit Seriously Simple Podcast.

Social Networks Auto Poster Plugin Review

NextScripts: Social Network Auto-Poster (SNAP)

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

nextscripts-social-network-auto-poster

What is NextScripts: Social Networks Auto-Poster?

NextScript - Social Media Auto-Poster 1

If you’ve ever had a blog, you have, no doubt, thought it would be great if you could send a link from your blog off to Facebook, Twitter, LinkedIn, and all those kinds of social media websites. So there’s a lot of places where you can post out links to your blog post and, of course, this is a good way of getting some extra readers and social traffic to your blog.

The plugin which I have used for many years now and, I find, does the job very well is NextScripts: Social Networks Auto-Poster. Their free version does an excellent job and the paid one essentially adds a bit of extra functionality and give you the ability to do more posts to different social networks.

You can certainly use this at no cost to post on to something like Facebook and Twitter and that kind of thing. And if you’re running a podcast or you’re doing blog posts in WordPress, then you install the SNAP plugin.

NextScripts: Social Networks Auto-Poster options

NextScript - Social Media Auto-Poster 2

What you’ll find is that there are a few settings to do depending on which social network you’re connecting to, is ranging from very simple to particularly complex. The different social medias have their different ways of getting connected. Things like Facebook and Twitter, they’re pretty straightforward. It’s a little bit more fiddling around to do, Google+ and LinkedIn, but it is still completely possible. The instructions that NextScripts have on their website are really very thorough explanation with screenshots. So if you just follow the instructions, you will get it right.

NextScripts: Social Networks Auto-Poster more options

NextScript - Social Media Auto-Poster 3

You get a fair whack of settings when you’re about to publish the post as well. You can choose to do just a text post, an image post, or a text post with a link. What I do is I use this kind of short code (%TITLE%, %URL%, %SITENAME%) substitution so I can put the title of the post and a link URL back to the post page  or to my website. You can include things like the tags that you put on the post into the thing that goes across the social media as well. It works surprisingly well that it works fine with the scheduled posts so you can schedule the post.

There’s a lot of other options in here which, to be honest, I don’t really use even a fair whack of the functionality because I like what it does which is send things off to social media.

I’d have to say, it has never let me down. The support and functionality were excellent and I definitely give this 5 out of 5.

For more information, click the link to visit NextScripts: Social Network Auto-Poster.

WooCommerce POS Plugin Review

WooCommerce Point-of-Sale (WooPOS)

Get a written copy of WooPOS’ step by step guide (pdf)

woopos-review

What is WooPOS?

WooCommerce POS or WooPOS is a kind of a specialized theme plugin for WooCommerce. This is a really neat idea. It means that instead of having to run another system, you can install this and use your WooCommerce store for a basic point-of-sale system. Think of this as the simplest looking shopping cart you can get.

How to add items to the cart?

When you go to the WooPOS page, you are presented with a list of clickable products and you can add those products to the cart. To add an item to the cart, simply click the green colored ‘+’ button.

How does the checkout process work?

After adding an item to the cart, your current cart which contains all your items ordered, will be seen at the right corner of the same page. In WooPOS, the checkout process has been simplified.

Advantages of having WooPOS as your point-of-sale system?

  1. You are presented with a one-page checkout shopping cart.
  2. You can access WooPos on tablets and phones. It will adapt to the screen size of your tablet or phone and is still easy and convenient to use in a touch-tap environment.

Both free versions and paid versions are excellent but there are more features in paid versions that are very useful when it comes to maximizing your profit. These are some other advantages/benefits of having the paid versions of WooPOS for $129/year rather than the free versions:

Free version

  1. You can only use cash and Paypal as your payment methods.

Paid version

  1. You can add customers in your checkout process rather than having a guest customer.
  2. You can use more than three gateways of your payment method other than cash and Paypal. With paid version, you can use Stripe or any other methods as one of your payment methods.
  3. You can see and generate reports.
  4. You can use product stock-taking.
  5. You can serve mobile customers.

For more information, click the link to visit WooCommerce POS (WooPOS).