How to Add Content Using the Powerful Enfold Theme

Quick & simple Enfold theme

Once you catch on how to use the WordPress Enfold theme, you will very likely not want to go back to anything else. It makes web design so quick & simple. You just use Layout Elements to create your columns. Then you drag & drop your content & media elements into the columns.

YouTube video

To understand this blog post, you have to follow the corresponding YouTube video and vice versa. Pause the video frequently and takes notes.

Getting started with a new page

Enfold themeAfter you have clicked the New link and opened a brand new page or post, add a headline and then click Advanced Layout Editor.

Enfold themeClick Layout Elements tab, decide how many columns you want and drag the appropriate element down to an area that turns green. (See the 25 second point in the video.)

28 seconds 

Click clone icon to make another column.

32 seconds

From Content Elements, drag Text Box into a column. You are allowed to drop the element after the area turns green. At that point lift finger of mouse button.

37 seconds

Drag Image element into column 2.

41 seconds

Click on column 1. Highlight text. Change it to your new text. I like to change my Font Size to 20. Then I scroll up and click Colors tab. I define custom colours and then click on the lower right-hand corner of the colour square to change it to a dark black. Click Save to exit column 1.

1:03 Make sure image size is OK

Enfold themeClick in column 2 to add image. Before downloading, make sure you have a size that is appropriate.

1:46 Adding HTML code

The ad in a freewebdesign.club website is represented as a widget. That means that it is a bit of computer code that presents the same ad on every page or post in the website.

    • Dragged a 2-column layout element to blank space below the last entry.
    • Clicked Clone icon create 2nd column.
    • Dragged Code Block content element into 1st column.
    • Dragged Image media element into 2nd column.
    • Clicked Insert & Save
    • Went into a freewebdesign.club page in edit view and clicked on Appearance > Widgets
    • Clicked Custom HTML
    • Select HTML code & Cmd C to copy into clipboard

Enfold theme

  • Clicked Code Block in website I was working on
  • Clicked Save
  • In page view same ad shows up only image is beside text

3:14 Inserting a video

  • Insert a one-column layout element
  • Drag Video media element into column
  • Click Video
  • Insert Video
  • Open Finder
  • Drag MP4 file from folder
  • Insert
  • Save
  • Update
  • View Page
  • Watch video

Related page

How to add CSS to an Enfold page
How to add CSS to an Enfold page (this blog)

 

 

 

How to Make an Amazing Enfold Home Page

Enfold tips & tricks

Use the numbers below to find a particular section telling how to use a particular Enfold feature.

5. Configure WordPress
6. Deleting a template
7. Changing  a picture in a template
8. Adding HTML code within a page
9. Adding CSS code also Removing Enfold logo from a page
10. Removing data from footers below page
11. Hyperlinking to middle of Enfold page

1. Start with an Enfold header

The purpose of my Enfold home page is to promote sales of the training manual, How to Serve Customers with Disabilities. So, I decided to have the manual displayed in the Enfold header. It would fade in every 3 seconds along with images of people with disabilities.

(Note that your initial Enfold setup could have made your page setup system a bit different from the steps below. In that case, read this tutorial. )

Expand the YouTube video below to full screen and watch it. Pause frequently. Take notes. Then create the header.

If that did not work for you, follow these steps:

a. Upload a demo

Go to Enfold Child > Demo Import. Click Online Demo beside an image such as Construction Demo.

This will upload a demo Enfold website. Your job is to delete elements or else change them to the corresponding element for the website you are trying to create. The Construction Demo header is illustrated in the video below.

b. Create header images

If you want to follow my example, use Photoshop or GIMP to create 3 header images. I made them 1310 x 580 pixels.

Later each image will fade into the header before being replaced by the next image. Each image will be displayed for 3 seconds.

c. Click “Edit Frontpage”

After you have logged into your account, click the Edit Frontpage link at the top of the page.

d. Layout Elements at 1/1

Click on the 1/1 layout element to indicate that each header image will be a single image the width of the page.

e. Special Heading content element

Click Content Elements tab & then drag the Special Heading icon into the Fullwidth Easy Slider.

f. Add header pictures

Click on the tiny triangle within the Fullwidth Easy Slider. Click Add Multiple Images to add your 3 header images. Click the X’s to delete the old construction business images.

Change the page using your intuition. I chose Fade for the Slideshow Transition and Hidden for Slideshow Control Styling. Then I clicked Save.

Check your header to make sure it works.

2. H1 heading above a header

Make this video full screen. Watch it. Pause frequently & take notes.

3. How to add columns of text

Expand video below to full screen. Watch it. Pause often and take notes.

