Dittofi
  • Tutorials
    • Tutorial Index
    • Quick Start
    • Dittofi Essentials
      • Part 1: Frontend terms and concepts
      • Part 2: Backend terms and concepts
      • Part 3: Connecting frontend and backend
      • Part 4: Dittofi app structure
    • Dittofi App Design
      • 🏗️App architecture 101
      • ◼️Backend app development 101
      • 🟪Frontend app development 101
      • 🔰(optional) Web developer beginner series
  • Learn Frontend
    • 👨‍💻Getting Started
      • Welcome to Dittofi
      • Intro to the Dittofi Design Studio (Frontend)
    • 🟩Pages
    • 🟪Elements
      • Types
        • Button Element
        • Div Block Element
        • Form Block Element
        • Link Block Element
        • List Element
        • Modal Box Element
        • Tabs Element
        • Columns Element
        • Image Element
      • Partials
      • Prefabs
      • Custom
    • 🟧Variables
      • Array
      • Checkbox
      • Collection
      • Collection (Custom Model)
      • Collection (System Custom Model)
      • Custom Model
      • Date
      • Datetime
      • File
      • Json
      • Number
      • Number with decimal
      • Model
      • System Custom Model
      • Text
      • UUID
    • 🟨Events
      • 🟨External
        • HTTP Request
        • Run Endpoint
      • 🟨Flow Control
        • Condition
        • Run Action
        • Loop
        • Sleep
      • 🟨Maths
        • Add
        • Divide
        • Modulus
        • Multiply
        • Subtract
      • 🟨Navigation
        • Open Page
      • 🟨Notifications
        • Alert
        • Confirm
      • 🟨Other
        • Copy To Clipboard
        • Run Custom
      • 🟨Text
        • Concat
        • Contains
        • Ends With
        • I Contains
        • I Ends With
        • I Starts With
        • LTrim
        • RTrim
        • Text To Upper
        • Text To Lower
        • Trim
        • Starts With
      • 🟨Variables
        • Set Field
        • Remove Field
      • Validate
    • 🟦CSS Layouts
      • Holy Grail Layout
      • Side Bar Layout
      • Sticky Footer Layout
      • Sticky Header Layout
      • CSS Frameworks
    • 🔲CSS Frameworks
    • Component Libraries
    • Meta Attributes
  • Learn Backend
    • 🖥️Getting Started
      • Intro to Data
      • Intro to APIs
      • Build your first custom API
      • Actions & Events
    • 🟫Back-End Actions
    • 🟩Custom Models
      • 🟩Attributes
        • Array
        • Checkbox
        • Custom Model
        • Collection (Custom Model)
        • Collection (System Custom Model)
        • Date
        • Datetime
        • File
        • Number
        • Number With Decimal
        • Json
        • Text
    • ◼️Data Models
      • Database Fundamentals
        • Database relationships
      • ◼️Columns
        • Attachment
        • Auto Increment
        • Checkbox
        • Date
        • Datetime
        • Duration
        • Email
        • Long text
        • Link to another record field
        • Number
        • Number with decimal
        • Password
        • Phone number
        • Percent
        • Price
        • Rating
        • Single select
        • Single line text
        • URL
    • 🟥Events
      • 🟦Arrays
        • Append
        • Array Pop
        • At
        • Length
        • Prepend
        • Range
      • 🟦Conversions
        • Base64 Encode
        • Base64 Decode
        • Json Decode
        • Json Encode
        • Path Escape
        • Path Unescape
        • Query Escape
        • Query String Parse
        • Query Unescape
        • To Bool
        • To Float
        • To Int
        • To Str
        • Yaml Encode
        • Yaml Decode
      • 🟦Database Requests
        • Create
        • Create Or Update
        • Delete
        • Has Record
        • Read Event
        • Update
      • 🟦External
        • HTTP Request
        • SFTP Download
        • SFTP Upload
      • 🟦Files
        • CSV Reader Event
        • CSV Writer Event
        • File Read
        • File Save
        • File Size
        • File Type
        • JSON Reader
        • PDF Generator
      • 🟦Flow Control
        • Condition
        • Loop
        • Return
        • Run Action
        • Sleep
      • 🟦Notifications
        • Send Mail
        • Connect Websocket
        • Message Websocket
      • 🟦Maths
        • Add
        • Acos
        • Acosh
        • Asin
        • Asinh
        • Atan
        • Atanh
        • Cbrt
        • Ceil
        • Divide
        • Modulus
        • Multiply
        • Subtract
      • 🟦Security
        • Compare Password
        • JWT Decode
        • JWT Encode
        • Login
        • Logout Web User
        • Password Generator
        • Random Number
      • 🟦Time
        • Add Time
        • Day
        • Format Time
        • Minute
        • Nanosecond
        • Parse Time
        • Second
        • Time In
        • Year
        • Year Day
      • 🟦Text
        • Concat
        • Contains
        • Ends With
        • Execute Template
        • I Contains
        • I Ends With
        • I Starts With
        • Starts With
        • LTrim
        • RTrim
        • Replace
        • Regex Find All String
        • Regex Find String
        • Regex Match String
        • Trim
        • Text To Lower
        • Text To Upper
        • Text To Title
        • Url Getarg
      • 🟦Other
        • Assign
        • Run Custom
        • Redirect Web Page Event
        • Render Web Template Event
    • 🟧Variables
      • Array
      • Checkbox
      • Collection
      • Collection (Custom Model)
      • Collection (System Custom Model)
      • Custom Model
      • Date
      • Datetime
      • File
      • Json
      • Number
      • Number with decimal
      • Model
      • System Custom Model
      • Text
      • UUID
    • 🟪Webservices
  • Templates
    • Two sided marketplace template
      • Introduction
        • Part I: Installing and setting up the marketplace template
        • Part II: Understanding what features are included in the marketplace template
        • Part III: Customizing your marketplace frontend without coding
        • Exploring Dittofi's marketplace API
      • Listings
        • How to create a marketplace listing
    • How to build a CRUD app
  • Third Party APIs
    • OAuth 2.0 APIs
      • Introduction To OAuth 2.0
      • Google OAuth 2.0 - PART I
      • Google OAuth 2.0 - PART II
  • Dittofi Admin
    • Your Account
      • Workspace Admin
      • Manage Billing
      • Connect a custom domain
      • How to use a discount code to Dittofi Pro
  • FAQ
    • API Generator
    • How to write custom SQL?
    • Why does my image not display?
    • How can I set up Google Analytics?
    • Exporting and deploying my frontend code
    • What is a partial and what is a prefab?
    • How to set up a basic mulit tenant app on Dittofi
    • How to write a custom endpoint in Dittofi
    • How to integrate Font Awesome into Dittofi
    • How can I set up Dittofi to run on my own private server?
    • How to add roles such as Super Admin, Admin, Manager & User
    • How to prevent duplicate records being added to the database
    • What to do when relation cannot be created because their is violating data in the referenced table
  • Change Logs
    • Dittofi Change Logs
