Welcome to your new website!

Congrats, you’ve got a super-awesome new website from Phete First Graphics! Your new site is a dynamically generated content management system that puts YOU in control of your site. It’s easy and it’s fun (or at least I think so!). When you first log in to the administrative (“backend”) portion of your site, it may look a little intimidating, but I promise it’s really not. Follow these instructions for a quick explanation of your site’s features and navigating the backend of your website. You can always Send An Email with any questions.

You have complete control over your site; however I have disabled certain things from your admin screen so as not to throw too much at you. If you need access to advanced features, please ask and I can enable them.

Please note that in these instructions I refer to Visual Composer, VC, and WPBakery Page Builder interchangeably.

• Logging In To Your Website
  • Log In
  • Password Problems
• Administration Basics
  • Dashboard
  • Main Admin Navigation
  • Admin ToolBar
• User Profile
• Pages Vs. Posts
• Managing Posts
  • All Posts
  • Add New
  • Categories
  • Tags

• Managing Media
  • Media Library
  • Uploading New Media
• Pages
  • All Pages
  • Add New
• Managing Comments
• Slideshows
• Appearance / Menus
• Creating & Editing Content – Blank Page or Post
  • Add A Page Title
  • Page URL
  • Choose BackEnd, Front End, or Classic Editing
• Creating & Editing Content – Rows & Columns

• Creating & Editing Content – Elements
  • Adding Elements
  • Commonly Used Element Blocks
  • Editing Element Blocks
  • Text Block & Column Design Options
• Creating & Editing Content – The Text Block Editor
• Creating & Editing Content – The Publish Box
• Creating & Editing Content – Images
• Creating & Editing Content – Image Lightbox
• Creating & Editing Content – Image Gallery
• Creating & Editing Content – Templates
• Creating & Editing Content – Unwanted Sidebars & Headers
• SEO – Search Engine Optimization

Log In

Begin by logging into the “administration area” or the “back end” of your website. Visit your site’s login page by placing “wp-admin” after your domain name.  For example:

http://www.example.com/wp-admin

or

http://www.example.com/subfolder/wp-admin

Your specific login link has been provided in your Admin Guide. Replace ‘example’ with your website domain, and if applicable, ‘subfolder’ with your website’s subfolder name. Log into your website using the username and password you have been provided in your Admin Guide.

Password Problems?

If you ever forget your password you can reset it by clicking the ‘Lost Your Password’ link below the login box. On the next page, enter your username or email address and click ‘Get New Password’.  This will send an email to your username’s registered email address with a Password Reset Link. Check your spam folder if you do not receive the email.

Dashboard

After logging in you should see the main Administration Screen called the Dashboard. This is your admin start page which displays a collection of information and data about the activities and actions on your site. It may also have a link to view your website and tech support contact information. You can always return to the dashboard by clicking the ‘Dashboard’ tab in the main navigation at left.

• Dashboard
• Posts

• Media
• Pages

• Comments
• Slideshows

• Appearance
• Profile

Visit Site

Click on your web site name in the upper left of the tool bar. Your homepage will open in a new tab.

Add New

Hover on the menu link ‘New’ to see options of what post types you can add from the toolbar. Usually you will have a shortcut for adding a new Post, Media file, or Page.

Logout

Hover over your username in the upper right of the admin toolbar. A dropdown menu appears. From here you can edit your profile or logout of your website.

Comments

If you have a blog page with visitor comments enabled, the comments icon will show you how many comments are pending approval from the administrator.

User Profile Screen

Click on the Profile tab. This is where you will enter information about you, the author and editor of the site. The main settings you will want to be aware of are the email address and password – here you can change both. You can even change your Admin Color Scheme. Fill in the information and click Update Profile when done.

Understanding Posts vs. Pages

This web building platform enables website owners to update page content and operate a blog page through a friendly interface (avoiding the need to learn web coding skills).

Before beginning, it’s really important to understand the difference between pages and posts.

On a blog, the content consists of multiple articles (also sometimes called “posts” or “entries”) that the author(s) writes. Not all websites have blogs, so your site may not have this option!

In the main navigation at the left side of your administration screen, hover over the Posts tab. You will see a submenu for All Posts, Add New, Categories & Tags.

All Posts

