Skip to main content

Pages

Pages typically represent the visible UI or interface components of an application. They contain elements like buttons, text fields, dropdowns, and more - essentially the elements with which end-users interact. A page represents a single functional unit with a particular functionality in an application, like a 'Login Page', 'Signup Page', 'Dashboard', etc.

Overview​

Page creation in Digisquares is a key step in building applications. Digisquares provides the flexibility to choose from pre-built page templates or create custom pages tailored to your application's unique requirements.

Pre-built Page Templates

1. Accessing Pre-built Templates​

  • Digisquares offers a library of pre-designed page templates to kickstart your application development.
  • Explore and select templates from the template gallery.

2. Customizing Pre-built Templates​

  • Customize pre-built templates by:
  • Adding or removing components.
  • Modifying content, such as text and images.
  • Adjusting styling and layouts to match your branding.

Custom Page Creation

Step 1: Initial Setup​

Start by accessing the Page Menu from the main dashboard of the platform.

1.Accessing the Page Menu​

  • Navigate to the main dashboard.
  • Click on the Page icon from the sidebar to open the Page Menu.
  • Select + New Page to begin creating a new page.

2.Choosing a Template​

  • In the modal that appears, select the Blank template to start with a clean canvas. This option provides the maximum flexibility for custom design.

Step 2: Designing the Page​

After selecting the blank template, you will be taken to the Page Designer, where you can begin designing your page layout.

1. Using the Drag-and-Drop Interface​

  • Drag Components: Choose from various UI components like text boxes, buttons, images, and forms available in the sidebar.
  • Drop Components: Place them onto the canvas at the desired locations.

Step 3: Customizing Components​

Once components are placed on the canvas, they can be customized individually to fit the needs of your design.

1.Editing with the Properties Panel​

  • Selection: Click on a component to select it. The Properties Panel will open with options specific to that component.
  • Customization: Adjust settings such as text content, font size, color, alignment, and more.

Step 4: Advanced Design Features​

Leverage advanced design features to enhance the structure and aesthetic appeal of your page.

1.Layers Panel​

  • Organize your page elements effectively by managing layers like headers, footers, navigation bars, and content sections.
  • Layers can be rearranged by dragging them within the panel, allowing for easy adjustments of the page structure.

2.Background Panel​

  • Select a background for your page from predefined options or upload your custom image.
  • Adjust background properties such as image scaling, opacity, and overlay colors to match your design.

Step 5: Styling the Page​

Apply consistent styling across your page using the Styles Panel to ensure a cohesive look.

  • After dragging a component into the layout, you can customize its properties using the styling panel.
    • Spacing: Adjust margin and padding for the selected component.
    • Size: Set width, height, min/max width, min/max height, ratio, and overflow settings.
    • Background: Customize the background color, width, height, position, and tile settings.
    • Box Shadows: Configure inside and outside box shadows including color, angle, distance, size, and blur.
    • Typography: Set font, color, weight, size, height, space, indent, decor, and alignment.
    • Border: Define border text decoration, color, width, and radius.
    • Layout: Adjust display, flex child settings, and alignment and order.
    • Position: Set position, float, and clear properties.

Step 6: Preview and Publish​

Before making your page live, preview it to ensure all elements look and function as intended.

1.Previewing the Page​

  • Click on the Preview button to see how the page will appear to end-users.
  • Make any necessary adjustments based on the preview.

2.Publishing the Page​

  • Once everything is set and the page looks good, click the Publish button to make your page accessible to the public.

Conclusion​

Using our Digisquares platform, users can easily design and customize web pages with little to no coding knowledge. The intuitive drag-and-drop interface, combined with powerful customization tools, provides a flexible and user-friendly environment for creating professional-looking web pages.