4. How to add a horizontal menu to the top of the page

Watch the video below. Pause often and take notes.


5. Configure WordPress

  1. In the WordPress dashboard, go to Settings > General.
  2. Enter site name & tagline and then click Save.
  3. Go to Settings > Permalinks. Select Post Name & click Save.
  4. Go to Appearance > Customize
    1. Add a site title, a tagline and a 512 x 512 image that identifies your website among all of the open websites.

Changing page elements

Each of the various page elements is called a template.

6. Deleting a template

Hover over the template and click on the X in the upper-right-hand corner. In the example here, clicking the top X would delete both the picture and the text below it. Clicking the X beneath that would delete the picture only.

7. Changing a picture in a template

Click on the picture. This will give you a larger picture. Click Insert Image.

Drag & drop the new picture onto the screen, adjust the size and click Insert. Save & then update the page.

Hover over the text and click the X to delete it.

8. Adding HTML code within a page

  • Clone a column that has an image in it
  • Keep clicking the greater than sign in the cloned column until it becomes 1/1.
  • Delete the image
  • Change title if you want one.
  • Click on the box with the text
  • Remove the text
  • Click on the text tab
  • Add the HTML code to the box
  • Save your page.


9. Adding CSS code

Occasionally you will search how to make a change and some tech support person will tell you to add a certain CSS code to your source code. For instance, the CSS code below will remove the Enfold logo from above the header in your web pages.

.logo {
visibility: hidden !important;
}

To do that:

    • Go to Appearance > Themes
    • Among other things, Enfold Child Theme shows up.
    • Click Customize
    • Click on Additional CSS
    • Insert the CSS code
    • Click Publish
    • Go to an Enfold page that was already open on your desktop
    • Notice the Enfold logo at the top
    • Refresh to page and the logo will have disappeared.

The CSS code below will make the letters in a submenu white.
.sub-menu a {
color: white !important;
}

10. How to remove data below page

The data below your page is most likely the footers that came when you originally started the page. To delete them click on Theme Options in your horizontal menu. Click on Footer and then the dropdown arrow under Default Footer & Socket Settings. Select Don’t Display the Socket & Footer Widgets.

 

 

 

 

WordPress Website, How to Make a New One

Creating a brand new website

WordPress website

In a nutshell, this post will tell you how to make a brand new WordPress website. In this example it will have:

* A home page
* A contact us page with a Google Map
* Local optimization to put you on Google’s page 1
* Two business email addresses that link to your regular address.  E.g., Sales@myamazingwebsite.com & Info@myamazingwebsite.com
* An About Us page.

What if you start reading this over and you don’t want to do it yourself? Well, go to Kelowna Virtual Assistant and find out how we can do it for you.

How to set up the entire WordPress website in 11 steps

1. Web host

Since I started creating websites in 1996, I’ve used many different web hosts. My very favourite one has been LiquidNet Ltd Hosting. They have amazing tech support and have been able to help me with practically any problem I’ve had. Besides that, they make it easy to set up a WordPress website.

You probably need no more than the starter package. It is only $35 (USD) per year.

2. Domain name

Choose domain name that helps brand your business. For instance, IBM has ibm.com, Kelowna Virtual Assistant has kelownavirtualassistant.com and CNN has cnn.com.

This post will help you decide upon the ideal domain name for your business.

3. Buy & register your domain

My very favourite place for buying & registering domain names is WhoIs.com. Go there as soon as you have decided upon your domain name. Click on Login to create an account.

You will have to change the DNS settings to supremedns1 & supermedns2. Go here now to find out how to do that.

4. Set up WordPress

Before setting up WordPress, go to My Domains > Hosted Domains. Click the white on black Host Domain button. Add your new domain name to the Domain box. Click Add a Host.

Go to this blog post to see how to add WordPress to a LiquidNet Ltd Hosting website.

5. Home Page

WordPress websiteIf you followed the instructions in the previous paragraph, you should have a home page. To edit it, click on edit from ANY page in your new website. On the left-hand side, you will see a black column called the Dashboard. Click on Pages > All Pages.

WordPress websiteIf you scan through the pages, you will see one called Home. Click the Edit link to make changes.

It is important that the Home page be attractive and informative. That is often where visitors go to find more information about your business.

6. WordPress plugins

WordPress plugins are bits of software that can be uploaded to make WordPress more powerful. After you have finished your initial WordPress website, you really should click on that link and then learn about the most important plugins. Make sure you have them.

7. Contact Us form

