Interior Design Template for Blocs

Today, I am happy to share with you my latest premium template for Blocs app. Interior is the stylish template for websites of interior design agencies.

I always listen to the suggestions of Blocs Templates members, and recently many of them were asking me to create a template for interior design agency. Today, I am happy to share with you the newest template for Blocs 3, which I called Interior.

Stylish Design

I tried to make this template look very stylish, because when I visit interior design company website, I expect to see some style. To archive that, I have applied a number of changes, which I don’t usually make to my templates. Things like Fixed Navigation (it’s different from sticky), or the welcome image without any navigation at all.

Keep Optimization Intact

I have optimized every single element and smallest detail of this template to look as good as it is possible on all 4 breakpoints we have in Blocs app. As a result, I highly recommend to use the Duplication feature when you are editing this template. Duplicate Pages, Blocs, or even Bric to keep all of the optimizations intact, before editing and adding your content.

Try to keep the images the same size and ratio, as I have optimized them as well to look the best. Try to use the Custom Classes I have created for elements like images, text, and buttons. It will allow you to quickly edit the color scheme of the website by change just a number of classes, and it will make your website look better.

User Guidelines

In recent months, I have started to include the User Guidelines manual with my templates, where I try to explain things like these in detail.

Fixed Navigation
The Interior template comes with fixed navigation. It is not the same as the sticky we have in the Blocs app inspector. It is activated using the custom CSS code placed in the Code Editor. Fixed Navigation plays a big part in the design of this template, so I recommend using it as it is, but if you want to disable it, just go to Code Editor and delete the code for header.

Responsive Header Banners
Another important thing to keep in mind is that header is fixed, and it is hovering over the next bloc. Make sure you check how that the next bloc under it has enough top padding. (You can see that all blocs I have added have additional padding for this purpose)

What I recommend to do, is to add a custom class .interior-responsive-banner to a bloc right after the navigation, and get rid of the padding (set it to no padding). I have done that myself for all banners, so if you want, just use the blocs I have created.

Changing Accent Color
It is the same as all other templates. To change the brand color (accent color), which is set to Teal (light green/blue) by default, you need to change it in Global Swatches panel, as well as all classes which have the color set to borders, text color, etc. It does take a few minutes to do it for everything, but if you want to have your color appear everywhere, it is necessary.

Duplicating Everything is Preferred
I have made sure that everything works great on all devices. All blocs are optimized, and it induces the length of content and sizing of images. If you want to have the exact perfect look, try to keep the sizes/aspect ratios of the images, and instead of creating new blocs, duplicate the ones I have created and edit them to your liking.

Navigation Links
Navigation will look best with the number of links I have placed in there. If you need to add more links, make sure you optimize the menu for all devices. I have done that for the 5 links, which look perfect, but if you make it 5+, it will require some additional changes.

Logo / Site Title
Logo/Site Title is just the text now. I have created the class which gives it the background color and borders, but you can change it to your logo image file if you want. Also, if you like to keep the design, just change the text and edit the class to adjust the style to what you want.

Modals for Work page
If you go to Work / Portfolio page, you will see I have created image thumbnails, which lead to modals. Each image is linked to a modal. Portfolio Item 1 leads to modal with ID Item-1. If you need to add new items, make sure to set the ID of the modal to something unique, and then link your new image to this new modal.

Understand first, then change
Before changing some design elements of this template, make sure to understand what I have done to each element before actually changing it. I have put many hours of thinking and optimizing each element, so if you want to keep all elements intact, try to understand what I have done first, before making changes.

Personal Support
If you have any questions or need help with optimizing this template, I am always happy to help. Contact me by email

New to Blocs? Visit Blocs website