How To Add Social Media Icons To Email Signature

Social media icons for better branding

social media iconsUse good social media marketing techniques to help brand your product, company, self, etc. One technique involves including social media icons at the bottom of every email you send out. These will link to the corresponding social media pages. This blog post tells how to add the social media icons to the bottom of every Mac Mail email you send out.

What to include in your signature

social media iconsYour social media icons will be included in your Mac Mail signature. For ideal social media marketing, this is what to include in the signature:

1. Your name in colour using a unique font
2. Your email address and position in your company
3. Link to your website
4. Social Media images with links to corresponding pages.

(If you don’t want to add the icons, etc. yourself, the people at Kelowna Virtual Assistant can do it for you.)

Adding the icons in 8 steps

  1. In Mac Mail, click New Message
  2. social media iconsAdd a line of underscores, your name, position & other contact information as seen in this image
  3. Drag and drop pertinent social media logos from Finder to beneath text. (Note that the logos in this image were saved with GIMP at 50 px. high with a 5 px white bar on each side. If they are too overpowering, reduce their height using GIMP.  To find the icons in the first place, enter keywords such as these into your search bar: images instagram logo.)
  4. Highlight your email address and website URL and add clickable links to each. To do this, highlight the email address, right-click and select Link > Add link. Notesocial media icons that for the email address you have to add “mailto:” in front of the email address.
  5. social media iconsFor each social media icon, find your profile corresponding to social media. Click on the image, and then click the Edit > Add link.
  6. Highlight your namesocial media icons and click Format > Show Fonts.
    Select the font that you would like for your signature.
  7. social media iconsHighlight everything you just created and press Cmd C to copy it into your clipboard. In the Apple Mail menu select Preferences > Signature.
  8. If you already have signatures, ignore them and click the + button to add a new signature. If you want this to be the default signature for a specific account, choose the account from the left menu before adding the new signature. Enter a name for the signature and press Cmd V to paste your new signature into the box. Once this is done, click the tiny red close button in the upper left-hand corner.

 

Related page

How to Create a Compelling Apple Mail Email Signature

WordPress Website, How to Make a New One

Creating a brand new website

WordPress website

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

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

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

How to set up the entire WordPress website in 11 steps

1. Web host

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

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

2. Domain name

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

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

3. Buy & register your domain

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

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

4. Set up WordPress

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

5. Home Page

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

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

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

6. WordPress plugins

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

7. Contact Us form

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

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

8. Google Map

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

 

9. Google p.1 with Local Listing

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

10. Specialized email addresses

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

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

11. About Us page

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

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

Too time consuming?

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

 

Youtube Video, How to Make Your First One

Materials required

youtube videoIn order to make this simple YouTube video, this is what you will need.

Creating the above YouTube video in 9 steps

1. Open Keynote

youtube videoIf you do not have Keynote yet, go to Mac App Store Preview and click on View in Mac App Store. Then click on Get.

2. Assemble your images

In our case we will go to bit.ly/nocostimages and get some images at no cost. Type “tree” and click search icon. Follow instructions. The tree pictures you download will be in your Downloads folder.

3. Drag pictures into Keynote slide

In Keynote click View > Show Rulers. Drag the right-hand edge to 44 and the bottom edge up to -22.

Drag & drop your two tree pictures onto a Keynote slide. Size them so that they are the same height.

4. Add text

Click the text box icon twice to get two text boxes above the pictures. Drag them so that they are the same height and in the right position.

youtube videoChange top text two “My First”. Change the other text to “YouTube Video”. Select top text and change the text to

  • 96 point font
  • Light green
  • Bold

Do the same with the bottom text but make it a darker green.

5. Add Keynote effects

youtube video

If you click the Inspector icon, you can find the 29 Keynote effects listed here. These are the effects you should add:

  • Top text — Scale
  • Bottom text — Shimmer
  • Left picture — Sparkle left to right
  • Right picture –Swoosh left

Each one has a duration of one second. The order will be in the order given in the above bullet points.

 

6. Test

Click the Play button in the upper right-hand corner a couple of times  to test it out.

7. Record with ScreenFlow

youtube videoMake sure ScreenFlow is configured  to Record Desktop from iMac. Start recording by clicking the red button or else clicking ScreenFlow icon > Record at top of screen.

 

8. Edit & size video

youtube videoStop record. File > Rename with a descriptive name. Move the red vertical scrubber line to the beginning & then the end of the useful part of the video. Right-click and delete those parts of the video that are no longer useful.

youtube videoUsing the slider in the lower left, set the video size at 1920 x 1080. Then click the green check mark. If the slide in the timeline has been selected, use the Scale slide near the upper right to make sure the video fills the canvas.

Save again.