WordPress websiteOf all the WordPress Contact Us forms I’ve ever used, Caldera Forms is my favourite plugin. Using the instructions from the above paragraph, go to the Plugins link in your dashboard and install & activate Caldera Forms.

Then go to Pages > Add New and add a new page called Contact Us. Using these instructions, add a Contact Us form to that new page.

8. Google Map

WordPress websiteGo to this Google Maps page and add a Google map to your Contact Us page. Make sure there is a pin at the address of your business.

 

9. Google p.1 with Local Listing

Local Listing means that you can often get on Google p.1 if you have a Google Map and set up Google My Business properly. Learn more on the Google My Business blog post.

10. Specialized email addresses

You may want to have specialized email address similar to info@myamazingbusiness.com. Say you want to have it forward to your personal email address. Your business card can have info@myamazingbusiness.com. You do not have to have your personal email address on your business card. This is how to do it:WordPress website

  1. Log into your LiquidNet Ltd Hosting account
  2. Click on Email tab > Mailboxes
  3. Over to the right click on Create a New Email Account
  4. Use the dropdown box to scroll down to your domain nameWordPress website
  5. Add info, sales, your name or anything you want
  6. Fill in the forwarding information. Add your personal email address or whatever address you want the email forwarded to.

11. About Us page

To add your About Us page, click on New just to the left of View Page. For New you have 5 choices. Select Page.

The rest should be intuitive. Make sure you give a little bit about your history and what you might do to give a benefit to the visitor. Include pictures that promote your business.

Too time consuming?

After going through this blog post, you may decided that you are not prepared to spend the time learning all of this. That’s reasonable. Simply go to Kelowna Virtual Assistant and find out how we can create your WordPress website for you.

 

Larger Font for My WordPress Website

The problem: small font

The font in my new WordPress website was too small. This post tells how I changed that to a larger font.

I use the Twenty Sixteen theme. If you have a different theme, these instructions might not work for you. But then again, they may work. Try them out.  After all, the Features screenshot below says that the font changes stay with your website even after you change themes.

Three systems, one should work

I’ve used three different systems for increasing the font size throughout the WordPress website:

  1. I just used the first (web host) system & it worked perfectly.
  2. I couldn’t figure out how I had done the second system in the past.
  3. The third system broke down after a while. But, I’ll give you all 3 systems anyway.

System #1

Using styles.css to increase font size

  1. Go to list of your domain names in your web host’s website. I use LiquidNet Ltd Hosting. To see the list, I clicked on the Files tab in the horizontal menu. You also need to know that my WordPress theme is Integral Pro.
  2. The domain name I was using was growinglove.club. So, I double-clicked thusly: growinglove.club > wp-content > themes > integral-pro-child. Right-click on style.css and select “edit with plain text editor”.

Because this was a new child theme, all I saw was the head of the style.css file you see by point #1 above.

Then I

  • Added the body code you see by point #2
  • Clicked the Save icon. (See blue icon with pink box around it above)
  • Cleared the cache

Now the regular page font & font beside bullet points are the same size. Note that you may have to tweak that 116% up or down a bit to make it exactly the same size.

System #2

1. Appearance > Editor

Caution: Do this in your child theme, not your parent theme.

Click on Appearance > Editor. That should immediately give you your theme name followed by style.css. If that does not show up, go to the bottom of the right-hand column. Click on style.css.

2. Add font code to body code

Scroll down until you see the body code. Add font-size: 120%; or whatever percentage by which you wish to increase the font size.

3. Click Update File

Click blue Update File button. Refresh a page to see if your font indeed is larger.

4. Heading & bulleted point sizes

The above 3 points will make the regular body font larger. However, it will not take care of your heading & bulletedpoint sizes. This is how to increase the size of your H2 & H3 headings and your bulleted lists:

In your dashboard go to Appearance > Customize > Additional CSS. Add the snippets below.

.entry-content h3 {

   font-size: 20px;

}

.entry-content h2 {

   font-size: 30px;

}

.entry-content li {
font-size: 16px;
list-style-type: disc;
line-height: 1.6;
}

You may want to move the font size up or down a few pixels. Experiment.

Then click the Save button and click the black X to close the Appearance window.

Bulleted lists

Note that this solution does not take care of the small bulleted list problem. To increase the size of the sub-bulleted points, add a font-size snippet like you see in this screenshot.

If you figure out how to solve the small main bullet point problem, please respond in the comments window.

System #3

Using a CSS plugin

1. Install Custom CSS and JS WordPress plugin

larger font

In the black dashboard go to Plugins > Add New. Search for Custom CSS and JS. Install and activate it.

Read the special features of this plugin in the screenshot.

2. Go to Appearance > Custom CSS

