Distorting Picture While Maintaining the Theme

Distorting a photo related to a business

distortingI needed a header for a Greenhouse’s website. I wanted the header to reflect the nature of the business. So, I took a hanging basket of petunias and began distorting them.

The petunias in the centre have very little distortion. The petunias within the letters have no distortion at all. The letters were madedistorting invisible on a white background. Then they were pasted onto part of the hanging basket.

These are the steps necessary for distorting the basket.

1. Erasing the background

distortingAdd an invisible layer behind the picture. Using the GIMP Erasure tool, erase much of the background. Then combine the Fuzzy Select tool to delete more of the background.

2. Ripple effect to distort

distortingUse the Ellipse Select tool to select part of the photo. Then click Filters > Distorts > Ripple. Experiment with the settings and then click OK. Keep one small area of flowers with no distortion. Apply ripples to the rest of it.

3. Increase opacity

distortingOverlay the photo with a white layer. Decrease the opacity. Merge the 2 layers.

4. Change to size of header

distortingMake a new box that’s the exact dimensions that the header should be. Change the latest petunia picture distortingto have the same length. Eyeballing it, select a rectangle from the hanging basket that has approximately the same dimensions as your new box. Scale the header image to be the prescribed dimensions of the real header.

5. Create letters with flowers inside

distortingSelect a large font such as Rockwell Bold. Using black text, key your words on a white background. Combine the Fuzzy Select tool with your Delete key to create invisible letters. Paste it onto an original photo of the hanging basket.

Using the Rectangle Select Tool and the Erasure, crop the letters so that they have a minimum amount of white around them. Paste them onto the image from point #4.

Creating a header in just 5 steps

By distorting a photo closely related to the theme of the website, you have created an appropriate header in just 5 steps. Go here to see the actual header.

Related page

How to Make a WordPress Twenty Sixteen Header

GIMP

GIMP is a free open source program. Programmers from all over the world collaborated to make a program similar to Photoshop.

When I downloaded a free version, it somehow came with lots of advertising that took me hours to purge from my system. For that reason, I suggest you go to the PhotoEditorX website, scroll all the way to the bottom and click the Download Now Button.

You can buy it for $47 USD. Not only do you get GIMP, but you get a large number of tutorials that will teach you how to get the most out of GIMP.

 

Checkout with a WooCommerce Online Store

Setting up your checkout

Getting started

Start setting up your checkout section by going into your dashboard and clicking on WooCommerce > Orders. Then run the Setup Wizard and set up as much as the Wizard will allow.

Among other things, this will set up four new pages. Here are the names of the pages that will show up after the slash (/) in your address window:

  • shop
  • checkout
  • my-account
  • cart.

Next

checkoutThen you should click on Settings. This will give you a horizontal menu. Click on the Checkout tab.


After getting to the checkout page, you will see another horizontal menu. After you click on the Checkout Options tab, read through each section and make an appropriate response. Personally, I would check the Enable Guest Checkout button. I would buy an SSL certificate and then check the Force Secure Checkout button.

 Page index

Checkout pages

For the Cart Page, Checkout Page & Terms and Conditions lines, click on the appropriate dropdown arrow. It will give the names (H1 headings) of the various pages. Click on the one corresponding to each line.

If the page has not been created yet, create it and then click on the appropriate dropdown arrow.

Products page

Starting a new products page is similar to starting a new post or regular page. You click on New > Product.

The products page on the right is for a website that sells blog-writing services. The points below explain how to add various features of the product page.

  • Product name (what’s called heading in the image here)
  • Write description that will show up below product image
  • In Product Categories panel check off product category (add a new category if necessary)
  • Scroll down. Set product image > Upload files > Drag & drop picture > Set product image
  • General
    • Regular price
    • Sale price (if any)
    • Tax status
  • Inventory
    • SKU, etc.
  • Shipping
  • Linked product — Click on question marks for explanation
  • Attributes — See definition
  • Advanced — self-explanatory except for menu order
  • Scroll down to Product Short Description. Write the description that appears at the top to the right of the picture

Checkout form

The Checkout form is the simplest way for you to securely collect your customer’s payment information. When your customer enters their credit card information, it’s validated and then tokenized for your server-side code to use.

Using Checkout, sensitive credit card information is sent directly to Stripe, and does not touch your server. Stripe returns to your site a token representation of the card, and this token can then be used in a charge request.

Below is the code snippet for the Checkout form.

<form action="/your-server-side-code" method="POST">
  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="pk_test_aUfv37UMFj6BxSxE2qzCGj7x"
    data-amount="999"
    data-name="Demo Site"
    data-description="Widget"
    data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
    data-locale="auto"
    data-currency="cad">
  </script>
</form>

Add the above code to your payment page.  (This link tells you how to do that.)

This is added to the page ending in /checkout/. However, it results in an error message. Find out from the forums why.

In response to a question about this, tech support said

Building a website and especially a custom payment flow with Stripe is not a complete copy and paste procedure, and therefore it’s unfortunately not possible to have one example at hand that will work with every website.

What I can do is point you in the direction of our list of third party integrations for one-time and recurring payments that work with Stripe:

https://stripe.com/works-with/categories/recurring-payments

You can have a look around and see if you find one that suits your business needs.

If you’re not confident you can do it by yourself, I’d recommend hiring a developer to look at it for you. I know there are skilled developers on these websites you can hire just for a Stripe integration:

https://www.upwork.com/o/profiles/browse/?q=stripe

https://www.peopleperhour.com/freelance/stripe?ref=search

