0

Do SharePoint online modern web parts provide any web part to build something as follow:

enter image description here

Where we will have 3 blue boxes, and inside each box we will have a Title, Text and clickable button?

Can I build this using the built-in SharePoint online modern web part?

If the answer is no, then what other approaches I can follow to implement the above boxes?

Improve this question

1 Answer 1

Reset to default
1

There is no SharePoint out the box web part which provides the exact same design as your requirements. But, this is what I have implemented using SharePoint out of the box sections & web parts:

enter image description here

This is how I achieved above:

  1. Added a section with three columns layout on modern page
  2. Added a Call to action web part in first column
  3. Added call to action text at the top >> You cannot change/remove black background
  4. Added blue color background image from "Stock images" & set it's focus as per my liking >> You can also use your own image
  5. Added Button label ("Registration") & button link >> You cannot change the background color of button, it is based on theme on your site
  6. Set alignment to "Center"
  7. Duplicated the web part and moved to 2nd & 3rd column in section
  8. Publish/Republish page

enter image description here

If you want to customize a modern page with exact design, you have to develop a custom SPFx web part >> It gives you more flexibility hence you can achieve the exact design by custom coding.

Few samples to show the capabilities of custom SPFx web parts:

  1. Tiles
  2. Tiles V2
Improve this answer
3
  • thanks for the reply.. but as shown in the sample you provided the Call For Action web part, will not mimic what i am looking for... where in your sample the text will have a black background and the title "Column-1" will show outside the box... now i do not have much knowledge in SPFX.. so is building this UI using Power App and embed the App inside SharePoint considered a valid approach? as in power App i do have full control to create the HTML i want...what do u think?
    – john Gu
    Oct 23, 2021 at 9:34
  • First of all, "Column 1" text will not be shown on the page (see first image >> final output). 2nd image is page in edit mode where I added the column 1, 2, etc. text just for your understanding. And I have already mention the restriction about the text with black background where we cannot do much changes.
    – Ganesh Sanap
    Oct 23, 2021 at 9:51
  • 1
    If you are looking for quick & easy to develop solution, you can achieve this using Power Apps as well. But if you want scalable solution (adding links dynamically at any time OR adding the web part on multiple pages/sites), I will recommend to use custom SPFx web part >> where you can use plain HTML + CSS or React JS or Angular or any other framework you want to use.
    – Ganesh Sanap
    Oct 23, 2021 at 9:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.