Skip to main content

UI part. Creating the first page

VIDEO RESULT after completing all actions on the home page.

image.png


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;
  • 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;

image.png

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.

image.png

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.

image.png

Need to add a box shadow and border radius to the function widget and row container.

image.png

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:

image.png

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.

image.png

image.png

Modal 1

image.png

Modal 2

image.png