About Cousteau Pro
Cousteau Pro is a travel theme for WordPress. It is suited for travel agents and related professionals.
The recommended image sizes are:
Post Thumbnail: 816x500px
Media Item: 555x380px
Media Item Tour: 555x790px
Media Item Media: 555x555px
Media Fullwidth: 1240x555px
Hero image: 1920x500px
Notice, the original demo images are not redistributed (unless noted). Instead blurred equivalents will be imported while installing the sample content.
After installing the theme you will be redirected to this welcome screen. Here you can install both required and recommended plugins. While recommended plugins are optional for the theme to function, consider installing them if you want the full sample content to be imported.
Here you will need to install and activate the theme specific plugin required by the theme. This will create Custom Post Types as well as various Widgets and Shortcodes. Some hosting providers block automatic installation of plugins. This means you will need to install the plugin manually as you would normally do. The plugin is located inside the /plugins/ folder in your theme archive.
Under the Recommended Plugin tab you will find a list of supported plugins that will enhance the theme’s functionality. These are
- One Click Import Use this plugin to help you import your content with just one click.
- MaxSlider Use this plugin to help you create custom sliders and use them anywhere you wish shortcodes.
- Elementor A free page builder that delivers high-end page designs and advanced capabilities.
- WooCommerce: To enable eCommerce functionality for your website
Contact Form plugin is not included in the Recommended Plugins List, but it’s mandatory since sample content imports several booking forms based on this plugin.
- Contact Form 7 use this plugin to create a contact form, then copy the shortcode it gives you and paste it on a page which will serve as your contact page.
- Alternatively, you could use WPForms plugin instead of Contact Form 7, but sample content will still import Contact Form 7 shortcodes.
If you want the Instagram widget to render, you will need to install this plugin also before installing sample content.
- WP Instagram Widget: Use the latest version of this plugin to help you display your Instagram feed in any of the theme’s sidebars.
Installing Sample Content
To automate the process of importing and for a better experience we have included native support for One Click Import Plugin. From the Sample Content tab, you can click the Get Started button to navigate to the sample content import screen.
You can always find the import page under Appearance → Import Demo Data.
You can install it in the Recommended Plugins tab (2) or manually from From your WordPress dashboard
- Visit Plugins → Add New,
- Search for ‘One Click Demo Import’ and install the plugin,
- Activate ‘One Click Demo Import’ from your Plugins page.
Click on the Import Demo Data button and you are done!
Sometimes altering and editing sample content may go wrong. If you need a fresh start you can reset your WordPress installation using any popular reset Plugin. Beware: this will erase all data you have and not just the sample content.
This plugin requires a PHP version of at least 5.3.x, but we recommend version 5.6.x or better yet 7.x. Please contact your hosting company and ask them to update the PHP version for your site.
Customizing Your Theme
All theme’s customizations and settings can be done via WordPress’ built-in Customizer. If you haven’t used it or want to learn more about it, please read this article.
Go to Appearance > Customize and you will see this
TIP: any changes you make in the tabs below will be previewed live on the site which appears in right side of the screen, however to save these changes you need to click the Save & Publish button on the top of the bar, if you have made a change but see the button grayed out (for example changed the font size of a heading), move the cursor outside the input box, for example, to the next input box, then the button should be clickable again.
Let’s take a look at the options each tab gives you.
Header Options are split into two sections.
In the Header style section, you can
- Set the logo layout you wish. In this section, you can split your menu into two smaller ones, but you will need to re-assign menus and their locations from Appearance→Customize→Menus.
- Change the header to be full width.
Under the Top menu bar section, you can change
- Vertical padding in your menu. This will create additional space before and after the top bar.
- Change the top bar text size.
- Add some custom text to it like your phone number.
- Add some custom text to it like your email.
- Show/Hide social icons. All social icons can be set from Appearance→Customize→Social Networks.
- Show/Hide the search bar.
In the Primary menu bar section you can:
- Change the menu Vertical padding.
- The menu text size.
- Enable/Disable Sticky menu.
2. Site Identity
Here you can change the logo and favicon as well as the title and description.
Use the appropriate fields to add your information, show or hide your site title and subtitle and upload your logo and site icon images.
- Upload your logo
- If you are uploading a retina size image (2x) this option will contain it to half of its original width
- Change the site title, this will be served as an alternative to the image logo
- Change the site subtitle (tagline)
- Show or hide the site title
- Show or hide the site tagline
- Upload a site icon.
3. Blog Settings
This tab allows you to customize your blog and post options.
Under the Archive options, you have customized the default WordPress archive pages like category, tag, etc.
- Change the Layout by selecting in how many columns you need your content to appear.
- Show or hide the sidebar.
- Enable the Masonry effect in case you have articles with different content and featured image height.
- Select the article excerpt length.
- Select a pagination method.
Moving to the Post Options you can select which elements you wish your single blog posts to have.
Here you can:
- Show/Hide the featured image or your post.
- Show/Hide the date the post is published
- Show/Hide the author.
- Show/Hide Comments
- Show/Hide the post Category
- Show/Hide tags
- Show/Hide the author box
- Show/Hide related posts
- Show/Hide social sharing icons
- Enable/Disable Lightbox
4. Tours & Destinations
Through this tab you can control the Tours Search and Destination pages options.
In the Tours Search section you can control the settings of the Search page. So you can change
- The sidebar position.
- How many results you need per page.
While in the Destination Options you can control what’s going on in the Destination Archives
- Change the Destination listing layout.
- Show a certain amount of packages per page.
- Show the Content Sidebar.
- Show the Listing Sidebar.
This tab allows you to customize the colors and background images for the entire site, the top bar and header, hero section, sidebars, and the footer.
Here you can add a generic Hero Image or Video from Appearance→Colors→Hero. This will appear by default everywhere unless you have set a different hero video or image in the page Hero Section box. You can also change the footer background image and color from Appearance→Colors→Footer section.
Through this tab you can control the font size of key theme elements, such as headings, body, and widgets. If you want to change the default Theme fonts have a look here.
Here you can create and assign menus to the theme. To learn more about menu creation check out the Codex’s menu user guide here.
Cousteau Pro has two primary menu areas. The second one will apply only when under Customize→Header→Header Style the Centered Logo – Split Menu option is selected from the Layout dropdown.
In this tab you can change the titles for various theme pages, like the blog, search and 404 as well as for your related items in single Portfolio.
9. Social Networks
In this section You can add your Social Network URLs. These icons will be displayed in the Theme-Social Icons Widget automatically.
In this tab you can change the number of products on shop listing page and control your WooCommerce Settings.
Under the Product Catalog section you can;
- Choose what you want to render in the main shop page.
- Choose what you want to display in the category pages
- Change the default product sorting
- Change products per row
- Select how many rows of products you need per page
- Change the sidebar location
- Show or hide, categories
- Show or hide star ratings
- Show or hide hero sections in category/tag listings.
You can also change your Single Product layout from the Single Product Section. Here you can control if you need to have a sidebar or not in your products.
Here you can modify the credits text and your Footer Column Layout.
Under the footer style section you can
- Change the Layout of the footer, to render 2,3 or 4 columns.
- Make the footer full width.
In the bottom bar section you can
- Show or hide the bottom bar.
- Add your own Credits text.
- Show/Hide Social icons
12. Additional CSS
In this tab we host the custom CSS panel which you can use to insert styles for elements not covered in the rest of the tabs.
Here you can download your sample content files.
Through this tab you can add widgets to the theme’s sidebars. The theme features eight Sidebar Areas in order to provide the best option to display your content.
15. Static Front Page
Use this tab to make the Home page your static front page so you can take advantage of the homepage template we have created for you.
Making a Tour Package
Getting familiar with the Package Screen
Head over to Packages→Add New. Then you should see this screen
Here you can start adding content for your package:
- Add a title for your Package.
- Add your Package Content.
- Add Some Content for the Package Hero Section
- Add More information for your Item.
- Select the Featured image for your item.
- Add or Select a Destination for your Package. Check here on how to add a new Destination.
- Add or Select a Package Categories.
- Publish your package.
Adding Package Details
Let’s have a quick look at our Package Details section. In the Price tab, you can
- Select if the Package is an offer.
- Change the price (number).
- Select a price text. Notice that :price: tag will be replaced by the actual price
Under the Duration Tab, you can
- Select the Duration of the Tour.
- Some informational text on the duration. You can include dynamically the duration using :duration: tag.
Controlling the Package Hero Section
The hero section will be the same everywhere in Cousteau Pro and in general this the basic section before the contents of your page and you can :
- Add a hero title.
- Add a hero subtitle.
Also, you can style your Hero with a background image/video or color :
- Align the Title.
- Hide the Page title.
- Add a Background Color or an Overlay color in case you have a background image with the same color of your Hero title or subtitle.
- Add a background Video, from YouTube or Vimeo.
- Add a background image and change its position and screen coverage.
Creating a scrolling section of contents
As you will notice in our demo, there is a scrolling contents section that will help your visitor navigate through your Tour highlights.
You can easily replicate this by controlling in which heading you visitor can navigate. When adding a header (H1, H2, H3, H4, H5, H6) switch to Text mode and add anchor-title as a custom class to that header like this
Now, the Itinerary header will serve as an anchor point for the floating bar. Repeat this for as many headers as you wish.
Add an elevated Contact Form in Packages
You can add a custom Contact Form for your packages sidebar. If you need the same elevated effect like the one in our demo you will need to create a custom HTML widget and add before any other under Appearance→Customize→Widgets→Packages. The catch is to include a custom DIV with a class that will allow the Contact Form to render like needed. The HTML must have this structure
Where you can change X to your Contact Form 7 ID and the title to your preference.
Adding Destinations archives
Creating Destinations is crucial to organize your tours and content. You can add your destination from Packages→Destinations.
After selecting your Destination name, description and slug, you can select some extra information to alter the behavior and appearance of your Destination
- You can select a page from which the Destination will take its default content. The featured image of this page will serve as the main image of the Destination,
- Here you can control the appearance of the Destination’s Hero section.
- You can change/set the background color
- Add a Hero image
Destinations as menu items
If you want to add any destination archive as a menu item you will need to navigate to Appearance→Menus and enable Destinations as menu items.
Then you can add them to your menu as you would normally do. You can check this article here on WordPress menus and how to master them.
Destination Widget Areas
Your Destination archives and Destination page has two specially reserved sidebars: Appearance→Customize→Destination Listing (next to the package listings) and Appearance→Customize→Destination Content (next to the destination content) in which you can add any widget you want including the Theme-Contact Widget from our demo.
Adding Package Categories
From Packages→Categories you can create new categories for your Packages/Tours
Earlier we saw how we can install WooCommerce. Let’s take a brief look at creating products. Start by going to Products > Add Product.
- First we need to fill in the product title,
- Add the product’s description,
- In the Product Data metabox you will fill all the required product info, such as price, inventory, tax and shipping information and more,
- Fill in a short product description
- Add product gallery images to upload additional photos for the product,
- Click Set Product Image to add the product’s featured image
- Add Tags to your product to make filtering easier
- Add categories for your product
This is a brief overview of adding products to your site, the product post type is a complex one, if you haven’t worked with it before please consider reading the official documentation on how to add and manage products here.
Setup the shop page
Once you install and activate WooCommerce all the default pages will be created, including the shop listing page. To make sure this was properly configured go to WooCommerce > Settings > Products > Display and check if the Shop page is selected in the Shop Page drop down.
If the drop-down is empty, locate the Shop page and select it. If you can’t find a page named Shop, just go to Pages > Add New create one and then set it as your shop page. Add this page to your menu to give your visitors access to the product listing.
Let’s start by adding the first few basic pages you are going to need. Go to Page →Add New and create the following pages:
To set up the homepage create a page named Home and set to it the Frontpage Template from the Page Attributes drop-down on the right. To add content to your front page go to Customize→Widgets or Appearance→Widgets and use the theme’s widgets to help you display your content. You will notice that in your Frontpage template page under the WordPress text Editor you have a Frontpage Options and a Hero section box.
Creating a Frontpage with a simple image
Lets create a frontpage with a Single image that will promote one Package, along with some details for that package and a call to action button. After creating the frontpage template like described above, we will add a title and a subtitle from the Hero section
- Add the main title for your Hero section.
- Add a subtitle for your Hero section.
Now let’s navigate to the Hero Section and add the main image :
- Set the title/subtitle alignment
- Hide the default page title.
- Select our main image.
Now, we have a title and subtitle as well as a background image but we will need some extra garnish and a call to action button. So, we will need to edit the Frontpage Options section:
- Add a meta field that will appear above the hero section title.
- Add a second field that again will appear above the hero section title.
- Add a button text and,
- a button URL that will lead to a URL you have specified (perhaps a package).
Creating a Frontpage with a Video
If we need to add a video instead of a static background we will just need to follow the above procedure, but add under Hero Section a video URL also
The background here is used now as a placeholder if the image fails to load, or if the visitor uses a mobile device. Always in mobile devices, we avoid auto playing or playing videos in general to avoid data consumption.
Creating a Frontpage with MaxSlider
In the Frontpage Options section, you can select a MaxSlider Slideshow to appear instead of a hero image or choose not to have a slideshow at all. MaxSlider is a versatile plugin with many options for you to explore. Have a look at the plugin’s documentation here first on how to use it. You can select the MaxSlider from Slider tab under the Frontpage Options box:
Replicating the Demo frontpage with Widgets
Cousteau Pro does not require any Page builder to replicate the front page. The frontpage page template provides a full-width sidebar where you can add any theme widget and bring selected portions of your content with ease. In order to fully replicate the Frontpage you will need to add these widgets
In the order that they appear we have:
- A Theme(home)-Package Search form widget.
- A Theme(home)-Destinations widget
- A Theme(home)-Post Type Items
- A Theme(home)-Hero Callout
- A Theme(home)-Latest Post Type
To continue with our content we will need to set up our Footer Section. You can easily modify it via Appearance→Customize→Footer, and our demo has the following structure.
The inner footer sidebar will appear just before the Footer, and in our demo, it shows the
The Footer – 1st Column area has
The Footer – 2nd Column area has
The Footer-3rd Column Sidebar has a simple text widget while the Footer-4th Column Sidebar has an Instagram Widget.
This is the default page that will display all your Packages / Tours when searching from the Package Search Form widget. Create a new page and select from Page Attributes the “Search Packages” page Template.
This will be your posts page. Just create and publish a blank default page named “Blog” (or whatever you wish to name it) without adding any content, no further action needed for now. You can control the looks of your Blog page from Appearance→Customize→Blog Settings. If you want to set a hero image or video for your blog page you will need to navigate to Appearance→Colors→Hero and add it there.
In this page, you can add any content you wish without displaying the sidebar.
We have handcrafted some custom widgets to help you better display your content. You will find them under Appearance → Customize → Widgets or Appearance → Widgets
Using this widget you can create a contact box including a title a map and various complementary elements with icons that will help you add more information like telephone etc about your business.
- Add a title for your Contact widget.
- Add a map code (iframe).
- Add a contact title
- Create new complementary elements.
- Add an icon code (from fontawesome.io) and some text along.
This widget allows you to create a small Schedule table with extra contextual information.
- Add a title for your widget
- Add some complementary text. You can use HTML tags also if you wish.
- Add a new day/time widget.
- Add your day and time information for each item.
This will allow you to display your Instagram Account in your Front Page or Pre-Footer sidebar. The WP Instagram Widget must be installed and activated in order this Widget to appear
- Add a title for your Instagram Widget.
- Add your Instagram Account.
- Add a number of photos you wish to display.
- Select the Instagram Photo size.
- Select whether you need your images to open in the current window or open in a new tab.
- Change the link text.
Theme-Latest Post Type
This widget is built to help you display your latest posts in any widget area you wish.
- Add your widget title
- Select the post type you want to get the latest items.
- Check if you need random posts instead.
- Add the number of posts.
Theme(home)-Post Type Items
This widget is built to help you display any post you wish in your Homepage Widget area.
- Add a title.
- Select the post type.
- Select the output columns.
- Add the Item you wish to output.
- Select the Item from the drop-down menu.
Theme(home)-Latest Post Type
This widget is built to help you display your latest posts in your Homepage Widget area.
- Add a title.
- Add a subtitle.
- Select the post type you want to get the latest items.
- Check if you need random posts instead.
- Add the number of posts.
- Select the output columns.
This widget displays your site’s social icons. In order to set them up, you need to visit Appearance → Customize → Social Networks and provide the appropriate URLs where desired.
Theme (home)-Hero Callout
This will allow you to display a Hero Callout specially designed for your frontpage sidebar.
- Add a Title for your Callout widget.
- Add a Subtitle for your Callout widget.
- Select a price and duration for your package.
- Select a Button text and a URL and change the text alignment.
- Add a Title for your Destinations widget.
- Add a Subtitle for your Destinations widget.
- Select the columns for your Destinations.
- Add a new item.
- Select the Destination you want from the drop-down.
- Add a Title for your Destination widget.
- Add a Subtitle for your Destination widget.
- Select the Destination you want from the drop-down.
- Change the excerpt length (in words) for the selected item.
Theme (Home)-Packages Search Form
This widget is mainly used in the homepage and will generate a search/filter form. In order the widget to work you will need to select a “Search Packages” page. You can create a page like this following these instructions.
How to use the page builder template
The theme comes bundled with a page builder template which allows you to use your favorite page builder plugin on it and create unique layouts very easily.
To use that template start by going to Pages → Add New. This will create a new page. Add a title to your page and select the Page builder template from the template dropdown in the Page Attributes meta box.
That’s it. You can now start building your page using the page builder of your choice, once done publish it and check it out.
Still have questions or problems setting up your CSSIgniter Theme? We will be happy to help you out! Please visit our support Hub