Hover on the Posts tab in your main navigation and click the All Posts subtab. A list of all your blog posts will appear.  You can select the Post or Posts you wish to edit, delete, or view. A powerful bulk edit feature allows you to change certain fields, en masse, for a group of Posts. A handy in-line edit tool, called Quick Edit, allows you to update many fields for an individual Post. Various search and filtering options allow you to find the Posts you want to edit or delete. To edit an existing post, click on its name in the All Posts screen.

Add New Post

Hover on the Posts tab in your main navigation and click the Add New subtab. A new blank blog post screen will appear.  Fill out the Title field, enter your content, and hit the Publish button when you are finished. For more information on editing Posts and creating content, please see Creating & Editing Content.

Categories

For blogs with lots of posts, it helps to organize your posts and place them in Categories, or the general topic the post can be classified in. Generally, bloggers have 7-10 categories for their content. Readers can browse specific categories to see all posts in the category. Select the category you want by checking the box next to the title. To add a new category, click the “+Add New Category” link in this section. You can manage your categories by going to Posts > Categories.

Tags

‘Tags’ refers to micro-categories for your large blog, similar to including index entries for a page. Posts with similar tags are linked together when a user clicks one of the tags.  Add new tags to the post by typing the tag into the box and clicking “Add”. You can manage your categories by going to Posts > Tags

Media consists of the images and files that you upload and use in your site. Media is typically uploaded and inserted into the content when creating a page, but can be done separately through the Media tab.

In the main navigation at the left side of your administration screen, hover over the Media tab. You will see a submenu for Library and Add New.

Media Library

Hover on the Media tab in your main navigation and click the Library subtab. The Media Library Screen allows you to edit, view, and delete Media previously uploaded to your site. Multiple Media objects can be selected for deletion. Search and filtering ability is also provided to allow you to find the desired Media.

Clicking on a file name will open up the Edit Media / Attachment Details panel. Here you can change the title, description, caption, and alternate text of your file, as well as access the full file url path.

Upload & Add New Media

Hover on the Media tab in your main navigation and click the Add New subtab. The Upload New Media Screen allows you to upload Media (Images, video, files, etc.) for later use in your posts and pages. This screen allows you to both add single items as well as perform bulk uploads, if you wish to add more than one media item to your Media Library. Uploading media from your local computer into the Media Library is quite simple. You can either browse to the file on your computer by clicking the ‘Select Files’ button, or you can drag and drop files directly into the uploader window.

As your files are uploaded, a status bar will be displayed next to each one to indicate progress, and when the uploading is complete, a thumbnail of the media is displayed. Once your upload is complete, you may click on the Edit link to edit and save the information about that media file.

For more information on using images in your content, please see Creating & Editing Content – Images.

A Page is displayed individually on your site and is often used to present “unchanging” information about the site; Pages are typically “timeless” in nature, but of course you can update them whenever you want. A good example of a Page is the information contained in “About” or “Contact” Pages. A Page should not be confused with the time-oriented objects called Posts.

In the main navigation at the left side of your administration screen, hover over the Pages tab. You will see a submenu for All Pages and Add New, as well as a list of your current pages.

All Pages

In the main navigation, hover on Pages and select All Pages. A list of all of the pages in your website will appear. On this Screen you can select the Page to edit, delete or view. Multiple Pages can be selected for deletion and for editing. As with Posts, a powerful bulk edit tool allows certain fields to be edited for a whole group of Pages. A handy in-line edit tool, called Quick Edit, allows you to update many fields for an individual Page. Various search and filtering options allow you to find the Pages you want to edit or delete.  To edit an existing page, click on its name in the All Pages screen.

Add New Page

Hover on the Pages tab in your main navigation and click the Add New subtab. A new blank page screen will appear.  Fill out the Title field, enter your content, and hit the Publish button when you are finished. For more information on editing Pages and creating content, please see Creating & Editing Content.

Comments are an interactive feature of blogs which allow readers to respond to Posts. Not all websites have blogs, so your site may not have this option!

In the Comments Screen you can edit and delete as well as mark comments as spam. Comments that are awaiting moderation can be marked as approved before appearing publicly on your blog, or previously approved comments can be unapproved.  A section at the top of the Comments Screen displays the number of comments awaiting moderation and the number of approved comments.

Not all websites have slideshows, so your site may not have this option!

