Page Builder

Bateaux Theme comes with package of live drag-and-drop page builder, Blueprint. Blueprint is unlike other page builder on the market. In Blueprint you can see all the changes in real time while customizing the options. To enable Blueprint, make sure that your plugin Bateaux Core has been activated by going to Appearance > Plugins.



You can choose whether to use blueprint as a page builder or classic editor. To start using Blueprint, click the button blueprint. and you will get access to Blueprint. If you cannot find Blueprint in the page, go to the screen options on the top of the page and check whether Bateaux Blueprint is checked or not.


There are 6 main components of the Blueprint, we suggest you to understand before starting to create the pages.


The heart of blueprint is menu bar, it allow you to create elements and customize page setting. Below are the explanation of main components in menu bar.

Save / Import / Export template

Importing template is the most convenient way to build the page. There are many prebuilt templates you can choose. When you hover on thumbnail there will be link to that template demo page. Moreover, you can save template to use in the other pages or export template to JSON file in any purpose. Note import / load template will load only the settings, not the contents.


This header doesn't mean of navigation bar but the page header or page title. There are 4 options to use as a header (Hero, Page Title, Slider, Featured Post).

The optional way to manually build your own header is by choosing none then build the header from the first section of the page.

You can choose whether to display the sidebar or not in each page you build. Choose the position of the sidebar and choose the sidebar you want. If there is no sidebar in the list, go to Appearance > Widgets and create one.

This is the footer setting of the page. You can choose whether to display footer, bottom bar, footer + bottom bar or none.

In order to build custom footer, you can choose **none** and create it in the last section of the page.



Bateaux Theme preview mode simulates the layout display in front end, it allows you to see the genuine spacing while you can still edit the options. You will be able to see nearly the real page which will display in front end from this Preview Mode. We suggest you to use preview mode in fullscreen editor for better user experience.


Page Setting

Bateaux theme page setting, is the overall setting of the page. You can choose whether to activate full slide page, half slide page or not. You can set the custom background color to the page and sidebar, in case you want uniqe background color by turning the switch Custom Background on. Moreover, you can choose custom menu for unique navigation bar of the editing page or simply disable navigation bar by select "none" in the navigation menu option (default will use global navigation bar menu).


Fullscreen Editor Mode


Blueprint comes with fullscreen editor mode which will makes your page building experience become simple even in small screen pc.


In Blueprint, inspector is the region use for customize options of element, section or page. When you edit the element or section, the current editing item will have the blue border to show it's currently active, and the inspector will show up on the right hand side of the page. Page, section and element inspector are different from each other. In each inspector has it's own unique options. However, options in tab General and Animation are mostly used global. We are giving you one example, blog inspector, to explain the components inside the inspector.


In the Style tab, generally the first section will be "Style" which allow you to choose the style of the element. Beside the style section, Appearance and Alignment section will be the most common section appear almost in every element inspector. You are able to edit the appearance options in this section. Numbers of section in the inspector depends on the element, complicate element will have many sections, such as blog and portfolio. In any element which have Typography section, you are allowed to choose 4 font styles from font manager

For the General tab, the most common tab that every inspectors will have, allow you to edit the padding, margin of the element. Moreover, you are able to add extra class to the element in order to do styling via custom CSS, or add extra ID in order to make an advance setting with box or modal element.

Margin : most of the elements and contents available in blueprint has their own default margin. You can use this margin field to override default value.

Padding : in every element and section has it own default padding value, you can override those default value by input the value in this field.

Animation : You are able to find only in the element's inspector. You can set the animation of the elements via the options inside this tab. In front end animation will play after user scroll arrive the element. If you turn on Stagger switch, the element will play the animation in sequence.

Grid System

Grid system in Blueprint is very simple. The mechanism is like this Section > Row > Columns. First of all you must have section. After you drag the element in to the section, that element will automatically be wrapped inside the "Row". You can see how to set the columns in this explanation. If you want to create a new section, it's simple just click the button Add New Section at the bottom.

Section Controller


Row Controller

This is the part to choose grid layout of the row. You can create as many rows as you want and move row to any place you like in any section. User have option to choose whether to use the preset grid layouts which theme provides, or create custom grid layout yourself.



Element Controller

Generally, you will find 3 buttons after hover on "..." button on the top right of every element.

Note : In some elements there are more buttons than "...", such as team and slider, which you could find more controls to customize.



There are many types of editor you can find in Blueprint, the main editors you can find in many elements will be text editor, media editor, button editor and background editor

1. Text Editor : allows you to edit the text without any popup or light box. You can simply double click or triple click and select the text you want to edit. Making bold, underline and italic or, changing color and size or even put the link to the text, you can easily customize by text editor.

Note sync colors won't apply with text edited in text editor.


2. Media Editor : allows you to upload image or use icon.

Note: image size option won't apply with external source image url.

3. Button Editor : you can select style, hover style, icon, label and etc. of the button via this editor.

4. Background Editor : this editor is available in some elements and section. This allows you to choose whether to use background image or video (if there is background type option), and also allows you to add background color with desired opacity.


Post Builder

For the best user experience in creating single post, Bateaux Theme keeps the original classic editor, so user can simply input only text content. There are 3 main layout you can use for your posts, with many styles of featured media show on top of the post. You can choose whether to use the global settings with the post or custom settings in purpose you want to make unique design.


Post Settings

To edit post settings, there is a button on the top of the editor beside the "add media" button. This is similar to customizer but for single post only. User can choose layout of the post, featured media style, and also other settings. In some options which are unavailable to edit will have a light grey label, those options are related with other options, for example "Full Width Media Parallax" cannot be edited, if you don't select "Featured Media Layout" as "Full Width".


You can choose whether to use global setting, or custom settings with the post you are editing by just change the mode on the top of the editor. Custom mode will change the tab of editor to blue color, this will override all the global settings and apply just only in that post. Don't forget to click save every times you finished customizing. All the changes will lost if you don't save the settings before close. There is no need to click update the post, if you make changes of only settings not contents.

Shortcode generator

There are 2 main options to add media (image, video, gallery) into the content of the post, 1. using WordPress add media button, or 2. using Bateaux shortcode generator. We recommend you to use shortcode generator for more customizable media element. Bateaux theme provides you 5 buttons to generate the elements which are normally used in single post.


For further information how to use more advance shortcode, you can check the documentation here.

One option in shortcode generator in some elements (image, video and quote) that user might get confuse is "Position", since this option is different with general alignment option. Position property in single post has total 5 possible options.


overlap-left Overlap-Left
overlap-right Overlap-Right
left Left
right Right

There are 5 post format options that user can select. This will effect with display of featured media in single post and blog archive page or blog element created from page-builder. In every post in any post format, we recommend you to upload featured image together with featured media of each format in case that in some pages (search result or date/month/year archive) all the featured media will be displayed with only featured image. You will find featured media editor below the meta box "Tag" at the bottom right of the post editing page.

1. Standard : this is standard format of WordPress, display featured media as featured image.
2. Gallery : images will be displayed orderly from the first selected image to the last selected image. So, plan your images order first before select the images.
3. Quote : featured quote will be displayed together with background image using featured image.
4. Video : you can choose whether to upload your self-hosted video (suggest .mp4 file) or input external-hosted video URL. In case you both upload self-hosted and input external-hosted video URL, self-hosted video will be used as a featured media.
5. Audio : you can choose whether to upload your self-hosted audio or input Soundcloud embed code. In case you both upload self-hosted and input embed code, self-hosted audio will be used as a featured media. Self-hosted audio will be displayed together with background image using featured image. Here is the link of how to get Soundcloud embed code.