g
Printer Friendly Version

editor  
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.

|

Digital Art and Design Site @ BellaOnline
View This Article in Regular Layout

Content copyright © 2013 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.



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


BellaOnline Editor