The Vibe Social framework ( also known as VibeBP plugin ) is an extension of BuddyPress. It is a HeadLess WordPress plugin which converts BuddyPress into a Uber cool social network. Vibe Framework is powered by the cutting edge technologies like React 17 , Firebase, JWT, PWA and many more.
Unlike BuddyPress where the member profiles are built using hard coded templates, the member profiles in Vibe Social network are powered by Layouts which can be built using Elementor or Gutenberg.
In this post we present you stunning profile layouts we created using Elementor Page builder for Vibe Framework, with Download links and Implementation details.
Note that each of these profile layout uses Custom Fields which the admin will need to create.
Jenny : Vibe Member Profile 1 [ Elementor ]
Profiles fields created are Traits for Table with Rows as Teaching, Early adopter, Money conscious, Hard working and another table profile field Personality with rows. A Location field with Phone number field and some Custom CSS. VibeBP – Settings – BuddyPress- Size of Avatars is set to 225×400.
Wina : Vibe Member Profile 2 [ Elementor ]
Built using same profile fields as above. The Avatar dimensions are changed to 460 x 460px. Custom CSS embedded in the Elementor template.
Prodigy : Member Profile 3 [ Gutenberg ]
Built using similar fields. as above. We converted the Repeatable icon field into the timeline without icon and without title. The repeatable field come with 4 different style options.
Jessica : Vibe Member Profile 4 [ Elementor ]
This is another Elementor profile layout. Here we created a custom profile field called “Favorite color” when embedded in the Elementor profile field, it creates 2 css classes : “favorite-color_background” and “favorite-color_color” with the selected color. The former sets the background while the later sets the color with the selected color. See video for the effect.
Karla : Profile Design 5 [ Gutenberg ]
Another Gutenberg profile. The custom CSS for this profile is added right inside the profile. Adding custom CSS classes and using them to style the profile field. Another slick way to customise styles using Gutenberg.
These templates are using core blocks available in the VibeBP .There are 2 table blocks ( PRogress bar style and Star style ), 1 Repeatable block, 1 External icons block for social links, one color block. The download are mostly in zip files, you have to unzip them to get the JSON files which will be imported. Note that since profile fields are not same, you will have to re-map the profile field with appropriate field type. We are adding these as standard Profile layouts in Vibe Frameworks new installer.
To import Elementor blocks see this link
To import Gutenberg blocks see this link
Optionally see this video on creating custom profile layouts
Would this VIBEBP play with Buddy Boss implementation of Buddy Press?
We have not tested but there is every reason it should work with BuddyBoss platform as well.
these elementor templates are not loading the same design as in demo here
you need to prepare the profile fields as well.