New Company Template for Blocs 3

Company template for Blocs 2 was never my favorite. Today, I have finally rebuilt it from scratch with a completely new design and a massively improved attention to detail.

I have rebuilt the company template from scratch.

I have rebuilt the company template from scratch.

I am calling the new version of Company template for Blocs (version 4.0) an update, but in fact, it is an entirely new template I have built from scratch. The only thing this new template has in common with the previous version is the name.

There are a few essential things I wanted to share about this template.


Double Menu, Managed via Menu Manager

To edit the menu smoothly, I recommend editing the navigation menu using the Menu Manager (do not switch the source to ‘None’). Otherwise, you will need to manually select the menu both in the header and in the footer. The footer menu is there for the sliding-in menu navigation you can see when you scroll the page.


Transparent Header Navigation with an Image Slider

This template has a cool slicing carousel with transparent navigation. There is nothing special about it; it is a usual carousel bric with a negative margin applied. Because the header is located right above the carousel and because it is transparent, we have a transparent menu with sliding carousel.

The critical part here is that the effect for the carousel is set to 'slide'. If you change it to 'fade', it won’t be as easy to edit the header inside the Blocs project. So, if you plan to use the 'fade' effect, make sure to modify the navigation first with 'slide' effect applied, and only when you finish, switch it to 'fade'.


Image Headers with a Single Navigation

Other pages of the website also have image headers with a transparent navigation bloc above it. I have created them using the same technique as the landing page. Do not touch the custom class I have assigned to the header image bloc, because it will break the mobile optimization.


Install Custom Google Font

Do not forget to install the Roboto Slab custom font from Google Fonts before opening this template on your computer. You can do that by opening the Blocs Preferences, selecting the ‘Manage Fonts’, clicking on the ‘+’ icon, and adding the following line:

<link href="fonts.googleapis.com/css?family=Roboto+Slab:300,400,700&display=swap" rel="stylesheet">

As always, this template comes with two versions and a folder with BEX Page Templates files. Check out the demos for the new Company Template for Blocs 3.

Multi-page version
Single-page version

Visit Blocs Templates
Learn how to use Blocs app
Download Blocs app (official website)