Modern Pages Designing In SharePoint Online.

online tutorials in this video we'll discuss how we can create a modern pages and how we can modify that and we'll discuss each and every aspect of the modern pages in this session so we have plenty of new web parts also introduced in sharepoint online we'll discuss what are the web parts available in sharepoint online and especially we need to discuss about a hero web part in that and also we when we create any page and it will store in a page library and that also will discuss and there is a page analytics and which is introduced in sharepoint online we can able to see and how many times it is open how many unique visitors for this page also we can able to see for that and also we have a draft concept for the page and we can publish the page and we can discard the changes we don't want when we are doing some modifications in it okay let's starts with page now this is a home page which is already created by default when we create a communication site and this page will create automatically and you can able to see this this web part is named as an hero web part and we have news web part below that and which also automatically adds to your site page when you create a communication site we have an events web part and you can create a calendar that calendar you fetch here and you can show to the users something like for holidays for a special event or maybe anything meetings related stuff also when you entered inside the calendar that you can fetch back into your page and also it gives better look and feel and from here also you can able to create the event and you can able to see the previous events also the next one is document library thing and this is documents currently i'm not uploaded any documents into this document library so that's why it's not showing anything here so these four web parts automatically creates when you create a communication site we'll go back to this site action gear and here we have an option named as an added page from here you can able to create a modern page so add a page and here we have an options templates we have basic text blank and visual and here there is a welcome message and showing i'm new at this if you are creating a page or new post for this first time you learn the basics in this interactive tool but i don't want and you want to skip yes i have done this before you can skip skip this one or you can hit let's go but i'm skipping okay done so if you want to use any kind of visible kind or a basic text you can able to create or you can create from the blank now just hit create page it will create a page i close this one now here we have an option to give a name to the page i'm just giving more run it's modern page that is a title and here we have an option to insert the image also and you can get it from your local system you can choose and you can get it from your your local system are we have this option edit web part option we have change image option so when we hit this change image option you can also upload from your local system there is upload option and there is a site option and you can get it from any of the any of the sites maybe this site you can able to get from document library any of the library which you have or if you have a link you can paste the link and that will get it and there is a onedrive option and another option is from the web search you can do it from the web search and this one is stark images and here we have plenty of images which is available you can search if it is for business if it is for medicine if it is for college related you can able to search from here for example i want to search for business we'll see is there any related images for their yes we have couple of so you can pick any one i'll pick this one insert you've been able to see this is inserted and before that we have an edit wave part option and this is the change image option when you hit this edit and it will show here if you just overlap that you can you want color black see this style you want plain and you want image and title and you want to overlap this one this looks somewhat better so that's i'll keep this one next to next one is alignment so if you want to center align your text you can or you want left alignment you can do that and here text about title see here enter text now i'm entering some business see when i type here i can see where it is coming here it is coming so if you want to type some message about this one and you can type here the next one is show text black about it so you you want to show there yes or you don't want to just click no and if you want yes show publisher date now here we have a publish option and if you want to give the date also you can click yes and you can see the date here if you don't want you can remove that this is alternative text which provides alternative text to describe the background image which means if the background image is not appearing or maybe it is taking some time to load and this text will appear but here we we don't need this one but if you are putting some images from any web or some somewhere and meanwhile when it is rendering into the page meanwhile you want to show some text and you can use this alternative text so it's not required here that is about this web part and when you complete you no need to save just close this one there is no save option that automatically saves and that is about this webpart and come back here here we have an add your add your text here if you want to add any text you can add here or if you don't like to enter any text here you can simply delete this web part you don't need just delete that now i want to put hero web part on this place so for that we have a plus symbol here when you click this plus symbol so we can able to see the plenty of web parts available here see we have categories also this this is about frequently using and this is text media and content related web parts and this is document less libraries and this is news feeds or conversations related and this is news and people events related and this is about analysis like power bi forms quick charts and this is about the maps kind of things regional information world clock weather so also and this is into advanced if you want to put some code snippet you can directly put code snippet it will not execute it just put that code snippet this is about embedded if you have any embedded code for example youtube embedded code you can fetch you can put here your youtube video will render this is about kindle instant preview and this is about markdown powerapps and my feed so a lot of parts is available and in this video we'll we'll discuss about hero web part and these are the common we'll see image what is image what is divider and quick links and links we'll discuss first we'll discuss about hero web part so when you select this hero webpart by default it will give you complete 5 tiles and this is one two three four five tiles it will give and if you don't like it you want to keep only four tiles yes you can you want two tiles one tile and three tiles of items we'll go with four tiles would be better and here we have layers option one layer two layers three layers and then five layers we have if you don't like it you can go with four two one but we'll go with the tiles i want to go with the four tiles so now we are done with this close it and come back now we have four tiles now if you want to select a link you can hit here i will keep some images i don't want to go to some um images and of course you can you can change the image also for example i'm putting this the link will be available see the link will be available but still if you don't like this and you can change it for example i have the link if you want to change you can and title also you want to give something like this is technologies and you can able to see the title here and show title in the layout yes or no that's up to you you can keep and we have a background choice option also and we have auto selected image which means we are using any any page and the page will render here and you can put some custom image and you can choose some colors and we'll put an image that looks better and then click change here i'll come back to stock images in the stock images you can pick your own image that we discussed um when we are doing for the banner and the same way here also you can put whatever you want and you can pick your chance choices here okay and then i'm selecting this and click insert and you can put the image like this also you inserted an image here you can put a different link you can directly uh insert a custom image for that or if that link contains any any kind of images or it is a page that also automatically renders in this hero web part and we have if you want to move the items yes we have move option you want to set a focal point you want to zoom in zoom out you can do that something like this okay and that is about that and here also you can able to put some links or you can go to stack images will put three four images and then later also you can insert a link behind that now i'll put this inside and then for this under the same same changes same options now this link is coming here and if you want to change the link and you can use this one and you can change it but the image will remain same now here also i want to put some images now come down i'll select this one okay that's done come back here and then go back to stack images and then we put this one there inside now this hero webpart is ready now here we have an option to move a part but we'll add two three web parts and we'll see how this move way part will work and this is a duplicate webpart option so now when you are done with this okay and then when you click this duplicate web part and you can able to see this is a web part and you can able to see the same web part here this is named as a duplicate web part i have this web part i designed it i completed my all settings if i want to duplicate that i can able to duplicate it this automatically creates with the same settings and and the images and the next option is delete this web part we have two web parts then i'll delete this one it's deleted it's deleted without any confirmation message okay now it's deleted we are done with this and if you want to add any web part so when you come here it will add here and also here we understand there is a plus symbol here if you want to add a section you can able to add now here also if you want to add a section you can able to add from here and for example if i am adding webpart here see there is a green line here when i click this one if i try to add a web part that will add in the same section example i'm trying to add a um quick link by part now this is quick links web part and if you want to add the links you can able to add but first we need to understand and this web part and this webpart both are in same section if you want to add the section and you have to go here and if you want to modify the section and then there is a edit section option here well click this edit section option this section contains only one column so there is a two columns option three column one third left and one third right option also available and the background for that also available see for this normally it is white background and there is other background colors also you can pick for example if you want to put like this for this section and that is available here if you go to the next section and you cannot able to see but this special section it is like this now we have the quick links web part if you want to add a link to this quick link and you have to click this one click here and for that again i am putting some all projects list i'm selecting come back here now this is available the link is available here now for this image see this is a link and it you can able to see some globe kind of uh icon here if you want to change that and you can come here and change to custom image or you want to pick icon and you want to change the icon also you can able to change the icon for example i don't like it like that i want to change to this and select it and click you can able to see that here but if you don't like that and if you want to put an image for that yes you can able to put an image as an icon for the quick link as well now we'll choose something different we'll choose a flower here okay you can able to see the flower as an icon here now we'll try to add one more link here now but that link i'm trying to choose not from the recent not from the site i just want to pick from stock images okay so it's something this will pick click insert and this contains this image contains a link now you can able to see that url here and the image here if you take it from a stock images that automatically picks that image here and also here we have the alternative text for the thumbnail image but it's not required and then this is about thumbnail this is about the title for example i have a link but i want to use some text here instead of using that url.com i just want to change this to stock images now see you can able to see the stock images here so if you are done with this you can close this and you can able to see now we have added two web parts now there is a move webpart option here and move a part option here also available so if you click this one come down and this is already selected for moving see so just move that to below of this now you can able to see quick links here and then hero web part is here so if you want to move just we need to click this one and then it will give an option to move that web part now see this is hero apart again quick links where part is here so this way you can move the web parts so every web part have total four options first option is edit web part it give you an option for that layouts and so on so the next option is move webpart the next option is copy which means duplicate webpad and the next one is delete so that is about web parts now we'll discuss about the sections so the very first option we discussed if you want to edit the section you can and you can able to see the layout option on the background option we discussed and the same way we have the move section this also works same as on a web part if you have two to three sections you want to move your section to bottom are in the bottom sections if you want to move to up you can able to do that and the next one again we have the duplicate option and the same section will duplicate and the final one is delete option tell it so we'll see what is this plus symbol now we discussed about this four and we'll see about the new section to create a new section we have to click this button and it will give you the option to select the layout for example i want to choose one third right see now i have two options one here i can insert a webpart here i can able to insert a webpart and this occupies one third of the page and this is another one for one portion so which means if you split this into four and three sections will be here and the next section will be here and also if you want to change this yes i can able to change it to three so but see here when i select this three now it is showing in a different manner it is showing in a different manner i expected this would be one after another and this is coming different it is coming one and two and three not in a vertical order right so to do that now when i close that i can able to see this in a different order so these pages are responsive by default you don't need to design these pages as a responsive if you increase the page size example if you increase the page size now this will change from vertical to horizontal and horizontal to vertical depends upon your page so these pages automatically renders in your mobile devices also you no need to design anything these modern pages are responsive by default so now here i can able to insert one web part and next another web pattern next to another web part here i am trying to insert a image webpart i can pick some image from the stock images then i can able to insert into that particular page select it inside now i can able to insert the image here and then here also for image webpart you will see the webpart options and we have you know if we have youtube you can insert i'll close this one if you want to add a video you can able to add the next one is well put there is a stream also there is document library concept also available if you hit and it will give you an option to select the document library if i select this document library this document library doesn't have any documents inside it so that's why it is not showing anything but you can able to see the documents here also so so this way you can this way you can select and you can insert the webparts now in the initially we discussed what are the web parts were available so we'll discuss about couple of those now youtube web part is available directly here but that is not that is not available in the on-premise environment and we have couple of modern web parts also available here something like bing web parts and a stream is available quick links in on-prem is also available now we have an uh twitter option also so if you have any twitter account and that feeds also you want to add into here yes and the very interesting countdown timer also available we'll add this one here see you can able to see this and you can add the title and now the countdown is start from 23 hours 41 but you can able to modify this now see the date is june 5th now i'm changing to 8 and then click add you can able to see now i don't want to add any image for here cancel it and then close this one and you can able to see the time of three days 23 hours 41 19 seconds the company have any kind of events any kind of specific dates or projects going to start and they can able to put this kind of timers also and also we have different kind of web parts also we'll discuss those so this is document library if you want to show your file on the page you can go with the file viewer and this is about highlighted content if you want to show any content on this page maybe you want to filter and you want to show as an highlighter content yes you can insert a list list properties page properties and recent documents also for example last 10 days documents or maybe last one day document from multiple libraries you can and this is for save it later if you want to show the sites you can and this is these two things about yammer if you if you have yammer account and those conversations you want to put on the page you can and yammer highlights also you can and this is about events and it will fetch from any calendar this is about group calendar in your organization there is there is a group and all those people have any any kind of meetings uh all the what individual person have the meetings also you can fetch and you can show the group calendar here and based on that you can schedule the meetings with your teammates and this is about news and you want to show the organization chat you can fetch from your authentication provider this is about people and this is data data analysis you can insert microsoft forms power ba quick charge site activity and this is big map this is very interesting if you insert a bing map that will fetch that renders here and if you if you try to search for a location something like london and you can type and you can get it here and it comes from the bank so you've been able to see london here i'll come down so this is about whether if you want to put weather here and you can select the city and that city weather will display this is world clock and these are the little advanced web parts you can insert code snippet and it will not execute just show the snippet there and this is embedded code and this is kindle instant review any books related and marked on and power ups also important you want to put your power up on your home page you can and this is about your feed so there is there is different type of web parts available in the modern pages now we designed if if you don't want to publish and you don't want to show this to the users and you can save simply as a draft and once you complete your design everything and if you feel okay this is this should be go to public and that moment you can click this publish and before that if you want to edit this you can click edit again and then you can modify and you can save as a draft and then finally your design completes and then you can publish click publish now it is published now i don't want to post this url or i don't want to take this url i closed it now we are done with this for example i am trying to edit this i delete i want to delete this count here well let this part i deleted but i did something on this page but i don't like it i want to discard my changes from the last publish so which means if i hit this card changes click ok now see you can able to see the counter as well so that is about this card changes if you hit edit you did some changes but you don't like it and you want to go to the previous state and you can see this discard changes option you can hit and then it will discard the changes the next option is page details and here it will show the page details now the description is not entered the properties only name is the property and then we have last modified time last we modified at 9 52 am so the details is here and the next one is analysis analytics the analytics option will give you the ability to identify how many people opened this page from see since last week since last week are you unable to change since last 30 days last 90 days but we know that just before we created this page if you have this page and if you want to check how many people how many people visited your page from last 7 days 30 days 90 days you can get the report here page viewers and page views and average time spent for user and page traffic by time everything everything you can able to identify here in the page analytics so that is also a great advantage in sharepoint modern pages you can easily able to identify the analytics of the page so whenever we create any of this page i'll republish this one whenever you creates any page that stores under a pages libraries so we'll see what what are the pages libraries available here and how you can see your page name there now there is a site pages library is available it contains three pages so this is a modern page which we created and this is a home page and this is somebody created but they are not saved this one and when you hit it add a page that automatically creates and here also you can able to see some options and if you want to see the page preview you can hit and it will show the review here see what it contains and so on so so and so and if you want to share this page yes you can you can copy the link you can manage the access will discuss and there is a power automata also will be available and finally if you want to delete yes you can able to delete the page from here and here you can see the version history now it stores first one when we saved as a draft and it stores as a stores as a minor version 0.1 when we publish its stores as a major version when we republish it also stores with a major version so which means you can able to restore the minor versions as well when you save as a draft and you can retrieve that back also when you did some mistake on it and you want to restore from a specific time and you know that you stored as a minor version and you can restore that also so that is also one more advantage you won't lost anything when you are doing modifications and all the drops will store in a minor version so i'm going back to this page click on it okay this page is available to the public when you publish this one and you can able to see the published data as well and if you want to click if you want to edit you can able to edit and these are all options not available to the normal users when you are an admin you have a full controller you have a design permission on this particular site you can able to see these options so that is about modern pages how we can add the web parts and how you can modify it and how you can publish thanks for watching my video

Channel: Rishan solutions

Views: 222

Rating: 5 out of 5

Keywords: Create a Modern page in SharePoint Online, Add Hero in Web part in Modern Page, Latest web parts in SharePoint Online, Editing Modern Pages, Quick Links web part, Mode Page Analytics, Add and Update Sections in SharePoint Modern Page, Add images in Modern pages, Edit and Delete Web parts in Modern Pages, Modern Web parts in SharePoint Online, Page Draft, Publish, Republish and Discard Changes, Add and Edit Web parts in the Modern Page, News, Events, images and Counter web parts

Id: DAI353vBb7A

Length: 30min 50sec (1850 seconds)

Published: Fri Jun 04 2021