When starting a new website project, I always begin with my starter site. This starter site is pre-built with templates, settings, and customizations that I consistently use in my builds. One of the key aspects of this starter site is the pre-built elements within the GeneratePress theme. Today, I want to share the 10 must-have elements that I believe every website should include.
1. Custom 404 Page Template
The default 404 page in GeneratePress is basic and doesn’t offer much in terms of user experience. I always create a custom 404 page template to keep the site branded and offer a better user experience when someone lands on a page that doesn’t exist. This template is pre-built, so I can quickly jump in and customize it for the specific project.
2. Blog Post Templates
I actually have two blog post templates, bringing my total element count to 11. However, you only need one. These templates allow me to create a consistent layout for blog posts. The first template is a simple blog post layout with the title, author name, post date, and content. The second template adds a hero section with a featured image, date, title, author name, and content. Having these templates ready allows me to choose the design that best suits the project.
3. Merged Header
The merged header element allows me to merge the header content with the hero section, creating a seamless design. By default, this is disabled, but I can enable it as needed. For most projects, I only use the merged header on the homepage, but it’s handy to have this element ready to go.
4. Off-Canvas Mobile Menu Customizations
To enhance the off-canvas mobile menu, I use two elements: one for content before the menu and one for content after the menu. These elements allow me to add a logo, social icons, or any other custom content to the mobile menu, making it more engaging and functional.
5. Page Hero Design
A page hero element is essential for managing global changes to page headers. This element allows me to control the appearance of the page hero across all pages, making it easy to update the design site-wide with just a few clicks.
6. Layout Element
This layout element is used to set some of my preferred default settings, such as no sidebars, full-width content areas, and disabling content titles. These settings are applied across the entire site, but I can easily exclude specific pages if needed.
7. Policy Pages Layout
For privacy policies, terms and conditions, and other policy pages, I use a layout with a narrower content width (800 pixels) to make the content easier to read. This layout dynamically pulls in the policy content, ensuring consistency across all policy pages.
8. Site Footer
The site footer is one of the most important elements of any website. I have three different footer designs pre-built, allowing me to choose the best one for the project or build a custom footer from scratch. This flexibility speeds up the development process and ensures a consistent design.
9. Top Bar/Announcement Bar
I always include a top bar or announcement bar element in my starter site. This is a simple block element that displays above the header, perfect for announcements or promotions. Even if I don’t use it initially, I keep it in the back pocket for when the client needs it.
10. Blog Post Template
As mentioned earlier, I have two blog post templates. The extra template offers a different layout option, so I can choose which one best fits the project’s needs. It’s not essential to have both, but having the option is helpful.
These are the 10 must-have elements I include in every website build. They help streamline the development process and ensure consistency across all my projects. I hope you find these useful and consider implementing some of them in your own workflow.
