Introducing new Page Builder tools in Invision Community 5

Widgets are an incredibly powerful tool for displaying curated content of your choice on any page of your community - and despite the extensive array of settings for customizing their data, they've often been limited in terms of their design options. But this changes thanks to the new Page Builder tools in Invision Community 5!

Widget Designs

Previously in version 4, widgets would often have 2 designs: one for the main content area and a more minimal version for the sidebar. This worked well, but it meant your page was very limited in terms of design as you'd typically need to use the same table-like layout for most widgets. Anything beyond that would typically require a custom block to be coded, often with additional HTML or CSS.

Version 5 offers much more customization by allowing you to change the design of each widget with the click of your mouse - no coding necessary! When dragging a widget onto your page, a new toolbar at the bottom of the page appears, holding all of the widget design options. Lets take a look at some below!

Grid

A familiar a very layout used elsewhere in the suite, the Grid design neatly aligns entries in a grid with a large cover photo sitting up top. A great combination of visual imagery alongside meta data such as entry descriptions.

 

Featured

A spacious list and a great way to feature content, pardon the pun.

 

Wallpaper

Perfect for content which includes uploaded cover photos or thumbnails! The Wallpaper design stretches each image to make it occupy the entire background, overlaid by a minimal amount of content. A subtle gradient sits behind the text to ensure it's easy to read, even on detailed images.

 

Rows (table)

The Rows design is a very familiar one, used very often throughout other areas of the suite. Content is displayed in a neat table, that collapses into a more compact design on small screens.

 

Minimal

Great for displaying a lot of content in a compact area! Minimal only shows primary information and hides meta data such as entry descriptions and stats. Great for sidebars, or areas with limited width.

 

Minimal Grid

The Minimal Grid design removes large meta information and displays content in a nice, compact grid. A nice option for displaying a lot of content while being cautious of vertical space.

 

Carousel

The Carousel option is quite unique because it can be applied in tandem with other widget designs, and is a perfect way to make the existing layouts even more compact. For example, by default, the Wallpaper design is aligned as a grid, but with the Carousel option enabled, the layout is converted into a carousel instead:

Here's another example, using the Featured and Carousel options:

 

Fun fact for developers: All of these designs use the exact same HTML structure; the only thing that differs is the class name on the parent element. This makes it incredibly easy to adjust the design of your own widgets without needing to manually code multiple layouts.

 

Widget Areas

Version 4 was often quite limiting when it came to aligning widgets in pages. Widgets could be dragged into a stacked, vertical list but that was typically as far as you could go in terms of design. Version 5 introduces a new concept called Widget Areas, which allow you to align multiple widgets in a variety of ways. Lets take a look!

To create an area, you simply need to drag one widget on top of another.

By default, they'll align themselves into a grid, but can be realigned with ease by using the toolbar at the bottom of the page. The toolbar also holds controls for adjusting the width of widgets, and the gap between them:

 

Widget Designs and Widget Areas in Version 5 make it incredibly easy to create a completely custom page in a matter of seconds. We're really excited for you to get your hands on these new tools in Invision Community 5, and are looking forward to seeing all of these new page designs in the wild, in the very near future!

View full blog entry

That's actually insane, I love it!

This looks like a huge step up from IC4 widgets. Will you be able to edit the widget titles on predefined widgets, unlike IC4?

Thanks for all the thought and innovation put into the new pages functionality.

P.S. Dr. Seuss would be proud of that video.

Thank you, this seems to be a significant évolution.

 

To align with the power of the IPS structure and to continue differentiating from what exists elsewhere, it would be useful to have the option to display content only to specific members, to specific groups, or after a certain number of days of registration.

 

This would allow for the implementation of powerful filters. Additionally, it would also be beneficial to display only content with a specific tag, and so on.

 

1. I'd like to second the comment above, to ensure we have filter / permission options per widget.  

The idea is to build a truly customized community as a user grows in their user journey.  New members might see more introductory and popular topics; returning members might see content that they started or participated in.  

2. Will IPS consider some basic meta options for widgets such as: 

- enable / disable Widget title

- widget title is a link 

- enable / disable border 

As a use case, in my Downloads section, I've built simple widgets for each category to to showcase the latest files per category.  It would make sense that clicking on the widgets title would go to respective file category. 

3. We're still going to have options to hide / display individual widgets on mobile vs tablet vs desktop? 

I can see community owners building more elaborate widget areas for desktop, but more streamlined for mobile.  (In my community, I've studied how my superusers are on desktop, my sales conversions happen the most on desktop, but 60% of my regular traffic is mobile. ) 

4. I'm curious about other clients thought process around spacing between widgets.  Is there a widget area where you would want tightly clustered widgets versus spread out widgets? 

5. Are these widget display options are available for database records? Any changes to default list options or display options of databases? 

For the love of God and those in need,
Grant full access, I humbly plead.
With Creator's plan, they'll build and grow,
A chance for all to let dreams flow.

PLEEEASE bring Page Builder Full Access to the CREATOR plan! 🙏

Awesome 👌 

On 6/27/2024 at 2:20 AM, Jordan Miller said:

This looks awesome! Can't wait to give this a shot. 

One clarifying question: I presume these widgets and that functionality will work for building a page showcasing Topics? 

I'd love to see what the wallpaper version of Topics looks like. In my head, I'm thinking: a user posts a topic, but is required to upload an image, so that when the topic appears on the feed (on the page I've created), it has an image.

Your presumption is correct! 🤝 Topic feeds will display the "share/embed" image if one exists. For the moment, a placeholder is shown for topics which don't have an image in the first post, but we can revisit that in the future if needed 🙂  Two example screenshots below using Grid and Wallpaper:

 

19 hours ago, Ehren said:

Your presumption is correct! 🤝 Topic feeds will display the "share/embed" image if one exists. For the moment, a placeholder is shown for topics which don't have an image in the first post, but we can revisit that in the future if needed 🙂  Two example screenshots below using Grid and Wallpaper:

 

Can you change the name "Topics", also is there a rough estimate of when we should expect to migrate over to plan things accordingly? Lastly will classic license users have access at the same time as your monthly paid members?