A slideshow displays several images that cycle in and out, similar to the example above. You can change the images, create new slides, or remove slides very easily by clicking the Slideshows tab at left.

If your website includes an advanced slideshow like LayerSlider or Revolution Slider, please refer to your admin guide for detailed instructions. How do I know if my site includes an advanced slideshow? You will see a new link in the lefthand navigation pane called Revolution Slider or LayerSlider.

Manage Your Slideshows

You can see a list of your current slideshows by clicking on the Slideshows tab in your main navigation. Generally it is a good idea to only have one slideshow on your site, and that is most commonly found on your homepage. To see the list of slides within a slideshow, click on the name of your slideshow (commonly ‘Homepage Slideshow’).

Editing Slides in a Slideshow

To add a new slide, click the blue Add Image button (it may also be called the ‘Select or Upload Images’ button), or click on an existing slide to edit its contents. The order your slides appear on your homepage is determined by the order in which they are listed. To rearrange slides, click & hold the up/down arrows next to each slide (or the image thumbnail) and drag into the correct order. To delete a slide, click the delete button next to its name (or the X that appears on hover). Don’t forget to save your changes by pressing the Update button at right!

Please refer to your personal admin guide for the recommended slide image sizes.

Depending on your site design, your main navigation menu may be at the top or the side of every page. 

Menus are a way of organizing your website to make pages easily accessible to your visitors. I have already created a menu for your site, but please note that if you add any new pages, you must add them to the menu manually. To edit your menu, go to Appearance -> Menus.

In your Menus Screen, you can see a Menu Structure at right – a list of pages displayed in order, complete with subpages. You can change the menu order by dragging and dropping. To make a sub-menu item, drag it beneath another menu item and slightly inset. The visual layout will change on the page and you will immediately see the item nested below its parent.

To add an item to your menu, look to the box at the left, entitled Pages. It displays a list of the pages on your site that you can add to the menu. Select the page you want to add and choose ‘Add to Menu’ and it will appear in your menu list at right.

To change the label of the link in the menu, click the tiny down arrow symbol next to the page in the menu structure at right. This will open additional details about the menu link. Change the field ‘Navigation Label’ to what you want to be displayed in your menu.

To add a custom url (for example, to an external page) to your menu, find the lefthand box called Custom Links underneath the Pages box. Enter the url address you would like, then the menu label you would like the link to have, and press the ‘Add to Menu’ button. Your new link will appear in your menu at right and you can arrange it from there.

To add a ‘blank’ link that acts as a group heading (for example, when you have a bunch of subpages under the heading ‘Services’ but you don’t want to make Services an actual page) then follow the above instructions for adding a custom link. However instead of adding a url, just add the pound sign, #. This tells your website it is a null link that will not link to anything. This is especially useful when you have a mobile menu that you have to open/close with a fingertap instead of a hover.

NOTE: Be sure to always save your changes by clicking the blue Save Menu button. Dragging items and deleting them will not take effect unless you click the save button after making the changes.

So you created a New Blank Post or a New Blank Page.  Now What?

1. Add a Page Title
2. Choose Back End Editing or Classic Editing
3. Create Content with Rows/Columns & Element Blocks
4. Publish Your Page!

Add A Page Title

You will see a blank field at the top of your Page called ‘Title’.  Enter what you would like to call your page or post.

Page URL

Your page title will automatically be turned into the URL address for the page. You can see this address, called Permalink, directly below the page title. Sometimes it takes a second or two after you have clicked off of the Page Title field for the Permalink to process. To change the URL, use the “Edit”  button next to the permalink field, then select OK when you are finished. URLs can not have spaces, capital letters, or unusual characters.

Choose BackEnd Editing

Using the blue buttons under the Page Title, choose whether you would like to create/edit content using the drag n’ drop Visual Composer (Backend Editor), or create/edit content with the classic editor (the default setting for new pages). I highly recommend using the Backend Editor by Visual Composer! It is what I set up all sites with. 

FrontEnd Editing

Using the blue buttons under the Page Title, choose whether you would like to create/edit content using the drag n’ drop Visual Composer (Backend Editor), or create/edit content with the NEW frontend editor editor (Front-End Editor). Front-end editing is similar to traditional WYSIWYG (what you see is what you get) for you visual learners out there. You will be taken to the page you are editing and can add, edit and move content blocks directly on your page instead of via the backend. Watch this video for more information about front-end editing.

