Restaurant visual composer


To set up Restaurant page you need to go to Wordpress → yopress → Restaurant

Here you are presented with our visual composer which lets you set the look of the layout as you wish. There are many possible configuration and only your imagination is the limit.

Let us start with explaining some basic concepts and settings of composer.

The grid you can use and adjust is either 4x3 blocks, 4:4 blocks or 4:5 blocks. It means that the arrangeable area is made up of blocks. The smallest block is 1x1 which means you could fit 12 blocks in 4x3 grid. Each block can but set further to your likings by clicking edit button on the block itself.

To start you need to, either choose your grid size or start working on the default one. Drag and drop block from the right panel to the grid in order you desire.

Once you have filled in all the spaces you can click OK. You can click OKonly once all the grid spaces are filled in with blocks, no empty spaces or the OK button will be inactive.

Assuming you have everything in place, click OK and then Save Changes. This is very important, without doing so your layout will not be saved and edit capabilities will not be available. If saved correctly edit buttons appears on each of the blocks used.

Each block can have a specific function, jus hit edit and additional dialog with options will appear. Set it as you wish and hit ok, then save changes. Make sure green save changes flashes in the upper, right hand corner. If not, save again.

Block Image sizes

Make sure you are using correct sizes of pictures. If you use smaller images they display incorrectly.

  • Single block - 230x210px
  • Double block - 570x210px
  • 4 Sibgles block - 570x430px
  • Long Row - 1150x210px
Block Setings

  • Name - each block can be named, this is for reference purposes only. Cannot be left out empty.
  • Background Image – the image that appears underneath the block, depending on the further settings this can be visible or not ie. Category Slider will use featured image from posts.

Block Functions:

  • Evetns - choose events from the dropdown list. Then choose number of events. These will be displayed as a tile in our resturant mosaic.
  • Category Slider – choose this if you want to turn block into a slider. Next choose which category the block will display posts from, also the number of slides. Background image in this case is optional as slider uses featured images from post. Same goes for Hover State which is grayed out as slider displays excerpts from your posts.
    For example you want to have important announcements displayed, create category “announcements” and choose this category as a feed for slider. This way you have simple way to let your visitors now about important stuff then do not want to miss. This is just an idea, but it can be used in many ways.
  • Last post from Category - choose this if you want to always display last post from a chosen category.
    For example you want to create “dish of the day” spot, simply create category, name it to you likings and add post daily with the recommended dish for that day. Last post is always displayed and visible to the visitors. Simple and hassle free.
  • Link – this function allows you to link you block to any place. Simply paste the link you want this block to link to, and you are done.
  • Page – this function lets you link your block to any existing page you have created.
  • Opening Hours – this block acts as a live tile and depending on the day shows wether your place is open or closed. When you hover it, it shows the opening times for the rest of the week. Opening hours are set under Wordpress → yopress → Opening Times
    Please refer to Opening Hours part of this manual for more information.

    Note: There are few options avliable for this block:

    • If you want to dispaly, on your tile, opening time for the current day instead of close/open label you need to mark this checbokx.

    • If you want to dispaly, on your tile, your custom text instead of opening time for the current day instead or close/open label you need to use Normal State label, this has the highest priority.

      Note:
      1.To make text bold please use [b] your text [/b] tag.
      2. When you change your layout from 3:4 grid to 3:5 grid or so make sure you click OK and Save Changes. When ever you change the layout you need to OK and Save Changes.