The story continues & gets more complicated. I end up seeing that I should PROBABLY delete WooCommerce Stripe Gateway and set up something else that will cost me 2.9% of charges plus 30 cents per successful card charge. There will be NO other charges such as setup charges.

Disclaimer

The data on this page is based on my research for the store I created in June 2017. Software and government rules both change with time. So, I am not responsible for any problems you may encounter because you follow my advice.

Checkout endpoints

Endpoints are an extra part in the website URL that we detect and show different content when present.

For example, you may have a ‘my account’ page shown on the URL yoursite.com/my-account. When the endpoint ‘edit-account’ is appended to this URL, making it ‘yoursite.com/my-account/edit-account’. WooCommerce shows the Edit account page instead of the My account page.

You have 5 boxes in the Checkout page. Going from top to bottom, I would use these default names:

  • order-pay
  • order-received
  • add-payment-method
  • delete-payment-method
  • set-default-payment-method.


When you click Save Changes at the bottom of the Checkout page, the above endpoints will be saved.

You also should usually keep the defaults on the Accounts page. When you click Save Changes at the bottom, the eight endpoints will be saved.

Read much more information about endpoints.

Searching & registering a name

In order to accept payments, you need a bank account (preferably in the name of your business). If you want a bank account in the name of your business, a business name must be registered with the government. An inexpensive way to search for a name & register it with the government in Canada is to use Speedy Search.

In order to register a name, it must be unique, distinctive and descriptive. Here’s how Kelowna Virtual Assistant meets those criteria:

  • Unique — No one but Kelowna Virtual Assistant has that name
  • Distinctive — The city “Kelowna” makes it distinctive from any other virtual assistant company.
  • Descriptive — “Virtual Assistant” describes what type of business it is.

Payment gateways

checkoutAfter you click on the Checkout tab, you can scroll to the bottom & see the Payment gateways. You will see 4 or 5 choices of payment Gateways. PayPal also includes credit cards. So, it should be first choice if the Stripe credit card choice is not there.

Setting up PayPal

Click on the three lines to the left of “PayPal”. Your cursor becomes 4 arrows. Drag and drop PayPal to the top of the list.

Direct bank transfer has been enabled already. In the picture, none of the other Gateways can be used because they have not been enabled.

To enable PayPal, click on the blue PayPal name. When you get to the PayPal page, click on what seems the most logical.

Image URL

If you want your logo to appear on the PayPal checkout page, copy your 150×50 pixel logo to any page you wish. Go into the page in text view and find the code for the image. The URL of the image will begin with “http”. It will be within the quotation marks that follow the term “src”. Cmd C to copy it into your clipboard. Cmd V to paste it into the Image URL box.

API credentials to process refunds

In order to be able to process PayPal refunds, you must set up something called “API credentials”. This is how to do it.

  • Go to paypal.com and set up an account for your business
  • Login
  • Click on Profile in top right
  • Profile & Settings
  • On left click My Selling Tools
  • In the My Business Setup column go down to API access.
  • Click Update and then Request API credentials
  • Click Request API Certificate radio button
  • Agree and SubmitDownload Certificate
  • You will find your API certificate in the Downloads folder of your hard drive. The name will be cert_key_pem.txt.

PayPal Sandbox

A sandbox is something you play in. So, the feature you use to play with PayPal and pretend you have orders is called Sandbox.

So, when you go into Checkout > PayPal, you should enable the Sandbox. Then you can check PayPal to make sure everything is set up properly.

Direct bank transfer (BACS)

The BACS feature in WooCommerce does nothing more than provide your bank transfer details to the customer. The bank transfer happens outside WooCommerce (initiated by the customer) and you have to manually mark the order complete when the transfer comes through.

So, in the instructions box, make sure you give good instructions to the customer including an idea about a secret question.

When filling out the Account Details, the first 3 boxes are self explanatory. The Bank Transit Number is a 5-digit number comprised of your 4-digit branch number followed by a number indicating the geographical location of your branch.

The transit number appears on your cheque after the cheque number. In the illustration, the cheque number is 004 and the bank transit number is 12345.

You may or may not need to fill out the IBAN and SWIFT boxes. They are numbers to facilitate international wire transfers. Ask your bank which number you should use and what it is.

Learn more about IBAN & SWIFT.

Here is some sample text for the instruction box: Before starting a wire transfer, decide upon the secret question and answer. Your contact at Kelowna Virtual Assistant must know the answer to the question. Your exact technique for wiring the money will vary from bank to bank. With the Bank of Montreal, you click on the Payment and Transfer tab at the top of the page. Then you click on Interac e-Transfers in the left-hand column. Follow instructions.

Accounts

Tokenization

Tokenization is the process of

  • Replacing sensitive data with unique identification symbols
  • They retain all the essential information about the data without compromising its security.
  • Tokenization seeks to minimize the amount of data a business needs to keep on hand
  • It has become a popular way for small and mid-sized businesses to bolster the security of credit card and e-commerce transactions while minimizing the cost and complexity of compliance with industry standards and government regulations.

Related pages

Instant payment notification (IPN)

API Credentials

 

checkout

 

 

 


checkoutPeter Enns has been developing websites since 1996. He is a social media blogger and author of the free YouTube video-creation tutorial called 7 Day YouTube.

tweets

Online Store Setup with WooCommerce

26 million downloads and counting

online storeWooCommerce is a WordPress plugin that helps make setting up your online store simple. Do you think you should use this solution? Because it is the most popular ecommerce platform, I would say “yes”. WooCommerce powers 30% of the world’s online stores.

Online store index

WooCommerce online store features