Classic Editing

If you do not choose Backend Editor by Visual Composer, you can use the default editor that appears when you create a new page. The instructions for using this editor is the same as the instructions found here for editing a text block. If you select Backend Editor and don’t like it, you can select the large blue button called ‘Classic Mode’ to switch back to the classic editor; however this will remove any formatting you may have in your content.

Overview

1. Add a Row Element
2. Choose the Number of Columns Inside Your Row
3. Add a Text Block Element to Your Columns
4. Edit The Text Block and enter your text and images
5. Publish Your Page!

No Content Yet!

When you create a new page and select Backend Editor, you will see a start screen prompting you to add content. You can do so by selecting the big green ‘Add Element’ button, the big blue ‘Add Text Block’ button, or selecting one of the predefined templates listed. For instructional purposes, we’re going to explain what all the buttons are before we tell you what to do with them.

Main VC Buttons

At the upper left of the Visual Composer editing screen you will see three icons. The first one (three colored squares) will link you to the Visual Composer website. The middle one (a dark plus sign) will add a new element to your page. The last one (three dark rectangles) will open your available content templates. More information on templates can be found here.

UPPER LEFT

MOVE ROW: Click & Drag to rearrange row order.

 

ROW COLUMNS: Hover to see/select column choices contained within the row, like 1/2+ 1/2. You can rearrange columns, i.e. 1/4 + 3/4 can be rearranged to 3/4 + 1/4. See below for column options. You can also manually enter in columns divisions by clicking the Custom link.

 

ADD COLUMN: Click to add a column to the row.

 

 

MIDDLE

ADD ELEMENT: The big plus sign in the middle of the empty row adds an element (see next section). The grey pencil icon at the top-middle and bottom-middle of the column changes the class name of the column and controls design styles of the column.  The trash can at top-middle and bottom-middle will delete the column.

UPPER RIGHT

ROW STYLES: The grey arrow icon at the upper right of a row can collapse/expand a row so you can free up space on your monitor. It does not delete or remove the content.

 

ROW STYLES: The grey pencil icon at the upper right of a row has additional styling options for the row. Generally you won’t need to use this.

 

CLONE ROW: Clones/duplicates the entire row including elements & column layouts.

 

DELETE ROW: Delete the entire row and elements it contains.

To move a row, left click & hold once on the 4 way arrow. Drag your row above or below another row in order to rearrange your page. Rows are always full-width, so they can only move up or down.

To move a column, left click & hold once anywhere on the light grey border that surrounds the column. I think the upper left corner is best. Drag your row side to side within the row in order to rearrange your row. Columns do not leave the row they are in so they can only move within their row.

To move a content block, hover on it until the green icon set appears in its center. Left click & hold once on the green icon set’s 4 way arrow. Drag your content block wherever you want it – content blocks can hop from column to column, row to row, making them very versatile little building blocks.

Helpful hint! Visual Composer will show you the areas where you are ‘allowed’ to move a content item. As the block/column/row nears the area, the area will highlight with a hatched grey pattern if you can move your item there. This is helpful to see where your row, column or content block can go while you are moving it.

Adding Elements

Next we need to add an element, which is basically a block of content. We can add an element block to our row by pressing the big plus sign. A pop up window appears with lots of options. Choose the element type that you want, configure its settings, and Save. You will see your element block within your row.

Text Block & Column Design Options

When you click the ‘Edit’ pencil icon for either a text block or a column, your Settings box opens. There are two tabs on the top. By default the ‘General’ tab is shown. If you select the ‘Design Options’ tab you are presented with a different box that shows a variety of design options you can control individually. Control your margin, borders and padding of elements, choose a border color, or select a background color. These options are extremely helpful if, for example, you want to increase the amount of space between two rows or columns. Learn more about design options.

When you select a Text Block Element, you will be working with the Visual Editor to write text and add images – the bulk of the content on your site.

When writing a post, or a page, in the text editor you simply type your text. The basic paragraph formatting will create itself as you hit the enter key at the end of each paragraph. For more formatting of your text use the buttons at the top of the editor. (These are detailed below.) Select (click and drag with your mouse) the block of text you wish to apply formatting to, then click the appropriate icon to apply the formatting. It’s generally pretty basic like using any word processor. For inserting images, please see Creating & Editing Content – Images.

