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.

Basic components

We start with the fundamental components of each theme:

Fonts

Choose the fonts you would like to use on the website. You can add them using the Fonts backend module.

Icon sets

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.

Buttons

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.

Site structure

At this point, you can create your desired site structure. The Starter One theme structure looks like this:

Sections

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:

Sliders

We will use two types of the slider in the Starter One theme:

You can learn more about Sliders in the documentation.

Services slider

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.

Hero slider

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.

Theme

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:

Frontend modules

Create all frontend modules needed on your website:

You can see the two new module types here:

The 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.

The 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.

Page layouts

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.

Design

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.

General settings

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.

Logo settings

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.

Header settings

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.

Header elements

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

If you need more customization design options, you can always include your custom CSS and JavaScript files in the Include settings section. If used in the content elements or other components, the fonts and icons are usually included automatically.

Page settings

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.

Content

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.

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: