Global Styles

Customizer

The Customizer is the core piece of GREYD.SUITE. It enables you to make global design settings for your entire website and spares you having to style each website element individually.

That way, a few clicks are enough to completely redesign an existing website. Our live preview shows you the effect of your changes in real-time.

Logo, Colors, Fonts

Which basic settings can I make?

The customizer is structured in a way that enables you to make your initial settings step by step: BasicsNavigationElementsExtended. This video shows you the basic settings.

Covered topics
Page title, change logo, website icon / favicon, set colors, fonts, background color, font size, mobile logo

Related topics
How to startCustom font integration

Navigation

How do I design the website header and footer?

You won't need a developer to design and layout your navigation completely individually. This tutorial shows you how to position and style your logo, menu and other header and footer elements.

Covered topics
Header, menu, logo, navigation, burger menu, off-menu, off-canvas, dropdown menu, footer, second header, mobile responsive, vertical menu bar

Related topics
Gutenberg in GREYD.SUITE
TemplatesManage menus

Text, Buttons, Fields, Links

Which Styling Options Do I Have For Website Elements?

Forget about having to style each element individually. With GREYD.SUITE, texts, headlines, buttons, links, form fields and notifications are designed centrally. That way, you can change every single button on your website with just one click.

This video shows you all setting options.

Covered topics
Text, font color, font style, lists, block quote, headline, character spacing, line height, word spacing, button, hover, link, form fields, messages

Related topics
Gutenberg in GREYD.SUITEGREYD.Forms
, GREYD. Buttons

Grid, CSS, announcement box and more

Which Further Settings Can I Make?

Use the extended Customizer features to individually adapt your grid, add your own CSS code and style sections such as announcement boxes and compatibility messages.

This video contains everything you need to know.

Covered topics
Compatibility message, announcement box, set-up page, preset, activate features, grid, CSS code, mobile responsive, row concept

Related topics
Gutenberg in GREYD.SUITEGREYD.HubTemplatesColumns

Design Modifications

How Do I Redesign An Existing Website?

Thanks to the global design settings in the GREYD.SUITE Customizer, a few clicks is all you need to completely change the look & feel of a website.

Watch this video to see how it works.

Covered topics
Import website / design, Customizer settings, move a website, change logo, adapt colors, fonts, redesign header, style buttons

Related topics
Gutenberg in GREYD.SUITEGREYD.Hub

Custom Font Integration

How Can I Implement Custom Fonts On My Website?

This video provides you with a detailed instruction how to implement a custom font on your website.

Covered topics
Custom font, integrate Google font locally, CSS stylesheet, font family, font weight, font styles

Related topics
Customizer Basics

Icon Quick Links

Customizer

Frequently Asked Questions

Helpdesk

Can't find your question? No problem? Write us here:

Die E-Mail-Adresse sollte ein ‘@’-Zeichen und eine gültige Domain mit einem Punkt enthalten.
Die Telefonnummer darf nur aus Zahlen und folgenden Zeichen bestehen: + ( ) – /

How can I make the parent element of a dropdown menu clickable?

By default, WordPress blocks the option to add a link when a menu item functions as a dropdown parent. But with the following workaround you can make it possible:

1. Create a menu with all items you want to have in the dropdown

2. Create a template with a menu block and select the menu you`ve just created

3. Go to your main menu and remove all sub items from the parent item

4. Click “Template Dropdown” in the menu settings and select the template you`ve just created.

How can I control the breakpoint for the header to switch to its mobile variant?

Many navigation widgets offer you the possibility to only show them on desktop or mobile screens. The breakpoint at which the header switches to its mobile variant can be controlled individually under Navigation > Header at “Mobile”.

Why should I start with the Customizer settings?

GREYD.SUITES allows you to manage your website design and content independently from each other. For example, you can make central color settings applicable for all elements on your website. By starting with making the design settings in the Customizer, you can later use those pre-set colors very easily. That way, you can also change them with just one click instead of having to adapt every single item on your website.

Learn more about the Customizer.

Why can’t I see the Customizer and GREYD.Hub?

Please check your WordPress user role. You can only use the Customizer as an administrator and need to be administrator (for single sites) or super administrator (for multi sites) to use GREYD.Hub.

Which format do I need for the logo?

We recommend to use formats such as .svg or .png for the website logo. However, .jpg is also possible. Please make sure, your logo is big enough, so it won’t blur. You can also upload a reduced logo variant for mobile devices.

Can the website title be translated?

Yes, when you are using translation plugins, e.g. WPML, you can also translate the website title. However, this needs to be done not in the Customizer but in the WordPress settings.

Why are my changes to the footer template not applied?

Please check your Customizer settings under Navigation > Footer. There, you can define whether to activate the footer and how you want it filled. Instead of the footer template you can for example also show the main menu. If you’ve selected this option or even disabled the footer, your template settings cannot be shown.

Can I deposit fall-back fonts?

Yes, in case a font cannot be loaded, you can define several alternatives as a fall-back. “Websave Fonts” for example already have pre-set fall-backs. You can also use fall-backs for your individual fonts by listing all font names, separated with a comma (e.g. myFont, Helvetica, sans-serif).

I need more variants than offered in the Customizer.

In the Customizer you can set several variants for colors, fonts, buttons, links, form fields, etc. For example you can define up to three different button styles and up to 18 different colors in the Customizer. If you want to style some elements on your website in a different way, that’s no problem at all. You can style each element on your website individually and independently from your Customizer settings. Also, you can deposit individual CSS designs.

Can I export my Customizer settings?

Yes, all settings made in the Customizer can be exported and imported onto other websites very easily via the GREYD.Hub. For multi sites you need to have the WordPress user role super administrator. Learn more about GREYD.Hub.

Why can’t I see the set-up page?

Please check your Customizer settings. Under the tab Extended > Features you can activate and disable the set-up page. It will be shown automatically by default as soon as you open a section in the Customizer.

Where can I change the color selection?

In many blocks, you can select from your individual colors as defined in the Customizer (e.g. for the row background or in the content box settings). Alternatively, you can set any other color with the colored circle on the right. If you want to change your color pre-set, open the Customizer and the tab “Colors”. Learn more under Customizer.

My color changes are not applied everywhere.

All changes in the Customizer, e.g. color changes, will automatically be applied in all website elements that use this color. This also works if you import other design settings via GREYD.Hub.

There is just one exception: If you do not use the pre-set colors in your blocks but enter individual color codes, here of course no automatic adaption is possible.