Beginner's Tutorial: Simple layout of a homepage with Yida

Introduction to [Zero-start introductory tutorial series] will bring everyone from the business perspective from the shallow to the deep to learn how to build the application. Even novices who don't have any code foundation can find the fun of successfully building applications by following the series of courses and slowly practicing from zero. In the fifth lecture today, how to use Yidao to simply lay out a homepage.

[Start-up tutorial series] will bring everyone from the business perspective to learn how to build applications from the simple to the deep. Even novices who don't have any code foundation can find the fun of successfully building applications by following the series of courses and slowly practicing from zero. In the fifth lecture today, how to use Yidao to simply lay out a homepage.

How to layout the homepage?

We take "Enterprise Comprehensive Epidemic Prevention" as an example to give you step-by-step teaching on how to use Yidang for homepage layout.

First, visit the homepage of Yida, find the "Enterprise Comprehensive Epidemic Prevention Program" application in the template center, click and enable this application, name the application and select "Keep sample data". After the creation is completed, it will automatically jump to the background management of the application.

From the background management page, you can see many types of pages, including page types that we have not seen before. The icon in front of it is a yellow window, which represents a custom page. "New custom page" option.

The custom page is mainly to provide some portals for the application or as the home page of the current application. We can place some business access portals on it, or provide some information on this page for users to check.

It can be seen that these pages currently do not have a submit button and no data management, which means that it is only used as a display class, not for submitting data or initiating a process. We can use it to make some homepages, and these pages also provide a lot of rich front-end components.

Enter the form designer through the home page, and you can see the layout of the entire page from the "Outline Tree". From the "page content" you can see that there are two carousel components on the current page.

There will be a "container" below, its main function is to provide an area, in this area will contain access to various business pages. There is also a "layout container" under the "container". The main function of the "layout container" is to divide some content in the current container into a structure of equal proportions. Click "Layout Container" and you can see a "Column Ratio" on the right side of "Layout Container", which divides the entire container into a structure of 6:6:6:6:6:6.

In fact, when we are designing the front-end, we actually define a line of our page as 12 prices, which is 12 grids and 12 grids. Then we set our current line to 6:6. , It will present a state of left-right ratio.

The same layout container will contain small layouts, there will be a "group" inside, and a "link block" inside the "group", which is used for link jumps, which is equivalent to a limited area. When the user clicks on this area It will jump to the link block. Some pictures and text are provided in the "link block" component. The picture corresponds to the icon, and the text corresponds to the title.

In today's tutorial, we have used multiple report components. Report components include four types of components: basic, layout, filter and chart, among which: "basic" and "layout" components can be used in the data filtering and presentation area of the canvas; "filter" components can only be used in the data filtering area of the canvas Use; "Chart" and "Other" components can only be used in the canvas data presentation component area.

• Layout container: It is a container with "layout" capability. Our most common one is linear sequential layout, that is, the pages are arranged in order from top to bottom. However, in the actual page design and implementation, there is a linear layout, and it often encounters demands such as relative layout, absolute layout, and flexible layout.
• Link block: It is a container type component. Clicking any element in the container will trigger a jump link
• Grouping: an officially recommended block manager for cohesive modules with similar functions and capabilities into a group.
• Layout: It is to control the position of the existing visual components, corresponding to the English verb layout, which represents an action.
• … …

In the next lecture, we will focus on the enterprise epidemic prevention and control scenario, and teach you the full-link application design from form design-home page layout-data viewing

\>>>>The detailed steps of the fifth lecture, click to watch the video version of the

Copyright statement: content of this article is contributed spontaneously by Alibaba Cloud real-name registered users, and the copyright belongs to the original author. The Alibaba Cloud Developer Community does not own its copyright and does not assume corresponding legal responsibilities. For specific rules, please refer to the "Alibaba Cloud Developer Community User Service Agreement" and the "Alibaba Cloud Developer Community Intellectual Property Protection Guidelines". If you find suspected plagiarism in this community, fill in the infringement complaint form to report it. Once verified, the community will immediately delete the suspected infringing content.