Powered by GitBook
On this page
  • Pages
  • Creating pages
  • Page Settings
  • Deleting Pages

Was this helpful?

  1. Learn Frontend

Pages

In this tutorial we cover everything that you need to know about pages.

PreviousIntro to the Dittofi Design Studio (Frontend)NextElements

Last updated 2 years ago

Was this helpful?

In this tutorial you are going to learn:

  1. What are pages

  2. Creating new pages

  3. Page settings

  4. Deleting pages

Pages

So to start with, what are pages and how can you use them inside Dittofi?

Inside of Dittofi, Pages can be used to build either landing pages, multi page websites or high performance web apps.

A page can be thought of as a structured document that makes up the visual design for your app. To customise your page, you can use Dittofi’s page builder to put a collection of customizable elements directly onto your apps page. This collection of elements makes up the visual design of your app.

The visual design transforms into HTML, CSS and JavaScript code and all of this code is automatically deployed at a Dittofi branded URL. You can link a custom URL whenever you’re ready to do so.

Creating pages

To create a page, go to the Page Builder tab inside of Dittofi. Click on the add pages button at the top of the page to get this slide out panel.

Notice that if you’re starting from a template, as I am here, this slide out will already have pages pre-built for your app. Next click the “Add page” button at the bottom of your app. This brings up a popup, which has a number of modern, customizable templates that you use as pages for your app. Each template can be entirely customised however, if you’d rather develop something completely from scratch, you can choose the blank option.

Lastly, Click “create page” in order to create the page.

Next, click on your new page, give it a name, a description, update the slug to modify the URL and click “Save”.

You can now add elements to your page by clicking on the add elements button here and then using the drag and drop, to move elements around your page. For example, here I am going to add a container element and then a form element, and add some space at the top of my form like so.

After I’ve done this I am going to click the “Build code” button here. This will build my apps code and also deploy this code directly into a live, test, environment for your app.

When you press preview, to see your page, you need to update the URL to include the slug that you set when you created your new page.

Back inside Dittofi, you can see that we have created a new page. If I add more elements to this page, I can then re-build my code and once my code has finished building, I can go over to my live app again and hit the refresh button to see the updated changes.

Page Settings

We saw in the last part that it was possible to give your page a name, a description and to set the slug for our page. However, there are some other page settings that we have not seen yet.

In order to re-open your page settings, go to the Add Pages button again, find the page whose settings you want to update and click on this downward facing arrow and edit settings, to edit the page setting.

Inside here you can update the name, description and the slug. Update your SEO settings, Import custom code snippets into your header and body tags, import custom CSS frameworks such as bootstrap & tailwind CSS and set page variables.

Press save in order to apply any of the updates that you make to the settings.

Deleting Pages

To delete a page, expand the pages panel, search for the page that you want to delete and then click on the downward facing arrow that is next to the page and click “Delete Page”.

WHAT NEXT?

Now you know what pages are, the best next step is to go through another one of the major front-end components. There are videos like this for each of the main components. The main components include:

  • Pages - which you now, already know about,

  • Variables

  • Elements

  • Front-End actions & events

🟩