After you have installed the plugin, it may or may not appear under Appearance > Custom CSS. It could be one of the main titles in the black column. Wherever it is, click on Custom CSS.

If Custom CSS is not under Appearance, it will be in the main black column under the name Custom CSS & JS.

 

4. Click on Add Custom CSS

larger font

larger fontClick on Custom CSS & JS > Add Custom CSS. The screenshot on the right points out the code that should be replaced. (Thank you, plugin authors, for making the instructions so easy to follow.)

5. Add code & publish

Replace the code referenced in point number 4 above with

input[type=”text”]
{
font-size:16px;
}

You may want to change the 16 with a different font size.

YouTube video

The YouTube video below may shed more light on adding the CSS code that gives you a larger font.

 

Related page

W3Schools CSS font discussion

Caldera Forms — Free WordPress Plugin Review

Caldera forms are free and they are full of features:

  • Multiple columns
  • Multiple pages
  • Conditional Logic
  • Anti-spam
  • Registration & login
  • Dynamic — fields can change based on users’ answers
  • Product purchase forms
  • Support ticket forms
  • Lead capture forms
  • Newsletter sign-up forms
  • Various types of calculators
  • Feedback survey forms

Setup

After installing and activating Caldera forms, they will show up on your WordPress dashboard.

  1. Click on new Caldera Forms link > Forms in black column
  2. Click New Form at top of page
  3. Click on one of the 7 templates for different types of form
  4. Name it
  5. Click Create Form
  6. Here is a key to what you get:
      1. Delete row
      2. Break row into columns
      3. Drag & drop row to different location
      4. New row in this table

  7. New table (It could be one single-column row.)
  • When you click on the New Table plus sign, you will get a white box. Drag New Field blue button into it.
  • Save and then click on Form Settings tab. You will see a shortcode that looks like the image below. Paste that shortcode where you want the form tobe. (Note that you do NOT have to place the shortcode within the source code. It can be anywhere you want in Visual view.)

 

Troubleshooting

Here are two problems you may have had after testing the form out:

1. I do not get the email

Click on the green Email tab. Make sure your email address is listed under Email Recipients. If that does not work, you might want to change your email type is set at Text.

It took me a while before I was able to file in a form and have it email to my address.

After a web search, I found out that this was a common problem for ANY form plugin. There can be multiple reasons for this.

In my case, I had not filled out the From Email box in correctly. (See image above.)

2. Visitor information is not in email

When you entered the names of the fields, each name was given a slug. Under Email Message, each slug must be entered surrounded by percentage signs.  (See illustration above.)

3. If you are still having email issues,

go to this Caldera Forms page.

Related page

Caldera Forms installation instructions

Page Builder WordPress Plugin, Visual Composer

What is Visual Composer?

Visual Composer is a WordPress page builder plugin. You can build any layout you can imagine with the intuitive drag and drop builder. No programming knowledge is required.

Visual Composer is not theme specific. This means you can use it with any WordPress theme without needing to make any adjustments to the existing code.

Visual Composer Index

Animated GIFs
Button presets
Buying & installing
Create a button
Getting started
Headers add-on
Help on Facebook!
Linking from an image
Media Grid
Reducing image size
Tutorials, video

 

Do NOT expect to learn Visual Composer in the first few hours. It is best to make a page (NOT post) called Temporary. Then practice until you know the basics.

Getting started with Visual Composer page builder

After Visual Composer has been activated, you will see Backend & Frontend editor buttons on the page.  To add rows &page builder columns:

  • Click Frontend Editor button
  • Click Content Elements icon

 

page builderImagine this: In the Visual Composer editor mode you
page builder

    • Click on your Add Element button
    • Click on Row
    • Hover over new row
    • page builderClick on dropdown arrow to expand blue box
    • Click on columns icon
    • Higher up on the page you’ll see a Row Layout box

    • Click on the layout of columns you prefer
    • >page builderEvery plus sign you see in a row represents a column
    • Click a plus sign

v

  • In the resultant Elements panel, click Single Image
  • In the Single Image Settings box, make sure you have an appropriatepage builder image size
  • Click on the image box to find a picture
  • If you don’t have an appropriate picture in the library, click on Upload Files
  • Drag & drop the image from your Finder
  • Scroll down to find more features
  • For example, people can click on a picture to
    • Open a larger picture
    • Go to another web page
  • Make sure you experiment to see what these various features can do
  • Click Save Changes

A possible error

If you are frustrated: Note that sometimes the changes will not show up until after you updated a page.

If you are still frustrated: Sometimes it is best to delete the old Visual Composer page and create a new one. It can be easier than trying to find the errors in the coding.

