UI Builder: Updated format of Areas section

[eshanrnh]

Description

• Updated the layout of the Sections article making it easier to navigate and less overwhelming (hopefully 🤞).
• Removed the code from the heading tags and added it separately as a Code Reference below the example.
• Added some extra content/descriptions where required.

Type of suggestion

• Typo/grammar fix
• Updated outdated content
• New content
• Updates related to a new version
• Other

Product & version (if relevant)

UI Builder v15

Deadline (if relevant)

Anytime

[sofietoft]

PR looks great @eshanrnh !

I like that the code reference isn't used as the headings. This was done a lot also in the CMS docs in the past, but I agree on moving away from this 💪
Could we make the headings even shorter by removing the "Example" bit? 🤔
So, an instead of Example: Using the AddSectionBefore() Method we do Using the AddSectionBefore() Method?

Regarding the "Code reference" bit. It looks a little strange as the code extends more than one line 🤔
Would it help to keep "Code reference" on one line, and then move the actual code to a line below?

Overall great changes to the article 💪 My suggestions are just to see if we can make it even cleaner 😄

[eshanrnh]

Thanks for the feedback, @sofietoft 🙌

I’m happy to hear you like the changes, especially moving away from using the "Code reference" as headings. I agree that we can aim for cleaner and shorter headings.

Regarding the code reference, it definitely makes sense to move it to the next line. While doing that, it clicked me to rearrange the code example and method syntax for more clarity. For now, I have applied the change only to the Using the AddSection() Method method. If you are fine with it, I'll update the rest of the methods with the same format 🤞

All suggestions and comments are appreciated 🤩

[sofietoft]

Changes looks great 💪
I like moving the code reference up, and putting it into a block 👏🏻