Create your own theme
Veello Theme comes with a set of predefined themes that are easy to install. However, it is also a powerful website builder, which allows you to create a beautiful website from scratch, and this guide will show you how to do it.
You can either implement the website based on your design or use the powerful element sets to create the layout quickly. We will take our Starter One theme as an example for instructional purposes, which is also available to import.
Before you start
In the first place, you should prepare all necessary images and icons, which will be used on your website. You can upload the files to any folder using Contao's file manager.
We start with the fundamental components of each theme:
Choose the fonts you would like to use on the website. You can add them using the Fonts backend module.
In the Start One theme, we rely on the default icon set bundled with Veello Theme. For your website, however, you can import a custom Icon set.
You can now add button styles, which will be used on your website. In Starter One, we will use the following:
- Starter One : Primary Button
- Starter One : Primary Button : Small
- Starter One : Primary Button : Small : White
- Starter One : Secondary Button
You can create as many custom buttons as you'd like to and use them in various places across the website. You can read more about them in the Buttons section.
At this point, you can create your desired site structure. The Starter One theme structure looks like this:
Sections allow you to create and organize content, which is meant to be displayed on multiple pages, for example, a footer or subheader. In Starter One, we have created the following sections:
|Starter One : Footer||Section||Displays the footer content.|
|Starter One : Sidebar||Box||Displays the sub navigation and contact data.|
|Starter One : Subheader||Section||Displays the current page title and breadcrumb.|
We will use two types of the slider in the Starter One theme:
|Starter One : Hero Slider||Hero slider||Homepage slider.|
|Starter One : Services||Configuration||Configuration for services slider with custom content.|
You can learn more about Sliders in the documentation.
We will use this slider to display the services on the website in a carousel format. It is a slider of the
Configuration type, meaning its content will be defined individually per page. The slider settings will remain the same wherever it is used, however.
This type of slider is a bit more extensive and allows the creation of more advanced presentations. You can create an unlimited number of slides with any content elements you would like to use.
We will place this slider on the homepage as the first big eye-catcher.
Now, let's create a new theme with page layouts and frontend modules. To do that, simply go to
Layout > Themes and create a new record:
Create all frontend modules needed on your website:
|Footer : Menu : About||Custom navigation||Used in the Footer section.|
|Footer : Menu : Information||Custom navigation||Used in the Footer section.|
|Footer : Menu : Services||Custom navigation||Used in the Footer section.|
|Header||Header||Generates a complete header of the website.|
|Header : Menu||Header navigation||Generates a navigation for the header.|
|News : Newslist : Homepage||Newslist||Newslist on a homepage.|
|News : Newslist : Subpage||Newslist||Newslist on a subpage.|
|News : Newsreader||Newsreader||Used on a news reader page.|
|Sidebar : Menu||Navigation menu||Used in the Sidebar section.|
|Subheader : Breadcrumb||Breadcrumb navigation||Used in the Subheader section.|
|Subheader : Pageimage||Page image||Used in the Subheader section.|
You can see the two new module types here:
Header module type generates a complete header, including the navigation, change language switcher, and search bar. You can configure the header components and layout in the Design settings.
Header navigation module type generates extended navigation for the header, including mobile navigation and mega menu, if enabled. You can choose this module in the
Header module settings.
You can create a new page layout when the frontend modules are ready. See the image below for reference how to configure the page layout.
Remember to check the box
Activate Veello Theme and include the
Header module in the appropriate section.
It's time to create the Design record, which contains information about the general look and feel of the website. You can go through all the configuration options now or postpone it for later. We have outlined the most important settings below.
In the general settings, you should enter the internal design name and the main color of your design. It will be used in various places like buttons, links, etc.
Now, set the global styles of your website, such as text color, font family, and font size. You can do that using the style presets, which are defined in
General style field.
You can upload your logo in the
Logo settings section. It is possible to set several different logos depending on the current header context: desktop view, mobile view, or sticky header.
We highly recommend setting the concrete logo size. It will ensure that website contains correct markup for crawlers like Google and website analyzers like Lighthouse.
This section of the design settings allows you to define the header look and behavior. Make sure to set its desired width, type, and optionally some other configuration options.
Once the basic options are ready, you can add various components to the header. The order of each header component is set at the bottom of this section.
Include settings section. If used in the content elements or other components, the fonts and icons are usually included automatically.
Now that the design and page layouts are ready, it is time to assign them to the pages. Make sure to set both: a page layout and a design.
Please note that the design is inherited in the same way as the page layout.
The website is now ready to be filled in with the content. We highly recommend using the element sets for that purpose. They will speed up your work significantly and will create engaging content.
You can also play with all the other theme components to make your website even more beautiful. Discover all theme components in this section.
Your website should look more or less like presented below. This is your starting point for the last phase of implementation – final touches.
Up until this point, we have created a fully structured website that is now ready to be polished. You can fill it with the actual content and images.
The best way to customize each part of the website is to use the style presets. The final effect after polishing can be as on the below example: