Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Learn Customizing the Website Design | Building a Complete Website from Scratch
Build a Code Free Website with WordPress
course content

Course Content

Build a Code Free Website with WordPress

Build a Code Free Website with WordPress

1. Getting Started with WordPress
2. Understanding the Basics
3. Basic Customization
4. Essential Plugins
5. Content Creation
6. Site Settings
7. Building a Complete Website from Scratch

book
Customizing the Website Design

After installing your theme and importing a starter template, it's time to customize your website so it reflects your brand and content.

Using the WordPress Customizer
expand arrow

The WordPress Customizer allows you to edit your site's design in real-time and see changes immediately.

To access it:

  • Go to Appearance β†’ Customize from the WordPress dashboard;
  • The Customizer will open with a live preview of your site on the right, and a menu of settings on the left.

What you see in the Customizer depends on the theme you're using. Since we're using Astra with a starter template, you'll see options like:

  • Global settings: adjust fonts, colors, and container width;
  • Header and footer builder: edit the top and bottom areas of your website;
  • Menus and widgets: manage navigation and sidebar elements.

You don't need to explore every setting nowβ€”just focus on the basics.

Adjusting Primary Elements
expand arrow

These are the main items to look at when customizing your website design:

1. Colors and Typography

  • Go to Global β†’ Colors to change the background, text, and link colors;
  • Go to Global β†’ Typography to set fonts and sizes for headings and body text.

2. Header and Footer

  • Click on Header Builder or Footer Builder in the Customizer;
  • You'll see a visual layout where you can click on different sections (logo, menu, social icons, etc.) to edit them;
  • You can also remove or rearrange elements by dragging them into new positions.
Adding a Logo and Favicon
expand arrow

If you didn't upload your logo when importing the starter template, you can do it now.

To update your logo:

  1. Go to Header Builder β†’ Site Title & Logo;
  2. Click Select Logo and upload your image (preferably PNG with a transparent background).

To add a favicon (browser tab icon):

  1. Go to General Settings β†’ Site Identity;
  2. Under Site Icon, upload a square image (512x512 pixels recommended).
Saving Your Changes
expand arrow

Once you're satisfied with your updates, click the Publish button at the top of the Customizer to save all changes.

question mark

What is a favicon in WordPress?

Select the correct answer

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 7. ChapterΒ 2

Ask AI

expand
ChatGPT

Ask anything or try one of the suggested questions to begin our chat

course content

Course Content

Build a Code Free Website with WordPress

Build a Code Free Website with WordPress

1. Getting Started with WordPress
2. Understanding the Basics
3. Basic Customization
4. Essential Plugins
5. Content Creation
6. Site Settings
7. Building a Complete Website from Scratch

book
Customizing the Website Design

After installing your theme and importing a starter template, it's time to customize your website so it reflects your brand and content.

Using the WordPress Customizer
expand arrow

The WordPress Customizer allows you to edit your site's design in real-time and see changes immediately.

To access it:

  • Go to Appearance β†’ Customize from the WordPress dashboard;
  • The Customizer will open with a live preview of your site on the right, and a menu of settings on the left.

What you see in the Customizer depends on the theme you're using. Since we're using Astra with a starter template, you'll see options like:

  • Global settings: adjust fonts, colors, and container width;
  • Header and footer builder: edit the top and bottom areas of your website;
  • Menus and widgets: manage navigation and sidebar elements.

You don't need to explore every setting nowβ€”just focus on the basics.

Adjusting Primary Elements
expand arrow

These are the main items to look at when customizing your website design:

1. Colors and Typography

  • Go to Global β†’ Colors to change the background, text, and link colors;
  • Go to Global β†’ Typography to set fonts and sizes for headings and body text.

2. Header and Footer

  • Click on Header Builder or Footer Builder in the Customizer;
  • You'll see a visual layout where you can click on different sections (logo, menu, social icons, etc.) to edit them;
  • You can also remove or rearrange elements by dragging them into new positions.
Adding a Logo and Favicon
expand arrow

If you didn't upload your logo when importing the starter template, you can do it now.

To update your logo:

  1. Go to Header Builder β†’ Site Title & Logo;
  2. Click Select Logo and upload your image (preferably PNG with a transparent background).

To add a favicon (browser tab icon):

  1. Go to General Settings β†’ Site Identity;
  2. Under Site Icon, upload a square image (512x512 pixels recommended).
Saving Your Changes
expand arrow

Once you're satisfied with your updates, click the Publish button at the top of the Customizer to save all changes.

question mark

What is a favicon in WordPress?

Select the correct answer

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 7. ChapterΒ 2
We're sorry to hear that something went wrong. What happened?
some-alt