Talk about a huge list of things you can sell in your online store! Look at these WooCommerce features:

  • Sell anything anywhere
    • Physical products (in all shapes and sizes)
    • Digital downloads
    • Affiliate products
    • Recurring subscriptions
    • Your time
    • Sell worldwide
    • Sell by country
  • online storeMobile friendly (you may have to use a few third party tools)
  • Scale into a larger business as you grow
  • Customer support
  • Hundreds of free & paid extensions to make your store more effective. (Find what is available in the initial free download.)
  • Offer free shipping, flat rate shipping or make real-time calculations
  • Drop shipping
  • Store’s data can be accessed anywhere, anytime, 100% securely
  • Automatic installation
  • Integrates seamlessly with WordPress
  • Comes bundled with the ability to accept major credit cards, PayPal, BACS (bank transfers), and cash on delivery
  • Store’s data can be accessed anywhere, anytime, 100% securely
  • Gives both store owners and developers complete control from taxes to stock levels to customer accounts
  • Storefront is a free WordPress theme available to any WooCommerce store
  • FAQ at bottom of this page
  • Learn more.

How to set up WooCommerce

Plugin

In your WordPress dashboard, click Plugins > Add New. Type “woocommerce” into the search box. Install & activate WooCommerce.

SetUp

A WooCommerce link will show up in your WordPress dashboard. Click on these one at a time and set them up.

Notice that for the setting link, there will be a horizontal menu. Click on them  one at a time and fill them out.

Also note that you will find another horizontal menu when you click on the

  • Products
  • Tax and
  • Checkout tabs.

Adding products

After you have set up everything from General to API, you can start adding products. On the left side of your dashboard you will see Products  right below WooCommerce.

Click on Products and then Add Product in the Products submenu. Name the product where the page title usually goes.

After you have added the title to your page, scroll down until you see the Product Image panel on the right-hand side. Click Set Product Image and insert a 300 x 300 pixel square picture of the product. No text accompanies the picture.

The Product Gallery is a place where you can have 3-5 different pictures of the same product. Customers like to see different views.

You scroll down to add text. In the Product Data window you may have to click the tiny black triangle to open the window up. You check a check box to add that the product is

  • Virtual (removes and shipping data tab) or
  • Downloadable (digital).

If neither are checked, the product is a hard good that will be shipped. Fill in the rest of the data and open the Product Short Description window.

The product data window in the image above is open in the General view. There are four other views that should be looked at.

 

.

 

Note about sales to foreign countries

In 2016 a Canada Revenue Agency website said

Goods and services that are normally subject to the GST/HST may be untaxed when exported from Canada. In this case, they are referred to as “zero-rated” goods or services.

In this example, every line in the Country Code column has a “CA” in it. There is a line for every province & territory.

It is not shown here, but, you can go to the Zero Rate Rates page. The Country Code column has nothing in it.

This scenario tells you that

  • Every sale within Canada would have sales tax added
  • No sale outside of Canada would have any sales tax

 

HTTPS

Just as “http://” means “this is a website,” seeing “https://” means “this is a website, and it’s using SSL to encrypt data and authenticate the website.” SSL (Secure Socket Layer) is a protocol used on the web for encrypting website data so data sent from the browser to the server and vice versa is protected.

The above paragraph means that you should buy an SSL certificate to make sure web hackers don’t steal money from you or your customers.

If your website is hosted with LiquidNet Ltd Hosting, the quickest way to buy & set up a low-cost SSL certificate is to follow these instructions.

The prices for SSL certificates range from free to over $1000/year. When getting an SSL certificate, the most important characteristics of it are

  • Level of Encryption (256 bit is recommended)
  • Browser Recognition
  • Warranty

Where to buy a CHEAP SSL certificate

It is possible to buy affordable SSL certificates for your online store for less than $10/year.

setup

Go here to learn how to  buy & activate your SSL certificate.

Go here to learn about webhooks.

Security Info

Here is what LiquidNet tech support told me about security: The API is not a SSL extension and both have nothing to do with each other, except work together.

A SSL certificate is used to encrypt the data transfered over the web on your website.

You load the website, the SSL encrypts the request to load the website to the server and then decrypts it on the server. That way if you were to build a store on your website and a client provides personal information it will be encrypted, uploaded to your store and then decrypted. Therefore a secure encrypted connection over the web.

The SSL does not provide protection against hackers, it protects data which is routed over the web. From the website visitor to the server.

In order to protect your self against hackers, you need to keep the outgoing security manager active and the mod_security as well. Both can be managed from the Advanced section of your hosting control panel.

You also need to use strong passwords for your hosting account, FTP Accounts and for the administrative accounts of your websites.

You should always keep your applications, plugins and themes up to date, because outdated software contains many security holes.

You should always keep a local backup of your websites so you can restore them if needed (our system keeps backups for as long as 30 days and then the oldest backups are being replaced by newly generated ones).

As an additional security measure you can also enable Jail Host for your domains and subdomains. The Jail Host feature prevents the scripts hosted on one of your domains from accessing directories outside the root directory of the domain they are hosted on.

WordPress theme

Storefront is the theme that was supposedly designed to fit perfectly with the WooCommerce plugin. The recommended Storefront header size is 1950 x 500 px. I made and installed a header that size. The menu and other text was right on top of the header.

So, I switched back to the Twenty Sixteen theme. Everything works very well now.

 

Coupons

To create a coupon, go to your WordPress dashboard. Then go to WooCommerce > Settings > Checkout. Make sure the use of coupons has been enabled.

Then go to WooCommerce > Coupons > Add Coupon.

 

Fill in the blanks and then click the Publish button. Make sure you have given your coupon a unique name such as 5%wire.

