Communication layout

%3CLINGO-SUB%20id%3D%22lingo-sub-803758%22%20slang%3D%22en-US%22%3ECommunication%20layout%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-803758%22%20slang%3D%22en-US%22%3E%3CP%3EIm%20trying%20to%20add%20the%20images%20to%20the%20web%20part%20like%20the%20following%20link%20for%20a%20hub%20site.%20I%20want%20a%20section%202%2F3%20by%201%2F3%20and%20on%20the%20left%20I%20want%20a%20large%20image%20with%20smaller%20image%20under%20it.%20How%20is%20this%20accomplished%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2FMicrosoft-SharePoint-Blog%2FSharePoint-hub-sites-new-in-Office-365%2Fba-p%2F109547%22%20target%3D%22_blank%22%20rel%3D%22noopener%22%3Ehttps%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2FMicrosoft-SharePoint-Blog%2FSharePoint-hub-sites-new-in-Office-365%2Fba-p%2F109547%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-803758%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-803819%22%20slang%3D%22en-US%22%3ERe%3A%20Communication%20layout%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-803819%22%20slang%3D%22en-US%22%3EIf%20you%20have%20a%20communication%20site%20you%20can%20create%20a%20new%20section%20icon%20on%20the%20far%20left%20and%20then%20you%20will%20see%20the%202%2F3%201%2F3%20layout.%20On%20that%20layout%20in%20that%20photo%20is%20most%20likely%20s%20hero%20web%20part%20with%20single%20item%20on%20top%20and%20then%20a%20quick%20link%20underneath%20with%20the%20images%20or%20something%20similar%20layout.%20On%20phone%20don%E2%80%99t%20remember%20exactly%20but%20you%E2%80%99ll%20see%20it%20in%20there%20when%20clicking%20edit%20to%20the%20quick%20links%20part.%20On%20the%20right%20is%20just%20a%20list%20view%20of%20the%20news%20web%20part.%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-806793%22%20slang%3D%22en-US%22%3ERe%3A%20Communication%20layout%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-806793%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F869%22%20target%3D%22_blank%22%3E%40Chris%20Webb%3C%2FA%3E%26nbsp%3BThanks%20Chris...yes%2C%20it%20appears%20to%20be%20a%20hero%20webpart%20and%20a%20news%20webpart%20to%20the%20right.%20I%20am%20able%20to%20duplicate%20that.%20However%2C%20I%20am%20unable%20to%20duplicate%20the%20four%20boxes%20below%20the%20hero.%20I%20can%20get%20close%20with%20an%20image%20gallery%20but%20cannot%20have%20the%20text%20overlay%20and%20cannot%20link%20to%20a%20page%20from%20them%20which%20is%20what%20I%20would%20like%20to%20do.%20Its%20possible%20this%20is%20smoke%20and%20mirrors%20with%20the%20images%20containing%20the%20text.%20It%20would%20be%20nice%20if%20the%20hero%20webpart%20had%20the%20capability%20to%20change%20orientation.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-806838%22%20slang%3D%22en-US%22%3ERe%3A%20Communication%20layout%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-806838%22%20slang%3D%22en-US%22%3EYeah%20it%20almost%20seems%20like%20smoke%20and%20mirrors%20to%20me%20too%20%3AP.%20Closest%20I%20got%20was%20Quick%20links%20but%20it%20has%20that%20ugly%20overlay%20on%20bottom.%20Image%20webpart%20gets%20close%20with%20Brick%20layout%20too.%20Anyway%2C%20here%20is%20a%20nice%20resource%20for%20you%20to%20get%20ideas%20and%20how%20they%20do%20this.%20%3CBR%20%2F%3E%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Fsharepointlookbook.azurewebsites.net%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fsharepointlookbook.azurewebsites.net%2F%3C%2FA%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-806859%22%20slang%3D%22en-US%22%3ERe%3A%20Communication%20layout%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-806859%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F869%22%20target%3D%22_blank%22%3E%40Chris%20Webb%3C%2FA%3E%26nbsp%3Bthat%20is%20a%20great%20resource.%20Thanks%20for%20sharing.%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Contributor

Im trying to add the images to the web part like the following link for a hub site. I want a section 2/3 by 1/3 and on the left I want a large image with smaller image under it. How is this accomplished?

 

 

https://techcommunity.microsoft.com/t5/Microsoft-SharePoint-Blog/SharePoint-hub-sites-new-in-Office-...

4 Replies
Highlighted
If you have a communication site you can create a new section icon on the far left and then you will see the 2/3 1/3 layout. On that layout in that photo is most likely s hero web part with single item on top and then a quick link underneath with the images or something similar layout. On phone don’t remember exactly but you’ll see it in there when clicking edit to the quick links part. On the right is just a list view of the news web part.
Highlighted

@Chris Webb Thanks Chris...yes, it appears to be a hero webpart and a news webpart to the right. I am able to duplicate that. However, I am unable to duplicate the four boxes below the hero. I can get close with an image gallery but cannot have the text overlay and cannot link to a page from them which is what I would like to do. Its possible this is smoke and mirrors with the images containing the text. It would be nice if the hero webpart had the capability to change orientation.

Highlighted
Yeah it almost seems like smoke and mirrors to me too :P. Closest I got was Quick links but it has that ugly overlay on bottom. Image webpart gets close with Brick layout too. Anyway, here is a nice resource for you to get ideas and how they do this.

https://sharepointlookbook.azurewebsites.net/

@Chris Webb that is a great resource. Thanks for sharing.