Posted on

How to create a real estate website for your hometown – step 21

As of this moment, this website is up and running with functionalities enough for for tasks we want to be accomplished.  We can polish it in the following areas:

  1. Userbility
  2. Typography and graphics

Userbility:

Now as we look at left side of the browse page, the filter does not look very appealing. Here I install Woocommerce Product Filter. It allows users to select houses according to their criteria.

Video: Add product filters

The Woocommerce Product Filter also do a very good job in typography. So as you can see, the font size and all upper-cap for title makes sense and is coherent with the rest of the page. Below is a comparison of the woo filter and the default filters that is included in the default installation.

Typography and Graphics

Woocommerce already have most of the layout ready so there is nothing I have to do in terms of typography  other than top menu and footer.  The menu  already looks good. The only thing I need to do is to change font type and size for branding purpose. Here I would leave it as is.

Footer: Previously I dragged some elements to footer so I have something there. But as you can see here, there are unnecessary icons next to links.

To add links to footer, we can simply go to Appearance/Widgets. On the left side, we can see some widgets such as ‘Text’, ‘Categories’. Here I will click ‘Text’ and click ‘Footer Column 4’. Then I will type the link that I want to add. Note that I will select ‘text’ tab as opposed to ‘visual’ tab. After I type text I want, I will switch to ‘visual’ to add URL destination. If you type text in ‘visual’ tab, you will add unnecessary paragraph space between each link.

Video: Polish footer:

I would also install Font Awesome plugin. It allows me to add some icons to make this site looks more interesting.

I would also install Storefront Footer Bar. It allows me to add one more layer on top of footer, which I can add some text to describe the site or add several social media icons.