Mise En Place
Getting Started With Mise En Place
This guide is here to help you get started using our Mise En Place theme for WordPress. It’s written from the perspective of setting up a new site so you may have done some of this if you’re working on an existing site. If you do run into any questions while using the theme, please feel free to check our forum or contact us.
Follow our documentation to learn how to set up the demo for Mise En Place.
- Install Helper Plugins
- Create Home and Blog Pages
- Navigation Menus
- Food Menus
- Page Builder
Install Helper Plugins
When you activate the theme, there will be a banner at the top of your admin requesting that you install and activate a few plugins, if they aren’t installed yet. We suggest that you install these for the best experience. They are:
- Page Builder
- Black Studio TinyMCE Widget
Page Builder and Black Studio TinyMCE work together to let you create different layouts for your site. While they are optional they are strongly suggested. In order to create the custom layouts the the theme’s demo uses, you’ll need to have these plugins installed and active.
WooCommerce is optional, but is the recommended solution if you need an e-commerce solution for your site. Mise En Place is built with support for WooCommerce and when the plugin is active it will add some additional options for your site. If you don’t need e-commerce on your site, you can completely skip using it.
Create Home and Blog Pages
By default WordPress displays your latest posts on the front page of your site. To display something else, go to the pages section in your dashboard and create a new page. Give it a name like “Home” and publish it. If you’d like to have a blog on your site, go on and create a page for it as well and publish it.
Then go to the Settings section in your WordPress dashboard and click on Reading. At the top of this screen you can set what your front page displays. Choose the static page option and then the select your home page from the drop down to be your home page. Choose your blog page as the “posts” page and save your changes. That will give you a static page for your home page.
You can also set this up in the customizer. There is a section there called “Home Page” where you can set the home page and blog page for your site.
The customizer is where you’ll set all theme options and customize the appearance of your site. It’s broken up into sections to keep items organized. Some of these sections (Menus, Widgets, Home Page) are added by the WordPress core. Others can be added by plugins.
Mise En Place adds several sections to help you customize your site. Here’s a quick run down of what’s in each section:
- Branding: This is where you’ll add your logo and favicons. Note that the logo added here affects the whole website. To override it per page, you can edit a page and you’ll find the “Alternative Logo” setting where you can add another logo to that page. Some pages might have alternative logos set up by the demo (such as the homepage), so watch out for those if you notice that the logo you added in the Branding section does not affect those pages.
- Header & Navigation: Options related to the styling of your navigation menu.
- Styling: Options for colors, fonts and other items related to the presentation of content on your site.
- Shop Options: If WooCommerce is active on the site, this section will appear to allow you to customize various aspects of the shop.
- Advanced: This section has options for changing menu group url slugs, disabling page transitions and adding extra CSS.
The customizer allows you to make changes and see them live before your visitors see them on the live side of your site. It’s a great way to set things up without affecting the front until you publish your changes.
The easiest way to create a navigation menu is inside the WordPress customizer. Just click on the “menu” section there (it’s for navigation menus and not food ones) to get started. Here’s a quick video that can walk you through that:
Mise En Place has two navigation menu locations. The “Navigation Menu” location is in the header on the opposite side of the screen from the logo. The Footer location is on the right hand side of the footer. It will only display if no text is entered into the “Footer Right Text” in the customizer.
If you’d like to customize a navigation menu for the mobile menu you can do that. Create a separate menu and publish it. Then go to the appearance section in your WordPress dashboard and click on widgets. Add a custom menu widget to the “Mobile Panel” widget area. You can then select your new menu there. It’ll appear instead of the default when clicked on a mobile device.
To create the menu (food menu) for your restaurant you’ll go to the Food section that’s listed on the left hand side of your WordPress dashboard. To add a new item, click the button at the top there that says “Add New Food Item.”
At the top of the next screen you’ll see a field for the Food Item’s Name. Below that is the main content box where you’ll place the description of the food item.
At the top of the right hand column you’ll see a field for the price. You can enter really anything you’d like to here. It can be a simple number, a number with a currency sign like $12, or even multiple items like this:
$12 | $15 | $20
if you’d like denote different prices based on sizes for example. We’ve set this up to be flexible so you can set your menu and pricing as you’d like to.
To organize your menu, each food item needs to be placed in a menu group. Look below the publish box when editing your new food item and you’ll see the box for menu groups. You can click the box to check the group or groups that you want.
To have maximum flexibility in building a page, Mise En Place is designed to work with the Page Builder plugin. This plugin replaces your default WordPress content with a different editor. It breaks your content up into rows which are then filled with widgets in the number of columns you choose.
In Mise En Place, we’ve added widgets to help build your site and also to offer some additional design options. Let’s look at how the front page of the demo is made.
Create a Page
Start out by creating a page. At the top of the main content box you’ll see a tab that says “Page Builder”. Click on that. You’ll now see the page builder interface instead of the default WordPress one.
Create a Row (and how to set/modify the hero image)
Start out by clicking on the “Add Row” button to create your first row. Now that you’ve inserted your first row, you’ll see a pop up that lets you choose the number of columns. The default you’ll see is two but you can choose just about any number you want. Realistically, you’ll want to choose a number between one and at most five or six. You can change this number later if you’d like to.
In the demo, the top section has one column so use the box for column number to change that to 1 and click insert. You’ll now see an empty blue box that represents your row. At the top right of that box, you’ll see a wrench. When you hover over the wrench with your mouse, it will give you a dropdown with options. Click on “Edit Row” (Modifier la rangée in French).
You’ll now see a pop up where you can edit the number or columns in this row. You’ll also see new options on your right. These options are broken up into four sections:
- Layout: here you can set options that pertain to the size and position of this row.
The “Hero” checkbox will make this row full height and width. In the demo, the top row is set to be a hero. The next options let you choose how the hero is aligned. You can position it near the top, middle, or bottom, and also left, right, and center. For this demo, we chose the bottom center.
The equal height widgets checkbox lets you make all the widgets in the row the same height as the tallest widget, which is useful to keep your site looking neat.
The bottom margin option lets you set the distance between this row and the one below it. The default in Mise En Place is 0 and that typically is what you want to have there.
The gutter is the space between widgets and the padding is the space around the inside of your row.
The padding section adds space around that row, and that space can be used to make the row look bigger as padding works by adding space that is part of a row rather than outside of a row/element, such as in the case of Margins. Margins separate elements and padding make an element larger/longer. It can take multiple values. You can set the top, right, bottom, and left values by adding them in that order. To have 30 pixels of padding on the top and bottom and 15 on right and left, you would enter 30 15 30 15 into the padding box.
- Mobile Layout: here you can set options that pertain to the size and position of this row in mobile view.
Mobile Cell Margins lets you set the vertical distance between the widgets.
Mobile Bottom Margin lets you set the distance between this row and the one below it.
Mobile Padding adds space around that row, and that space can be used to make the row look bigger as padding works by adding space that is part of a row rather than outside of a row/element, such as in the case of Margins. Margins separate elements and padding make an element larger/longer. It can take multiple values. You can set the top, right, bottom, and left values by adding them in that order.
- Design: here you can add a background image (and a separate mobile background image) to the row, choose how it is displayed, and also set the font color.
In the demo, the top row has a background image set to “cover” which means the background will always completely fill the area. It’ll scale and not crop the image so that it always fills it.
- Advanced: this section lets you add ID and CSS classes to the row, the “cells” (the widgets in that row) as well as any CSS to be applied to that row. It’s useful for advanced customizations.
Any of these options can be changed at any time, so feel free to experiment.
- Layout: here you can set options that pertain to the size and position of this row.
The content in the page builder is made up of widgets. To add a widget, click on the “Add Widget” button. This will open up a pop up where you can select the widget you’d like to add.
In the demo, an “Intro Widget” is used in the top row. This widget lets you add in text and/or buttons that can use intro animation. The demo has a caption that says “The Restaurant Theme For WordPress” that’s set to use the “Slide In Up” animation style as are the buttons.
To edit a widget, hover over it and click “Edit” or right click that widget and click on “Edit Widget”.
Once you’ve added your widgets, save them by clicking the done button that’s in the bottom right of the pop up. Then, save your page.
Other Page Options
There are some additional page options. If you’ll look below the page builder editor, you’ll see a box labeled “Layout Options”. The top option there will make the page builder full width. The demo does that and it’s the recommended use for the theme. The hide title checkbox isn’t necessary with the page builder option, but on other pages it may be handy if you need to remove the default page title.
The alternative logo and navigation colors are there if your top row’s background makes your logo difficult to read. You can use a different colored logo there and it will only appear on this page.
The next two rows in the demo home page each have two columns. They are set to have zero gutter. The image side is handled by inserting an empty text widget. There is a background image that’s added to that widget.
The menu is added using a menu group widget. It lets you insert a menu group of your choice via a widget.
These two rows also use the equal height widgets option. That way the image in the empty text widget will be the same height as the menu next to it.
The last row there is also set to be a hero. This one however has two columns in it with a visual editor widget in the left column and nothing in the right column.
It has a background image set to cover like the top one does. The hero is set to align to the top this time.
The widget has an attribute added to it. In the CSS styles, we’ve added this:
to give it a semi-transparent black background.
That finishes up the front page in the page builder. It’s a very flexible tool that you can use to create the layout you’re looking for.
At the bottom of each page, you’ll notice footer widgets. The theme has a spot for widgets there. It works best when you add a “Layout Builder” widget there. That’s what the demo does.
This unique widget lets you add other widgets inside it, just like you would a page that’s using the page builder. We used this widget to create a row with three columns. Inside it we added a Mailchimp widget, a social network links widget, and an hours widget.
- If you notice some extra spacing between elements, then it might be caused by the SiteOrigin Page Builder.
Navigate to your WordPress dashboard > Settings > Page Builder and click on the Layout tab. If “Row Gutter” and “Row/Widget Bottom Margin” have a value other than 0, remove that value, type 0, and save.
If you still notice spacing, then it could be that you manually added a number that is higher than 0 to the Gutter, Margin, or Padding settings when you edited a row.
Widgets have margin and padding settings as well, so make sure to verify those.
Lastly, if you still have unwanted spacing, if you added CSS code either in Appearance > Customize > Additional CSS or in a child theme, verify those to see if you added spacing there.
- If the homepage sections in mobile mode are not resizing properly or look different than our demo, navigate to your WordPress dashboard > Settings > Page Builder > Layout. Choose “Always” for this setting: Use Legacy Layout Engine.