For WordPress users who own a membership site that has both BuddyPress and Elementor then a custom members profile page is a key factor to retain users. BuddyBuilder is the best plugin that will help you create and set a custom template for all your member’s profiles. With a member’s profile in place, most of your users get to become more active within your site, since they can edit their data and activity from their profiles. Therefore this makes your site more engaging and interactive amongst the members registered within it. In this tutorial we will walk you through some of the steps that will help you design a unique members profile. You will also get to learn some other cool ways to style your custom profile page. For this guide we will use our own SweetDate theme.
Step 1. Accessing BuddyBuilder
After activating all required plugins, you would then need to access BuddyBuilder where we can start creating the new member’s profile template.
- Go to your WP Admin > BuddyBuilder on the left panel.
- In the BuddyBuilder page under Member Profile, you will find the default members starter profile template. However, to add a new template, Click on “Create New” .
- You will then be redirected to elementor’s frontend where you can start building your custom members profile. You may opt to close the popup box that appears and continue designing your page.
Step 2. Add a Two Column Row Section
The next step we will create a two column section that will hold the crucial elements of our member’s profile. Some of these elements include the profile picture/avatar image and username among others.
- To add the column, click on the red plus icon and select the 2-column row. This should add it in the top section automatically.
Styling the Row Section
To add more styling to this section in order to make it look unique:
- Click on the Style tab
- Under Background Type, select “Classic Background”.
- On Image, Upload your preferred image.
- For the image settings set the as follows:
- Position = Custom
- X-Position = -450px
- Y-Position = -320px
- Attachment = Scroll
- Repeat = select either “Repeat” or “Repeat X”
- Size = Cover
- Note: You can always use different styling options depending on the image you choose.
Step 3. Adding Buddy Builder Elements
After styling the Row you can now start adding your BuddyBuilder elements for the profile page. To do this follow the steps below:
- Go to the main elements panel by clicking the dotted box
- Scroll down to “BuddyBuilder Member Profile” elements.
- Drag and drop in the Avatar module on the left column of the row we created above.
Styling Avatar module
After dropping the Avatar element it should automatically open its settings on the left panel. We need to style it a little bit so it looks uniform and unique.
- Under the Style Tab, expand the Avatar section.
- Set Alignment to Center
- Then set Width to 170px
- On Box Shadow add “Spread” to 10px
- Then set Border Radius to 30px on all sides.
To add a margin on the avatar so that we have a bigger view on the background image:
- Click on the advanced tab.
- Under margin select percentage % units
- Then enter 5% on the top margin
Step 4. Styling Right Column and Adding other Elements
In the right column we are going to add several BuddyBuilder Member profile elements that will show more information about the member. However these elements are mostly text and thus may be less visible with a background image. Thus we need to style the column with a background color to make the elements more clear.
- To do this click on the right column icon on the top left.
- This opens its settings, proceed by clicking on the Style tab.
- Under Background, select background type as “Classic”.
- This time use a background color, we used white #FFFFFF with an opacity of 0.85. To set this you can simply enter it as: (rgba(255, 255, 255, 0.85))
- Then proceed to the advanced tab and increase the column padding to have a wider view. Set the padding as 15% for Top and Bottom and 5% for Left and Right sides.
Adding Username Element
By now you are ready to start adding and styling the elements for the right column. To do this
- Go to the main elements panel by clicking the dotted box
- Scroll down to “BuddyBuilder Member Profile” elements.
- Drag and drop in the Username module on the right column.
- Set Alignment to Left
- Under Typography, choose the font family as “Poppins” and change size to 40px.
Adding Meta Element
Below it add another module this time for meta to show when the member was last active. Style the text of the meta as:
- Alignment = Left
- Under Typography, choose the font family as “Poppins” and change size to 15px.
Adding Action Buttons Element
The next thing is to add action button elements just below the meta module. The action buttons are used in the member’s profile to make actions such as adding a friend, sending a message cancelling a friend request among others. To add one:
- Go to the main elements panel by clicking the dotted box
- Scroll down to “BuddyBuilder Member Profile” elements.
- Drag and drop in the Action Buttons module below the meta element.
- Under General Buttons styling
- Set Alignment to Left
- Under Display, select Block (shows the buttons vertically).
- For spacing use 10px (spacing between the action buttons)
- For width use 30 px (width of action buttons)
- Under Text Typography, choose the text color as “white” and Background color as “blue” or any color of your choice.
- Then click on the Hover tab and select a different color for the Background.
Step 5. Adding New Section with Last Activity Element
After completing the first section that holds the avatar and some member elements we need to add a second section to display the member’s last activity.
- To do this, add a Row section below the top row. (You don’t have to style this row).
- To add the last activity element, go to the main elements panel and scroll to BuddyBuilder elements and drop the Last Activity module in the row you just created. You can style the last activity module as:
- Alignment = Left
- Text Color = Black
- Under Typography, choose the font family as “Poppins” and change size to 20px.
- For Link styling use a different text color e.g. blue.
Step 6. Adding a Navigation Element
In this step we will include a navigation menu which will be used to display various activities and additional information about a member. The navigation module has different elements like counters which display a specified number depending on the item. For instance it displays “messages” item with a counter showing the number of unread messages.
- To add the nav element again first add a Row section below the last activity module.
- Then go to the main elements panel and scroll to BuddyBuilder elements and drop the Navigation module in the row you just created. You can style the last activity module as:
- For Navigation Content, set Background color as “white”.
- On border type select “solid”
- Set border width to 2px
- Choose your preferred border color (e.g. black)
- On Content Padding enter 5px on all sides.
- Proceed to the Navigation item and set item padding to 10px on all sides
- Then go to the Counters option and style them as:
- Under Spacing use 10px
- Under Normal tab set
- Counter text color = white
- Counter background color = blue
- Under Hover and Active tab select different colors for the background.
Step 7. Adding the Content Module
Lastly we need to have a content section that will show us further information about the member and how he interacts with the site. The content section includes a navigation tab that displays the member’s info such as personal, mentions, friends, groups etc. In the content module you may require the pro version of the BuddyBuilder plugin in order to style and customize its settings. We will simply focus on showing you how to add it.
- Therefore first add a row section below the Navigation module.
- Next, click on the main elements panel and scroll to BuddyBuilder elements and drop the Content module in the row you just created.
Once you are done with this step you can now go ahead and save the template and give it a name that you can easily remember. This template will be used as your default member’s profile in your entire site. The final member’s profile should look as shown in the image below:
And That’s It!
