What is Visual Composer?
Visual Composer is a drag and drop page builder for your WordPress website. It is user-friendly and easy for developers to design new pages layouts.
How Do I Use Visual Composer?
- Log in to your wp-admin with user name and password.
- In the dashboard, click on “Pages”.
- You can “Add New” or ‘Edit” an existing page.
- Click on the Visual Composer section “Backend Editor”. Frontend Editor will take you to your page where you can add new rows and elements live on your page.
- You can choose to add an element, add a row, templates, or go to the Frontend Editor.
- Click “Add Row”. The pencil edit tool to the right will let you edit your row. The paper icon will allow you to clone your row. If you click the x icon you can delete the row.
- If you select the top of the row to the left you can choose what column layout you want (if you hover over it will give you the different column options).
- Once you have selected your column layout, click on the “+” sign and select the element you want for that column (Ex: text block, single image, image carousel, accordion, Call to Action, tabs, FAQ, and more.
- If you select to include a single image, you can title your image, click the green + sign to “Add Image” and choose an image already in the Media Library or Upload Files to choose an image from your computer.
- Click “Set Image”.
- Under “Edit Single Image” you can select a CSS Animation which will make the picture fad in on the page (top to bottom, bottom to top, left to right, right to left or appear from center).
- Image size – you can adjust the size of your image to thumbnail, medium or large. (If you leave this section empty it will default to the thumbnail size).
- Image Alignment – you can align the image for left, right, or center.
- Image Style – you can add a shadow, border, 3D shadow, circle border and more.)
- Image Link – enter the URL if you want the image to link somewhere.
- Once you have everything set on the image, click “Save”.
- If you hover over the image element you can click the “Edit” pencil icon if you need to go back in and make any adjustments.
- If you want to add another image you can duplicate the row by clicking on the paper icon. The image will appear directly below the first image.
- You can then drag and drop the image into another column block.
- To add text, click the + icon click to add a text block. Use the text tab to enter text that you copied from a Word document or to enter shortcode. You can choose how you want to align your text, add links, etc…
- Click “Save” to save your text.
- You can add a row and click the + sign to add a row within the row.
- Click “Templates to save the page as a template if you want to use the layout over again on a new page. This is great to use when you have multiple pages that you want to look the same.
- Once you have your page laid out the way you want it, click to “Publish” the page.