SaaS Corporate Site
Introduction
This guide explains how to use Momen’s SaaS website template to build a fully customized official website. You will learn the basic project logic, how to manage your data model, and how to launch your SaaS website efficiently.
Basic Project Operation Logic
Website Structure
Homepage:
The main page of your SaaS website.
.png)
Top Navigation Bar:
Allows users to quickly navigate to other pages.
.png)
Website Features
The SaaS website template includes a homepage, pricing page, feature index, and FAQs. You can customize each page to highlight your SaaS product.
| Overview | Template Pages |
|---|---|
.png) | .png) |
How to Create Your Website Landing Page
Understanding the Data Model
Account Data Table
Stores basic user information, such as user ID, username, update time, creation time, and profile image.
.png)
Landing Page Data Table
Add images, links, and content to display on your landing page.
| Example | Example |
|---|---|
.png) | .png) |
FAQs Data Table
Upload questions and answers to explain your product.
| Example | Example |
|---|---|
.png) | .png) |
Pricing Data Table
Store pricing-related data.
.png)
Data Management
To modify data in a table, go to Data Model > Database. Here, you can update data bound to your project, including remote and list data.
.png)
To create a new entry, click Insert Row, edit the content, and click Create to save.
.png)
Editing Data Outside Data Tables
The database is for backend data. To edit your UI, return to the editor.
.png)
Double-click a page to enter focus mode and modify elements. For example, use the right sidebar’s ‘Content’ section to edit text.
.png)
Repeat this process for other components as needed.
Page Redirection
Double-click the text or image you want to configure for redirection. Click Interaction to edit, then click +, select Navigation, and choose the target page.
.png)
Website Preview
At this stage, your website is nearly complete. Preview your site to check your work.
.png)
Click the Preview button to generate a preview link.
.png)
After previewing, you can return to the editor to make further changes. When everything is correct and error-free, click Publish to launch your website.