Save changes when you are done by selecting the blue ‘Save Changes’ button at bottom.

 

1. Bold – creates bolded text
2. Italic – creates italicized text
3. Strike Through – adds a line that crosses out your text
4. Unordered List – creates a bullet list
   • Bullet List Example
5. Ordered List – creates a numbered list
   1. Numbered List Example
6. Blockquote – a way to display quoted text
7. Horizontal Line – inserts a horizontal line break across your content
8. Left Aligned Text
9. Centered Text
10. Right Aligned Text
11. Insert / Edit Link – select the area of text you wish to be a link and click the link icon. Add the link URL, choose if you want it to open in a new window or the same window. Then give the link a Title to describe what its linking to.
12. Remove Link – ‘breaks’ or unlinks a hyperlink
13. Insert More Tag – for blog posts, used as a way to determine the blog excerpt length
14. Show/Hide Kitchen Sink – shows/hides the second row of buttons.
15. Distraction Free Mode – clears some clutter on the screen so you can focus on your content

 

1. Style Formatting – various formatting styles defined by your site. Use this drop down to select your heading levels. WordPress will turn your basic text into paragraphs automatically. Please refer to your personal admin guide to see what your different heading styles look like.
2. Underline – creates underlined text
3. Justify – creates justified text
4. Font Color – use this dropdown to change the color of your text selection.
5. Paste as Plain Text – to paste text copied from another source so as to strip all formatting from the copied source
6. Remove Formatting – to remove formatting for a selection of text, perhaps cut and pasted from another source
7. Insert Character – for adding special characters not available on your keyboard. Things like this ¥, £, ©, Æ, or é.
8. Outdent – move text further left
9. Indent – move text further right
10. Undo
11. Redo
12. Help

Preview Changes: Allows you to view the page as it will look on your site before officially publishing it.

Save [Draft]: Allows you to save your page as a draft rather than immediately publishing it.

Status: The main states are Published and Draft. A Published status means the page has been published on your site for all to see. Draft means the post has not been published and remains a draft to edit. If you select a specific publish status and click the update post or “Publish” button, that status is applied to the post.

Visibility: This determines how your post appears to the world. Public posts will be visible by all website visitors once published. Password Protected posts are published to all, but visitors must know the password to view the post content. Private posts are visible only to you.

Revisions: A list of all revisions made to the current post or page. Clicking on a revision will open a dedicated revision change where you can compare the current version of the post or page with any previous versions. There is also an option to restore any previous versions.

Publish Immediately [Draft]: To schedule a Draft for publication on a future time or date, click “Edit” in the area next to the words “Publish immediately”. You can also change the date of a published post to a date in the past to back-date posts. Change the settings to the desired time and date. You must also hit the “Publish” button when you have completed the post to publish at the desired time and date.

Publish (or Update):  Pressing the big blue Publish button publishes your page publicly on the site or updates any changes you made to an already published page.

Move To Trash: If you want to discard your page, select Move To Trash to delete it.

Step 1 – Place your cursor

In order to add an image to your page or post, you must first insert your cursor in the place in the text where you want the image to appear. By placing your cursor within your text, you can add images inline with your content. You can also place your cursor on a blank line if you want the image to appear by itself instead.

Tip: It’s a good idea to place your cursor on the left margin of your text, even if you want the image to appear on the right. That’s because there is a special setting called Alignment that allows you to control whether the image appears on the right or the left side of the text. It even controls how text flows around the image automatically. Better Tip: instead of messing with alignments, break your row into columns with separate element blocks for the images & text.

Step 2 – Click the Add Media button

Once you’ve placed your cursor on the line where you want your image to appear, click on the Add Media button at the top left of the editor window to launch the media uploader interface. Then select the Insert Media option from the list of actions in the left side of the media uploader window.

Step 3 – Add or Select Your Image

You can add/upload or select the image you want to add to your page or post by choosing from either of the following options in the center of the media uploader window:

Upload Files: Upload the image you want to use from your computer by dragging it into the upload area or clicking the button ‘Select Files’ to browse to the file location on your computer.
Media Library: Select from any previously uploaded images in the media library by clicking on the one you wish to add to your page or post.

Once you have selected or uploaded the image you want to add, you will see a checkbox next to the thumbnail confirming your selection, and see information about it displayed in the Attachment Details pane on the right hand side of the media uploader interface.