The coupon in this example is from Kelowna Virtual Assistant. The store on that website sells virtual assistant services such as website design. When people pay for the services, they can get 5% off by paying with a wire transfer.

 

Bank transfers (BACS)

Here’s how bank transfers work with WooCommerce:

  • Once your customers select this payment method, your account details will be displayed to them so that they can make the payment.
  • The order will be on-hold, until you process it in your dashboard when you have successfully received the payment in your account.

Interac e-Transfer

With Interac e-Transfer you can send money to anyone with an email address or mobile phone number and a bank account in Canada. You will not share any personal financial information.

temporary link  Display on other page so that can finish this post

Buy & activate your SSL certificate

I’ve been designing websites since 1996 and by far my favourite web host is LiquidNet Ltd Hosting. For $35 (USD) per year you can get a single website with a huge number of features plus world class tech support.

Just before my store went live, LiquidNet tech support asked this: Would you like me to move the connection with the site to https://kelownavirtualassistant.com/ at any time so that you can take the full advantage of the ssl ?

That was because I asked by the “s” was not showing up after the http.

Purchase a certificate for your online store

If you have LiquidNet Ltd Hosting, you can purchase a $19 SSL certificate by going to My Domains > SSL Certificates > Order Certificate tab on your web hosting control panel.

No further action

Note that after you buy the SSL certificate from  LiquidNet Ltd Hosting, they do all of the installation for you. You will get an email from the SSL creator.

They will suggest further action. LiquidNet has done all of that for you. Ignore the email. No further action is necessary.

Installation instructions

Input the following details in the order form:

CSR Details

Organization Name: Type in the exact legal name of your organization. Do not abbreviate the name of your organization.
Organization Unit: Specify the exact department of your organization (optional).
Country: Select your country from the list.
State: The state or province where your organization is legally located. It should not be abbreviated.
Hostname: The fully qualified domain name for your web server, e.g. www.my-best-domain.com. This must be an exact match. (If using LiquidNet Hosting, use the dropdown arrow to find your domain name.)
E-mail: Type in your personal e-mail address.

Note that none of the following characters can be used in the details: < > ~ ! @ # $ % ^ * / ( ) ?.,&

Contact Info

All fields are pre-filled with the details you provided for your hosting account. You must select an “Approver E-mail” at the bottom, which must be an e-mail account hosted here (one created in the E-Mail Manager on your web hosting control panel).

Purchase Details

Select the registration period – the longer, the cheaper per year.

Make sure you read the User Agreement and select the checkbox next to “Accept User Agreement“, then select a payment method and finally click on the “Continue” button at the bottom to complete the order. You will be forwarded to a billing gateway page to submit the payment.

Once your payment has been submitted, you will be able to see your newly ordered certificate in the “My Certificates” tab in Site Management > SSL on your web hosting control panel. As soon as the status is changed to “Active” you can apply the certificate to your domain.

Install certificate

To install an SSL certificate to your domain go to My Domains > Hosted Domains and find your domain (or subdomain) in the list and click on the edit icon on the right. On the next page click on the “Secure Socket Layer (SSL) :” drop-down menu at the bottom and select the option to “Upload SSL certificate” – as soon as you select this option, 4 text fields appear uder the form:
CSR

Private key

SSL certificate

CA

All four of the above have been generated when you purchased the certificate and you can get them from My Domains > SSL Certificates. It would be best to open the SSL section of the control panel in a separate tab and copy-paste each of the four. When ready, press “Upload SSL certificate“.

If you have followed this tutorial strictly, now you should have SSL activated for your domain. You can safely accept payments in your online store.

Your new preferred URL will be in this form: https://www.kelownavirtualassistant.com.

Please note that you will need to redirect your ‘http’ traffic to ‘https’ to send all visitors to the new secure URL automatically.

Optimizing checkout flow

from https://woocommerce.com/2016/03/optimizing-woocommerce-checkout/?utm_source=WooThemes&utm_campaign=949cac9614-AUTOMATION_Post_Purchase_Project_4&utm_medium=email&utm_term=0_13860df971-949cac9614-253681709&mc_cid=949cac9614&mc_eid=7a0f2d0734

In order to avoid losing sales, you must get your store’s checkout “flow” as smooth as possible. Here are some tips on optimizing checkout flow:

Investigate default checkout

The default checkout is about as smooth as possible. It has a minimum display of fields. From the online store shopping cart you go directly to a page with no more than:

  • Billing & shipping info
  • Order summary
  • If multiple shipping or payment options, quickly toggles to correct option.

Potential checkout issues

These issues can cause you to lose sales at the checkout counter:

  • Unnecessary fields (middle name, title, multiple lines for address, order notes…)
  • Unnecessary re-confirmations or reminders of products, pricing, or any other information already entered
  • Links to other pages — Don’t distract the shoppers too much
  • Insisting they create an account instead of allowing guest checkout

Buy now button anywhere

You can add a Buy Now button to any page in your WooCommerce website by using the QuickBuy button.

Go to Plugins > Add New and search for “quick buy”. Install & activate the WooCommerce Quick Buy button. Go to WooCommerce > Settings and you will see the above menu. Click on WC Quick Buy.

Editor’s note: I found it best to have an Add to Card button on each products page. So, I deactivated Quick Buy.

Change button style

Button CSS class: single_add_to_cart_button.

