Templates

Templates serve as a dynamic resource, offering pre-designed structures to kickstart your Page building process. These templates are carefully crafted to cater to various design needs, from minimalist landing pages to intricate multi-page forms.

These templates come ready-made, though they may require some customization to perfectly align with your project's unique needs.

note

The current list of available templates is not exhaustive and will continue to expand as Qodly Studio evolves.

Explore Templates

Navigate to the Components section and locate the Templates tab to explore the available options:

1. Navigate to the Components Section: Find the Templates tab within the Components section.


2. Select a Category: Once in the Templates tab, browse through the available categories. Choose the category that aligns with your project's requirements. For example, you might opt for the Business Trip category .

info

• Quickly find categories by name using the search box .
• Customize the display format by toggling between grid and list views with the respective buttons.

3. Explore Templates: Upon selection, a panel opens, presenting various templates.



Each template is accompanied by a Preview Image to visualize the template's content and a Title and Description to understand the template's purpose and functionality.

Using Templates

To use a template from the selected category, for instance, the datatable category , follow these steps:

1. Select a Category: Click on the desired category (e.g., Datatables, Travel, or Business). This will open a panel displaying all the templates available within that category.


2. Choose a Template: Browse the templates shown in the panel. Each template includes a preview image and a brief description.


3. Drag the Template (Not the Category!): Click and drag a specific template from the panel directly onto the canvas.

warning

Make sure to drag the template itself from the right-side panel and not the category icon on the left side.

Customizing Templates

While templates provide a solid starting point, customization is essential for aligning your design with your unique vision and project requirements. Even in seemingly ready-to-use templates, like the datatable with the blue header, specific configurations may need adjustment. Here are key elements to customize:

• Qodly Source: Identify and set the appropriate qodlysource for the component.

• Properties Customization: Customize component properties, such as the column source, to accurately represent the data you want to showcase.

• Css class: Tailor the CSS class code to match your desired styling preferences.