With 78% of the U.S. population on the internet and a growth rate of over 150% per year, websites are becoming more important than a physical presence for many businesses and service providers. Your website is more than a stake in internet real-estate – it is often an internet user’s first impression of you and your business, a powerful vehicle for marketing and the perfect platform for sales.
Of course, creating your own custom website can be a daunting task if you have no coding knowledge or design training. A huge variety of website templates and DIY services exist to get you up and running, but the level of quality, expertise and customization really varies. There are hundreds of designers too, but it can cost more than a thousand dollars to build a completely custom website from the ground-up.
Fortunately, there is Wix. Their incredibly popular website builder features a drag-and-drop interface for creating amazing, interactive websites. It provides a large selection of trendy layouts, graphics, fonts and widgets which you can add to your design with the click of a button. Below, I’ll show you how to get started with this fantastic tool to build your own custom website that is both stylish and highly functional. You’ll learn how to customize elements using Color, Effects, Animations and Behaviors, and I’ll show you a unique techniq for creating interactive images to help promote products, services or pages of your site.
Preview of Final Results
Getting Started
Head over to wix.com and signup for a free account, which will give you full access to all three of the Wix website builders (they do Facebook pages and Mobile sites too!) Once you login for the first time, launch the website builder to view the template library. You may find it helpful to sit through the “2 min Demo” linked in the right corner before continuing.
Step 1
There are several pre-made designs to choose from, but for this exercise, we will use the Blank Template. These templates offer the most flexibility in terms of having a design in mind. Once you learn the basics of the builder, it is often faster to build from a blank page than replace and re-work existing content.
Entering the blank template, here is our workspace. Get acquainted with the options available in the top toolbar and, if it is your first time in the website builder, you may want to quickly browse through the Help topics available in the lower-right. You can return to them anytime in case you get stuck along the way.
Step 2
Click on “Settings” and then click “Appearance.” Set your desired Site dimensions by typing a number into the Width and Height box. Your site dimensions determine how large the background area is, or more technically – how large the Flash movie is. I have chosen 1680 for my width to target the majority of desktop monitors. Anyone with a larger monitor will see a border – so set it to a color that best matches your background by clicking the “Replace” button.
I have also selected Fit to Width here, because I want the site background fill the screen as much as possible.
Step 3
Drag your Main Page to the center and position it near the top – but leave enough room for a “header,” which is the area at the top of your website which holds your logo, navigation and any other elements you want to have always visible. A vertical line will appear, called a smart guide, to help you find the absolute middle of your workspace.
To assist with sizing your page area, click the “Show Rules” button in the top toolbar. My page area in this demo is 900 pixels wide and 764 pixels tall. If you don’t get it perfect now – don’t worry. One of the great things about Flash is the ability to scale the page content and drag it around anytime to adjust it perfectly for the design.
Step 4
Add your background by clicking on Background > Master Page. I chose the polka-dots background from the Wix library, but you can upload your own if you choose. Make sure it is large enough to accommodate your chosen Site Dimensions!
Step 5
Add your logo by clicking on Add > Pics. You can upload your own image as I’ve done here, or choose a pre-made one for now. When using your own graphics, the larger the image, the better it will look. Re-position and scale the logo by dragging the re-size handles, and then click it and choose “Change Frame.” All images will appear with the default frame when added to your workspace. The Change Frame option allows you to customize the frame or, as in this case, remove it by clicking on the “No Frame” option.
To give the logo a little flair and help draw attention, you can add animations using Effects. Click the logo to select it, then click “Effect”s in the Photo options panel. I chose the Contour Emitter, set to “Sparkle-big.” Experiment with the Speed and Amount to get the look you want.
Step 6
Before we add a navigation bar, we need some pages. Click the Add Page button in the right-hand page manager. Here you are offers several more page layouts you can choose from to speed up page creation, but none of them quite fit our design, so choose the Blank Page at the bottom. Add three more pages: “about,” “contact” and “shop.”
To add the navigation bar, click Add > Navigation > Menus. Select any menu to add it the workspace. You’ll notice it looks nothing like my demo. This is where the fun of styling comes in!
Step 7
To get the look in my demo, you can access the extended library of styles by clicking on the menu and choosing “Change Skin.” You will also see a tip for how to customize menus. I recommend reading through it – it will only take a minute.
From the Replace Skin box that appears on the right, scroll down to the “Flat Pill” style and select it. Now, click on “Color” in the Menu settings box. You will see three options appear, one for the background color, “BG Click” or active page and the hover color. For the background color, select a color from the color picker, or enter an HTML color code. I’ve chosen a hyacinth pink color for my main color by first selecting the hot pink and adjusting with the color sliders. This color will now appear in the custom color bar for all elements you choose to restyle, helping you keep things uniform.
Select the BG Click to set it to the same color as your main BG, and BG Mouse Over to set it to black.
Step 8
Our menu still needs some styling on the text. Click “Format Text” in the Menu options panel, choose a font, font size and color for each link state. I chose Androgyne, set my normal states to white, and chose my pink color swatch for the hover.
Drag to position your menu above your Main Page on the right side. By default, the menu appears squished together. Click the resize handle to adjust the width. To adjust the space between buttons, click the “Settings” option in the Menu panel. To rename or re-arrange your pages, click “Manage.” I have chosen to use lower-case letters here as they provide a more informal and chic feel.
Step 9
Click on “Home” to ensure you are working on the right page, then click the Main Page element and choose “Change Skin.” Select the “Rounded” option to give the corners a softer touch. Add your three main images by clicking Add > Pics to upload and select. Remove the frame on each and drag them into the home page. The page will turn yellow and give you a “Drop Here” tag to indicate the image is linked to the page. This is important, as images that are not properly inserted into the page will appear to overlay the entire page group. When properly inserted, your images will also take on the same edge as your page.
Position and scale your images so they fill about 2/3 of the page.
Step 10
To create our cool content introduction roll-overs, we will need three navigation buttons which can be added by clicking on Add > Navigation > Buttons. Choose the “Simple” style – an animated button will distract from the roll-over content we will be creating. Use the techniques you’ve already learned to style, scale and position each button under the images.
Format the text using a smaller “body” font. I have chosen Qlassik, setting my button text at size 13 and using capital letters to help the text stand out more.This complimentary font is easy to read and looks good at any size.
Step 11
To introduce our brand to visitors, lets add a tagline and a short paragraph. Click on Add > Text > Titles and choose the first option to place the title into your workspace. Double-click to edit it and set your font, font size, color and content. Since Androgyne is my chosen heading, I have selected it for my tagline and set the color to my pink swatch. Drag to position your tagline in the bottom area of the Home page.
Continue to Add > Text > Paragraphs and choose the black “Simple Text.” Format it with your content, using the Qlassik font at size 15. To make it more comfortable to read, click the little up arrow to increase the Line Spacing, or type “5” into the Line Spacing box of your text options bar:
Step 12
The text area is looking a little bare. Click on Add > Clip Art > Animations and choose the Talk Bubble. By default, the color isn’t right. You can change the color of any element through the Effects option in the element’s option panel.
Click on Effects and choose “Tint.” Click the color swatch to choose your main color and ensure the transparency is on full (slide the slider to the right or enter “1” in the Transparency field.)
Position your icon next to the tagline, using the resize handles to scale if needed.
Step 13
Click on Add > Navigation > Buttons and choose a Flat Pill button. This will serve as your call-to-action for your shop or other important sub-page. Use a short, simple link phrase, such as “shop now,” “learn more” or “read more.” To link it to a page, click the button and choose “Link.” Click the Page button, then click the Select Page button to choose the page to link to.
Style the button to match your main navigation buttons, and position it in the lower-right of your text area.
Tip: If your elements are overlapping each other in the wrong order, you can select the element, right click and then choose “Send Backwards” or “Send Forwards” to arrange how elements are stacked. For elements such as link buttons, choose “Bring to Front” to ensure they are always on the top-most layer where visitors can interact with them.
Step 14
To finish off our layout, we need a footer. The footer bar is a perfect place to put elements like copyright text, secondary links, social network or share buttons, or anything else you want to always be visible. Click on Add > Page Parts > Area and choose “Round.” Drag the shape below your Main Page to position and resize it into a bar shape. Style the Area by clicking on the “Color” option. To remove the border, select the “Outline” option and reduce the Opacity to 0.
Using what you’ve learned so far, add some text elements such as the copyright and phone number using the “Titles” element.
Step 15
Click on Add > Clip Art > Icons and type “Facebook” into the search field. Choose the round icon, then drag it into your footer bar and scale it down. Use the “Tint” effect you learned in Step 12 to change the color to white. Repeat this step to add other social network icons line Twitter or LinkedIn. You can also upload your own custom icons and scale and position them in the same way.
To link each icon to your social profiles, click on the icon and choose “Link.” Individual words or text elements can also be linked by highlighting the text and clicking the link icon in the text bar at the top.
Step 16
Now that we have our main layout complete, we can create the roll-over effects on our main images. This is achieved by creating three duplicate “home” pages, each with a different content area over one of the images. To get started, hover over the drop-down menu arrow on the home page in your Page Manager and choose “Duplicate.” This will add a new page to the bottom of your page list. Double-click to rename it to “slide1” to make it easier to keep track of what’s what.
Repeat this step to create two more “home” page duplicates, named “slide2” and “slide3.”
Step 17
Click on “slide1” in the Page Manager to set it as the active page. Click on Add > Clip Art > Shapes, select “Basic” from the left menu and choose the Circle. Drag it into the page and re-size it to fit over the image, leaving a little space on either side. Remember to make sure you get the “drop here” message so this circle only appears on this page.
Change the circle color to your main color and reduce the Opacity to about 70% by using the Color option in the Shape panel. Finish by clicking Add > Text to add titles and text to the circle. For my demo, I used separate white “Simple Text” paragraphs for the top content and bulleted list so I could position them properly. For the link, I used a text title, set to my main heading font Androgyne, and linked it to the “about” page.
Finish by adding a shine or sparkle to the edges using the Contour Emitter effect you learned in Step 5. To keep the circle from appearing to pop in too harshly, click on “Animations” and choose “Fade In.” This will give the circle a more elegant entrance.
Step 18
Click on “slide 2” in the Page Manager and repeat the last step to add and style a circle with some text content. Don’t forget to set the circle Animation and Effects.
Step 19
Click on “slide3” and add your circle, style it, and set the Effect and Animation. Click on Add > Widgets > Contact form and choose the “DIY Round.” Place and scale the form inside the circle, then style it with the Color option in the Contact Form options panel. To set an address to receive inquiries, click on “Email” in the options panel and enter your email address. Finish by adding some titles.
Step 20
To get these slides to appear when visitors hover over our main image link buttons, we will use a Behavior. With “slide3” still selected, click on the first link button below the first image (which I named “all natural ingredients”) and click “Behaviors” in the Button options panel. Select “Go to State On Roll” and select “slide1.”
Repeat this process to link the second button to “slide2.” Since we are on “slide3” already, we do not need to link that button, as it would just cause the page to reload.
Click on “slide2” in the Page Manager and proceed to set the Behavior and link for buttons 1 and 3. Repeat for “slide1” to set the Behavior and link for buttons 2 and 3.
Tip: You can preview your progress anytime by clicking the “Preview” link at the top of the page. With the “home” page clicked, preview your site now to verify your slides appear properly when you roll over each button with the mouse.
Step 21
You may have noticed that adding the extra slides has added links to the navigation bar that we don’t want to show. Click the “home” link in the navigation bar to select the menu and choose “Manage.” Click the “Hide” link next to your slide pages to hide them in the navigation menu.
Step 22
The website builder lets you customize everything down to how your pages behave when you navigate between them. Page transitions create cool effects similar to a slideshow and can really super-charge your design. Click on your Main Page element and choose “Change Transition.” Select “Slow” and choose the “Dotted” transition. This transition blends perfectly with the overall circle theme of the site. When building your own page, choose the transition that best compliments your theme, brand or attitude.
Conclusion
Use the techniques you’ve learned to add text, images and widgets to your remaining pages. I’ve provided a few design tips below for your inspiration.
Tip 1: Avoid scaling your titles and text boxes whenever possible. Use the “Format Text” option to set your font size instead. This helps you keep your titles and body text uniform throughout the site, which looks more professional.
Tip 2: Stack shapes and slideshows, as seen on my “about” page, to style your own frame for your images. When working with slideshows, don’t forget to add a title and description to each image. It never looks good to have the filename appear as the title!
Tip 3: You can create a simple online shop in the free website builder using a Matrix gallery and PayPal buttons, found under Add > eCommerce. For my demo, I chose the round gallery skin and styled my PayPal buttons to match my navigation buttons. To quickly duplicate an element, simply click it and hit Ctrl+C, then hit Ctrl+V to paste a copy. This will save you the trouble of styling each button individually!
Tip 4: Use Shapes, Animations, Icons or a custom graphic to create a unique place-marker when using the Google Map widget. Before placing the graphic, right-click it and choose “Bring to Front” to ensure it sits on top of the map. Click on “Settings” in the widget’s options panel to set the type of map to display. The demo is set to “Terrain” which is the same as “Physical” if the Map Type buttons are enabled:
Tip 5: Experiment! The website builder gives you complete control and creative freedom over designing your website. By combining the tricks learned in this tutorial with the inline Help and some trial and error, you’ll be designing like a pro in no time.
To learn more about Wix, or to get notified when their amazing new HTML5 builder goes live in the coming weeks, visit their website here.