Before you delete the old one, take a screenshot (Cmd/shift/3) of the page & copy all of the links into (preferably) a Textedit page. Also, jot  down the URL and the title of the delinquent page somewhere.

After you know what you want, delete the delinquent page and create the new one.

What I did when I was super frustrated: I had been making a row and then using the Single Picture element. The picture would never show up. So, instead of using Single Picture I used Image Gallery Settings to add a single picture. Everything works perfectly now.

Another possible error

You may get this error message: The uploaded file exceeds the upload_max_filesize directive in php.ini.
That would be because your server has a set limit on the maximum size of the file than can be uploaded at one time. You can get in touch with the hosting provider and get this increased to around 5MB – 6MB, so that you can upload the zip and there is no such issue.

Also please make sure that you unzip the codecanyon – 242431…zip file and then only upload the inner js_composer.zip.

Page builder tutorials

Go to the WPBakery website. You will find lots of very short videos such as the one below. They explain different features of Visual Composer.


Buying & installing Visual Composer

For most plugins, you simply go into your WordPress dashboard & buy it. You cannot do that with the Visual Composer page builder plugin.

You go to Code Canyon & buy it. Also, you need a new license for each website on which you use it. The Code Canyon code cannot be read like regular HTML code.

Buying & installing:

    1. Go to codecanyon.net & buy a license for Visual Composer
    2. Download
    3. Copy the license number from the email into a safe place
    4. Go to your Downloads folder & double-click on the zip file you just downloaded
    5. This will create js_composer.zip
    6. Drag & drop js_composer.zip onto your desktop
    7. Go into the dashboard of the site in which you wish to install Visual Composer

page builder

  • Click Plugins > Add New
  • Click Upload Plugin
  • page builderBrowse “js_composer.zip” and open it
  • Click Install Now & Activate.
  • Visual Composer is now on your dashboard

Use the same system above for adding any addon to your WordPress website.

Media Grid addon

page builder

With the Media Grid element you can have columns & rows of SQUARE pictures. Experiment and you can add all sorts of different effects to them. By clicking on a square picture, visitors can see expanded view of picture in original shape.

Linking from a grid of pictures

I wanted to replace the picture in the upper right-hand grid with the June Sale picture below. Then I wanted to link it to the sale page.

First of all, you cannot link from an image in a Media Grid element.So, I added images to one row at a time using the Image Gallery element. I saved the page.

Then I edited the page with the regular editor rather than the Visual Composer editor.  I highlighted the HTML code for the third image. Then I used the linking icon to link the selected text to the June Sale page.

Note: Every time you edit the page with Visual Composer, the linking code is erased. So, you have to add it again.

Getting started with Media Grid

  • Click on Add Element > Media Gridpage builder
  • page builderClick grey Images icon
  • Select photo
  • Click Add Images
  • Keep up cycle until you have all the images you want
  • Give grid unique Element ID such as id=”myIcons”
  • page builderEXPERIMENT by filling in rest of grid settings including Item Design effects
  • Click Save Changes
  • Click Update to save page
  • page builderTo edit a grid, click on “Edit with Visual Composer” at top of page
  • Hover over grid and you will see green editing box

Grid Builder video

Other addons


Button presets

Create a button

page builderTo make a button, go to Add Element and click on the Button icon.  Experiment with the various button settings including design options.

page builder

If you wish, Button Settings can animate them to have different effects such as Zoom In and Slide in Right.

So, right now, go to Add Element > Button. Then fill in the Button Settings. Make a few buttons with different effects. Just experiment.

page builderAny time in the future you can go to the button and click on “Edit with Visual Composer”. Then you can do such things as add a hyperlink to another page.

Create a preset

page builderOccasionally you may want to create a preset button. That is a button that will be placed in a library to use again. When you reuse it, you can even make some minor changes to it if you wish.

Here are the points from the animated GIF in point form:

  • Click on plus sign where you want preset button
  • Click on button element
  • EXPERIMENT with button settings. (Here we used purple with a FadeInDownBig CSS Animation)
  • Hover right of button & click on green edit icon
  • In Button Settings, click on “Save a preset”
  • If you wish, you can save your preset with a special name
  • It will be stored in the preset library

 


Headers add-on

I bought the Headers add-on. This is what tech support sent me after I told them I could not set up Headers. Because I had paid for a license, I was able to log into my website and

  • Click on New > Page
  • Add a title and a word in the body
  • Save it
  • Clicked on Backend Editor > Plus sign > Headers
  • page builderGave me a list of all header templates I received with the add-on.