Button internal style: .single-product .product .single_add_to_cart_button.button{.single-product .product .single_add_to_cart_button.button{ background-color: #144b85; color: #d7f5fe;}.woocommerce .product .add_to_cart_button.button{ background-color: #144b85; color: #d7f5fe;}

Change the hexadecimal numbers to reflect the colour styling of your page.

Complete documentation of Button Style page.


WooCommerce Guided Tour Videos – WooCommerce Docs

Add new products

To add new products to your WooCommerce store, click on Products in your WordPress dashboard. Then click on Add Product.

Make sure you study the Product Data section.

General

To get unique IDs, regular & sale price, etc.

Add to cart button

When you add the regular price in the General setting, you automatically add an Add to Cart button to the Product Short Description section of the page.

Notice the number 1 to the left of the Add to Cart button. If there is a number in that space, you can add the quantity directly from this button. In order for this to happen, the sold individually box must be left unchecked.-

Inventory

Set stock quantity, allow backorders, allow to sell individually, get SKUs,etc.

Shipping

Give each product

  • Weight
  • Dimensions and
  • Shipping class.

Attributes

When you click the Attribute link, you can help customers group products by attributes. For instance, a women’s clothing store can group by

  • Dresses
  • Skirts
  • Belts, etc.

Linked products

Promote related products to get more up-sells & cross-sells.

Advanced

  • Note to customer after purchase
  • Menu order
  • Enable reviews

Product photo

A photo should be perfectly square. You insert it by clicking Set Product Image in the right-hand column.

 

Related product pictures

You may want related products to show up below a corresponding product page. To do that you create product categories in the right-hand column. In the example to the left, all products that have Virtual Assistance checked off will show up below all other products in that category.

It seems to me like only 4 related products can show up. You may have more than 4 products in a category. If that is the case and you want a certain product to show up, make sure you have the special cross-sell or  up-sell product in your Linked Products section.

Publish

When you edit the product visibility, you decide whether it will be available

  • From both the search engines & catalogue
  • In the catalogue only.

To find much more detail about any of the product-adding features, go to the WooCommerce Manage Products page. Cmd F to find the section you are having problems with.

Delete products

To delete a product, go to Products > Products. Click on the product you wish to delete. Click on Trash.

Empty cart

To empty your cart, go to the cart page.  The URL will end like this example: http://kelownavirtualassistant.com/cart/. You will see your cart with product in it. To remove the product, click on the little red “x”.

PayPal

How get API username, password & signature for Paypal.

 

Accept credit cards using Stripe

Stripe is a FREE WordPress plugin. Install & activate it. The reviews have some negative  comments.

So, as soon as you have set Stripe up, I suggest that you read the links in the Get Started with Stripe section.

This is the link to the Get Started with Stripe page.

Eventually you will get to the dashboard. If you have filled out your account information properly, the circle to the left of View Test Data will be white.

Then click the API tab. You will see a publishable key token. You can also reveal a test key token.

In your WooCommerce dashboard you can go to WooCommerce > Settings > Checkout > Stripe. Copy & paste the publishable and test key tokens from your API panel to the Stripe checkout boxes called Live Publishable Key and Live Secret Key.

Check list when all finished

 

After you are all finished, go to the  Stripe dashboard again. Click on the white circle beside  View Test Data. It will turn orange and the API codes will now be test codes. Go into the Stripe section of the WooCommerce dashboard discussed above. Copy & paste the test API codes into the Stripe dashboard.

Go into your store and “buy” a product using 4242424242424242 for a VISA number or 5555555555554444 for a MasterCard number. (You can find all of the testing numbers on this page.)

Then look at this checklist to make sure everything else works properly.

FAQ

Q. I get a purple stripe when I open a web page. It says, “This is a store for testing purposes — no orders shall be fulfilled.” How do I eliminate that?

A. Click on WooCommerce > Settings > General Options in your WordPress dashboard. Uncheck the box that says “Enable site-wide store notice text.” Click Save Changes.

Q. How do I get hold of WooCommerce tech support?

A. Here: https://woocommerce.com/contact-us/

 

Plugin

A WordPress plugin is a piece of software that can be added to a WordPress website to improve the visitors’ experiences.

  • online storeDo you want to add a quiz to your website? It can get people more involved. There’s a plugin for that.
  • Do you want to add display ads into your right-hand columns? There’s a plugin for that. (See sample.)
  • Do you want people to book appointments from your website? There’s a plugin for that.
  • Do you want to add slider into your header?  There’s a plugin for that.
  • There are over 49,000 plugins from which to choose.

Related pages

Subject Line Mistakes to Avoid in Your Emails

Subject line 5 times more important

subject lineSo, you have an amazing idea to present to the world by email. Avoid making subect line mistakes.

Advertising legend David Ogilvy once gave an interesting statistic. He said that the number of people who read your subject line is five times greater than the number who read the body. According to the email experts at AWeber, these are 5 subject line mistakes to avoid.

1. Using all caps or too much punctuation

HOW TO CREATE AN ANIMATED GIF!!!!!!! People will ignore it or delete it. All caps will come across as though you are yelling.

Avoid too much punctuation. Special characters can even trigger spam filters.

Using one only of the following is good: period, exclamation point and question mark. They can actually lead to increased open rates.

2. Avoid spam filters

subject lineSpam filters may recognize certain symbols or words in subject lines. Even if your message is legitimate, you can still be filtered.

Avoid $$$, 100% free, cash off, cheap, weight loss and serious cash. Go to this HubSpot post: The Ultimate List of Email SPAM Trigger Words.

3. Too long

subject lineWith so many of us getting so many emails, we scan the subject lines. If it does not look worth our while, we delete it.

You have only a second or two to attract their attention. Have it a maximum of 50 characters long.

At the same time, it must express a complete thought and add value to the reader. Avoid one-word subject lines. They probably could not express a complete thought.

subject lineConsider this subject line. Why is it a good one?

  • Less than 50 words
  • Sense of mystery in the word “secrets”
  • Punctuation (exclamation mark) at the end
  • None of the spam words above
  • It expresses one complete thought



4. Writing misleading content

Suppose you get an email with this subject line: 5 secrets for making amazing animated GIFs! When you open it, the main thing you see is message trying to sell you some software.

The sender should know this: When sending emails to people in your list, one of the main things to do is build trust. Then, it will be much easier to sell the people something at a later date.

This subject line did the opposite.

5. Including spelling & grammatical errors

Spelling & grammar  errors look unprofessional. They can cause people to lose trust in you. So, before sending, check email for spelling, grammar & syntax errors.

Email marketing & the subject line

When email marketing, please remember the second paragraph in this blog post: Your subject line is 5 times as important as the content of your email. Without a compelling subject line, your email likely will not get read.

In the next little while, look at this list of 5 mistakes before writing your subject lines.




Peter Enns has been developing websites since 1996. He is a social media blogger and author of the free YouTube video-creation tutorial called 7 Day YouTube.

tweets

Six Figure Mentors — Pros & Cons

What is Six Figure Mentors?

Six Figure Mentors

Six Figure Mentors is a program that claims to educate its members on becoming successful online entrepreneurs.

The Pros of Six Figure Mentors

I paid for the program. It put me on the right track, teaching me how to sell my own product online (7 Day YouTube).

I worked diligently and wrote a curriculum called 7 DaySix Figure MentorsYouTube. It has 7 lessons and is designed to equip people within 7 days. Within that time frame, they should learn how to make entertaining YouTube videos and animated GIFs like the one playing to the right.

The course is free. However, most of the students will use ScreenFlow for Mac. It costs $99 and I make around $15 every time someone buys the program from my website.

ScreenFlow® is an award-winning, powerful screen recording and video editing software for Mac. It helps you create high-quality videos and animated GIFs. Click here to learn over two dozen amazing things you can do with ScreenFlow.

The cons

“Con” (as in con man) is an appropriate word.

Never sold anything

They promised to teach me how to sell online. The product I was to practice with was their course telling how to sell online.

I was told that I could get a commission of up to 40% while practicing for my course. I tried hard for months and was unable to sell anything.

40% x $0 = $0.

So, in spite of the fact that I spend months of time and thousands of dollars, I was unable to make any money.

Like a chain letter

This appears to me to be much like a chain letter. The people at the top make lots of money from suckers at the bottom.

The big hype was the examples of the people at the top. They were making huge amounts of money. It made it sound like I too could do that.

However, thousands of people were in the chain trying to sell the same product. Eventually they ran out of willing participants.

 

 


Peter Enns has been developing websites since 1996. 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.

tweets

Pinterest Pin, How to Make One

What are Pinterest pins?

Pinterest pinPinterest pins are visual bookmarks. They are pictures that you add to boards on the Pinterest website. Each pin links back to the website from which it came.

The animated GIF above illustrates how a Pinterest pin is created. That pin can be found on a web page called Value-added Email Marketing to Sell Online. If you find that pin on the Pinterest website and click on it, you will be taken to the Value Added Email website.

Characteristics of good Pinterest pins

  • Eye catching. You most likely would like people to add your pins to their web pages. So, it should have visual appeal.
  • 600 pixels wide. It is a good idea to make you pins exactly 600 pixels wide so that they are the same width as other pins on the Pinterest website.
  • Maximum 1900 pixels high. The maximum allowable height of a pin is 1900 pixels. Note that it is a good idea to make a pin long enough so that the viewer has to scroll down a bit. It gets them more involved.
  • Use a high quality photo editor.  I use GIMP.
  • Use a minimum amount of text.  Say what you need to say and say no more.

How to make a Pinterest pin in 4 steps

The above animated GIF takes 10 seconds to illustrate how to make an effective Pinterest pin. Let me expand that a little to explain what is happening.

I’m using social media to try to get people to my Email Marketing blog post. The half-life of a Pinterest pin is 1600 times longer than a Facebook post. It can be sending traffic to your website MONTHS after it was published. Keep that in mind while you are deciding how to make a particular pin.

1. Decide upon your main goal

My main goal for the example pin is to get people to a particular web post.

2. Decide what must be on the pin

My pin must show what are the benefits of going to the Email Marketing web page: learning how to

a. Collect visitors names & email addresses.
b. Sell things using that data.

Look at the pin below to see how I did that using the minimum number of words. (Notice how the words are surrounded with lots of white space.)

I had to tell people to go to a particular web page. In order to minimize the number of words, I used Bitly to shorten the URL from http://freewebdesign.club/value-added-email-marketing/ to bit.ly/emailselling. Not only is it shorter but it is easy to remember.

The form that collected the name & email had to be there as well as some other pictures that helped to tell the story.

3. Collect pictures

I performed a web search for “pinterest pins email marketing”. The picture on the right shows what I found.

I want people to select my pin when there are many other email marketing pins from which to choose. So, seeing those pins would help me with my creative processes. I want my pin to have more eye appeal than any of the others.

There are a number of websites where you can find free pictures. One of them can be found at bit.ly/nocostimages. It has free images, paid images and paid videos.

When I want pictures that make a Pinterest pin stand out, I always pay for mine. To find the main picture in the pin below, I went to a paid picture site and entered “email marketing” in the search box. It gave me hundreds of choices.

I chose the three images that you see in the pin below. I chose those 3 because they were all eye catching.

The top one makes an excellent title picture. The other two represent the idea of selling online using a list of email addresses.

Pinterest pin

 

 

 


Peter Enns has been developing websites since 1996. 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.

tweets

Background Image & Email Marketing Forms

Branding with a proper background image

background imageWhen you create a form for your email marketing, the platform you are using will add the name and email boxes.  It will supply the submit button. You have to add the proper background image to make your form look good.

This post tells you how to make a background image so that it will promote your brand.

What thought are you trying to get across?

What is the main thing about the form that will help you make money?

In my particular case, I am giving away a free course telling people how to make better YouTube videos.  They can learn all that in 7 days.

background image

It took me over a month to design the curriculum. I want to make some money off it.

The course uses some amazing feature-rich software called ScreenFlow to create all sorts of special effects  in their videos. So, I make it easy for them to buy that $99 software. When people buy it from me, I will make a finders’ fee of around $15.

So, my background image will portray what ScreenFlow does.

What ScreenFlow does

ScreenFlow will record whatever is on your computer screen. It saves the video & audio (if any) into an area called a timeline. The timeline consists of layers of different things that will be combined to make a video.

background imageIn this image, the second layer is the background music for the video. Other layers could be special effects such as text, arrows, etc.  I selected a snippet of video to create a yellow border. That will add some extra interest to the background image.

Fade the background image

background imageIn order to have enough contrast between the text you will be adding and the background image, it is necessary to fade it. Use your image editing software to do that. This is how I faded the background using GIMP.

background imagebackground imageI selected the ScreenFlow timeline image in GIMP. I

  • Right-clicked in the layers panel and
  • Selected New Layer
  • Selected White
  • Reduced Opacity to 74
  • Right-clicked and selected Merge Down
  • Clicked on Image > Scale Image to change width to 600 pixels
  • Saved it with a descriptive name

Adding text

Decide upon the most important component in the idea you are trying to get across. I wanted to tell people that they can learn how to make entertaining YouTube videos and animated GIFs in 7 days. The most important component, “YouTube videos & animated GIFs”, would be in a larger, bolder and more prominently coloured font than the rest of the text.
Here’s how to add the text.

 

  • Click on the GIMP text icon,
  • Change font to Georgia bold,
  • Justify centre,
  • Click on foreground colour icon
  • Select a prominent red colour.
  • Click on font size dropdown to make as large as possible (28)
  • Right-click in Layers panel to merge font layer onto background layer.
  • Change colour to less intense red.
  • Change font to regular Georgia.
  • Using same system as above, add other text above & below prominent text.
  • Save with descriptive name.

Adding Name & Email boxes

Add the Name & Email boxes and also the Submit button. I used AWeber to create mine.

Sample embedded form

If you go to bit.ly/7dayyoutube, you will see samples of an embedded formit . If you fill out, you will be sent an email a day for the next 7 days. Each email will have a link to a page that will give you a free lesson on creating better YouTube videos.

Notice how the background image plays a major role in branding the product you wish to monetize.

Related pages

Review of PopupAlly Pro

 

 

 


Peter Enns has been developing websites since 1996. 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.

tweets

Monetize Your YouTube Videos

What is YouTube advertising?

Before you monetize your YouTube videos, you will want to know about the types of ads you can get paid for displaying. Below these images there are 5 different types of YouTube advertising.

Note that for YouTube advertising to be worth your while, your video really should be getting 1000 views per day.

To find six methods of monetizing your YouTube videos without YouTube advertising, see lesson 6 of the free YouTube tutorial.
monetize

 

1. Embedded ad

This is the type of ad that will be shown to the right of a YouTube video.

2. Overlay ads

These pop up on top of a YouTube video near the bottom.  If you don’t want to watch it, simply click the tiny “x”.

3. Skippable preroll ads

These are video ads that begin to play at the beginning of the YouTube video.  After 5 seconds, you can stop them if you wish.

4. Non-skippable ads

These are video ads that begin to play at the beginning of the YouTube video.  You cannot watch the video until the entire ad has played.  The maximum allowable length is 30 seconds.

5. Sponsored cards

This are similar to overlay ads. They will appear sometime while the video is playing. They will be somehow related to the content of the YouTube video.

How much money can I make if I monetize my videos?

This is a very complicated question because there are so many variables. A few people make over a million dollars a year. Many make nothing.  Here are a few variables that can determine how much you make:

  • Are people even clicking on the ads?  If so, you can earn around $2 (USD) per 1000 views.
  • How much are advertisers paying to display their ads?  Different industries pay different amounts for ads. An insurance ad would cost more than a shoe polish ad.
  • Does YouTube think your content is good for ads?
  • How often do people skip the ads?
  • From which countries are people watching your video?  Rich or poor?
  • How interested advertisers are in advertising on your genre of channel.

The main secrets to making a decent amount of money

  • Make quality videos of the type that lots of people like to watch.  You want content that should attract huge numbers of viewers.
  • You may want to make money outside of AdSense. You can monetize your videos by displaying other people’s products or promoting your own products.

YouTube video creation

The YouTube video on this page was created using ScreenFlow.

 

 

 


Peter Enns has been developing websites since 1996. He is a social media blogger and author of the free YouTube video-creation tutorial called 7 Day YouTube.

tweets

Script Writing to Make an Animated GIF

How to start making your animated GIF

video-final-gif-10-seconds-2Script writing must be an essential first part of creating your animated GIF. You might think that you can simply create the GIF in your head. Then make the video.  After all, you want it to be only 10 seconds long.

That’s wrong thinking.  The following is a good scope & sequence for creating your animated GIF:

  1. Decide upon the main point you are trying to get across
  2. Collect  one or more graphics
  3. Write your script out. It will guide you in making the right video clips.  Plus it helps you remember all of the necessary features of a good animated GIF:
  • Obvious to viewer what animated GIF is all about
  • Rarely have a shot with a message less than 1 second or greater than 2
  • Each shot must be in logical sequence
  • Each shot gives a micro story
  • Entire video less than 15 seconds

Script writing, then making all clips

  • Following the script, record all video clips
  • Make a blank timeline
  • script writing clip-inspectorAdd clips in order they appear in script
  • Use something like ScreenFlow’s Clip Inspector to (usually) shorten the clips
  • If final copy is greater than 15 seconds, consider using Clip Inspector to shorten it

Video Motion example

The Video Motion example above will be used to illustrate a paragraph in a long article about how to create YouTube videos.

Here is the script that was used to create the animated GIF above:

  • Select background
  • Title — Video Motion — pulsating
  • Media Library, add media
  • Drag media to point where will pulsate
  • Click Video Motion tab
  • Action > OK
  • Effect > Pulse
  • Make 10 second demo

The script writing was done with bullet points to make it quicker to gather all of the video clips.

Create animated GIFs in 6 steps

1. Drag images onto Keynote slide(s)

(You can find free images at bit.ly/nocostimages. After you get there, click on the “Free Photos” tab in the horizontal menu.) If you have not used Keynote much, go to the Presentation Software blog post.

2. Add a MINIMUM amount of text

The animated GIF will be quite small.  So, the text should be as large as is reasonable so that people will indeed read it. People remember pictures much better than they remember text.  So, get most of your message across with the images.

3. Use Keynote to animate your text and imagesanimated GIFs

Experiment with the various Build In and Action effects. Go to the bit.ly/nocostimages website, get some free images and practice making a presentation as complex as the one you see below.

animated GIFs

 

 

 

Another way of adding interest to your moving text is to show an image within the letters. Learn how.

4. Record your presentation with ScreenFlow

You will be using ScreenFlow to record, edit & upload your presentation as an animated GIF. Remember to save your ScreenFlow video with a descriptive name as soon as you see it on the screen. Then you can start editing it.

5. Edit video with a maximum size of 500 x 500 pixels

  1. animated GIFsClick you sizing icon
  2. Change each of the Canvas dimensions to 500 pixels
  3. Making sure your video snippet has been selected, click
    animated GIFsthe green check mark icon.
  4. Move the slider to size the animated GIFsvideo to fit in the canvas. Experiment lots until it becomes second nature.

 

 

6. Click File > Export > Animated GIF > Export

animated GIFsAfter clicking File > Export, look at the new panel that shows up. Using the dropdown arrow, select Animated GIF.  Click the Export button.

Related pages

How to make an animated GIF using ScreenFlow.

Over two dozen things you can do with ScreenFlow.

Use GIMP to edit your photos.

 


Peter Enns has been developing websites since 1996. He is a social media blogger and author of the free YouTube video-creation tutorial called 7 Day YouTube.

tweets

How to Make an Animated GIF

Making the above animated GIF

Animated GIFAnimated GIFs are becoming more popular in the websites of major companies. As long as it is subtle and does not distract the reader, it is a good way to get a website visitor to notice something.

(The above GIF keeps repeating itself every 9 seconds or so.)

Create an animated GIF in 4 steps

1. Write your script

2. Gather pictures

  • I went online and got the amazing stock photo with the yellow affiliate key.
  • Used GIMP to edit several pictures.  The YouTube video below explains how I did it.

3. Create animations with Keynote

First of all, look at your script and decide which pictures you need. Create them using GIMP.

This is so complicated that I am explaining it with a YouTube video.  Pause the video frequently to take notes.  There are lots of steps.

Click on the Keynote link above to find out how to turn your still pictures into animations.

(Note that you may have problems unless your maximum dimension is 500 pixels.)

4. Edit and upload with ScreenFlow

Using ScreenFlow 6.0 or greater:

Animated GIF

  • Start by making the dimensions 500 x 500 px.
  • Keep reducing one of those dimensions so that the animation is as large as possible without having a white border.
  • File > Export
  • Select animated GIF
  • Export

Most important: Maximum dimension is 500 pixels.

 

Troubleshooting

If you are having trouble making animated GIFs with ScreenFlow 6.0+, it may have nothing to do with your ScreenFlow program. Four other alternatives:

    1. Too many colours.  Animated GIFs are designed to have a maximum of 256 colours.
    2. Corruption in your Mac computer.
    3. File too large.  The animated GIFs work for me every time if neither of the dimensions are greater than 500 pixels.
    4. After you have finished the above steps, close your computer down and start up again. Then you should be able to make animated GIFs to your heart’s content.

Solving my animated GIF problem

I suddenly was unable to successfully make even simple animated GIFs. So, I

    • Deleted lots of pictures
    • Emptied my trash
    • “Disk”, Enter into spotlight (magnifying glass in upper right-hand corner of screen)
    • Waited several seconds and then click the First Aid icon
    • Closed all programs and click Apple icon > Restart

As soon as the computer started, I was able to make animated GIFs.

animated-gif-final-pinterest

 

 

Related pages

Animated GIF on Google +

To get an animated GIF on Google+, have the animated GIF at the top of your web post. Link to that post from Google+. Your GIF will automatically be posted on Google+.

See example.

 

Supernova animation

A supernova is an explosion of a star into oblivion.  Here is an animated GIF released by the European Southern Observatory.

Australian flag

See this example of a flag continuously flying on a web page.

Spinning around the north pole

See this spinning world from above.

Christmas tree

Make your own Christmas tree animation.

 

Click on it

Animated GIF

 

 

 

 

 

 


Peter Enns has been developing websites since 1996. He is a social media blogger and author of the free YouTube video-creation tutorial called 7 Day YouTube.

tweets