Custom branding allows you to make the entire platform your own by customizing it with your logo, favicon, and colors so clients see your brand everywhere.
To add custom branding:
-
Log in to your account to access the Dashboard.
-
On the White Label tab, click Custom Branding.
-
In the side panel, click Replace to add a logo image. The maximum resolution of the logo image is 43px by 227px (height by width). To remove the logo, click Delete.. The logo displays on the login page, dashboard, editor, and on preview pages.
-
In the side panel, click Replace to upload a favicon image. To revert to the default image, click Reset to default. For best results, upload a .png, .jpeg, or .ico file that is 16x16 or 32x32 px.
-
In the Choose your colors section, click on a color to select a new color or enter a HEX value. Following is a description of each field:
-
Top Bar is the color of your client’s top bar across the platform. We suggest using a prominent color but keep in mind this is a toolbar, so choose a color that won’t overwhelm your users as they look for the icons or tools they need in their dashboard or editor.
-
Primary is the background color of your main CTA (call to action) button across the platform as well as other prominent elements.
-
Text on Primary is the color of the text that appears on anything customized to match your Primary color setting. Make sure there is a strong contrast between your Primary and Text on Primary colors.
-
Secondary is the color of additional generally clickable elements that are not necessarily the primary action on the screen. The secondary color is used for elements that are displayed on a white background. Use a color that has a good contrast against a white background.
-
-
(Optional) Click HTML/CSS to add custom code. To learn more, see Add Custom HTML and CSS to White Label Branding.
-
Click Save Changes.
To add custom CSS or HTML to your white labeled platform branding:
-
Log in to your account to access the Dashboard.
-
On the top navigation, click White Label, and then click Custom Branding.
-
Under Edit with HTML/CSS, click HTML/CSS.
-
Select the relevant tab (HTML or CSS).
-
Insert your custom code into the field provided.
Note
-
Custom CSS can be added to your white labeled dashboard, editor, reset site page, preview and login screens.
-
On the CSS tab, click the pre-fixed classes provided to avoid making mistakes.
-
-
Click Done.
-
On the Custom Branding screen, click Save Changes.
To view your changes, enter your account via your white labeled domain.
Note
-
Duda does not troubleshoot custom code. We recommend that you consult a professional if you have little to no experience implementing custom code.
-
Duda already uses jQuery, so there is no need to reimport the jQuery library.
-
We recommend that you load scripts asynchronously, as to keep the entire editor loading quickly. To learn more, see this guide to loading scripts.
-
We recommend that you wait to load any javascript code until the window.onload event has completed. This ensures that the user is able to start editing the website and your additional code does not delay the editing experience.