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

Tasks (done)

  • Set up WordPress hosting with Siteground
  • remove all plugins and twenty themes
  • WordPress core 6.01
  • create a new user with an administrator role
  • Install Bricks page builder
  • Install Code Snippets Pro
  • PHP Version set to 8.0.20
  • uploaded the images from the current website in WebP format.
  • modify WordPress setting
  • Discourage search engines from indexing this site

System requirements PHP

  • WP_MEMORY_LIMIT: 768M Siteground default
  • upload_max_filesize: 256M Siteground default
  • post_max_size = 256m Siteground default
  • max_execution_time Siteground default

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.

Tasks (done)

  • Early Logo draft with Canva
  • Set Theme Styles in Bricks
  • Color palettes
  • created a color palette in Bricks

Day 3

Tasks (done)

  • Installed SG Optimizer plugin
  • I removed all Images I uploaded the other day. Change of mind, it’s better to upload the images when needed.

Most of the time, I played around with the header and footer templates. Learning how the flexbox container works and what the effects are in responsive mode. Bricks Builder has standard breakpoints set for tables (992px), mobile landscape (768px), and mobile portrait (479px). iPad Pro I’m currently struggling with the responsive mode for iPad Pro, which has a higher breakpoint than the standard 768px.

I also think that the container settings affect the responsive modes differently. Bricks Builder has standard breakpoints set for tables (992px), mobile landscape (768px), and mobile portrait (479px). The iPad Pro has a higher breakpoint than the standard 992px.

The header template has three containers – I added a new one for the top header. After adding the new container, the Google page speed score for mobile dropped to 89 percent.

It’s time to watch some Youtube videos and learn flexbox containers better :).

Bricks Container Settings
Bricks Container Settings

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.

Siteground Optimizer Caching
SG Optimizer Plugin

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.

View in iPad Pro
How it was looking on iPad Pro

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

After a break of a few days waiting for Bricks 1.5, I continued today with my project. The Bricks 1.5 update introduce new layout elements Section, Container, Block, and Div. 

Bricks layout elements
new layout elements

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%

Structure Beschreibung page

Structure of the Beschreibung page

Bricks has a superb setting for configuring the Bricks toolbar logo in the editor at the top left. There are various options to choose. Check “open in a new tab,” so the builder editor stays open