g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Full Schedule
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor


Wix Website from Scratch - Header and Footer

In this tutorial, we will customize the header and footer for our Wix website that we are creating from scratch. We will set the header to remain visible as the screen scrolls and add the copyright text and social links to the footer.

First, we want the menu to remain visible as the page scrolls. In the Wix Editor, this is done in the header settings.

  1. With the header selected, click the Settings icon from the pop up menu.

  2. In the Header Settings window, click the Freeze Header toggle to freeze the header to the top of the page.

Now we can work on the Footer section. As with the header, we want the footer to have a white background. We will also add the copyright text and social icons.

  1. Select the Footer section and click Change Footer Design button in the pop up menu.

    By default the footer is set to No Color. Let's change this to a white background.

  2. In the Themed Footers section, select the footer theme below the No Color theme.

    Now we have a gray color added to our footer. Let's change it to white.

  3. Click the Customize Design button at the bottom.

  4. In the Fill Color and Opacity section, change the color from gray to white for both the Background and Center Background.

  5. In the Border section, set the Opacity and Color to 0%.

    Now we are ready to add the copyright text.

  6. From the left menu, select Text and add one of the paragraph samples.

  7. Drag the text box to the top edge of the footer and click Move to Footer.

  8. Change the default text to your copyright text.

  9. Click the Edit Text button to open the Text Settings window. Set the theme to Paragraph 3.

  10. Drag the text box to the left edge of the footer.

Now we can add the Social links.

  1. Click the Plus icon in the left menu and choose Social. Select one of the Social Bars and drag to the footer.

    Let's reduce the size of the icons.

  2. With the Social Bar selected, click the Layouts button.

  3. Use the slider to reduce the icon size to 20 px.

  4. Drag the Social Bar to the right edge of the footer.

    To add/remove social icons and to add the url links to the icons, click the Set Social Links.

  5. Click the Set Social Links button and then click the Facebook icon.

  6. Click the link icon at the right to open the settings window.

  7. Keep the default settings and type your Facebook url. Click Done.

    Repeat this for each social icon.

    Finally, we will resize the Footer to just a little taller than the text box.

  8. Click an empty area in the Footer to see the Stretch handle. Drag the handle upwards.

Join us in the Animation forum. | Join us in the Digital Art forum.


Add Wix+Website+from+Scratch+%2D+Header+and+Footer to Twitter Add Wix+Website+from+Scratch+%2D+Header+and+Footer to Facebook Add Wix+Website+from+Scratch+%2D+Header+and+Footer to MySpace Add Wix+Website+from+Scratch+%2D+Header+and+Footer to Del.icio.us Digg Wix+Website+from+Scratch+%2D+Header+and+Footer Add Wix+Website+from+Scratch+%2D+Header+and+Footer to Yahoo My Web Add Wix+Website+from+Scratch+%2D+Header+and+Footer to Google Bookmarks Add Wix+Website+from+Scratch+%2D+Header+and+Footer to Stumbleupon Add Wix+Website+from+Scratch+%2D+Header+and+Footer to Reddit


RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map

For FREE email updates, subscribe to the Digital Art and Design Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2015 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.


g features
How to Create Patterns in Illustrator

Multiple Artboard Template in Photoshop CC

Design & Bind Your Creative Portfolio - Skillshare

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2016 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor