Each page is split into logical UI pieces to help you keep your UI modular. A single slot has its scoped CSS which means it can be styled by classes which only affect a given slot and their names can be duplicated in other slots. In the exported code, slots will be extracted to dedicated files making them more maintainable. See Slot directive for more details.
Similar to slots however they can be used across multiple pages. They can be understood as partials. You'll be editing a reusable slot in a dedicated HTML editor and injecting it in pages using an empty Slot directive.
You can switch among multiple repositories of widgets. As a free user you have access to basic repo which should give you an idea how widgets can speed up your work. A member of Freelancer subscription can access Pro repo and the future repos which we are still working on. Enterprise customers get the way to create their own repos to suit their business needs.
You can explore widgets by choosing one in the widget sidebar. Each widget is documented. You'll be able to see its thumbnail, basic info, what parameters it gets, what CSS classes are customizable and what will be auto-generated when it's installed.
In short, the widgets are versioned using semantic versioning so you’re safe using them. When the project is exported, all the dependencies end up in dependencies in a
package.json file. Then, either
yarn can be used to guarantee nested package locking.
Before hitting install you need to place your mouse cursor on a valid place in HTML.For pages:
Note that in reusable slots, after hitting "install", it won't be wrapped into a slot. This is because you can't nest slots inside reusable slots.
There are many things happening implicitly when installing a widget. In short:
Since a widget is an HTML tag, you can copy-paste to move it around the page or reusable slot.