Level 29
Do you want to make a page builder like for example Wordpress Elementor ?
Mar 16, 2024
5
Level 1
Seeking Advice: Implementing Dynamic Page Layouts in Laravel
Hello everyone,
I'm currently working on a Laravel project where I need to implement a dynamic page builder feature. I want to allow users to create pages with different layouts (such as two-column, tabbed layout, accordion layout, etc.) and customize the content within those layouts.
I've already created a pages, but I'm struggling with how to implement the dynamic layout selection and configuration within the page creation form itself.
Could anyone provide me with guidance or best practices on how to achieve this? Specifically, I'm looking for suggestions on:
- How to design the database schema to accommodate different layouts and their configurations.
- How to modify the page creation form to include options for selecting layouts and dynamically showing/hiding relevant content fields based on the selected layout.
- How to handle the controller logic and Blade templates to save and render pages with dynamic layouts effectively. Any advice, examples, or resources you can share would be greatly appreciated!
for better example,
i need to enable this type of design in homepage or other pages too please look at this image https://i.ibb.co/tZPd7z1/Screenshot-2024-03-16-at-17-42-34-Cliper-Cliper-Photo-Studio-HTML5-Template.png
Thank you in advance for your help.
Level 1
@gych Yes, just the concept of elementor, i dont want to add a drag or drop option. only the select option for choosing the layout. and while clicking the option the form should be show to write a content.
Also i want a repeater field to add multiple section in a single page. so that i may use multiple section in a single page.
hope you get it
Level 29
@jhyaps Take a look at Twil, I haven't used it myself before but it looks like something you could use. https://twillcms.com/
Also check their demo it will give you a lot of ideas on how this could work.
Personally I use grapesjs but that's a complete page builder with drag and drop functionality
1 like
Level 35
It is a heck of a lot of work to build it yourself. Here's how I do it. A page can have multiple Containers. Containers can have different grid layouts at different breakpoints and individual styling.
Containers can have multiple page items. These are things like text blocks, buttons, cards, images etc. Could be simple or complex depending on your needs. Page items know their grid position for each breakpoint. They also have basic individual styling, mainly around positioning. They are also an instance of a Component.
Components are basically style blueprints for page items. They can have their own grids making use of container queries.
All component styles are written to their own minimised CSS file so they can be cached by the browser.
Each page knows what CSS files it needs to load.
I also allow for colour themes like light and dark mode, or whatever other one you want. You can also create different designs and switch between them as you want.
Level 13
@jhyaps please look into this https://medium.com/@bhadreshlaiya/what-are-the-laravel-cms-packages-25d71c7f9820
Please or to participate in this conversation.