I’m starting a new website project to rebuild the website BellaSwiss.ch completely. The website was created with Elementor Pro and the OceanWP theme about two years ago. 

The idea is to run this project as an open (public) project. Anyone who loves building websites can contribute ideas. I’m also happy to give you access to the backend.

What is BellaSwiss?

Let’s start by asking what this website is for. We rent out a furnished flat for holiday accommodation. Our apartment is in Maennedorf at the lake of Zurich, approximately 20 minutes from Zurich, Switzerland. So far, the business is going quite well. Currently, we are renting out the flat for weekly stays, and some are staying even a month or more. Our guests are from abroad and have family in our neighborhood looking for reasonable accommodation. The flat has a parent bedroom and a living room with a bed, sofa, kitchen, bathroom, and a covered terrace. 

Technical aspects

I’m going to use Siteground hosting with domain dev.bellaswiss.ch, Frankfurt datacenter, and CMS WordPress. 

Everyone is talking about the new kid, Bricks Builder, a page builder, and a WordPress theme. I want to test it, and BellaSwiss is a simple website. The language for the website is German. Maybe at a later stage, we will add English as well. 

So, let’s start with the blog diary.

Bricks Visual Site Builder

Bricks is a new page builder for WordPress, similar to Elementor or Divi. The developer behind Bricks is Thomas Ehrig from Germany. He also developed the popular plugin HappyFiles (organize the media files)

Bricks received popularity in the WordPress community as a clean and fast page builder. It is Gutenberg compatible, which means you can convert your existing pages from Gutenberg to Bricks and the other way around. 

The Journal of my website project

Day 1

System requirements PHP

The Bricks documentation makes a pretty good impression, good structured for beginners.

Upload images with a minimum width of 600 pixels. Ideally 1600 pixels in width or more.

Bricks documentation

Day 2

I spent a little time designing a logo with Canva. Afterward, I looked at some websites to get inspiration for color palettes. For the moment, I have decided on these colors 

Then It was time to get my feeds wet with Bricks Builder. I was getting to know how the theme styles work. Where do I need to set the global colors? The editor is intuitive to navigate; great is the responsive design. Brick even has a mobile landscape mode. 

I lost time with the Sitegrounde Memcache. The webpage didn’t update on the frontend. Not sure yet how to solve that, as I’m not particularly eager to flush the cache every time in the Siteground dashboard.

Day 3

Since I had caching issues with Siteground the other day with the frontend, I decided to install the SG Optimizer plugin. I just turned on Dynamic caching and Memcache with the automatic purge. This way, I can flush cash in the WP backend instead of logging on to the Siteground Dashboard.

Day 4

I designed the footer template and had some bigger issues with the font size for responsive views. After some trial and error – I was using px for the font sizing options – I changed it to em for tablet and mobile view, which fixed it. The footer looks okay in all responsive views, whether in portrait or landscape mode.

I will take a break since Bricks is scheduled to release version 1.5 very soon. Some new design elements are coming, sections, columns, and div. Lots of fun is coming. Not sure how it will affect the work already done.

Day 5

I built a new page with the new layout elements, but I am not sure I understood the best way when I should use a Block element under a container or when to use a widget directly underneath a container. I see the mobile page speed score dropped under 90% with Block elements. The desktop score is still near 100%