In this video, we show you how to modify the look & feel of the default member profile page.
Key Topics:
- 1:15 – Design Settings
- 3:41 – Profile Cover Photo
- 5:50 – Custom CSS
- 10:22 – Remove Header & Footer
- 11:56 – Summary
- 13:26 – 3rd Party Designs & Developers – Brilliant Directories Marketplace
Copy and paste the following code into the Additional Footer Code section of your Design Settings. This will apply the code only on profile pages that contain a Profile Cover Photo.
<script>
document.addEventListener("DOMContentLoaded", function() {
if (document.querySelector("img.coverPhoto")) {
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = `
.member-profile-header {
margin-top: -110px;
background: #f5f7fae8;
padding: 20px;
}
.profile-image img {
margin-top: -56px;
border: 4px solid #fff;
box-shadow: 0px 15px 30px 0px rgba(0, 0, 0, 0.1);
}`;
document.head.appendChild(style);
var makeConnectionDiv = document.querySelector('.make-connection');
var memberProfileHeaderDiv = document.querySelector('.member-profile-header');
if (makeConnectionDiv && memberProfileHeaderDiv) {
// Check if .make-connection div is before the .member-profile-header div
if (makeConnectionDiv.compareDocumentPosition(memberProfileHeaderDiv) & Node.DOCUMENT_POSITION_FOLLOWING) {
memberProfileHeaderDiv.parentNode.insertBefore(memberProfileHeaderDiv, makeConnectionDiv);
}
}
}
});
</script>
Have you ever felt like your membership directory could use a little extra sparkle? It’s the face of your business or community online, after all! If it feels a bit lackluster, you’re not alone. Many organizations realize that their member profiles and business listings could be more engaging, but aren’t quite sure how to make that happen. Well, good news: it’s simpler than you might think!
Refreshing your membership directory isn’t just about aesthetics; it’s about creating a vibrant, informative, and interactive space that reflects the dynamic nature of your community. With a few straightforward tweaks, you can turn your directory from a basic roster into a compelling resource that benefits both your members and your organization. Let’s explore these changes and why they’re crucial.
What Are Some Easy Ways to Enhance Member Profiles?
1. Make Profiles More Personal and Relatable
First things first: let’s add some personality! Ditch the standard template for something more customizable. Encourage members to share not just their professional credentials, but also a bit about their personal interests, achievements, and maybe even a fun fact or two. This humanizes your directory and fosters a sense of community.
Example: Imagine a profile that not only lists Jane Doe’s business services but also mentions her love for mountain biking and her recent volunteer work. That’s a profile that connects on multiple levels.
2. Include Rich Media
Photos and videos can be game-changers. They offer a visual insight into a member’s world. Encourage members to upload high-quality images or short introduction videos. This multimedia approach can significantly boost engagement and make your directory more visually appealing.
How Can Business Listings Become More Engaging?
3. Add Reviews and Testimonials
There’s nothing quite like a glowing review to boost credibility. Allow members to feature testimonials or ratings from clients or colleagues. This not only enhances the profile but also provides valuable social proof to prospective clients or partners.
4. Offer Real-Time Updates and News
Allow members to post updates or news related to their businesses. Whether it’s a new product launch, an upcoming event, or an award, these updates keep profiles fresh and relevant, encouraging repeat visits.
5. Integrate Social Media
Linking profiles to social media accounts can create a more holistic picture of a member’s professional life. It also drives traffic between your directory and members’ social platforms, increasing visibility and engagement for both.
Why Are These Changes Important?
Now, let’s talk about why these changes matter. A dynamic, engaging directory does more than just look good; it acts as a powerful tool for connection and growth. Members feel seen and valued, which boosts retention and loyalty. Potential clients or partners who visit the directory get a rich, multi-dimensional view of your community, making them more likely to engage.
But there’s more! An engaging directory also:
- Enhances SEO: Fresh, diverse content improves search engine rankings, making your directory more visible online.
- Increases Traffic: Engaging profiles are more likely to be shared, driving more visitors to your site.
- Supports Networking: Rich profiles facilitate better networking opportunities among members.
How Can You Implement These Changes Effectively?
DO: Provide clear guidelines and support for members to update their profiles. Offer templates or inspiration for personal stories, media uploads, and updates.
DON’T: Overwhelm members with too many requirements or complicated procedures. Keep it simple and user-friendly.
Case Study: A local business network revamped its directory by incorporating these changes. The result? A 30% increase in member engagement and a notable rise in web traffic, with members reporting greater satisfaction and connection with the network.
Are These Changes Difficult to Implement?
Not at all! With the right tools and a bit of creativity, these changes are quite manageable. Platforms like Brilliant Directories offer customizable options that make it easy to enhance your directory. They provide the framework; you bring the flair!
Remember, the goal is to create a living, breathing directory that evolves with your community. It’s not just a list; it’s a showcase of the vibrant individuals and businesses
that make up your network.
Ready to Elevate Your Membership Directory?
Revamping your directory is a step towards a more connected, visible, and thriving community. By making profiles more personal, integrating rich media, adding reviews, offering real-time updates, and linking to social media, you transform your directory into an engaging, dynamic resource.
And the best part? You don’t have to do it alone. Brilliant Directories is here to help. With our easy-to-use platform, you can bring these ideas to life and see the difference for yourself. Why wait? Start your 7-Day Free Trial now and take the first step towards a more engaging, effective membership directory!
AI-Generated Transcript – Please excuse any inaccuracies
Introduction (00:00:00)
- The introduction begins with a greeting from Jason, who mentions that there was a webinar the previous day where a question was asked by Wilf Barnes about modifying the design of standard profile pages that members receive on the website (00:00:00).
- The webinar demo site is being used to demonstrate the sample listing for a person named Lisa Jones, which has a simple design similar to a LinkedIn profile or a simple bio of a business, including a profile image, call to action buttons, and content added to the site (00:00:08).
- The profile page for Lisa Jones includes an overview tab for general information, a sidebar with a lead form or other calls to action, social media share links, banner advertisements, and more, making it a good page that covers all the necessary boxes for most business directories (00:00:21).
- The profile page design is comparable to a Yelp profile, but Jason will show ways to modify the page using point-and-click design settings and custom CSS design to give it a special touch (00:00:42).
- The goal is to provide ways to modify the standard profile page design, which currently has a basic setup with a profile image or logo, some call to action buttons, and content, to make it more unique and visually appealing (00:00:16).
Design Settings (00:01:15)
- The design settings for member profile pages can be accessed in the admin area, where various options are available to customize the page’s appearance, including the profile page header, which can be set to align with the sidebar or be full width (00:01:15).
- Setting the profile page header to full width allows the profile photo to be displayed larger, and the call to action buttons and badge icon to be slightly larger, creating a better showcase in some cases (00:01:39).
- The sidebar can also be removed altogether if it is not needed, by going to the sidebar alignment settings and selecting “Do not display” for member profile pages, which can help to open up the page and make it more focused on the bio information (00:02:37).
- Removing the sidebar can be useful in cases where there are no extra calls to action, banner ads, or related links that need to be displayed, and can help to create a cleaner and more streamlined page (00:02:41).
- The design settings can be used to create a before and after comparison of the page, by keeping the original page open and making changes to the design settings, which can be useful for demonstrating the effects of different design options (00:01:21).
- The member profile pages module in the design settings section provides various options for customizing the page’s layout and appearance, including the ability to adjust the profile page header and sidebar alignment (00:01:31).
Profile Cover Photo (00:03:41)
- The profile cover photo feature allows members to add a representative image to their profile, similar to those found on Facebook or LinkedIn, and this feature is available as an add-on on the Brilliant Directory site, which can be found by going to the add-ons in the main menu and searching for “cover” (00:03:47).
- Members can upload a horizontal image to use as their profile cover photo, and they can get creative with the content of the image, such as adding text, calls to action, or their phone number, and in this case, a simple photo of a modern home on a lake is used (00:04:22).
- The profile cover photo can become a billboard at the top of the member’s profile page, and it can be used to add a personal touch to the page, with the option to customize it further using CSS rules (00:04:45).
- The profile cover photo feature can change the aesthetic of the member’s profile page, making it feel more like a bio page or a listing, depending on the audience and the desired aesthetic, and it can be compared to profiles found on LinkedIn or Yelp (00:05:14).
- Custom CSS rules can be used to modify the profile cover photo and add a personal touch, with the goal of making the profile page more unique and engaging, and this can be done by adding a few CSS rules to the page (00:05:40).
Custom CSS (00:05:50)
- To customize a member profile page, a margin top can be added to push the profile photo and section up into the cover photo image, and a background color can be added to improve text readability (00:05:53).
- Using the same background color as the site is recommended for a seamless look, and adding a little bit of opacity allows the profile image to be visible behind the text (00:06:18).
- Adding padding to the cell and moving it up a bit can enhance the overall design, and using custom CSS can help achieve the desired layout (00:06:52).
- Adding a piece of code to the custom CSS settings can help match the background color to the existing site, and refreshing the page can show the updated design (00:07:37).
- Further customization can include lifting the profile photo, adding a border, and adding a drop shadow to create a more interesting and layered design (00:08:02).
- Using point-and-click design settings and a bit of custom CSS can help create a unique and personalized profile page with a larger profile photo, a cover image, and a more layered design (00:09:36).
- The custom CSS tweaks can include centering elements, adding borders, and creating depth and movement on the profile page, making it more interesting and allowing members to add a personal touch (00:10:09).
Remove Header & Footer (00:10:22)
- Removing the website header and footer from a member’s profile page can make the page feel like a dedicated bio, which is often done for premium or top-tiered membership plans, and this option is available for consideration (00:10:22).
- The decision to remove the header and footer depends on the membership plans being offered and the structure of the website, and it is not recommended for everyone, but it is an option to have in mind (00:10:45).
- To remove the header and footer, the membership plan can be edited, and there is an option to hide the website header and footer in the profile page settings, allowing for flexibility in choosing which elements to remove (00:11:11).
- After removing the header and footer, the page can be refreshed to see the changes, and although the header is gone, breadcrumbs are still visible, allowing users to navigate back to the search results page or the website’s homepage (00:11:31).
- Additionally, the breadcrumbs can also be removed altogether if desired, to create a solid bio page for the business, and there are a few other tips and tricks that can be applied to customize the page further (00:11:43).
Summary (00:11:56)
- The profile page can be made more curated by adding a custom design, which is suitable for a majority of websites, especially local business directories, and gives a Yelp-like feel with a direct display of the logo, business phone number, and contact information, all in one place (00:11:57).
- This design can also work for other niches or markets, such as an artist directory, by showcasing something else in a similar way (00:12:20).
- A custom bit of CSS was added to the page to achieve this design, and it is available for reference (00:12:32).
- To ensure the design is effective, a quick mobile view check was performed, which showed that the design rules created do not apply, but the page still looks okay, with only a minor issue where the profile photo gets in the way of the breadcrumbs at the top (00:12:44).
- The design is not perfect, but it is a good example of the direction that profile pages can take, and further customization guidance is available from the BD support team via email for simple and basic changes (00:13:10).
- The BD support team can provide guidance on customizing profile pages, but will not get too complicated in their suggestions (00:13:19).
3rd Party Designs & Developers (00:13:26)
- For comprehensive design or styling of sites, users can visit marketplace directories like brillianddirectories.com to hire and work with a certified BD expert, which can be a great option (00:13:26).
- When working with a developer, it is recommended to keep project scopes small and simple, especially when starting out, to set everybody up for a win, and this can be achieved by starting with smaller requests (00:13:39).
- Building a relationship with the developer through good communication is crucial, and users can start by making smaller requests to establish a strong working relationship (00:13:49).
- The member profile pages can be modified using point and click settings, as well as with a touch of custom design, which is available to users whether they know how to do it themselves or work with a developer (00:14:05).
- Users have access to custom design options, and they can share their thoughts and feedback in the Facebook group or by leaving comments below (00:14:17).
