Novti - Client Admin Docs

# Themes

# Table of contents

# Themes

# Introduction

Welcome to the Themes documentation. The Themes feature in our campaign management system enables clients to customize their landing pages and forms using JavaScript and SCSS files. This feature provides a flexible and powerful way to control the look and feel of your campaign materials globally.

# Accessing Themes

You can find the Themes feature under Appearance > Themes in the navigation menu. Here, you can create, edit, and manage your Themes to tailor your landing pages and forms to your specific needs.

# Creating a new Theme

  1. Navigate to Appearance > Themes.
  2. Click the + button to create a new Theme.
  3. Fill in the Name and Description fields.
  4. Optionally, select a Base Theme to get started quickly with pre-defined styles and scripts.
  5. Click Create and wait for your new Theme to be created.

TIP

Base Themes are premium options provided by the Novti development team and community enthusiasts. They can be customized further after selection.

# Exploring Base Themes

  • Click the Explore button to preview different components for mobile, tablet, and desktop devices.
  • If you encounter any issues with a Base Theme, contact the author by clicking the Support button.

# Upload existing Themes

NOTE

Uploading locally created Themes is currently under construction.

# Managing Assets

# Creating and Editing Assets

  1. Go to Appearance > Themes > Edit (open the theme) > Assets Editor tab.
  2. To create a new SCSS file:
    • Click the + icon next to the scss folder.
    • Enter a unique name and click Create.
  3. To create a new JavaScript file:
    • Click the + icon next to the js folder.
    • Enter a unique name and click Create.

# Including and Excluding Assets

  • To include an SCSS file:
    • Import it in assets/styles.scss (e.g., @import 'scss/header';) and click Save & Compile.
  • To exclude an SCSS file:
    • Remove its import statement from assets/styles.scss and click Save & Compile.
  • To include a JavaScript file:
    • Import it in assets/app.js (e.g., import './js/animation') and click Save & Compile.
  • To exclude a JavaScript file:
    • Remove its import statement from assets/app.js and click Save & Compile.

# Renaming and Deleting Assets

  • To rename an asset, click the options icon ⋮ and select 🖊️ Rename. Update the entry files (assets/app.js and assets/styles.scss) to avoid compilation errors.
  • To delete an asset, click the options icon ⋮ and select 🗑️ Delete. Update the entry files (assets/app.js and assets/styles.scss) to avoid compilation errors.

# Managing UI Components

UI Components are reusable HTML components that can be used when creating new pages.

  1. Go to Appearance > Themes > Edit (open the theme) > UI Components Editor tab.
  2. To create a new UI Component:
    • Click the + icon next to the desired category folder.
    • Enter a unique name and click Create.
    • Use the HTML editor to define the component and click Save.
    • To style or manipulate the UI Components use js and scss assets.

# Creating and Managing Categories

  • To create a new category:
    • Click the + icon next to the components folder.
    • Enter a unique name and click Create.

NOTE

Empty categories are removed automatically. Delete all child UI Components to remove a category.

# Renaming and Deleting UI Components

  • To rename a UI Component, click the options icon ⋮ and select 🖊️ Rename.
  • To delete a UI Component, click the options icon ⋮ and select 🗑️ Delete.

# Using UI Components in Pages

UI Components created in the Themes can be used to enhance your landing pages with predefined layouts and draggable blocks.

  1. Creating Pages with Layouts:

    • When creating a new page, available UI Components under the layouts category will appear as selectable layouts.
    • Choose a layout to start with a predefined structure for your page.

  2. Using Draggable Blocks:

    • UI Components can be used as draggable blocks in the Page Builder.
    • Simply drag and drop these components onto your page to customize its design and content.

TIP

By utilizing these layouts and draggable blocks, you can quickly build and customize your landing pages, ensuring a consistent and efficient design process.

# Including External Resources

  1. Go to Appearance > Themes > Edit (open the theme) > External Resources tab.
  2. Add new External Resources using the jsDelivr-powered search functionality or by clicking the + Add button and providing a CDN source URL.
  3. Click Save to persist the changes.
  4. Manage included styles under the Styles tab and scripts under the Scripts tab.
  5. Reorder External Resources to set their loading priority.
  6. Set the HTML loading location (head or body) and attributes (e.g., crossorigin for styles and crossorigin/defer for scripts).
  7. Delete an External Resource by clicking Delete.

# Configuring Theme Settings

  1. Go to Appearance > Themes > Edit (open the theme) > Settings tab.
  2. Update the name or description of your Theme.
  3. Toggle the Active Theme to enable or disable it.

WARNING

Only one Theme can be enabled at a time. Disabling an enabled Theme will result in the loss of styles and scripts on all pages.

# Deleting a Theme

  • Click the Delete button to permanently remove the Theme.

DANGER

This action is irreversible. Deleting an enabled Theme will result in the loss of styles and scripts on all pages.

# Conclusion

The Themes feature empowers you to customize your campaign's landing pages and forms with ease and flexibility. By leveraging JavaScript and SCSS files, as well as reusable UI Components and External Resources, you can create a cohesive and dynamic user experience. Utilize the provided tools and settings to tailor your campaign's appearance and functionality to meet your specific needs.

# Elements

# Introduction

Welcome to the Elements documentation. The Elements feature in our campaign management system allows clients to customize their pages from a centralized location using dynamic reusable components. A Element functions like an embedded UI Component that you can drag and drop across multiple pages, but its content is dynamically loaded from a central source.

To edit the content of a Element, simply open the Elements editor. Once you save the Element, any changes will automatically be reflected on all pages that embed the Element, without requiring any manual updates to the related pages. This feature offers a flexible and powerful way to manage the content of your campaign pages centrally and efficiently.

# Accessing Elements

You can find the Elements feature under Themes > Elements in the navigation menu. Here, you can create, edit, and manage your Elements to tailor your landing pages to your specific needs.

# Managing Elements

  1. Go to Themes > Elements.
  2. To create a new Element:
    • Click the + icon.
    • Enter a unique name and click Create.
    • Use the HTML/EJS editor to develop the Element and click Save.
    • To style the Elements, use your organization's active Theme's JS and SCSS assets. Refer to the Managing Assets section for more information.

NOTE

EJS templating syntax is currently under development. At this time, only HTML is supported.

# Renaming and Deleting Elements

  • To rename a Element, click the options icon ⋮ and select 🖊️ Rename.
  • To delete a Element, click the options icon ⋮ and select 🗑️ Delete.

# Using Elements in Pages

  • Elements can be used as draggable blocks in the Page Builder.
  • To customize your page's design and content, simply drag and drop the Elements onto your page.
  • The content of Elements cannot be edited directly within the Page Builder. To make changes, open the Elements editor.

TIP

Use Elements to share the content of heroes, footers, and navigations across multiple pages effortlessly.

← Logs →