9. Upload to YouTube

Assuming you have set up your account and channel with YouTube, upload to YouTube using File > Publish to > YouTube.

 

 

 

Related pages

Video-creation course — seven days, no charge


WordPress authorPeter 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.

tweets


Moving Pictures with Soliloquy WordPress Plugin

Simple WordPress moving pictures plugin

If you want moving pictures like the ones above, use the WordPress plugin called Soliloquy. It is fast, simple & easy to use. It is SEO friendly. While setting up the SEO features, you can even make any image link to another website!

How to set up Soliloquy

  1. In your WordPress dashboard go to Plugins > Add New
  2. Search for Soliloquy
  3. Beside the Soliloquy description box that shows up, click Install Now > Activate.
  4. Click on Soliloquy > Add New in the black dashboard column
  5. Give it a descriptive title
  6. Experiment with the two choices of sourcing files. The example above used “Other Sources” which were 5 pictures that were moving picturesalready in the website’s Media Library. Hold down the shift key while you click on the first & last pictures you want.
  7. Click Publish often
  8. moving picturesScroll down and look at your pictures.  (You should not have more than 5. That would slow your computer down.) Click moving pictureson the blue Edit button to improve SEO and to add a link to another website. Click on Config and experiment. Duration & speed are in milliseconds. So, 1000 would indicate one second. In the example above, the Slider Transition Speed was increased to 900.
  9. After you click the blue Update or Publish button and then click the Soliloquy Slider Code, you will see a snippet of code something like 
    .
  10. Add that snippet where you want the slide to show up, click Update and view your page. The slider will be working.
  11. If you want to edit the slider, click Edit Page and then Soliloquy > Soliloquy in your WordPress Dashboard.

More features for your moving pictures

In the sample above, you see 5 small circles that represent each of the 5 pictures. If you click on one of them, you will go to the corresponding picture and the slider will stop working. To disable this feature, you have to pay for the Pro version of Soliloquy.

 

Online Flyer, How to Create & Double Your Sales

Visual Composer for online flyer

online flyersTo create an online flyer you should use a WordPress plugin called Visual Composer. As you are practicing making the online flyer, you should go back and forth between this tab and the Visual Composer tab.

The Digital Flyers blog post says: Home renovation chain Rona replaced its printed flyers with expanded digital flyers. As a result, their sales doubled at its stores across Canada. So, it may be worth your while to learn how to create an online flyer using Visual Composer.

Materials required

 Single product

online flyerYour online sales flyer should have one product per row. This post tells you how to create the promotion for a single product.

 

sales flyerYou start your online flyer by getting some eye-catching artwork that tells a story. With the image to the right, there is no question that it is about Facebook.

 

online flyerThen use GIMP eyedropper icon to select the precise colour of the word “like”. Click on the icon and then click on the word  “like”. The colour you see in the bottom has the hexadecimal code of #605FD9. That is the main colour you will use for borders & text.

 

Flyer item on scrap paper

Make a rough sketch of your online flyer and then one ad on scrap paper. Include the wording for the text panel.

In this example, we will be selling the creation of a Facebook Business Page at 50% off. For continuity, there will be a similar style to the other ads in the flyer.

I prefer fewer than six  words in the heading. I chose “Facebook Business Page Creation”. Below that there will be 50% off in a  coloured oval. The regular price will have a line through it. Below that will be the sale price. Below that it will tell people to click for more info.

Create your text panel

online flyerYour entire product promotion panel will be 660 pixels wide.  So, using Image > Scale Image, change the image panel to be two thirds of that amount. (It will be 440 x 214 pixels.) Create a new panel that is the same height but half the width. (It will be 220 x 214 px.)

Using the Rockwell Extra Bold font, give it a title like you see in the example.

Complementary colour

online flyerYou need to find the correct colour for the oval. This will be a colour that complements the text.

To find that, go back to the hexadecimal page.online flyer In the Enter Hex Colour Code box, enter 605FD9. That is the colour of the text. Scroll down and you will find the complementary colour. It happens to be #D7D95F.

online flyer

 