Step 4 – Attachment Details

The Attachment Details pane displays a small thumbnail of the image, as well as important information such as the filename, date uploaded, and image dimensions in pixels. There are also action links that allow you to Edit Image, which takes you to the Edit Image page, or to Delete Permanently to remove the image from your site.

In addition, you can edit the following media information:

• Title: The title of this media.
• Caption: The caption for this image. Optional! The text you enter here will be displayed below the image.
• Alternate Text: Enter the Alt text for the image, e.g. “The Mona Lisa” to describe the media.
• Description: A description for this particular media.

These options can be edited later.

Step 5 – Attachment Display Settings

The Attachment Display Settings pane controls how the image is displayed when viewed on the site. You have options to set how you would like the image aligned on the page (in relation to the text and margins) and what the link behavior of the image will be, In addition you can set what size image you would like to display on your page. See below for details.

Step 5a – Attachment Display Settings – Image Alignment

The Alignment setting allows you to determine where you would like the image to appear in your content area and how it interacts with any text on the page. You have the following image alignment options to choose from:

• Left: Aligns the image on the left hand margin, and any text that is on the page wraps (or flows) around the image to the available space on the right.
• Right: Aligns the image on the right hand margin, and any text that is on the page wraps (or flows) around the image to the available space on the left.
• Center: Aligns the image to the center of the page, with no text displayed around it.
• None: Inserts the image in to the page with no alignment

Step 5b – Attachment Display Settings – Image Link

The Link To settings determine the URL/web address to which the image will be linked when clicked on by a visitor to your site. You can specify the following image link settings:

• Attachment Page: Links your inserted image to its media attachment page. (not recommended)
• Media File: Links your inserted image directly to the original, full-size version of the file.
• Custom URL: Allows you to set a custom link URL for your inserted image to link to when clicked. (I recommend doing this from the editor window using the ‘hyperlink’ button)
• None: This setting will remove the link completely, rendering the image “un-clickable”.

Step 5c – Attachment Display Settings – Image Size

The Size settings determine the size of the image you are adding to your site. By default WordPress creates a range of four image size for you to choose from:

• Thumbnail: Displays a small thumbnail-sized version of your image on the page/post. Note, by default the Thumbnail size is a square, so some cropping of your original image may occur.
• Medium: Displays a medium-sized version of your image on the page/post.
• Large: Displays a large-sized version of your image on the page/post. Your image size will automatically be determined by the width of the content column, and display the largest possible image for that space.
• Full Size: Displays a full-sized version of your image on the page/post. Your image size will automatically be determined by the width of the content column, and display the largest possible image for that space. If your original image is larger than this column width, the full size of the image may not be displayed.

Step 6 – Inserting The Image

Once you have determined your image settings, click on the blue Insert into post or Insert into page button, to add the image to your page or post. After the image uploader window closes, you will see the image in the text editor window, including a preview of the alignment of the image, if you have specified an image alignment.

At any time, you can edit the image settings by clicking once on the image in your editor window. Several icons appear (sometimes on top, sometimes on the top of the image, sometimes on the top of the VC textblock window). These include alignment buttons to quickly control your image alignment, an ‘Edit’ pencil icon which opens up your Image Settings, and an X icon that deletes the image.   You can also scale the image size in your editor window by clicking once on the image, and then dragging the boxes that appear in the corners of the image.

Step 7 – Editing The Image

At any point after image insertion, you can go back and change any of the settings by following the Edit Image process above. The Image Details screen will pop-up. Here you can readjust your size, alignment, title, alternative text, caption (optional), and link URL. If you want the image to link to a large version of itself, select ‘Media File’ from the the ‘Link To’ dropdown. If you want the image to link to a custom URL, like another page, select ‘Custom URL’ from the ‘Link To’ dropdown, then enter your url in the field below.

Please be sure to select the Update button at bottom right when you are done making changes.

Step 7a – Editing The Image – Advanced Options

At the bottom of the Image Details screen is a toggle called ‘Advanced Options’. If you click on it the advanced options for your image will appear.  Here you can set the Image Title Attribute, add css classes, and add link-specific behaviors.