Animated GIFs

Here’s the process for embedding an animated GIF into a Visual Composer row: Add element > single image > add image > design options > theme default set to Repeat.

 

Reducing image size

 I used Visual Composer to show a PNG file on the left and an animated GIF on the right-hand side of a row. At first the images were far too large.
To reduce their size I used GIMP to reduce the dimensions of the PNG file. I used ScreenFlow to change the animated GIF from 500×500 to 300×300. In both cases I kept the same file name but added “smaller” to the end of it.

Help on Facebook!

If you are struggling, you can actually go to the Visual Composer Facebook page and message them a question.

Website Setup Starting from the Beginning

Getting started with WordPress

So you want to have a website with a WordPress blog. This post explains your website setup from the very beginning to a working (very simple) website. Other posts in this blog will explain setting up

  • Your home page
  • Horizontal menus
  • WordPressBlog
  • Etc.

Website setup in 3 steps

Note that you have to set up everything in the exact order you see here.

1. Get a domain name

You want to start by registering a domain name that matches your business name. The domain registration blog post explains how to do that.

Part of the process of registering you domain name is linking it to your web host. This is called changing the DNS (domain name servers) information. The DNS blog post will show you how to do that.

2. Host your domain name

Since I started creating websites in 1996, I’ve used many different web hosts. In terms of price, tech support and other features LiquidNet Ltd Hosting is by far my favourite host.

The instructions in this post assume you are using LiquidNet. If you are using a different host, you will have to adjust these instructions accordingly.

Log into your LiquidNet Hosting Control Panel. Go to My Domains > Hosted Domains. If you cannot figure out how to add your new domain, open up a new ticket with tech support and ask them.

3. Add WordPress to your website

website setup

If you are using LiquidNet, go to Installer > Applications Installer and click on the Install icon in the WordPress line.

You will see a new panel called Install Application. Make sure every line is filled in properly:

  • For the In Directory line, leave only the slash.
  • Select and delete the word “wordpress”.
  • website setupSelect “weblog title” and change it to a name that describes your business.
  • Keep the radio button on Automatic Database Creation
  • You will see a number of templates. Use the forward and back arrows to help you choose one you like. (I Installed the Twenty Sixteen WordPress Theme.)
  • Click the Install WordPress button.
  • Click the Visit Admin Area button
  • You can start creating your posts & pages
  • You will get an email giving your login URL, username & password. Record them in a safe place — cryptically if possible. (The default username is Admin. Do NOT use that. You want to make it difficult for hackers!)

Notes on Posts & Pages

When you click New in the top of a WordPress Post or Page, you will get a choice of Post or Page. A Post will be part of your blog. When you scroll down to the bottom of a Post on the Internet, you will see a Previous and a (usually) Next button. They will link to the corresponding blog posts.

Any other page you create will be a WordPress Page. E.g., Home, About Us and menus for the various blog categories will all be Pages.

Website setup finished

As long as you performed all of the above steps in the exact order, your website setup should be finished. You should be all set to start creating WordPress pages & blog posts.

If you still have problems, use the search box or else the Blog menu to find the answers.

 

Appointment Calendar Plugin Review

Simplify your customers’ lives

appointment calendarThis is a review of the WordPress Appointment Calendar. So, what can you do with this plugin? You can take appointments on any WordPress site.

You can help your potential customers

  • Schedule online & see availabilities in real time
  • Schedule quickly without hassle.

You may be a

  • Doctor
  • Lawyer
  • Pet groomer
  • Massage therapist
  • Or whatever

Appointment Calendar for WordPress can make the life of your clients easier.

Managed from within WordPress

Appointment Calendar is a simple yet powerful plugin for accepting appointments on your WordPress site. No need to use third party appointment booking services. Everything can be managed from inside the WordPress admin panel.

How to create your first Appointment Calendar

appointment calendar

  1. From WordPress dashboard, click Plugins > Add New.
  2. Type the name of the plugin into search box and click Install Now.
  3. appointment calendarThen click the Activate button. “Appointment Calendar” immediately shows up in black column.
  4. Click Settings > Calendar Settingsappointment calendar
  5. This will get you to the Manage Calendar Settings panel that you see above. Notice the Booking Button Text box. That shows you the blue button that you will see in the box in #7 below. Then notice the Booking Instructions box. The image in #6 below is the HTML code that you see in the box below. It results in the text above the blue button in #7. Note that it is not necessary to use any HTML tags if you do not want to.
  6. appointment calendar
  7. appointment calendar
  8. appointment calendarTo add the form to a page, use the short code “APCAL” or else “APCAL_MOBILE” inside square brackets. Add the shortcode anywhere on a page or post in Visual view. Your Appointment Calendar will appear at the top of the page. So, it is usually best to have nothing but the Appointment Calendar on a page.
  9. To see an example of the Appointment Calendar live, go to this demo page.

