UI part. Creating the first page
VIDEO RESULT after completing all actions on the home page.
Let's move on to execution
On this page, we use the following widgets:
- function widgets (stretched across the full width and approximately 7-10px in height, used as a navigation menu):
-
- text widget;
- 4 button widgets;
-
- grid layout widget:
-
- row container widget:
-
- input widget;
- text widget;
- slider widget;
- 2 button widgets;
-
- row container widget:
-
- carousel widget;
-
- row container widget:
-
- modal widget 1 (with the complete list of widgets that should be included in the modal window. Some of them will be added automatically.):
-
- 2 text widgets;
- 2 icon button widgets (icon: plus and cross);
- select widget;
- button widget;
-
- modal widget 2 (with the complete list of widgets that should be included in the modal window. Some of them will be added automatically):
-
- text widget;
- icon button widget;
- button widget;
- input widget;
-
The functional widget will automatically be present on all pages after you place it on the home page. Let's create it first. Each button will redirect to other pages (Collections, SingleCollection, Gallery, FilteredGallery). The label of the button indicates the name to which the redirect will occur.
The grid layout widget should have a consistent height on all pages, and its background should be transparent. It contains two row containers, each of which already contains other widgets.
Need to add a box shadow and border radius to the function widget and row container.
On this image, the green background (for example) represents the grid layout widget, the white backgrounds represent the row container, and the lower row container contains the carousel widget with blue borders.
Remember to name the widgets correctly!
Page appearance:
To open a modal window in the button widget settings, look for the onClick option. From the menu, select OpenModal and specify the name of the modal window.
Modal 1
Modal 2
No Comments