logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Natural Living
Folklore and Mythology
Baptist
Florida
Cosmetics
Distance Learning
Reading


dailyclick
All times in EST

Full Schedule
g
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor

g

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


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
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


g features
Review - Adobe Spark

Review - Autodesk SketchBook Motion

Websites For Free CC0 Images

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor