Marco Friedmann

In my last post, I showed the various layout alternatives of the news teaser webpart. In this post, I am experimenting with variantions of the News teaser Webpart and the hero teaser Webpart.

Variation 1:

Here I use a two column layout. In the left column I use the news webpart with top story layout and in the right column two hero teaser webparts on top of each other.

Variation 2:

This time I use two rows. In the first row the news webpart (top story) and below a 3 column layout with a hero teaser webpart in each colum. You could also put more than one tile in the webpart and use it as a carousel.

Variation 3:

Also two rows. This time with a hero teaser webpart at the top (one time in layer layout and one time in tile layout) and the news teaser webpart below.

Variation 4:

Almost the same as variation 3, this time with two tiles in the top row.

Variation 5:

This time I use a two column layout again with the News webpart to the left, this time side by side and on the right two hero teaser webparts on top of each other.

Variation 6:

And as last variation a three column layout. In the first column I use the News webpart in list layout and in the other layouts the hero webpart.

Conclusion

With the modern pages, the biggest challenge seems to be to choose a good combination of column layouts and webparts. What are your best combinations and  goot practices?

Today I am experimenting with the news teaser webpart in the various column layouts:

General features

The newsteaser comes in three layout options, top story, list and side-by-side which I will cover all in this post;

One column layout

Top Story

Since the layout changes with the number of news, I show the varoius layouts from one up to five news:

If you have posted more than four news, the oldest news disappear and you can access then via the “See all” link as shown below:

List

Side-by-side

Two column layout

Top Story

With more than three news, the layout stays the same.

List

Side-by-Side

As you can see, list version and side-by-side version render the same in two column vayouts.

Three column layout

Top Story

The rendering seems to be the same as in the two column layout. But if you include the same webpart in another column, it is rendered differently:

List

Side-by-side

Conclusion

The news teaser webpart offers many layout possibilities you can choose from when designing your page. In my next post, I will speak about combinations of the news teaser webpart and the hero teaser webpart.

In my last post, I showed you some ways to use the tiles version of the hero teaser.

Today I want to show you the differences between the layered and the tiled version. In the table below you can see the different input and customization options between the two versions:

As you can see, the main differences are the description field, the topic heading and the image type.

Possible use cases and conclusion

Layered version

The layered version looks the same as the tiled version in two- and three column layouts. Considering this, the layered version has not as many layout possibilities as the tiled version. The layered version makes sense, when an introductory text is needed for the underlying content. But the text field does not accept line breaks. The topic heading can be used, if entries with more than one topic are shown. Or you could use it to show the date, if the entry is some sort of press announcement as showed below:

Tiled version

Contrary to the layered version, the tiled version can be used where no additional explanation is needed. As shown in the prevoius post, you can also use the tiled version a sort of a content navigation.

My next topic will be the news teaser webpart.

In this post, I want to show and discuss the many possibilities of the hero teaser web part:

General Features

The hero teaser Comes in two layout options, tiles and layers. In this post, I will only cover tiles. You can choose up to five tiles.

Each tile consists of the following elements:

• link
• title (optional)
• image or colored box
• call to action link (optional)

One column layout

In the one column layout, the teaser looks like this:

Due to ist responsive layout, the teaser changes to a carousel in Screens with less width:

This responsive behaviour gives us the possibility, to use this in two or three column Layouts.

Two column layout

In the two column layout, the pictures get a stretched look, but still ok.

Or even three columns

With three columns, it is looking good again.

The Version on smaller devices is looking ok:

Conclusion

The hero teaser webpart offers some interesting variations für creating good looking pages. At the moment, I see problems concerning the white space between the web parts and some issues with the property pane:

Your ideas about the hero teaser webpart?

In the next post I speak about the differences between tiles and layer versions.