Skip to content

Stories From Around Project

Stories from Around is a travel blog website that showcases different tales of different encounters with people, cultures, experiences among other escapades of the reknown travel blogger Maryann Kariuki.


Development Tools : Wordpress, Elementor
Development Period : 29/09/2021 - 27/05/2022
Client : Maryann Kariuku
Project Status : Completed

Project Layout

The FrontEnd

The website content is divided into 6 key pages :

  • Home : This is the main landing page of the website. It's made up of a main header that welcomes readers to explore Stories From Around. Right below the welcome section is a brief teaser of some of the sample blogs. Finally, there's a subscribe form where readers can sign up to get any updates and additional information from Stories From Around.

home page

  • Blogs : This page contains a carousel of blogs from a select category. It's accessed by pressing the 'Explore' button on the Home page welcome section.

blogs page

  • About Me : The About Me page contains an intriguing piece delving deeper into who Maryann is. It serves as a warm invite to readers into the life of the persona behind the articles on Stories From Around.

about me page

  • Photography : Links out to Maryann's Pexels Profile that showcases her photography works.

photography page

  • Podcasts : Links out to Maryann's Podcast on Spotify.

podcasts page

  • Contact : Contains a brief form that allows readers to get in touch with Maryann.

contact page

The BackEnd

The backend of the project is accessed by signing into the Stories From Around wordpress account using this link with the appropriate credentials. After succesfully signing in, the panel below appears above the navigation bar.


On clicking Dashboard, the control panel where edits to the site can be made opens up.


Useful Guides

How to Upload a Blog

  1. From the panel, click + New. It displays a drop down menu with several new elements that you can create. To create a new blog post, click on Post

new post

  1. It then displays the Wordpress Editor where you can add a title, text, images, links among many other things to your new blog post.

edit post

How to Define Blog Specifications

  1. On the top right side of the panel, click on the settings icon to open up a side panel fom which one can add extra specifications to a blog post.
  2. The side panel shows different settings one can customise for the new blog post as shown in the image above.
  3. For example, to categorise the blog so that it shows when filtered by a spoecific filter, one clicks the Categories button on the side panel. A drop down appears with the different categories the blog can be tagged by.

add category

  1. One can also add a new category by clicking the Add New Category button.
  2. Once editing is done, one can either preview the blog post or publish it for viewing from the top right corner of the editing panel.

preview & publish

How to Filter Blogs in View

In the Home Page, only a select number of blogs from a select category can be seen. To change these settings follow the following steps :

Home Page Initial Category

  1. In the Home Page on the editing panel on top of the navigation bar, click on Edit with Elementor.

edit with elementor

  1. Once clicked, the elementor ediing panel for the Home Page opens up. Scroll down to the Home Blogs List section and click on to show the Edit CV Post Layout panel

edit cv post layout

  1. To change the category, click on Category. It shows a dropdown menu of the various categories available. Click on a catgeory to change the blogs in view in the Home Page.

edit category

  1. To change the number of blogs being shown, change the number on the Post Count setting.
  2. Once done, remember to press the update button on the bottom left side of the editing panel. Once it turns back to grey from green, the changes will be published to the main site.


Design Specification

Product Design

Information Design Structure : Content in Stories From Around is designed using the Catalog Structure. This means that content is organised into and displayed by differnet categories. Such a structure allows users to browse a category of interest and view the details of a specific blog item.

Design Aesthetic : The design aesthetic for Stories From Around is Minimalistic. It's user interface uses subtle design components that provide a straight forward and effortless display of content which gives the user an experience where blogs and actions take the forefront of the user experience.

product design


Stories From Around makes use of a minimalistic pallet with one main bright colour for highlights, a dark colour for contrast and a single colour for background and surface colour.

Colour Description

Yellow : #FFC03A

The main colour used for headings, to highlight sections and also links.

Black : #000000

The color used for descriptions and text for contrats from the otheriwse bright background and surface colour.

White : #FFFFFF

The background and surface colour.


Stories From Around makes use of various fonts to come up with the aesthetic type scale necessary for the website's content. The main font used is the Raleway typeface. This font is used for blog descriptions,excerpts and small headings.

For headings, the Oswald typeface is used.

raleway + oswald

An accent typeface by the name Primera Signature is also used in Stories From Around to accentuate major details such as the blog owner's name or the country from which a blog story originates.

primera2 primera3

The logo makes use of both the Oswald and Primera Signature fonts.