# FAQ

# What is the Novti Page Builder?

Novti Page Builder allows you to visually create and edit web pages without any coding knowledge. It provides a user-friendly interface and drag-and-drop functionality for building responsive and dynamic web pages.

# How can I edit a page using the Novti Page Builder?

To edit a page using Novti Page Builder, you need to follow these steps:

Loading the image...

Open the Novti Page Builder by clicking on an existing page in the Pages list, or via Create Page.
Once the Page Builder is open, you'll see a canvas where you can design and edit your web page.
Use the toolbar and the component panel on the right-hand side to add and customize various elements like text, images and more.
Click on any element on the canvas to edit its properties and modify its appearance and behavior.
You can rearrange elements on the canvas by dragging and dropping them to different positions.
Save your changes and export the final HTML/CSS code for your web page.

# How can I add custom fonts to my page?

Adding a custom font to the page can be done in various ways.

If you are hosting the font via a content delivery network (CDN) or locally, you can add the font via @font-face (opens new window).
The other option is to load the font via an external stylesheet. E.g. embedding a Google font (opens new window) using the html link (opens new window).

Either options could be enabled by copying and pasting code blocks in the Code Editor (via Edit Code). In the Code Editor you can put the highlighted example code in their respective HTML and CSS block.

Loading the image...

@font-face

body {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
}
...
@font-face{
  font-family:"Roboto";
  src:url("https://cdn.novti.io/uploads/defaults/fonts/roboto/RobotoFlex-vf.ttf") format("truetype");
  font-weight:100 1000;
}

If you have multiple weights and styles in separate font files, you will need to add the different source urls.

link

<body>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
  <div class="row layout-base">
    ...
  </div>
</body>

body {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
}
...

Note

Manually uploading your own fonts to our CDN is not possible at the moment, but we are working hard on making that feature possible in the near future.

# Can I customize the style and layout of the elements in Novti Page Builder?

Yes, you can fully customize the style and layout of the elements in Novti Page Builder. It offers a wide range of customization options, including font styles, colors, sizes, backgrounds, margins, and more. You can also apply pre-defined themes or create your own custom styles.

Loading the image...

In order to style text, you could either use the Rich Text Editor (RTE) Toolbar hovering above the selected text or use the more extensive style manager on the right.

TIP

In order to style a smaller selection of text, the RTE is advised.

# Can I preview my changes before publishing the page?

Yes, Novti Page Builder provides a preview mode that allows you to see how your page will appear to visitors before publishing it. You can click to preview after saving your page to ensure that your design and layout are exactly as desired.

Loading the image...

# Can I build a mobile-friendly page?

Yes, Novti Page Builder is designed to create responsive web pages that adapt to different screen sizes, including mobile devices. You can preview and test your pages across various devices to ensure optimal responsiveness.

Loading the image...

← Setup quiz Pages →