In this post, we will see how to change the appearance of the WordPress site. We can handle the site appearance of the WordPress site using the Appearance option. We can install themes, customize our site according to our own needs, add widgets and menus using this option. Let us see how we can implement all these things on our website.
When you click on Appearance you get to see a lot of options to change on your site. Under the appearance we have Themes, Customize, Widgets, Menus, Background, and Theme Editor. We will take a look at each of them.
WordPress provides some default themes. As you can see there are three themes provided by WordPress those are Twenty Twenty-One, Twenty-Nineteen, and Twenty-Twenty. Right now the theme which is active is Twenty Twenty-One. If you want to customize the current theme then you can click on Customize button which is in front of the theme name.
If you want to activate another theme then just hover on that theme. You will get to see the Activate button click on it to activate.
If you want to add a new theme then click on Add New button which is on top. You will get to see the list of themes, you can choose any theme and install it. To see the detailed look of any theme hover over any theme and you will get to see an option as Detail & Preview.
This is how the preview of any theme looks like. You can see the detail of that theme. Also, you can see the live preview of the theme and can use it. If you like the theme you can install it by clicking on the Install button and Activate it. I have installed the Astra theme and activated it.
After activating the theme if you visit your site, then you will see its appearance has changed. Since we have installed the Astra theme it will give a different appearance than before. You can see different widgets on the right side of the posts. Widgets like Recent Posts, Search bar, Recent Comments, etc. So this is how we can install the themes and change the site appearance.
After themes there is the option of customizing the site, we can customize the installed theme. Click on customize option which is under the theme option. You will get to see the following screen. On the left side, there are many options to customize different-different widgets. We will explore a few of them here.
Now, if you click on the first option i.e. global then you get the following other options.
From here you change the font of the site using the Typography option, colors of the site using the colors option. The container option lets you change the width of the site content and from the Buttons option, you can customize buttons. Using the Typography option I will change the font of the site as follows. In Body Font Family search for your desired font and apply it, after applying it you will be able to see that on the right side the font changes. After that, there are a lot of options to customize the font like font size, font-weight. After making these changes click on publish button which is on the top to apply the changes.
After the global option, there is another option as Header Builder. Using the header builder option you can build your site’s header. It contains options to set the logo, title, and set navigation menu.
Inside Site Title & Logo option you can set the logo and title as shown below. Also, you can adjust the logo size using the logo width option. Under this, you will find several other options like an option to set title, set tagline, and site icon to set which will be shown in front of title in tab. After making changes you click on Publish to apply the changes. Like this, you can explore other options which are present here.
Under the Customize option, there is the Widgets option. In this option, you can customize widgets like the main sidebar, footer, and header.
The main sidebar contains elements like the Search box, Recent Posts, Recent Posts, Recent Comments, Archives, and Categories.
Similar to our main sidebar we can create a Footer widget. Here for demo purposes, I am going to add some elements to our footer widget. Expand the footer widget using the arrow on the top-right side. Click on Add block to add a new element in Footer widget. You will be able to see various elements to add to the widget. I am adding the social icons element in the footer, so search for social icons and click on it to add.
After adding the social icon element in the widget, click on that widget to see the add(Plus) option. Click on add option and you will get the list of different sites.
Click on Browse All option to see the list of sites available to add. Select any icon and add it to the element. After adding the site icon, click on it to add the link related to it and click enter. After making changes click on the Update button which is present at the top of all these widgets to save changes. This is how we can add elements in widgets. We can add this widget to our site.
The fourth option under appearance is Menu. We can create our menu from here. Menus are used to navigate between the pages.
To create a new menu go to Menu structure and Enter the menu name, select appropriate options under Menu Settings and click on Create Menu.
Now, after creating our menu we can add different types of content to that. We can add pages inside the menu or we can add posts, custom links, or categories. We can add these content types from Add menu items section. Here I am going to add pages to the menu. I have created two pages About Us and Contact Us. To add them to the menu select them and click on Add to Menu button. Selected pages will be added to the main menu.
As you can see below there are our three pages About Us, Contact Us, and Sample Page. We can select each of them and add a navigation label or we can delete them. Also, we can adjust their positions by dragging or clicking on the Move down or Move up buttons. After making changes click on the Save Menu button to save this menu.
Now, to set this menu on your site go to Appearance -> Customize -> Header Builder -> Primary Menu(General) -> Configure Menu From here. Over here select Primary Menu as Main Menu. Don’t forget to click on publish. If you’ll see your site will have the menu at the top having the same page name and you will be able to navigate to those pages by clicking on the names.
Astra options contain the same options as we have seen in this post. If you want to customize your site you can do it from here also. If you want to use more features from Astra you have to use Astra pro and for that, you have to pay. Same for plugins, if you want to use more features then you to take a pro version of that plugin.
Same plugin editor, we have theme editor. We can add our code using this editor and can modify themes as we want. Here also it shows a warning like it was showing for plugin editor.