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. Pause the video frequently and takes notes.
Getting started with a new page
After you have clicked the New link and opened a brand new page or post, add a headline and then click Advanced Layout Editor.
Click 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.)
Note from January 2019
If you are having trouble dragging & dropping, it could be because of a WordPress update that included Gutenburg. I would drag an Enfold element down and the screen would suddenly turn white. It was impossible to drop the element where I wanted.
The solution was to install and activate a plugin called Classic Editor. Now I can drag & drop perfectly.
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
Click 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
Clicked Code Block in website I was working on
Clicked Save
In page view same ad shows up only image is beside text
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:
Earn a percentage of the selling price for every book sold.
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
In the WordPress dashboard, go to Settings > General.
Enter site name & tagline and then click Save.
Go to Settings > Permalinks. Select Post Name & click Save.
Go to Appearance > Customize
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.
As of this writing (May 2019) there is a bug in the Enfold form. If you use your web host’s name in the “send to” address, the form may not be sent to you after it is filled out.
While filling out the Enfold form data, the program asked for “your email address”. I filled in my regular email address — the one ending with my web host’s name dot net.
When I filled in the form, it would not be sent to me.
I have a number of email addresses corresponding to various websites of mine. They end in things like “my domain name dot com”. When an email goes to any one of them, it is forwarded to my regular email address.
So, I changed the “your email address” info. to an email address belonging to one of my websites. It delivered perfectly.
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
If 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.
If 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
Of 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
Go 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:
Log into your LiquidNet Ltd Hosting account
Click on Email tab > Mailboxes
Over to the right click on Create a New Email Account
Use the dropdown box to scroll down to your domain name
Add info, sales, your name or anything you want
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.
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:
I just used the first (web host) system & it worked perfectly.
I couldn’t figure out how I had done the second system in the past.
The third system broke down after a while. But, I’ll give you all 3 systems anyway.
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.
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
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
Click 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.
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.
Click on new Caldera Forms link > Forms in black column
Click New Form at top of page
Click on one of the 7 templates for different types of form
Name it
Click Create Form
Here is a key to what you get:
Delete row
Break row into columns
Drag & drop row to different location
New row in this table
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.)
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.)
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.
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.
After Visual Composer has been activated, you will see Backend & Frontend editor buttons on the page. To add rows & columns:
Click Frontend Editor button
Click Content Elements icon
Imagine this: In the Visual Composer editor mode you
Click on your Add Element button
Click on Row
Hover over new row
Click 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
>Every plus sign you see in a row represents a column
Click a plus sign
In the resultant Elements panel, click Single Image
In the Single Image Settings box, make sure you have an appropriate 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:
Go to codecanyon.net & buy a license for Visual Composer
Download
Copy the license number from the email into a safe place
Go to your Downloads folder & double-click on the zip file you just downloaded
This will create js_composer.zip
Drag & drop js_composer.zip onto your desktop
Go into the dashboard of the site in which you wish to install Visual Composer
Click Plugins > Add New
Click Upload Plugin
Browse “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
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 Grid
Click 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”
EXPERIMENT by filling in rest of grid settings including Item Design effects
Click Save Changes
Click Update to save page
To 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
To make a button, go to Add Element and click on the Button icon. Experiment with the various button settings including design options.
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.
Any 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
Occasionally 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
Gave 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.
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.
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”.
Select “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 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
From WordPress dashboard, click Plugins > Add New.
Type the name of the plugin into search box and click Install Now.
Then click the Activate button. “Appointment Calendar” immediately shows up in black column.
Click Settings > Calendar Settings
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.
To 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.
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.
Peter 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.
I 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?
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 that 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, 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
Let’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 collecting 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
For 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.
I’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.
Peter 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.
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 Imagesize 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 URL. Click 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.
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
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
This 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 an 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.
Click 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.
Peter 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.