In the GIMP toobox, click the double-headed arrow next to the white & purple to move the purple (#605FD9) to the background colour. Click on the purple box and the Change Background Color panel shows up.

Enter D7D95F into the HTML Notation box. Click OK and the background colour now is yellow (D7D95F). Create a new box that is the same size that you want you text box to be.  It will be yellow.

Make sure your foreground colour is purple (605FD9).  Click on the Text Tool, change the font to Rockwell Extra Bold. Set the size to 100 px.

Creating oval with text

Making sure your background colour is set at yellow, create a new box the same size as the text panel (220 x 214 px.).  Setting your foreground colour at purple, the font face to Rockwell Extra Bold and your text size at 100, type the number 50 onto the yellow panel.  Right-click > Merge Down. Setting the text size at 50, make a percentage sign (%) beside the 50. Setting the text size at 25, make the word “off” below the  %.

vonline flyerUsing the Ellipse Select tool, draw an oval around the text. Click within the oval and then press Cmd C. The oval without the rest of the rectangle will exist within your clipboard. Press Cmd V to paste the oval below the headline.

If the oval is too large, click Cmd Z to delete it. Then click on the yellow rectangle and re-size with Image > Scale Image. Paste the new oval back into the white panel again.

Add prices & CTA

Add $37 below $74 and add a line through the regular price as you see in the image below. You can use the Pencil tool to draw the straight line through the regular price.

Add your “click for more info” text.

Completing the ad with borders

The size of the ad will be 660 x 214 px. So, you create a purple rectangle that size and reduce the height of the 2 panels by 4 pixels each. Copy & paste them onto the purple rectangle. That will have you an ad with nice even borders.

These are the steps you take.

  1. Make sure purple is the GIMP background colour.
  2. Make a new 660 x 214 purple rectangle.
  3. Using Image > Scale Image, make sure that both the Facebook image and the text box are 210 pixels high.
  4. Use Cmd C & Cmd V to copy & paste the two smaller panels onto the purpleonline flyer rectangle.
  5. If you have copied & pasted the 2 panels around properly, you will have a completed ad with borders around them.

 

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 advertisingonline flyer 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.

If you haven’t studied the PhotoEditorX tutorials yet, you may want to start with this very quick GIMP lesson.


WordPress authorPeter 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.

tweets


Digital Flyers, a Better Choice than Paper

Rona’s digital flyer success story

digital flyersHome renovation chain Rona replaced its printed flyers with expanded digital flyers. As a result, their sales doubled at its stores across Canada. This was in spite of the fact that they had scrapped the printed flyer during a nationwide test one week in February.

It was a 15-page digital flyer, far larger than its typical printed versions. The flyer allowed readers to click to find more details, create lists and watch how-to videos.

The flyer was distributed online to customers in the company’s databases.

With digital flyers, users can search for specific items, to see who has the best prices.

So, let’s say you’ve run out of stain while your are renewing your deck. Instead of rummaging through a bunch of paper flyers, you can just go in and search for online for stain prices. You’ll find every store that has stain on sale in your market.

Digital flyers offer more variety

digital flyersSome stores display their weekly flyer prominently on their own company website. However, some stores keep them on websites that display flyers from many different stores.

In the flyer displayed here, prices & descriptions show up when users hover over a picture.

 

 

Related pages

Rona tests online flyers…
How to create your own online flyer

 

Larger Font for My WordPress Website

The problem: small font

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

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

Three systems, one should work

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

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

System #1

Using styles.css to increase font size

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

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

Then I

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

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

System #2

1. Appearance > Editor

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

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

2. Add font code to body code

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

3. Click Update File

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

4. Heading & bulleted point sizes

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

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

.entry-content h3 {

   font-size: 20px;

}

.entry-content h2 {

   font-size: 30px;

}

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

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

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

Bulleted lists

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

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

System #3

Using a CSS plugin

1. Install Custom CSS and JS WordPress plugin

larger font

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

Read the special features of this plugin in the screenshot.

2. Go to Appearance > Custom CSS

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

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

 

4. Click on Add Custom CSS

larger font

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

5. Add code & publish

Replace the code referenced in point number 4 above with

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

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

YouTube video

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

 

Related page

W3Schools CSS font discussion

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.

 

Caldera Forms — Free WordPress Plugin Review

Caldera forms are free and they are full of features:

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

Setup

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

  1. Click on new Caldera Forms link > Forms in black column
  2. Click New Form at top of page
  3. Click on one of the 7 templates for different types of form
  4. Name it
  5. Click Create Form
  6. Here is a key to what you get:
    1. Delete row
    2. Break row into columns
    3. Drag & drop row to different location
    4. New row in this table
    5. New table (It could be one single-column row.)
  7. When you click on the New Table plus sign, you will get a white box. Drag New Field blue button into it.
  8. Save and then click on Form Settings tab. You will see a shortcode that looks like the image below. Paste that shortcode where you want the form tobe. (Note that you do NOT have to place the shortcode within the source code. It can be anywhere you want in Visual view.)

 

Troubleshooting

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

1. I do not get the email

Click on the green Email tag. Make sure your email address is listed under Email Recipients. If that does not work, make sure your email type is set at Text.

2. Visitor information is not in email

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

3. If you are still having email issues,

go to this Caldera Forms page.

Related page

Caldera Forms installation instructions