1. A Useful Analogy to Understand the Internet

In order to understand how the internet works, a home address and a phone book provide a useful analogy:

  • All the files that make up your website are stored on a computer called a server. A server is a hard drive that is provided by a web hosting company that is connected to the internet.  It is always turned on.  Think of a server like a home that stores all your stuff (your pictures, text and other files that make your website run (the WordPress software and plugins etc.)
  • A domain name (for example: www.yourwebsite) is like the address of a home.  Instead of being in the format: 100 whatever street, it is in the format: www.whatever.com.  Just as there are many alternatives to street (for example: avenue, road, crescent, lane, etc.), there are many alternatives to .com (.net, .org, .me, etc.)
  • An IP address is like your home’s phone number. An IP address might look something like this: 123.4.67.5.
  • A DNS (domain name system) server acts like a telephone directory. For example if you wanted to call your friend on the phone, and you knew their name and address, but not their phone number, you could look up their number in the phone directory.  When you type in a website’s domain name (for example: www.yourwebsite) into your web browser, your computer will accesses a DNS database to find the matching IP address (for example: 123.4.67.5), then call on that IP address, the same way that you call someone on a phone.

2. How long does it take to set up an account?

  1. Account Provisioning: If you use SiteGround, as I recommend, your account will be provisioned immediately. Other web hosting companies may take time.  For example, InMotion takes from 6 to 12 hours on weekdays and 12 to 24 hours on weekends to provision an account. Once setup is complete, you will receive a welcome email with the IP address and hosting account information.
  2. Security Certificate: If you use SiteGround and the Let’s Encrypt option, as I recommend, you will have free, immediate and very easy to install SSL. If you decide to pay for SSL, your wait time will be variable, depending on your web hosting company and who you purchased the SSL certificate from.  Also, paid SSL certificates can be a pain to install and you might end up paying to have the installation done for you.  The wait time could be hours to days.  Why pay for an SSL, when you can get a free one that’s easier and faster to install?  There is no reason that I know of.  Only certain web hosting companies make it easy for you to install the free let’s encrypt SSL (SiteGround for example), other companies such as InMotion do not currently let you work with the free Let’s encrypt SSL.  Eventually InMotion and the other laggards will be forced by unhappy customers to work with Let’s Encrypt, but I think their reputation has already been damaged.  Regardless, none of the web hosting companies are going out of their way to tell you about let’s encrypt, I guess because they like making money selling SSL certificates.
  3. DNS propagation: It may take up to 24-72 hours, but in my experience, this can often happen within a few minutes.

3. What is Web Hosting?

In order to make a website available to people on the internet a computer is required, which stores the website’s files and transmits them to the people accessing them.  This computer is referred to as a server.  You might be wondering: can I make my own computer into a server?  Yes you can, however, it’s a little bit technical to set up.  Also, your computer would always have to be turned on, and fast enough to handle multiple people accessing your website at the same time.  If a large number of people began to view your website, your little homemade server would probably crash.  You would also likely have to start paying your internet provider for bandwidth costs.  The value you get from paying a web hosting company for these things, as well as other things, such as automatic backups and security is well worth it.


4. What is the difference between pages and posts?

WordPress allows you to create two different types of content on your webpage: a page and a post.

A page refers simply to a webpage.  A website consists of one or more pages, which are usually accessible by selecting them from a drop down menu across the top of the screen.

The term post refers to a blog post.  A blog post is an article, typically written by the website owner.  Blog posts can be about anything: hobbies, news, company literature, etc.  A blog post that contains content that people want to read can draw internet traffic to the owner’s website, which can generate free advertising.

Why does WordPress distinguish between a blog and a page, why not just add blog posts as separate pages?  The reason is: blog posts have additional functionality that pages don’t.

This functionality includes:

  • Time stamping: Your posts will be automatically stamped with the date they were written so people can sort your posts by date
  • Categories: you can create categories that classify your posts. For example, if you have a website about interior decorating, you could create categories such as: kitchen, bathroom, living room, etc. to categorize your posts.
  • Tags: you can create tags to further categorize your posts and help people find what they’re looking for. For example, the interior decorating site might tag certain posts with words such as: antiques, modern, low budget, etc.  There may be some overlap between categories and tags because the two are similar because they are both used to categorize posts and make them easier for people to find.
  • Comments: While you can allow comments from visitors on both pages and posts, typically comments are more relevant for posts.
  • If people only ever wrote a couple of blog posts, there wouldn’t be much need to make them any different than pages, but imagine that you’ve written 100 posts.  If you wanted them all to appear in a drop down menu (like pages do), the menu would be way to big to be useful.  Instead posts are stored on your server as you write them and people access them by browsing a list of the titles of your posts.  Typically a picture and small caption from your posts are included for each post.  This list of your posts (with pictures and captions) is typically presented in one or more of the following places:
  1. Your landing page
  2. A side bar on one (or all) of your pages
  3. A dedicated webpage (typically called BLOG)
  4. A container on one of your pages

You can customize the way in which the list of your blog posts looks.  For example, you can: choose a picture to represent each blog post, select a caption length, show the date the post was written (or not), show tags and categories (or not), choose how many of your posts to show on the page or sidebar, and what posts to show (for example, your latest 3 posts, your top ten most read posts, or the posts that have the most comments, etc.)


5. What is the difference between a blog post and a portfolio post, or simply a blog and a portfolio?

Blog versus Portfolio:

It is surprisingly difficult to find information on the difference between a regular post and a portfolio post.  If you are using Avada, you can add a portfolio post by going to: Dashboard >> Portfolio >> Add new.  In order to display portfolio posts, you need to use the Avada builder element: recent works (or an equivalent widget from another source).  This widget will show a subset of your portfolio blog posts of your choosing.  It is my understanding that the advantage of creating a portfolio post is that it allows you to manually choose which posts to show, thus creating a “portfolio” of your selected works.  This is in contrast to regular posts, which are displayed based on things like: the time it was published (recent works), the specific category it belongs to, or tags.  With regular posts, it seems that you don’t have the option to manually select specific posts that you want to appear in your blog section, however, it should be easy to work around this shortcoming by assigning a unique tag (such as “portfolio”) to the posts of interest, then, in the widget settings, select only blog posts with that tag to appear.  If this option is not in your widget settings, you might be able to create a unique category (such as portfolio) and add the posts you want to show into that category.  Assuming this workaround works, then portfolio posts serve no real purpose, because you can create any portfolio you want using standard posts.  Perhaps I’m missing something?  As far as I can gather, the only advantage of creating a portfolio post is that you will have another widget to display your blog posts (in addition to the widgets that are used to display regular blog posts) and this widget might give you a nicer visual appearance (depending on your tastes).  The downside of using portfolio posts may include the following (Note: I found these things on the internet, I have not confirmed that they are true).

  • Portfolio posts don’t appear in your feeds, so your followers won’t be updated when you publish a portfolio post.
  • Portfolio posts aren’t tagged in the same way and don’t appear in the main WordPress tag listings, though they appear to have their own tagging system.
  • I read that portfolio posts aren’t indexed by search engines to the extent that posts are, perhaps because they are not tagged and categorized in the same way as regular posts.  I’m skeptical of this one, but it’s possible.

My advice at this time would be to avoid portfolio posts, especially if you are a beginner and just use regular blog posts.  If you want to create a portfolio, use tags or categories to display your posts of interest.


6. What is a Landing page?

This refers to the home page of your website.


7. What is cPanel?

cPanel is a common software program provided by some web hosting companies, that creates an interface so you can easily work with your website’s files and configure settings on you web server.  For example, your website will contain many folders, cPanel lets you see those folders and download them if you want.  You can do lots of other things in cPanel, for example, this is where you install WordPress and set up your Let’s Encrypt SSL certificate.  Many web hosting companies provide cPanel and it seems to be the preferred option, however, some web hosting companies use other software to do this.  SiteGround uses cPanel.


8. What is a short code?

A short code is a short name (a word or two) given to a full length piece of code.  It is used as a placeholder for the full length code.  For example, the short code for creating an image gallery on one of your pages might look like this: “[gallary]” (without the quotes).  Short codes are placed in square brackets and added to the body of a post or a page.  When you include a short code in your page or post, the computer recognizes it and fills in the full length code.  This saves you pasting in large quantities of computer code into the body of your work.  Viewers don’t see the code, but still, it makes it messy for you to have to have huge chunks of code between the bits of text that make up you webpage.  Furthermore, using a shortcode placeholder allows you to update the code in one central place.  You can apply the short code as many times as you like and the computer will always refer back to the one centrally stored full-length-code.  If you use the Avada theme, you won’t really need to use shortcodes, but you can if you want, it’s easy to do.


9. Tips for formatting in the WordPress editor

  1. Use Shift + tab to back out of (or remove) a bullet or a number in a list.  This is a bit hard to explain, but if you are ever having trouble getting rid of a bullet or stopping the editor from automatically adding a number to a list that you have created and you just want the cursor to be at the left side of the page, do the following: place the cursor to the right of the bullet or number, then hold down shift and press tab.  The bullet should reduce in indent, or disappear if it has reached the left side of the page.
  2. To remove a blank line that the WordPress editor automatically adds, do the following: in the top right corner of the editor window, you’ll see tabs that let you switch between text and visual.  Normally you’ll want to work in visual, because if you switch to the text tab, you’ll see all the HTML markup.  In this case, switch to text and then you’ll be able to delete the blank line.  Then just switch back to visual.
  3. If you ever need to modify some text that is outside the WordPress editor, using a bit of HTML code, you don’t have to write it yourself.  Just write the text in the editor first, then switch the tab to “text” as mentioned above.  Now just copy and paste the HTML modified text where ever you need it.

10. Why are my images blurry when I upload them to WordPress

I have noticed that if you are adding an image as a background for a container, it get blurry.  I assume this problem arises because the theme automatically reduces the image quality, in order to reduce the size and speed up the page loading.  My solution was to insert a the picture using a Fusion slider instead of adding the image to the background of a container.  You might also be able to use one of the other builder elements, such as an image frame.

Alternatively, it might be a combination of issues with your original image size (the number of pixels) and what WordPress does to resize them to fit in a container of certain dimensions.  Here’s an example: Let’s say you have an image of 600 x 600 pixels.  It looks pretty good in an image viewer when it fills about half the screen.  You want it to span the width of the screen, but that would fill too much height on your screen, so you crop the top and bottom.  Now your image is 600px across by 200px high.  Now you place the image in a container that expands it to fill the height and width of your screen.  Now you’ve only got 200 pixels spanning the full height of the screen – not enough for a crisp image.  The solution: you’ll have to find a higher quality image (greater pixel density).


11. Where Can I Get Free Images for My Website?

The only sites I’ve found with searchable databases (the images are categorized with tags) that provide free stock photographs are below:

  1. Pixabay
  2. Pexels
  3. FindaPhoto
  4. ABSFreePic
  5. Flickr
  6. Wikimedia
  7. TheStocks (scroll down and select visual hunt to search using words)
  8. Unsplash
  9. Stock Up (a search engine that searches 27 free sites)
  10. LibreStock (a search engine that says it searches some free sites)

You can find all kinds of other websites that offer free pictures using a Google search. For example, here is a list of 50 websites that offer free images.  The free images tend to be landscapes and nature photos and are generally not categorized, or searchable, so if you’re looking for something specific, you’re probably better off using one of the websites above.

You can pay for images if you wish.  Powstock and PhotoDune are among the least expensive providers, but I’ve never used them and the quality doesn’t seem to be quite as good as the more expensive options (see below).  You can find them with a Google search, I’m not going to link them, because I haven’t tried them and don’t know if they’re trustworthy.  Most companies that sell stock photos use advertising tactics to trick you into thinking the pictures will be free, or very cheap, but they are actually very expensive (about $15-$50 each, depending on the package you buy).  These companies have great stock photos, but they are pricey:

  • ShutterStock (I’ve used them)
  • Fotolia
  • Others: there are many, just do a Google search

12. Where Can I get additional fonts.  

DaFont is one of the top sites.  Just download the file, unzip it, then right click and choose “install”. Thanks to a reader for letting me know that many of these fonts are not allowed for commercial use and for providing a website that lists many fonts that are available for commercial use. You can find a list of fonts free for commercial use here


13. Do need to know computer programming / coding to build a WordPress website?

No, you do not need to know any coding.  The more customization you want to do, the more likely it is that you’ll need to add a bit of custom code, but even then, you won’t have to write it yourself (assuming you purchased a premium theme).  The tech support for your theme will email you the code which you then simply copy and paste here: Dashboard >> Appearance >> Theme options >> Custom CSS.  Here’s an example of what a piece of custom CSS looks like:

/*How to change the font-size of the text in the fusion slider text box on the landing page*/
@media (max-width: 800px) {
.fusion-slider-7 {
font-size: 0.8em;
}
}

**Note: this is an actual working example, but if you are reading this because you are trying to make this change, you’ll probably have to use a different number than 7, beside where it says: .fusion-slider-7.  To find how your slider is numbered, see the tip on using Google Inspector below:

Note 2: With Avada, there is also a very easy way to make custom CSS changes.  Just do the following:

Click the pencil icon for the builder element of interest to edit it >> scroll down and find where it says: “CSS Class Add a class to the wrapping HTML element.”  In that box, write a name for the element of your choosing, for example: custom-class-name.  Note, you can’t have any spaces in the name.  Then, go to the CSS editor: Dashboard >> Appearance >> Theme Options >> CSS editor.  In the CSS editor, enter a piece of code that looks like this:

.custom-class-name {
margin-bottom: 0px !important;
}

In this example: .custom-class-name is the name you gave to the element (note: you have to put a . before it in the CSS editor).  The second line: margin-bottom: 0px is the change you want to make.  !important means over ride theme settings.  Finally, your CSS has to end in a semi colon ;

Note 3: I’m not sure how to assign a class name to a text box, but if you use the builder element “Title”, instead of “Text”, you will have an option to assign a class name, like the other builder elements.

14. What is Google Inspector?

If you want to find out the name of a particular element on your webpage (or any webpage), use Google Inspector.  Do the following:

  • Open the page in Google Chrome. If you don’t use Google Chrome, you can install software called Firebug:
  • Right click and choose: inspect
  • In the window that opens up, find the arrow button in the top left corner and click it
  • Now hover over and click an element on the webpage that you’re interested in, and you will see the underlying html code that controls that element.
  • There are more detailed instructions in the section below

NOTE: While it’s good to be aware of Google Inspector, there’s also a way to do this that’s a little easier.   Just right click anywhere on the page in your web browser and choose: “view page source”.  There’ll probably be a lot of text, so in order to find what you want, press control + F (shortcut for “find”) and then type what you’re looking for into the search box.  It’ll highlight all the instances of that word.

Once you start customizing, you’ll probably notice that there’s a few things you’d like to change, but there isn’t a setting for this change in your theme options.  The way to make these changes is by pasting custom CSS code here: Dashboard >> Appearance >> Theme Options >> Custom CSS.  When you first start out, you’ll probably just want to contact Avada support and they’ll give you the snippet of code to paste in there.  After you do that a few times, you might start to recognize the format of the CSS code and you might begin to feel that it’s not that difficult to write your own.  One of the limitations to writing your own code isn’t really formatting it because it’s easy copy the format from similar examples.  Instead, you’ll probably be stumped on what the name of the element is, which you want to modify.  When you write code to modify a particular element, you’ll have to first name the element, then write out what you want to do to that element.  To better understand what you’re doing, you’ll want to read a few basic definitions on CSS, for example: element name, id, class, attribute, etc.  There’s different ways to identify elements – elements can be identified by the class they fall into (you may sometimes wish to make modifications to all elements that fall within a particular class), but for now just understand that you have to find a name which identifies the element you want to change.  To do this you can use the Google Inspector.  To do this, bring up your own webpage (or any webpage) in Google Chrome, and right click on the element you’re interested in and select inspect.  A window will pop up with all kinds of code (html, etc.).  I’m not sure what all this means and it is way beyond the scope of this article, but if you play around long enough in the Google Chrome Inspector, you’ll probably be able to find the name of the element you wish to change.

There is an arrow in the top left of the inspector window, click the arrow to highlight it, then click on the element of interest.  There will probably be a ton of computer code to wade through.  One way to speed things up is to use control + F when in the inspector window and in the little box that pops up, type in a word you think will be in the name of the element.  If that word is there, it’ll be highlighted and you can scroll through the various instances.  For example: if you wish to change something in one of your Fusion sliders, you might guess that the name of the slider element will contain either fusion, or slider, or both.  The word fusion shows up a lot, but if you type slider (without the quotes), you’ll probably only get a few instances.  You can look at each instance of the word slider and see if it might be the name of your element of interest.  For example: I was trying to change the text size in one of my fusion sliders, and I found the name of the element using Google Inspector, it was called: .fusion-slider-7.  I had to fumble around a lot, but was able to write some CSS to modify this element.  In summary, the workflow for finding an element name with Google Inspector is:

Right click on webpage of interest >> select inspect >> in the inspector window, select the pointer arrow icon >> click on the element you are interested in learning about >> click in the top window (you’ll see: <div, many times in this window) >> press control + F >> type in a word that you think will be in the name of the element (if you have a guess) >> scroll through all the instances of that word to find the name of the element.


15. What is the difference between a plugin and a widget?

A plugin is a small piece of software that you add to your WordPress website that can do anything from adding an email contact form to your website to adding an eCommerce interface.

A widget is a specific type of plugin that is added to the sidebar, or to a container on one of the pages of your website.  For example you may wish to display blog posts in the side bar of one of your pages.  To do this you would simply add a blog post widget to your side bar.


16. How to Change the Colors of a PNG Icon

In Photoshop Elements: You can invert the color from black to white (or vice versa) in Photoshop Elements.  I don’t know if the other methods (below) work in Photoshop Elements:  Here’s how to the colors.

Open the PNG file >> select enhance (from the dropdown menu along the top) >> adjust color >> replace color >> make sure one of the eye droppers is selected >> click on the area of your image that you want to change (the image will change color)  >> adjust the slider that says “lightness” to 100% (the image in the view pane with a checkerboard background should then change accordingly) >> click ok >> save as PNG

PowerPoint: You are supposed to be able to change to any color in PowerPoint, but mine only worked on the pre-set colors and the transparency of the PNG was lost.  I don’t think older versions of PowerPoint have this functionality:

Open the PNG file and click on the image >> click format from the menu bar along the top >> click “color” in the ribbon below the top menu bar (note: older versions of PowerPoint don’t have this ribbon, or this functionality) >> select the color of interest >> right click on the image and choose: “save as picture” >> save it as a PNG

Photoshop CS:

  • Make sure the color mode is RGB (check top right of your screen).  If not, go to: Image >> Mode >> RGB color.
  • Make sure you have the Layers palette on screen (right side of screen)
  • Click Fx button (bottom right of screen).  If it is grey’d out, check to see if there is a little lock icon beside the small version of your image at the right side of your screen, in the layers tab.  If you see a lock, just right click on it and select: “duplicate layer”.  Another copy of the image will appear below the 1st .  Now click on the original layer and delete it.  Now you should be able to click the Fx button.
  • Choose color overlay
  • Click the color box
  • Choose the desired color
  • Press OK in all dialog boxes
  • Save as PNG

17. How to Change the Colors of an image in Photoshop

In Photoshop CS

  1. Note: you might have to change to full color mode, if you’re not already in it: Image (from main drop down menu) >> Mode >> RGB color
  2. Layer (top panel) >> New Adjustment layer >> Selective color
  3. It’s all self-explanatory from here, except that you might have to change the little button at the bottom of the little window that pops up from “relative” to “absolute”.  Just play with the sliders to see the color change in real time.

18. How to create a background with a color gradient

These instructions will create a gradient background color, instead of a solid color.  You can create the gradient in a particular section, or a whole page.

Assign a CSS ID to the container in which you want to change the background (if you plan to apply the gradient to the entire page, you can skip this step)

  1. Go to the fusion builder for the page of interest: Dashboard >> Pages >> All Pages >> Select the page of interest >> Make sure you’re in the fusion builder
  2. Click on the pencil icon for the container that you want to add a color gradient to.
  3. Find where it says: “CSS ID”.  In the blank box beside it, write a name of your choosing (use all lower case letters and don’t leave any spaces, you can use a – between words, like this: id-for-my-box.  Click save, then click update

Find the Page ID for the page that you are making changes to

  1. View the page that you’re adding the new background to using the Google Chrome browser.  Right click and select: “view page source”.  Press: control + F (this is the find on page feature).  A search box will pop up, type: page-id-
  2. You will find the page ID highlighted, it will look something like this: page-id-123.  Copy the page ID and paste it somewhere for now

Create the CSS code to make the background gradient

  1. Go to colorzilla 
  2. Make the gradient you want, copy the CSS that it gives you and paste it somewhere for now

Write the custom CSS in the CSS editor

  1. Go to: Dashboard >> Appearance >> Theme Options >> Custom CSS
  2. If you are applying a gradient to the background of a single container within the page, write the following: .page-id-123 #id-for-my-box {
    1. Note: The page-id-123 and #id-for-my-box will be unique to you, as described above
  3. If you are changing the background of the entire page to a gradient, write the following: .page-id-123 #main {
  4. Now below what you just wrote, paste in the code you got from colorzilla.
  5. At the very end of the code, you should see a ; (semicolon).  Just before the semicolon, write: !imporant
  6. After you write !important, add a right curly bracket  }
  7. Click: “Save Changes”
  8. Note that anything written between /* and */ is for your notes and has no impact on the code because it is ignored by the computer.
  9. All combined, your code will look something like this:

/*The following code changes the background color of a container page-id-123*/
.page-id-123 #id-for-my-box {
/* Permalink – use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,2989d8+50,b5d0e5+100 */
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #b5d0e5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#b5d0e5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#b5d0e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#1e5799′, endColorstr=’#b5d0e5′,GradientType=0 )
!important; /* IE6-9 */
}


19. How to check if your website is responsive on various screen sizes and devices

You will need to ensure that your website is looking the way you want in all browsers and at all screen sizes.  Just because your website looks good in Chrome doesn’t mean it’ll be the same in internet explorer.  Here are some ways you can do it:

  1. View your website from the various browsers (Chrome, Internet Explorer, Firefox, etc.) >> Click the toggle button located at the top right of the browser window (between the close and minimize buttons), so that the page only takes up part of the screen >> Click and drag the right or left edge of browser window to adjust the size of the window.  Observe how the webpage looks as you change the width.
  2. Open your website in Google Chrome >> Right click anywhere on the page and select: “inspect” >> Click and drag the window to adjust the width.  Alternatively, there are options (at the top of the page) that allow you to enter the width in pixels, or even select specific devices (such as iPhone6, iPad and Galaxy S5, etc.) under the responsive tab.
  3. Paste your URL into the Responsive Test by Truly Blogger.
  4. Paste your URL into Google’s Responsive Test
  5. Paste your site into Am I Responsive (Very Cool)