Some of the most well-established brands make sure you remember who they are. When you think of Nike, what comes to mind? When you see golden arches which come together to form and “M” what comes to mind? A company's logo is extremely POWERFUL. Take a look. How many of these brands do you recognize?
Today you will design a logo for your business. Before you begin, here are a few essential tactics from entrepreneur.com:
Look at the logos of other businesses in your industry. Do your competitors use solid, conservative images, or flashy graphics and type? Think about how you want to differentiate your logo from those of your competition.
Decide what you want to communicate about your company. Does it have a distinct personality-serious or lighthearted? What makes it unique in relation to your competition? What's the nature of your current target audience? These elements should play an important role in the overall design or redesign.
Your logo should work as well on a business card as on the side of a truck. A good logo should be scalable, easy to reproduce, memorable and distinctive. Icons are better than photographs, which may be indecipherable if enlarged or reduced significantly. And be sure to create a logo that can be reproduced in black and white so that it can be faxed, photocopied or used in a black-and-white ad as effectively as in color.
If your business name is "D.C. Jewelers," you may wish to use a classy, serif font to accent the letters (especially if your name features initials). For a company called "Lightning Bolt Printing," the logo might feature some creative implementation of-you guessed it-a lightning bolt.
The best logos make an immediate statement with a picture or illustration, not words. The "Lightning Bolt Printing" logo, for example, may need to convey the business benefit of "ultra-fast, guaranteed printing services." The lightning bolt image could be manipulated to suggest speed and assurance.
However tempting it may be, clip art can be copied too easily. Not only will original art make a more impressive statement about your company, but it'll set your business apart from others.
If you're redesigning your old logo, you run the risk of confusing customers-or worse, alienating them. One option is to make gradual logo changes. According to Priester, Quaker Oats modified the Quaker man on its package over a 10-year period to avoid undermining customer confidence. But don't plan to make multiple logo changes. Instead, choose a logo that will stay current for 10 to 20 years, perhaps longer. That's the mark of a good design. In fact, when Priester designs a logo, he expects never to see that client again.”
Now that you've hopefully given some thought to your logo, it's time to execute Step 1: Get to the drawing board. Sketch, sketch, sketch. Come up with various concepts and draw them in different ways. Sitting in traffic? Think about your logo. Waiting at the doctor's office? Think about your logo. Today is dedicated to creating a symbol that identifies your business. Any idea you even think is remotely good – DRAW IT.
Step 2 is talk to people. Get advice from friends, family, co-workers, random people on the bus (be careful with that). Constructive criticism is KEY. Test people to see if they remember your idea after a few hours. This is your baby, put your heart into it and make sure it's nothing short of brilliant.
Step 3 is design. A logo can have two elements: text, image, or a combination of both. If your logo involves a simple image (such as a paw print), I would advise to search the web for it. A great tool is Icon Finder: http://www.iconfinder.com/, a search engine for icons. If you find something you like, save it.
Now comes the complex part of logo creating... Hopefully you're mind is not over-worked from last week, because things are going to get technical. We are about to enter the thriving and enchanting world of graphic design. At this point, it would be extremely beneficial to download the Adobe Photoshop. Photoshop is a world-renowned image editing. You can find it on Adobe's website, or download it directly from this link:
Adobe offers a 30-day trial where you can utilize all features before deciding to buy or not. I HIGHLY suggest downloading this software. The rest of today and tomorrow will be focused on the use of Photoshop.
NOTE: I highly recommend learning Photoshop. It will take years to master, but you've got to start somewhere. If you do not have the time or are impatient and prefer not to go down this road, here are a few other options that can help you create a logo:
Launch Photoshop and click File > New. Change the measurement from inches to pixels:
A good size for a logo is typically 300px width by 100px height. Make sure the Background Contents is set to “Transparent”. Next, click the text tool on the tool panel on the left (the text tool is the letter T ). Once you have the text tool selected, click and drag your mouse inside your canvas to create a text box and type in your company name. Now highlight the text, and go through the font list at the top. You can also change the color of the text while it's highlighted by clicking on the color box on the top panel. Once you are happy with the text, you can click the Arrow tool (on the top of the tool bar on the left). Make sure “Show Transform Controls” is checked. Now you should be able to rotate and change the size of your text box with by clicking and dragging the corners. If you need to edit the text, select the text tool and click on the text.
Your text box should look like this:
If you make a mistake, click any other tool to deselect the text tool. Create a new layer (Layer > New > Layer). If you look at your layers panel on the right you will see the text layer. Simply right click on it and click “Delete Layer”.
Now to understand Photoshop, you must understand “Layers”. Everything you put on your canvas adds a new “Layer” to your project which you should be able to see on the right side of your screen. If you cannot see your layer, click Window > Layers. Imagine the layers as cake layers. The top layer will cover anything underneath it. The same works in Photoshop. Your layers are listed in order such that if an image is above text, the text might be covered. Layer order can easily be changed by simply clicking and dragging.
To insert an image, simply drag your image from the desktop into your Photoshop canvas. When you are happy with the sizing, etc. press “Enter” to place it (you might need to modify the layer order at this point). To modify any part of your logo, simply select the Layer you want to work on and click the Arrow tool at the top of your tool panel.
Learn what you can about Photoshop today. It is a great resource to know moving forward. I've saved a ton of money on graphic designers because I taught myself Photoshop! Watch tutorials as much as you can. A great resource is YouTube. There are so many people out there posting FREE videos of Photoshop lessons. Learn, learn, learn and then rest up! Tomorrow we will be implementing some cool effects to make your logo look stunning.
|It is the little things that can make your logo go from amateur to professional looking. Effects like shadows, glows, etc. that you may not envision at first, can add so much. Today we will explore some of these tricks; not as a necessity to use for your logo in particular, but as a great tool to have as an option.|
Creating a drop shadow in Photoshop is simple; however, it is important that you fully understand the concept of layers before doing so. If you are not yet familiar with the concept of layers, here is an excellent tutorial you should have a look at:
To add a shadow, you must get to the “Blending Options” of the layer you want to add a shadow to. Let's say you want to add a drop shadow to your text. To do so, double click the layer, or right click it and select “Blending Options”:
A box should now pop up with your blending options for that particular layer. The first option is “Drop Shadow”. Click on the actual words “Drop Shadow” to examine the properties. Here, you can change the angle at which the shadow is coming from, the distance, spread, size, etc. Play around with these options and watch what it does to your layer. When you are satisfied, click “OK”.
NOTE: Don't be afraid to play with the other blending options. Remember, mistakes come at no cost and you will only learn from them!
According to an article written by Richard Burke on eHow.com, “Opacity is the amount of transparency that exists in an image. If an image has 100 percent opacity, it is not transparent at all. As you decrease the amount of opacity, it becomes more transparent. You may want to lighten an image so you can add text or another image in another layer and blend the two together.” There you have it. Opacity affects the transparency of a layer. Let's test it out. Select a layer, and change the opacity in the upper right of your layers panel:
Adding a glow to your layers is easy as pie. Before you do so, however, understand that too much glow could be distracting and obnoxious! A glow must be light, and should only be applied when visible against a darker background. To create a glow, go back into your Blending Options and click the words “Outer Glow”:
From here you can change the glow color, size, opacity of the glow, etc.
In the world of design, putting a stroke on an image or text means outlining it. You can find the Stroke option at the bottom of the Blending Options panel. Click on the word “Stroke” to add or modify an outline of the selected layer:
From here you can change the color, size, opacity, etc.
|Firefox is an internet browser, Firebug integrates with Firefox and acts as a priceless development tool. First download and install firefox from http://www.mozilla.org/. Once you've downloaded, installed, and opened the browser, add Firebug from here: https://addons.mozilla.org/en-us/firefox/addon/firebug/.|
Once Firebug is downloaded and configured, click on the little bug looking icon on the top right of your browser:
Once you click on the bug icon, a new area should show up on the bottom of your browser. In the top left of this new area, click the inspect icon:
You should now be able to hover over areas of the website you are on and inspect it's HTML elements. This is especially good for images, because upon inspection, you should be able to see where they are located in your web space. The image below shows the inspection of a logo. On the left side you can see what it looks like when you hover over the logo. On the right side, you can see where this image is located (/images/logo/logo.png).
Since this image is in the new template we downloaded, we now know the logo file is located in root/templates/New_Template_Name/images/logo/logo.png. So if we log into FileZilla, we can click Templates > Your New Template > images > logo, and in this folder you should see the file “logo.png”. To download this file, simple drag it to your desktop. You can also right click on the file and click download OR drag the file from the right side of the screen into the left area (which is your local computer). Make sure you know how to locate this file!
Now right click on the logo and click Open With > Adobe Photoshop. You now have the exact size of the logo that's currently in place on your template. Drag the layers you created for your logo into this file, delete the layer of the logo you don't need, and adjust everything so it fits properly. When you are happy, click File > Save for Web. Make sure the file format is set to the same one as the original logo (usually .png):
Click Save, and replace the original logo that you downloaded from your web space. Now drag the file back into your web space and overwrite the old one. The logo.png file in your web space should now be your new logo (the one you created). If it is, go refresh your website and make sure it is on there properly. You might need to make some adjustments and repeat the process until it's right.
|NOTE: Firebug is a great tool to modify files on your web space. It can also work for modifying the code in your web files (when you become more advanced of course), but use it wisely; remember to ALWAYS keep a backup of what you are replacing so you can revert back to it if you run into trouble.|
Your website's “favicon” is the tiny icon located at the very top of your URL. A favicon is often a company's logo, or a variation of the company's logo because of the fact that it's size must be scaled down tremendously. A favicon is also a critical tool in distinguishing your site from others, especially when multiple tabs are open in a web browser.
To implement a favicon you must first create one, and there are many tools online that will help you do so. I highly recommend:
According to the website, you must upload an image that measures 100 x 100 pixels. If you don't have an image of that size that you want to use as your favicon, you must create one. You can do so in Photoshop:
Now to create the actual favicon simply navigate to http://www.favicongenerator.com/, browse for the file you just create and click “Generate Favicon”
Now right click on the tiny favicon that is generated and save it as favicon.ico on your Desktop.
The next step is to locate the current favicon in your webspace and replace it with your new one. To do so you must:
|Today is a lesson geared toward getting you to think outside the box. Consider your brand. How is it unique? Is it appealing to your customers? How will you get noticed amongst your competition? Seth Godin, renowned author and blogger, wrote a book entitled “Purple Cow”. The concept is simple, yet brilliant. Seeing an image of a cow does not strike you as odd. In our open and resourceful society, everyone knows what a cow looks like. Now, imagine if that cow was purple. Have you ever seen a purple cow? Wouldn't you be more likely to notice and REMEMBER a purple cow? Cows are boring... but a purple cow is remarkable. When developing your brand, THINK OUTSIDE THE BOX.|
Branding is a critical step in running a successful business. It doesn't matter how “out-of-this-world” you think your idea is. THERE WILL BE COMPETITION.
The importance of fonts is often over-looked. As Tara Ingalls puts it, “You put a lot of thought into your company colors, the images or icons you’ll use to represent your company, the placement of elements on your website and print materials, but did you stop to consider the font style you’d use to convey your message? Font selection is just as important, if not more important, than all of the other elements combined. The wrong font and your company message (or even the name) could be confusing, even downright unreadable.”
A font, in essence, is the deign of your text. “The entire field of graphology is based on the belief that your handwriting says a lot about your personality and character, now that the world has gone digital it’s only logical that your font says a lot about your company,” says Ingalls. So how do you change the font of your website? Today you will learn just that!
Adding fonts into a Joomla website requires installing a component. If you Google “Joomla fonts” you will find several. Today we're going to work with a simple, free component: Web Fonts. To download Web Fonts, go to http://bluebridgedev.com/download-web-fonts and download the two files at the bottom (component and plugin). Once you have these two files downloaded, log into your admin panel and go to your extension manager.
Now browse for either of the files and click “Upload & Install”. Now do the same for the other file.
Once both files are installed you must activate the plugin. To do so, go to your Plug-in Manager (Extensions > Plug-in Manager). Find “Web Fonts Plugin” and enable it (you can just click on the red circle to turn it into a green check mark). Now scroll over “Components” and you should see “Web Fonts” toward the bottom of the drop-down menu. Click the “Add Fonts” icon to begin.
You should see two links: Fonts.com and Google Web Fonts. For today's lesson we are going to use Google Web Fonts, but Fonts.com work basically the same way.
P = paragraph (all your standard text)
a = links
b = anything bold
h1 = Heading 1 tags
h2 = Heading 1 tags
and so on...
Once you click “Add” that font should be applied to the style of text you selected.
TIP: To find the selector you can open Firebug (which we learned about earlier in the week). Select the inspect icon.
Hover over the text you want to identify and you should see the selector letter surrounding that text in the panel.
One of the most well-known methods of organizing information on web pages can be done through the use of tables. As you become more advanced in the field of web design, I would advise to learn CSS; But for the purpose of getting started, there is absolutely nothing wrong with tables. This great tool allows you to lay out your Joomla articles exactly how you please, by creating designated spaces for text, images, videos, etc. When setting up a table (which you will do in just a minute), it is important to understand that it is made up of columns and rows. These columns and rows can hold ANYTHING inside them and can be merged together as well. Here is a simple example of a table:
Now let's begin. Creating a table in Joomla is simple. First, ensure that the Plugin Parameters Functionality is set to Extended. You will not be able to insert tables without this being set. To do so:
A box should now pop up with table settings. In this box you can determine the number of columns, rows, the alignment, etc. When you are done click “Insert”. You should now see the outline of your table cells in the body of your article. To add content inside a cell, simply start typing. To add an image, just click inside the cell you want the image in (or navigate to it using the arrows on your keyboard) and click the insert/edit image icon. To add a video, click in the cell you want the video in and click the Insert/Edit Embedded Media icon:
NOTE: Image and media adding instructions can be found in week 2, day 5.
Remember, the use of tables will help you immensely in organizing your articles & web pages; you do not want a sloppy website where users need to dig around to find things.
|Creating a basic contact form is simple and absolutely essential! There are a ton of tools and Joomla extensions out there that are easily customizable, but today I'm going to introduce you to the best one out there: ALFContact. To implement this effective and efficient little module on your own website:|
If people don't know how to contact you, don't expect to get much business. Clear and concise contact information shows that you provide good support, good service, and you are most likely a trustworthy business.
“Outsourcing” is a term that has become widely used amongst web-based entrepreneurs in the last decade or so. The term refers to getting help from outside sources for all things tech related. For those with experience in development and knowledge in design, outsourcing may not be necessary. However, for those just starting, outsourcing can be a wonderful (and often reasonable) tool. Outsourcing can be utilized for nearly anything from designing a logo, to creating a new feature or function.
According to an article on outsourcehow.com:
“Virtual outsourcing is a booming industry, and you’d be surprised at how many tasks can be handled via the internet with a virtual helper. Overall, outsourcing your tasks is convenient, and allows a great opportunity to put your time and energy into more important pursuits. There is a great saying that you should aim to do what only you can do, so learning to delegate tasks in your own business is an essential step in growing your business to the next level.”
When I first decided to start a web-based business, I got completely RIPPED-OFF from a local company that I found in my neighborhood. It wasn't until years (and thousands of dollars) later that I realized there are way cheaper ways to get work done by professionals. Ever since I began outsourcing I've had a lot more work done, and cut costs tremendously. Today I'm going to discuss the best sources for outsourcing that I have come across. It is up to you to explore them in depth.
I have been using elance.com for YEARS. It is by far the best outsourcing system I have used for all sized projects. Once you register, you can post a job with a specified budget, and receive bids from a wide variety of companies. If you use elance, make sure to hire people with experience. You can tell their experience level by the number of jobs they have completed along with their ratings/reviews.
Fiver is a bit different but could be a great option for light work. The site is a marketplace for services starting at $5. There are a lot of designers on there willing to do quick and cheap work for you. There is also a ratings system in place to help you determine which users are trustworthy.
To be quite honest, I have never used the services above, but I have heard nothing but great things and would highly recommend exploring your options before diving in.
(It's helped me A LOT).
|This week is going to be challenging. Prepare yourself mentally, because at some point you will struggle. Development is the most technically challenging part about creating a website. Having the knowledge to essentially create something from nothing is a skill which must be taught. It's like learning a new language; completely foreign to many. Those who succeed in the field are the ones who learn, practice, and understand. This week we will venture into a new world. A complex world that can take years to understand. If you get get stuck, don't try to guess your way out. Rewind. Take a step back and find your error. My goal this week is to help you scrape the surface of this enormous industry and provide you with at least enough knowledge to help you create and launch successful websites without any help!|
This week's lesson involves MySQL & FTP. MySQL is a database management system. It is used to store certain things such as user accounts and blog posts. Basically,
MySQL is used in websites to make them dynamic. FTP (File Transfer Protocol) is where all your websites files are stored such as pictures, documents, etc. MySQL and FTP are complex systems to learn and understand, but they are both crucial steps in the website creating process. If you would like to read about the two systems a little more in depth, simply research the terms and you will find plenty.
Creating a database in MySQL:
Start by logging in to your cpanel (control panel). Your cpanel is a simple launchpad provided by your host (in our case, 1&1) to help simplify website management. Your 1&1 control panel can be located by navigating to admin.1and1.com and logging in with your domain name or Customer ID (should have been emailed to you by 1&1), and the password you created when purchasing your domain. Once you are logged in to your cpanel you should see area called “Web Space”:
Click “MySQL Administration.” On the next screen click the “New Database” button:
The following screen should look like this:
The description can be anything that you will remember. I suggest your business name. Create a password and click “Set Up.” Congratulations! You have created a database. Click “Go To Overview” and you will see the database you have just created and it's status. We will re-visit MySQL a little later. Now click the “Start” button at the top left of the page to go back to your cpanel.
Setting up FTP:
In your cpanel you should see an area directly under “Web Space” entitled “Access”:
Click the first link, “FTP Account.” On the following page you should see a username already in place, so you do not need to create a new user. Simply click the “Edit” button on the far right so you can implement your own password. The following screen should look like this:
Put in your password and click “OK.”
Congratulations! You have created a database and set up your FTP. Rest up... Tomorrow you will be building!
Not only do content management systems help website users with content editing, they also take care of a lot of "behind the scenes" work such as:
Websites used to be hand-coded (written completely by hand). Luckily today, you do not have to re-invent the wheel when creating a website. In this day and age, free tools exist all over the web that have been created to help you design and develop great things! CMS is one of them. In fact, CMS software is implemented by a vast majority of websites ranging from tiny to enormous and complex systems. Even the U.S. Government website is built using a CMS! There are several CMSs', but the most famous and widely used are:
This week we will be working with Joomla. I've built a variety of sites on all three systems, and Joomla is by far the most basic and arguably the most powerful (Drupal is pretty powerful too, but harder to learn and manage). The first step in setting up your CMS is downloading the proper files. For Joomla, navigate to Joomla.org and click on the “Download” link. On the download page make sure to click on the version of Joomla that is recommended for most websites. In this case and in this tutorial, I will be walking you through setting up Joomla 2.5. So for Joomla 2.5, click on the big button that says “Download Joomla! 2.5.” The .zip file should begin downloading. Once it is complete, place the file on your desktop. We will come back to it in a few minutes.
In order to install the system, we need an FTP client. An FTP client gives you access to your websites files. The best free FTP client in my opinion is Filezilla, which is what we will be using today. To get Filezilla, navigate to: http://filezilla-project.org/. From there, click the big button that says “Download FileZilla Client”. On the following page, find the version that's right for you based on your operating system and click the recommended link. (There are different versions for Mac and Windows). One you download FileZilla, unzip it and find the icon that looks like this:
Double-click the icon to open the program and you should see this:
|Brief explanation of the layout of FileZilla: The top portion of the application is where you connect to your site via FTP. On the left side are your local files (or the files on your actual computer). On the right side are your remote files (the files on your website), which you will see as soon as you log in. Now let's log in! This next process is important so do it slowly and try to understand what you are doing and why. To connect:|
On the following screen you will see the user name which should be a series of letters/numbers.
Once you enter your login information into FileZilla, click the “Quickconnect” button in the top right to connect to your FTP and gain access to your website files. One you are connected, your website files should show up on the right side of FileZilla (don't be alarmed if you don't recognize anything in there). Now, delete everything except for the folder entitled “logs” (to delete simply right click on a file and click “delete”).
The right side of FileZilla (your remote site), should look like this:
|This next part is important and will take a few minutes. Unzip the Joomla file you downloaded earlier. Inside you should find a folder with the following files located inside:|
Now drag ALL of these files into this area of FileZilla (the entire process should take between 5-10 minutes):
*Make sure not to drag them into the “logs” folder.
What you are doing here is dragging files from your local machine (your computer) into your web space. When the upload is complete, the right side of FileZilla should have all of the files in it that came in the Joomla .zip file:
To make sure you've done everything correctly, navigate to your website and see if it looks like this:
If it does, wonderful! Now let's install Joomla! Start by clicking the “Next” button in the top right of the screen. Click the same “Next” button on the next two screens until you get to the “Database Configuration” page:
You can find this information in your 1&1 cpanel. Login and click “MySQL Administration”:
Here you will find all the information you need to input into your Joomla set up. Copy and paste the Host Name from 1&1 into Joomla, and do the same for Username and Database Name. The password is the same one you made when you originally created the database. Make sure everything matches correctly, leave the other fields as is, and click “Next”. On the following page (FTP Configuration), don't change anything, just click “Next”.
In the Main Configuration page put in your sites name (whatever you want), your email, and an admin username and password that you will remember! Click “Next”. On the final page of the installation, click the “Remove installation folder” button:
Now click the “Site” button in the upper right hand corner. This is now your site. We will learn to customize it tomorrow.
Today you will be installing a template.
The template controls the overall look of your site. It is the framework. It brings together common elements to provide a uniform system so that everything flows properly. Templates vary a whole lot, but mainly in their color schemes, fonts, and layout options. So where can we find Joomla templates? The answer is really, ANYWHERE! There are thousands upon thousands of templates all across the web. Finding one is like finding a piece of hay in a haystack! You can simply google “Joomla templates” and you will be well along your way to finding one. With so many options though, it is important to find the right one for your business: one that can appeal to potential customers. For example, if you have a website that sells clothing for babies, you should find a template with soft colors and simple fonts; something that can appeal to people shopping for babies.
Ok, it's time to find the perfect template! Before you begin the hunt, here is a great list of websites that are FULL of Joomla templates:
|Have you found your template and download the .zip file? If so, it's time to implement (or install) it onto your website. To do so, I will now introduce you to a tool you're going to become very familiar with: Your administrator panel. The administrator or admin panel is usually referred to as your website's “back end.” It is your control panel. It is behind the scenes (not visible to anyone without access), where you will make changes to your website. To access the back end of your website, navigate to:|
Your screen should look like this:
Once logged in, your screen should look like a dashboard of icons:
Now hover your mouse over the “Extensions” tab at the top and click “Extension Manager”:
On the following screen, browse for the .zip template file you downloaded earlier and click the “Upload & Install” button:
Once the template has finished installing, hover your cursor over the “Extensions” tab again and click “Template Manager”:
Your screen should now be a list of templates which come with the installation, along with the new one you just installed:
To change the template of your site, set the one you want as your default. Notice there are two default templates starred. This is fine. You do not need to touch the one that says “Administrator” under Location.
That's it! You've installed a template. Now go back to your website and refresh the page, or simply click the “View Site” link on the top right of the Admin Panel. If you are unhappy with your template, you can repeat this process as many times as you like! Now rest up. Tomorrow we will be customizing your website and adding content.
Today is a big day. Imagine a house under construction. Your website is currently in the framework stage. After today's lesson, your website will have doors, windows, walls, and a roof. Today we will focus on content. We'll be creating pages and a navigation menu to link to those pages.
|Please note: Now that you are adding content of your own, you might want to consider taking your site offline. It is not always necessary, but the option is there if you prefer. This way no one will have access to your website unless they have proper authentication. To do this:|
In Joomla, web pages are refereed to as “articles.” So let's get right to the point and create an article. Once you are logged into your admin panel (www.yourwebsite.com/administrator), click on the “Article Manger” icon (or hover the cursor over “Content” and click “Article Manager”):
Now in the upper right area of the administrator panel, click on the icon that says “New”.
The only things you need to worry about at this point is creating a Title, and putting in some content. This can always be edited later, so let's try an experiment. Create an article titled “Home” and add some content into the Article Text section. In the top right section of the admin panel, click “Save & New.” Now repeat this process and add “About” and “Services” pages. When you are done click “Save & Close.” If you go too far, simply click “Cancel” and you will get back to the Article Manager page. After creating three articles, the article manager page should look like this:
To link an article from the navigation menu, hover your cursor over “Menus” and click “Main Menu”:
You should see “Home” already set up as a menu item; this comes standard with Joomla. First let's modify where the Home tab links to and then we'll create new menu items. So first, click the link that says “Home”. Now next to Menu Item Type, click “Select”:
Next a screen should pop up. In that screen click “Single Article”:
Now on the right side of the screen, click “Select/Change” next to Select Article:
On the screen that pops up click “Home”. Then on the top right click “Save & Close”.
Once you get back to the Menu Manager page, click the “New” icon to create a new menu item. This next process will be extremely similar to what we just did. The only difference is you are adding a menu title. So for the “About” page, type about into the “Menu Title” field. Select your Menu Item Type. Click “Single Article” in the screen that pops up. Click the “Select/Change” button next to “Select Article” and click “About”. Repeat the same process for the services page.
You should now have three menu items linking to single articles, all of which are linked to their respective article which we created earlier. Your Menu Manager page should look like this:
Once you have created articles and linked them to menu items, navigate to your website. You should now see your work in action!
|Please note: To get rid of unwanted text or icons on your pages such as hit counter, print icon, etc., go into the article manager in your admin panel. Click the “Options” icon in the upper right. In the box that pops up, you can turn on and off whatever you want.|
Adding images to your site is a simple process as long as you understand how your website files are stored and how to access them. If you don't, have no worries. Today you will learn just that.
|Before we begin, I would like to point out that web images work differently then, let's say, professionally photographed, high-resolution printed photos. Web images need to be light. If you put an image on your site that is 5 MB (megabytes), it will load extremely slow. If you put the same image with a lower resolution, your site speed should pick up. Remember, people's attention spans are lower than ever – you DO NOT want a slow website.|
Lowering the resolution of a picture is a common practice. If you don't know how to do this, you can do a Google search and find a ton of programs that will help you. My recommendation is Photoshop. Although the program is a bit pricey, it is well worth it! If you do happen to have photoshop, simply open your image and click File > Save for Web. From there you can decrease the size, resolution, etc.
Understanding web images also means understanding pixels (measured in 'px'). A computer screen's resolution is measured in pixels. If you are not familiar with the concept of pixels, look it up now! This image will give you a rough idea of pixel measurement:
To put things into perspective, professional photos are usually in the range of 3-4,000 pixels per side when put on a computer. Images you upload to your site should not exceed 850 px in width.
Now let's discuss uploading. Uploading a picture entails getting the actual file into your web space (or FTP). Once you have done this, you can obtain the image's URL. For example, if you upload a file called “example.jpg” in a folder in your FTP called “images”, the photo's URL would be:
|Let's test it out. First, log into FileZilla to access your web space. If you click the small downward pointing arrow in the far right of the log in area, you can just click on the login information you used last time you logged in and it should log you in automatically. Once logged in, you will see all the files associated with your site; this is your root folder. In your root folder, there should be a folder entitled “images”. Double-click the images folder to open it. Now anything you drag into this folder will have a URL exactly like the example above. You can also make a new folder within the images folder. If you do this, your image URL will become:|
Once you are comfortable with uploading images, and you understand where they are located and how to access them with a URL, putting them on your site is easy as pie! First, log in to your admin panel. Go the Article Manager page. Click on any article (or create a new one). In the Article Text area click the image icon:
A box should now pop up where you can enter the full image URL (include the http://). Click “Insert” and your image should now be placed in your article. Save your article and check your website to make sure it's there.
Adding videos is extremely simple! This tutorial will teach you how to add videos to your website via YouTube, Vimeo or any other video website with an embed URL.
First, ensure that the Plugin Parameters Functionality is set to Extended. You will not be able to insert videos without this being set. To do so:
Before learning what a module is, it's important to understand that a module cannot be created without knowing what positions are available to place it in. Positions are sections of your template designated for modules. “Right” for example, can represent a right column on your template. Therefore any module created and placed in the “Right” position will show up on the right side of your website. Knowing where your positions are is extremely important. To find your template's positions, log in to the admin sections of your site and find your template manager page:
Click the “Options” icon in the top right. In the screen that pops out, make sure the button for “Preview Module Positions” is set to “Enabled”. Click “Save & Close.” Now switch from “Styles” to “Templates” by click on the Templates link.
On the “Templates” page, scroll down, find the template you are using and click “Preview.” Some of the more complex templates with more module positions might seem a little cluttered, but do your best to understand these positions and how you can put them to use.
Understanding what a module is and how it works is critical in having a successful Joomla website. Simply put, a module is a block of code that can be placed in any position your template allows for. It can be anything from a menu, a calendar developed by a company, to custom HTML which you create. There are tons of modules available for download on the internet at extensions.Joomla.org/. So how does it work? Let's try it out.
In your admin panel hold your cursor over “Extensions” and click “Module Manager”. Click the “New” icon and when the box pops out, click “Custom HTML”. Give your module a title; for example, “Contact Information”. Next, select the position by click the “Select position” button.
Make sure to select a position associated with your template by clicking on it. Next, fill in the Text area with whatever information you desire for that particular position. Finally, at the very bottom, select on what pages you want this particular module to be displayed on. Click “Save” at the top and see how it looks on your website. Sometimes you have to play around with a module's position before finding the correct one.
Besides creating a module, you can always download and install modules as well. As mentioned earlier, there are tons of modules. For example, if you are looking for a language translator button, you can simply Google “Joomla language translator module” and you should be able to find one. Once you find a module you are looking for, download the zip file. You can install it the same way you installed your template. Go to Extensions > Extension Manager, then click “Upload & Install”:
Once your module is properly installed, you should be able to find it and customize it to your liking in the Module Manager area of your admin panel.
Code placed here is what actually shows on your website.
alert("Hello! I am an alert box!");
<input type="button" onclick="myFunction()" value="Show alert box" />
According to w3schools.com:
jQuery can produce effects like hiding/showing, fades, slides, etc. It is a great tool that can truly enhance your website.
Here is a simple jQuery code to hide/show an element (make sure the jquery.js file is in the root of your web space or this example won't work properly):
<script src= "jquery.js"></script>
<p>If you click on the "Hide" button, I will disappear.</p>
|This is where creativity comes into play. Think about the many ways this code can be customized. You do not have to show/hide text. You can show/hide ANY HTML code... Images, videos, music, buttons, forms, etc. Use these tools to your advantage by downloading and customizing! The more you play around with the code, the faster you will learn and understand it. You are bound to make mistakes when building an online business. The great thing is, these mistakes come at little or NO COST. So play with code and make mistakes! It will only benefit you in the future.|
Here's a list of awesome jQuery effects that will be sure to spice up your site: