Community layouts
What you’ll learn:
Community layouts - what is it?
How to add a community layout to your project
Before you start creating layout - General rules
Create your own community layout
Community layouts - what is it?
Community layouts are premade widgets built by our lovely community and shared with everyone for free to use in your projects. This feature allows you to save certain elements and reuse them even in a completely different project. Let’s say you made a very nice button with gorgeous animations and you want to use it on a different website. You can add it to your personal library, or share it with the world. Either way you now have access to that element from whatever project you have.
Now that we know what those layouts are, let’s discuss how to use them in your project.
Now that we know what those layouts are, let’s discuss how to use them in your project.
How to add a community layout to your project
1
Open your project.
2
Go to the left panel.
3
Open widgets.
4
Community layouts are categorized by the specific widget they belong to so we need to select one. Let’s choose an Area widget for this example.
5
Switch the base tab “BOWWE widgets” to “Public widgets”.
6
Here you get access to the multitude of free-to-use and styled widgets. Just drag ‘n drop in your project like with basic BOWWE widgets.
7
This will trigger a popup asking you to choose color variants of those layouts. If the layout uses variable colors from global styles, then you may automatically convert those colors to the ones applied in your global styles, or simply use the ones defined in the layout.
- Use Widget Styles - will use the same colors from the layout
- Use Project Styles - will use predefined variables and set the colors from your brand
Reminder:
At the start of your project, all your Global Styles (UI Kit) colors are set to white. Be sure to set those colors before using community layouts based on Project Styles, or those widgets might look quite monochromatic 😉
Learn more
How to design your UI Kit
You can add those elements as entire sections or add them into smaller areas or columns. Feel free to edit those layouts as well. From editing texts, to changing colors, or adding and deleting content from layouts, you can bend them to your design as much as you want. Their sole purpose is to help you build your page even faster and simpler.
Before you create widget - General rules
Wherever you want to share your creation with the world or save that element for later use you’ll need to know what to do to send them to the cloud. First of all, all community layouts must be styled on classes and not on IDs. To learn more about the classes check out our tutorial on that topic.
Learn more
Advanced Guide: Selectors and Classes
In short, adding styles on classes requires you to choose the selector tab and create a class. While active all edited styles will be applied to that class. In case you already created your widget without classes there is a way to quickly convert those styles to classes.
1
Select the entire widget you wish to add to the cloud.
2
Open widget styles.
3
In the top-left corner click on the three dots.
4
Select “Extract styles”.
5
This will open a popup window that will automatically extract styles and paste them on new classes. In case you want to name those classes by yourself you can check the “Your class name” checkbox and this will list all the elements inside the extracted widget. You can change available names manually, but they have to be unique.
Another restriction is that the public-made widgets are first sent to be evaluated by our dev team before they can be sent to our library. Be sure that the code looks clean, the elements are properly styled for other resolutions and there is no problematic content displayed in those widgets.
Adding widget to community layouts
After we checked all the requirements let’s add our widget to the cloud.
1
Select the widget you wish to upload.
2
Open widget styles.
3
In the top-left corner click on the three dots.
4
Select “Save to widget library”.
5
This will prompt a popup asking you to fill in required parameters:
a. Category - this will defy in which widgets this layout will be found
b. Widget’s title - unique name for the layout
c. Public tags - help filter the widget in the public space
d. User tags - helps you categorize your private widgets
e. Image - upload a screenshot of said widget. Recommended size is 264x144 px
f. Visibility - set it either to Public or Private
g. Publish layout anonymously - hide your name next to the public layout
h. Create an integration - In a case you have a custom integration you can provide your custom URL
a. Category - this will defy in which widgets this layout will be found
b. Widget’s title - unique name for the layout
c. Public tags - help filter the widget in the public space
d. User tags - helps you categorize your private widgets
e. Image - upload a screenshot of said widget. Recommended size is 264x144 px
f. Visibility - set it either to Public or Private
g. Publish layout anonymously - hide your name next to the public layout
h. Create an integration - In a case you have a custom integration you can provide your custom URL
6
Save Changes.
After you send the widget to our library it might take some time for the widget to be evaluated and available in the public library, but in the “My widgets” tab this will be available immediately for you to use.
Congratulations!
Now you know how to use and create community layouts!
