It’s been quite some time since our previous posting but now that we have recovered from the “big mail server transition” we finally found some time to create a new website design. It’s using the Elementor Page Builder so it’s quite easy to gradually modify over time which is very important to us. We want this website design to grow with us as we get new ideas and fine-tune both the layout and the content.
This is how the front page looks inside the Elementor page builder. If you have never seen Elementor in action before then take note of how the sections and columns have “handles” to easily drag them around to re-position or re-size them. On the left is a column containing various widgets that can be simply dragged into position within a column. Titles and text content can be edited and changed “in-place” within the widgets on the right hand side. Padding and margins can be set for every section, column and widget on the page.
Animating The Navigation Header
One area where Elementor is lacking is when it comes to adding fancy navigation header scrolling and colour changes. When you scroll down our pages the navigation header is reduced in size with a small amount of background opacity added. This can’t be easily done within Elementor itself, although there are extensions that can, we opted to use some manual extra CSS added within the advanced area for the header section. For the record it’s shown in the screenshot to the left.
UPDATE: the custom CSS for the header was removed so now it’s just using the default Elementor “sticky header” feature without any animation.