Features with detail page

Technical Questions
,
1

Hi guys! i want to implement features section with its detail page…

let say i have 1-n features in my website ( title , description, image etc )…
-In home page i want to show a grid with those features and when i click on a feature i want to open a detail page with feature detail + some other common sections from builder ui on every detail page . what is best way to implement this i tried using handle . i’m able to get feature on detail page but how i can drag & drop builder sections on detail page then ?
let say
homePage->
1- Navigation menu ( symbol )
2- Hero Section ( Custom Component )
2- features grid ( link to detail page of that feature )
3- Footer ( symbol )
Feature Detail->
1- Navigation menu ( symbol )
2- detail of feature
3- some other sections from builder ui i want on every detail page
4- Footer (symbol)

where should i store my features ? data model ? section model ? i’m a bit confused here. and how i can implement above logic. please write in steps to follow

2

Hello @mohsin,

Welcome to the Builder.io forum!

To implement the desired feature, you can create symbols with inputs that accept a list of features. By integrating Builder into both your homepage and detail page, you can leverage drag-and-drop functionality to seamlessly incorporate and manage these features.

Hope this helps!

3

@manish-sharma
i can understand its very basic. but lets say i create a symbol of grid where i attach my data model of list of features…
next i want to implement a detail page in a way that i can drag and drop sections of my choice and one common section which will be feature detail section… how would you implement it … will you make a page model or a section model ? can you describe the workflow . it will be very helpful.

the git repo of blog have … some blogs then a detail page of each blog but if you have to define Navigation menu then u have to go to each of section model … correct me where im wrong … Thanks for your response

4

Hello @mohsin,

To structure your pages, you can use the page model for the homepage and the section model for the detail page. For the section model, create a path such as features → [handle].tsx.

For detailed guidance and examples, you can refer to the documentation at Builder React Usage with Page/Section Custom Fields.