LIGHTBOX: For sites built before Nov 2017 – by adding the phrase ‘prettyphoto’ (with no quotations) to your Link Rel field, and making an image link to itself (media file), your image will open up in a fancy lightbox popup when clicked. For other sites, you will need to use the VC content blcok ‘Single Image’ and set the field ‘On Click Action’ to ‘Open Magnific Popup.’

BORDERED: Not all sites have this style applied, but if your site is eligible for the ‘bordered’ style, which adds a specific kind of image border, than enter the phrase ‘bordered’ (with no quotations) in the Image CSS Class field.

Step 7b – Editing The Image – Cropping & Rotating

Clicking the Edit Original Image button from Image Details launches the image editor screen, giving you access to several useful image editing controls. The edits you make to your image are non-destructive and you can restore the image to it’s original (uploaded) specifications at any time. Here are the various controls available to you in this Edit Image mode:

Crop

To crop the image, first click on the image and drag to make your selection. Once a selection has been made, then click the crop icon above the image to finalize the crop. You can use the Aspect ratio and Selection option to make further adjustments to fine-tune your crop selection before clicking the crop icon.

Rotate counter-clockwise

Rotate the image 90 degrees counter-clockwise.

Rotate clockwise

Rotate the image 90 degrees clockwise.

Flip vertically

Flip the image upside-down.

Flip horizontally

Flip the image left-to-right.

Undo/Redo

Remove or restore your last edit. You can click as many times as you want in succession to “step” through the edit history.

Scale Image

Proportionally scale the original image. For best results, scaling should be done before you crop, flip, or rotate. Images can only be scaled down, not up. The original dimensions are displayed as a guideline above the box for entering new dimensions. Click Scale button to display the new scaled image. Also Restore Original Image button appears to allow you restore the change.

Restore Original Image

If changes have been made to an image, the Restore Original Image button allows you to discard any changes and restore the original image. Previously edited copies of the image will not be deleted. Press the Restore image to complete the action.

Image Crop

Used in combination with the Crop icon, this tool allows you to make the following precise adjustments:

Crop Aspect Ratio: You can specify the crop selection aspect ratio then hold down the Shift key while dragging to lock it. The values can be 1:1 (square), 4:3, 16:9, etc. If there is a selection, specifying aspect ratio will set it immediately.

Crop Selection: Once started, the selection can be adjusted by entering new values (in pixels). Note that these values are scaled to approximately match the original image dimensions. The minimum selection size equals the thumbnail size.

Save

Use this to save the changes made to an image and return to the Edit Media screen for this image.

Cancel
Use this to cancel any operation that has been performed on the image in the current session.

Step 7c – Editing The Image – Replace Image

 

A quick way to replace or update an image that is inserted into a page is by selecting the Replace button from the Image Details screen. From here you can upload or insert a new image that maintains the style of the original.

When an image is linked to itself, a full sized version of that image will open in a new window. In order to enable a ‘lightbox’ effect in sites built before Nov 2017, where the full-sized image opens in a pop-up window, please do the following.

1. In your editor window, left-click once on your image.
2. Select the Edit Image icon that appears by your image.
3. A pop up window will appear that contains lots of image settings.
4. On the Image Details screen, make sure that the Link To dropdown is set to Media File.
5. At the bottom of the Image Details screen, select the option to toggle open Advanced Settings (if it is not already open).
6. In the field labeled Link Rel, enter the word “prettyphoto” (no spaces, no quotation marks)
7. Save your changes to exit the pop up window, and update your page/post.

For most sites built after November 2017, use a Single Image content block instead of a text block for your light box image element.

1. Add A Single Image content block/element.
2. Choose your image from your media library or upload a new picture.
3. Choose what size image you want displayed (full, medium, large, thumbnail, etc)
4. Choose your Image Alignment (normally center)
5. For ‘On Click Action’ select ‘Open Magnific Popup’ to enable lightbox
6.  Save changes and Preview your lightboxed image

When you have lots of images you want to include on your page in an organized & tidy fashion, you want to create a ‘gallery’ of image thumbnails for that group of images, add images to that gallery, and then insert the gallery into your page. You can insert a new gallery through the ‘Add Media’ button in your editor window, or click an existing gallery to edit. The gallery image thumbnails on your page will open in a lightbox when clicked. I recommend creating galleries within Text Block elements.

