August 30, 2019
Introducing the 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 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.
New to Blocs? Visit Blocs website