Mobile version is different

Note that when you use the mobile version, no calendar shows up. In order to see the calendar, you must tap the blue button.

Many more features in the pro version:

SERVICE MANAGEMENT

  • Create and Manage Unlimited Services
  • Create Service, Setup Service Price, Duration Availability
  • Link Service to Staff
  • Manage a Staff Database

 

CLIENT MANAGEMENT

  • Manage a Client Database
  • Search Clients by Name
  • Client Appointment History
  • New Appointment automatically create client in the Database

 

 

BUSINESS HOURS

  • Setup Business Hours to suit your business
  • Mark Complete days as Off
  • Combine business hours and Time off to create complex working hours

 

GCAL SYNC

  • Sync Appointments with Google calendar
  • New appointments automatically pushed to Google calendar
  • Admin can view all appointments on his Google Calendar

APPOINTMENT NOTIFICATION

  • Get new appointment notification
  • Client gets notified on appointment changes
  • Customize Notification Message

 

 

 

MISC SETTINGS

  • Calendar Settings: Customize Calendar View, Time Slots , Start day etc
  • Setup Different Currency
  • Misc Settings Page

 

 

 

PAYPAL PAYMENT SUPPORT

  • Accept Payment on Booking
  • Accept Full or Partial Payment on Booking.

 

 


video marketingPeter Enns has been developing websites since 1996. As a VA (virtual assistant), he specializes in new website development, researching and writing blog posts and creating videos for YouTube and as animated GIFs. He is a social media blogger and author of a free YouTube tutorial. It’s called 7 Day YouTube and will teach you how to make entertaining videos & animated GIFs.

video marketing tweets

Adobe Stock Images Review

Introducing Adobe Stock images

Adobe StockI have been using Adobe Stock images for several years. I highly recommend them IF you can reasonably use 10 images per month.

They have tens of millions of images from which to choose. All you have to do is type in the correct keywords and you will find an image you like.

Caveat before you sign up

I found that I was not using enough images. So, I started the process of cancelling my subscription. I got the above cancellation fee message.

They gave me to take the next 60 days at no charge if I would not cancel. So, that’s the option I took.

Why use Adobe Stock images?

Adobe Stock

There are several reasons why you might want to use Adobe Stock images:

  • When visitors find your page, you must grab their attention within seconds. Otherwise they may go to another page and never go to your website again.
  • People are more likely to start reading short lines. If your amazing image covers half of your first paragraph, visitors will read your short lines. Now thatAdobe Stock you have their attention, they are more likely to read the rest of the article.
  • People usually do not read a web page; they will skim it. When you have attractive, pertinent images, it is easier to grasp the concepts while skimming.
  • Video marketing is becoming more popular and more important with every passing month. Having attractive,Adobe Stock pertinent images in your videos & animated GIFs makes people more likely to pay attention to them.
  • They are only $3 (USD) each. You pay $30/month for 10 photos. What you do not use will be accumulated into the next month.

 

How to find an image

Adobe StockLet’s say you are writing an article about a sales funnel. You want to grab the visitors’ attention from the very beginning. You also want the first lines to be short so that people would read them. Then you would draw them in so that they would read the rest of the article.

You remember seeing a picture like the one to the left. So, you would log into Adobe Stock and search for “sales funnel people”.

You would end up with over a hundred pictures from which to choose. You begin the process of Adobe Stockcollecting around 10 or 20 possible pictures you might use.

So, you hover over the bottom of each picture that is a candidate. Click on the Save Preview to Computer icon. All of these watermarked images will be saved in your Downloads folder.

After you have sufficient watermarked sales funnels, you go into your Downloads folder and choose the best image. You write down its unique number. Then enter it into the Adobe Stock search engine.

Your favourite image will show up. You hover over the bottom and select the License & Save to Computer image. You go back into your Downloads folder. Give your new image without the watermark a descriptive name.

Thus Adobe Stock has helped you make a more attractive blog post.

Adobe Stock is not for everyone

Adobe StockFor people who use significantly fewer than 10 images a month, there are better alternatives such as Dreamstime. Instead of paying for 10 images up front, you buy points. Each image costs so many points. Left-over points can be used to pay for part of another image.

Dreamstime also has a number of free images. (They have over 58 million images altogether.) The free ones are often lower quality. However, I have used them in attractive animated GIFs more than once. To access their website, go to bit.ly/nocostimages.

