DEV Community

Muhamad Sulaiman
Muhamad Sulaiman

Posted on

How to design Elementor Page when you have 3 designers?

Hi there. So today I want to share how you can design a WordPress page using Elementor Page Builder even though you have 3 designers that need to work on the same page.

First, you need to know about the problems.

  1. Elementor not allowed more than 1 person to edit the page. If you wish to edit, you need to override or take over the current editor.

  2. It will take time for someone complete their task, then another designer comes and edits that page. To me, this is the most critical problem. Time-consuming.

  3. History editing. Urgh.. I hate this part. If I do some mistake and I want to redo it, I need to search for my name. And since we have other designers also, so there will have other histories as well.

In order to solve this problem, I use what I've practised in Laravel development. Which is to create a subview for each page.

Let see how I do in Laravel and how we can implement this practice in Elementor.

In Laravel, I create a component or sub-view and then include it on the main page. Take the example, dashboard. In the dashboard, there are 3 components.

  1. Analytics Card.

  2. E-Commerce graph.

  3. User table.

So in the dashboard.blade.php, I will code like this.

@extends('layouts.app')

@section('content')
<div class="container">
    <section>
        @include('_analytics-card')
    </section>

    <section>
        @include('_comm-graph')
    </section>

    <section>
        @include('_user-table')
    </section>
</div>
@endsection
Enter fullscreen mode Exit fullscreen mode

So each component, we can assign different people to do without touching the parent file.

And how to achieve this using Elementor?

It is quite easy actually. Remember that Elementor has Template Function?

We will use that and implement the same process. The difference is In Laravel we will code that component, but in Elementor we will design it.

So let's do that now.

1st, you need to create a template. Let's named it an analytics-card, comm-graph and user-table. You also can include the underscore(_) if you want.

I also will create as section for all of these components.

image

After you create that template, let's create the page that will have these components.

Let's name the page as a dashboard also. You can name it anything you like such as home, about, contact, etc. For this sharing, I will name it dashboard.

After we create the page, we just need to insert the template widget and search for components (template) that we do previously.

image

Viola! You now have a page that can be designed by 3 designers at the same time without worry about real-time collaboration on the same page.

image

image

There are 2 benefits when applying this practice.

  1. Every designer can preview their design only.
    We can reuse this component on other pages as well. We do not need to copy and paste components.

  2. If we want to change the content, we need to change the original template. Then it will affect all pages that having the component.

How about that? It's easy to implement these practices right. Comment below the current practice you use if you've more than 1 designer to do the task on the same page.

Top comments (0)