[DnE] Visual Composer

You can use Visual Composer to edit the pages of your site.
Click on the page you want to edit, you will see it appears as below.

  • Since you have imported the sample data, all the pages have been set up, you just have to edit the Home page to make it look like our demo site.

  • You can also choose the one of the default layouts from Visual Composer to insert the elements.

Add new column
 
Before adding the supported elements on your homepage, you should create a new column that will show your change in the right CSS. Following these steps to create a new column:

  • Click “Add Column” button to create a new one on your homepage. Please note new column will be added next to your latest column.
  • Then, you can choose the settings for your new column. It supports some default layouts: 1 column, 2 columns, 3 columns, etc. Also, you can add your custom layouts as well. 

Manage the column:

  • Click the “Trash bin” icon to delete the column
  • Click on the “Pencil” icon to edit the column
  • Click the “Clone” icon to copy a column
  • You can also “Drag” the columns to reorder it as your preference.

Add a new element:
After creating the column, you should add new elements for it. Just click the “+” icon to choose and add the supported elements for your column. 

Besides Visual Composer’s default elements, DiningEngine supports new ones. You can add these elements to make it look like our demo site.
 
Once all the elements have been added, click the edit button and complete all the blank fields.
 
Also, you can remove the current element with “X” icon. Especially, the clone icon will help you make a copy of your current element.
Here's an overview about how we arrange the elements:
 
DnE Suggested:
 
You can use this element to suggest interesting restaurants in your site. The system works automatically, you can't decide which restaurant to be displayed. You just have to decide how many restaurants will be shown
 

 
After making the setting, you can see it on the front-end as below:

DnE Category:
 
This element will help you show the number of categories list on your site. You can add title, the number of categories, etc settings on each element. You can change it as your requirement. 

As our settings, the list of 10 categories will be list in horizontal style in our demo site:

DnE Restaurant:
It is a special element of DiningEngine, you are free to set your settings and your places list will show as your need. It allows you to query places by recent posts or featured posts, category, location. Also, you can change the number of posts for each section and style as well.

Your front-end will show as the below images: 

Or 

DnE Review:
 
This element will list all reviews on your places to show on one section. You can configure the number of posts, style, and pagination for each list.
 

Your front-end will show the reviews list like your settings.

DnE Title:
 
You can use this element to introduce your service, as you can see in our demo site, we create an Title block named "Our services".

You can then add sub-elements below the tile. And as stated above, we add DnE Service blocks as the additional ones.
 
DnE Service:

DnE Testimonial:
It will help you show all your customers’ testimonials and your can settings some options on your back-end and your front-end will show as below image:

DnE Events
 
You can display the created events using this element. The special thing is, you can decide how the posts will be displayed;
 

  • Horizontal or Vertical
  • Grid view or List view
  • Can be filtered or not
  • Paginate style.

Here's how it appears in the front-end. 

DnE Banners
 
You can use this element to make your site's appearance more attractive. 
 
This is how it is shown in the front-end:

DnE Feature:
 
Just like DnE Service, you can use this element as additional content blocks.
Then, on the front-end you can view them as following