If you go there now, you will see a Free Images tab at the top. Click on it and then enter keywords into the search box. Your free images will show up first. The higher quality images will show up next. You have to pay for images from that group.

Adobe StockI’d like to point out the Stock Footage tab. That’s where you can get super high quality video clips to use as introductions to your YouTube videos. The animated GIF you see here represents how I introduce most videos on my Web Design YouTube channel.

 

 


video marketingPeter Enns has been developing websites since 1996. As a VA (virtual assistant), he specializes in new website development, researching and writing blog posts and creating videos for YouTube and as animated GIFs. He is a social media blogger and author of a free YouTube tutorial. It’s called 7 Day YouTube and will teach you how to make entertaining videos & animated GIFs.

video marketing tweets

Twenty Seventeen WordPress Theme Review

Upgrading a current website to Twenty Seventeen

You may feel like you want to keep your website current with the latest styles. This post discusses upgrading your website from an older WordPress theme to Twenty Seventeen.

Twenty Seventeen is a highly specialized theme meant to have full-width beautiful pictures on EVERY page. It would be ideal for something like a restaurant in this example. However, websites for which a blog plays a major role probably should not use it.

What is the Twenty Seventeen theme?

WordPress themes in general provide all of the front end styling of a WordPress site. Below is some of the front end styling that comes with the Twenty Seventeen theme. A discussion of most of the front end styling can be found here.

  • The main column width is up to 525px wide with the two column layout, or up to 740px wide with the one column layout.
  • Using some CSS code, you can change the width of the main and sidebar columns. The maximum width of a sidebar is to 326px.
  • Each page & post should have a large Featured Image. The recommended Featured Image size is 2000px wide by 1200px high.
  • Video marketing is becoming more important as each month goes by. You can have a video playing in your header. The recommended Header Video and Header Image sizes are 2000px wide by 1200px high.
  • Twenty Seventeen supports both a Header Image and a Header Video.
    • Header video can be MP4 (not recommended as it takes up too much space) or YouTube URLClick to hide the header image, enter the Youtube URL of the video and press enter. The video will automatically play silently in the header area. There will be a Play/Pause toggle button in the upper right-hand corner.
  • Widgets: Twenty Seventeen includes a footer widget area, where you can add widgets below the site’s content.The blog index, archive, search, and single blog posts also include a sidebar widget area. For each, the content will display in one centred column until the sidebar widget is added. With the sidebar widget, the content will appear in one column, and the widgets in the other.
  • Twenty Seventeen includes a Social Icons Menu, where you can add links to your social media profiles that will be displayed as logos in the footer.

Customize link

Like the Twenty Sixteen theme, this one also has a customize link above the header image. It’s really useful for making quick changes.

You can even add CSS code without knowing anything about coding.

First step

Twenty Seventeen is meant to be used with WordPress 4.7 or better. Before you even think about downloading Twenty Seventeen, upgrade your WordPress version to 4.7.

Header height

You may want to reduce the height of the header.

The instructions did not work for me. Because this may have been because of a bug in the software, I am including the instructions in this post. By the time you read this, the bug may have been fixed.

1. Remove old header

Twenty Seventeen To reduce the header height, you must first remove the old header. On a page that has the Twenty Seventeen theme, go to the top and click Customize.

Then click on header media. Click on Hide Image.

2. Add new header

Twenty SeventeenThis is the narrow header I decided to insert.

I like to have the header image inserted as a URL. So, I inserted this image in Twenty Seventeenan unimportant place. In this case it was the bottom of the index file, right under “Zooming and Panning”. I edited the Index page, went into text view and searched for “zooming and panning”.

Below that, between the quotation marks after “href” is the head URL. Use Cmd C to copy it into your clipboard.

Twenty SeventeenClick on the Customize link again. Click on Additional CSS. Scroll to the bottom of it and add this CSS code:

#masthead { background-image: url(“<insert url of your image>”); background-size: 100%; }

Conclusion

In conclusion, I would like to say that Twenty Seventeen definitely is not for everyone. That includes people with a significant blog.

However, perhaps you have a website in which you’d like to have a full-width photo on every page. The Twenty Seventeen is most likely the best way to go. You will be enhancing the user experience.

Related pages

How to Customize this Free WordPress Theme

WordPress Custom Header Image banners

 

 


VAPeter Enns has been developing websites since 1996. As a VA (virtual assistant), he specializes in new website development, researching and writing blog posts and creating videos for YouTube and as animated GIFs. He is a social media blogger and author of the free YouTube video-creation tutorial called 7 Day YouTube.