How We Built This: An Overview
This app was built on several areas of the Wix Blocks editor. Here is how we did it.
Widgets and Design | Widgets
The Widgets area is where you create the user interface of your widgets, using drag and drop Wix elements. In this area, we:
- Created a widget.
- Added a Grid Cells Repeater to it. This kind of repeater has an inherent responsive behavior, so that it applies to horizontal (such as desktop) and vertical (such as mobile) views. Note that whatever you update in one cell of the repeater, updates in all. For example, if you change the text or the style, updates in all cells.
You can see all the elements in the Layers
panel.
See how it looks
Widgets and Design | Design Presets
Design presets let you create various styles and layouts for the same widget. The widget structure, code and functionality stays the same across presets. In the Design Presets section, we created four design presets, which vary by the location of the text on the images.
See how it looks
Databases
The Databases area is where you handle CMS collections for your app. The collection in our app holds the process stages to present in the widget. In this area, we:
- Created the Process collection under Code {} > Databases > Your Collections.
- Used the Connect to CMS
icon to connect every element in the repeater to a corresponding field in the collection.
- Now, whenever the data in the collection is changed, it also changes in the widget.
See how it looks
Dashboard
Dashboard pages are used to manage data and settings in a Blocks app. When a user installs the app on a site, the Dashboard page is added to that site’s Dashboard. In this area we:
- Created a Dashboard page through the App Dashboard
panel.
- Added a List Repeater to the Dashboard page. Every line of the repeater has an image, an Upload Image button, input texts for the title and description, a Save button and a Delete button.
- Added an Add Item button on top of the Dashboard page.
- Set Editing actions to the Add Item, Delete and Save buttons.
- Added Dashboard logic code:
- Hovering over the image shows the upload image button. After uploading an image, it gives you a preview of the image.
- After any change in the input elements (uploading an image, changing the title or description) the Save button is shown. Clicking on it will save the current data and change the color of the button (for better user experience).
See how it looks
Editor Experience | Panels
The Editor Experience area configures how site builders who install your app can interact with it and edit it. In the Panels tab, we:
- Created a custom panel for moving between presets.
- Added thumbnail elements to the panel, showing the various layouts.
- Added panel code.
Note that Blocks also provides a default Presets panel for changing the widget's design and changing design and layout, but we wanted to add some extra functionality: we grouped similar presets together and offered combinations of layouts, in order to make it easier and clearer for users.
See how it looks
Editor Experience | Configuration
The configuration tab allows you to fine-tune what users can and cannot configure in your widget, when it’s installed on their site. In this area, we:
- Named the main action button Manage Items and connected it to the Dashboard page.
- Removed the Change Preset action button and added a Layout button instead.
- Assigned the Layout button to our custom layout panel that controls the design presets.
- Renamed the main action of each card in the repeater to Change Layout and linked it to our layout custom panel.
- Changed the text of the main action button for all dynamic texts to Design Text, because editing is possible from the Dashboard page only.
- Marked the repeater as non-selectable to simplify the structure for users in the editor (so they have less clicks to select a text or an image).
See how it looks
Installation Settings
Installation Settings define how the app behaves during its first installation on a site. In this area we:
- Defined the widget to be automatically added to a site homepage, with default preset Classic - Text position bottom.
- Removed all presets from the Preset panel, since we use our custom panel to switch layouts.
- Selected two presets to show in a site’s Add + panel.
- Since our design is fully responsive, there was no need to select any specific presets for mobile.
- Added preset images. Make sure to change these images to your own if you change the appearance of the app.
See how it looks