Invision Community 5: Page Builder

[Ehren]

 

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

[ExoTech]

It would be great if we could use a minimum content for all areas. We use Invision Community as a Knowledge Base for our customers and we need our customers to focus on the relevant content, nothing more. For example, they don't need to see or know who started article or when.

[David N.]

Fantastic new features! Lots of possibilities. It'll take time playing with all of this to realize all the power under the hood. Thanks!! 🙂 

[Hatsu]

Awesome! 🤩

[Starship]

That's actually insane, I love it!

[Matt C.]

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

[Mike G.]

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

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

[Dreadknux]

This is really incredible, thank you for all the really hard work that has clearly gone into this! I can't wait to try it out. 

[Clover13]

That's beautiful! Really well done!  Great video identifying the limitations of v4 and addressing enhancements to close those gaps.  Looking forward to giving this a try!

[beats23]

Yes the new page builder looks very nice.

I really want to take a slice.

Without rolling the dice.

IPS v5 is my first choice.

Well done folks. Love the new page builder 😍😍😍😍😍😍.

[Jordan Miller]

First order of business:

 

Second:

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. 

Like this, but for Topics 😄

 

Anyway, looks super polished and slick! Nicely done! 

[Ocean West]

That was very poetic - awesome job. 

https://suno.com/song/2c3a30e9-d29d-4a81-8c6b-1e0745594c5a

https://suno.com/song/cb2063a0-531a-437c-8e77-11eafcd748b4

[annadaa]

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.

 

[Joel R]

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? 

[Interferon]

It took me a while to realize each line was rhyming. 

From now on, I demand all documentation and communication from IPS come in the form of a rhyming poem.

[abobader]

Great work.

[Ocean West]

Along with @Joel R suggestions - I would like (some) blocks (the first sections under pages) to have a temporal option -  when they go live and how long they live or if they only need to be active during a specific scheduled repeating time.  Sometimes we may need to prep stuff that is embargoed and want to get it setup prior for it to go live at a future date and time. 

Example I have a third party who has a daily broadcast stream I would like for their feed to appear when they are online. But that block disappears after the stream. 

[Ocean West]

Another feature that would be awesome - a way to reuse blocks from one page to another page. If you spend time adding blocks and dialing in the settings to the Forum Index but you may want that same set of widgets on the Blog  you have no choice but to start all over - If settings are not identical the presentation may cause distraction, people will notice and not make the site feel cohesive. 

In my mind If I am on the blog index there was an object on the left to drag and drop (existing configured blocks ) I drag to the target well - some interface that will show a card and allow me to pick existing configured blocks that are already present on other pages which appear in this target well.  

Perhaps some mechanism that knows that the blocks configured here are shared on other pages, If I modify a setting on one page an option to update these settings on all other pages that share this collection of blocks.  🙏

[SC36DC]

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! 🙏

[A Zayed]

Awesome 👌 

[Gary]

Huge update and an awesome touch to the video, Ehren. On ya mate! 🦘

[virap1]

Thank you. Can you please include a picture showing how the cover photo will appear within pages? At the moment in v4 this is handled terribly and I hope this is changed.

Will we be finally be able to add meta information like description/keywords via rest api?

Edited June 30 by virap1

[SoloInter]

All these examples are done with "Files". We are agree that it's not limited to "Downloads" but really for all kind of Node ? And we are agree that is not available on Alpha 2 at this time right ?

Edited July 1 by SoloInter

[Ehren]

7 hours ago, SoloInter said:

All these examples are done with "Files". We are agree that it's not limited to "Downloads" but really for all kind of Node ? And we are agree that is not available on Alpha 2 at this time right ?

Widget Designs are still being rolled out and will be available for many widgets once I’m done. They are not finished in Alpha 2. 

[Joey_M]

Certain aspects of v5 are exciting and really push the imagination as to what you can do. The controls and layout designs for widgets are awesome, giving much more variety.

The video has moments that are reminiscent of Dr. Seuss’s style. 😄