1. In the editor window of the page you want a gallery on, create a row/column with a text block element.
2. Position your cursor in your text block editing screen where you want the gallery to be.
3. Select ‘Add Media’ button.
4. This will bring up the file library window. On the left is a list of options. Choose ‘Create Gallery’.
5. Using the tabs at the top, you can either browse through images you have already uploaded in your Media Library, or you can Upload new images.
6. If you are uploading new images, be sure to edit the Alt Text, Title, & Caption at right. The caption is the optional text that will be seen underneath the image.
7. When you have uploaded images or selected existing images, press the blue ‘Create A New Gallery’ button at bottom right.
8. You can now see the contents of this gallery. Drag to reorder images.
9. At the right you can see the settings of your gallery. In the ‘Link To’ dropdown, be sure to select ‘Media File’ so that the image will open in a lightbox when clicked. Choose the number of columns you want the gallery to have. (Most pages have 4-5 columns.)
10. Gallery Image Size: For square thumbnails, make sure your Size (settings, at right) is set to Thumbnail. If you want your gallery images to not be cropped, select one of the other sizes.
11. Click the blue ‘Insert Gallery’ button at bottom right to insert into your page. (Don’t forget to then save your page to view your results on line!)
12. In your editor window you may see a large placeholder image (or shortcode, or mini-gallery) wherever there is a gallery (placeholder image at left), depending on your version.
13. If you left-click once on the gallery placeholder, two icons will appear. One is an ‘Edit’ pencil icon which will reopen the Gallery Settings so you can rearrange image order, or add/delete images from the gallery.  The other is an X icon, which will delete the gallery.
14. Special Note: Some galleries have an additional option to customize the url address that the gallery image goes to. If this is enabled on your site, you can enter the gallery edit window as normal. Select the image you would like to link. In the Attachment Details screen that appears to the right, scroll down to find the Gallery Link URL field. Type your url link here. Save your changes.

Not all websites use template-based content! Please check in your admin guide to see if your site uses templates.

For some websites, I have built in blocks of content that have been styled in a certain way. Some examples of templates are checklists, boxes with uniquely colored backgrounds, or page titles. Templates are an easy way to insert pre-made or pre-styled content so you can focus on more important things. If you have a page layout that you use over and over again, you can save a page as a template to use on a different page.

1. Using the main Visual Composer icons seen at the top left of your editing window, select the Templates button. It is the last icon consisting of three rectangles.
2. A Templates pop up window will appear.
3. Here you will see options to save the page as a template, or load/insert a new template into your page.
4. To save the page you are currently working on as a Template, type a template name into the field called ‘Save current layout as a template’. Click the Blue ‘Save Template’ button at right. Close the window.
5. To load/insert a template into your current page, locate the Template Name under the ‘Load Template’ list. Click the link for that Template name. Your template will be inserted. Close the window.

When you preview your page, do you see a header or sidebar that you didn’t assign to this page?

For some websites built after Nov 2017, pages default to having specific page headers or sidebars that you may not necessarily want. To turn these options off, follow these steps:

1. If you have a default sidebar you do not want to use on the page, open up your page editor.
2. Find the box to the right called ‘Sidebar Options’.
3. Three options will be in this box: left, right & disabled.
4. You can choose the position for your sidebar or to turn it off, select Disabled.
5. Update/preview the page.
6. If you want to keep the sidebar contents but have greater control over the width & appearance of the sidebar, select Disabled in Sidebar Options.  You ca then manually add the sidebar wherever you width to the page by adding a content block called ‘widgetized sidebar.’

1. If you have a default header you do not want to use on the page, open up your page editor. Default headers frequently fall back to grey boxes with simple breadcrumb linking within them.
2. Find the box at the bottom called ‘Page Header Options’.
3. Several options will be in this box. Select your preference or to disable, choose ‘Hide Page Title.’
4. Update/preview the page.

SEO stands for Search Engine Optimization. The SEO plugin lets you determine the meta-information of your site on a per-page basis. Nothing beats well-written, concise text. Search engines like quality content best of all. But you can also get pretty far by establishing basic SEO meta information per page.

SEO that matters: page description (a brief, keyword rich description of your site that is typically 2-3 sentences) and page title (a very brief title for the page).

Enter the page titles & descriptions for individual pages in the SEO tab at the bottom of your page editor. This will give you a preview of what Google will display for your page’s search results.