About Cousteau Pro

Cousteau is a travel theme for WordPress. It is suited for travel agents and related professionals.

Image Sizes

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
Slide: 1920x850px

 Useful Plugins

These plugins provide functionality and features used directly (or not) by the Theme. So, it is recommended to install and activate them before importing your sample content.

  • Cousteau Pro Specific plugin: You will be asked to auto install this plugin when installing the site. You can find this under your theme /plugins/ folder.
  • 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.
  • WPForms use this plugin to create a contact form, then copy the shortcode it gives you and paste it in an empty page.
  • Contact Form 7 use this plugin to create a contact form, then copy the shortcode it gives you and paste it in a page which will serve as your contact page.

Importing Sample Content using One Click Import

To automate the process of importing and for a better experience we have natively included support for OneClick Import Plugin. Let install it fist:

From your WordPress dashboard

  1. Visit ‘Plugins > Add New’,
  2. Search for ‘One Click Demo Import’ and install the plugin,
  3. Activate ‘One Click Demo Import’ from your Plugins page.

From WordPress.org

  1. Download ‘One Click Demo Import’.
  2. Upload the ‘one-click-demo-import’ directory to your ‘/wp-content/plugins/’ directory, using your favorite method (ftp, sftp, scp, etc…)
  3. Activate ‘One Click Demo Import’ from your Plugins page.

Once the plugin is activated you will find the actual import page in: Appearance > Import Demo Data.

 Click on the Import demo data button and you are done!

This plugin requires 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.

Making a Tour Package

Getting familiar with the Package Screen

Head over to PackagesAdd New. Then you should see this screen

Here you can start adding content for your package:

  1. Add a title for your Package.
  2. Add your Package Content.
  3. Add or Select a Destination for your Package. Check here on how to add a new Destination.
  4. Add or Select a Package Categories.
  5. Select the Featured image for your item.
  6. Add Some Content for the Package Hero Section
  7. Add More information for your Item.
  8. Enable the comment/discussion section.
  9. Publish you package.

Adding Package Details

Lets have a quick look on our Package Details section. In the Price tab you can

  1. Select if the Package is an offer
  2. Change the price (number)
  3. Select a price text. Notice that :price: tag will be replaced by the actual price

Under the Duration Tab you can

  1. Select the Duration of the Tour
  2. Some informational text on the duration

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 :

  1. Add A Page title.
  2. Add a Page subtitle.

Also you can style your Hero with a background image / video or color :

  1. Align the Title.
  2. Hide the Page title.
  3. 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.
  4. Add a background Video.
  5. 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 though 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

<h2 class="anchor-title">Itinerary</h2>

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 AppearanceCustomizeWidgetsPackages. 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

<div class="theme-form content-elevated">
	
[contact-form-7 id="XX" title="Contact form X"]

</div>

Where you can change X to your Contact Form 7 ID and the title to your preference.

Adding Destinations

Creating Destinations is Crucial to organize your tours and content. You can add your destination from PackagesDestinations.

After selecting your Destination name, description and slug, you can select some extra information to alter the behaviour and appearance of your Destination

  1. You can select a page which the Destination will take its default content. The featured image of this page will serve as the main image of the Destination,
  2. Here you can control the appearance of the Destination’s Hero section.

Destination Widget Areas

Your Destination archive have two specially reserved sidebars from AppearanceCustomizeDestination Listing (next to the package listings) and AppearanceCustomizeDestination Content (next to the destination content)  in which you can add any widget you need including the Theme-Contact Widget from our demo

Adding Package Categories

From PackagesCategories you can create new categories for your Packages/Tours

Theme pages

Let’s start by adding the first few basic pages you are going to need. Go to Pages > Add New and create the following pages:

Frontpage Page

To set up the homepage create a page named Home and set to it the Front page 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 section.

Hero Section

This the basic section before the contents of your page and you can :

  1. Add A Page title.
  2. Add a Page subtitle.

Also you can style your Hero with a background image / video or color :

  1. Align the Title.
  2. Hide the Page title.
  3. 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.
  4. Add a background Video.
  5. Add a background image and change its position  and screen coverage.

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 plugins documentation here first on how to use it.

If you choose not to have a slider you can add some custom meta data:

  1. Add custom meta fields the will appear before your hero title/subtitle.
  2. Add button with a custom text and link for your hero section.

Search Packages

This is the default page that will display all your Packages / Tours when searching from all theme’s search modules.

Blog

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.

Full Width Page

In this page you can add any content you wish without displaying the sidebar.

Default Page

In this page you can add any content you wish but the the sidebar. You can select under Sidebar section where you need your sidebar to appear

Also, you can select whether you need to display the featured image in that page.

by checking the “Hide when viewing this post’s page” option in your Featured image box.

Hero Section

The Hero Section is a generic options box you can find in All pages and will help your control the Hero Section for each page.

This the basic section before the contents of your page and you can :

  1. Add A Page title.
  2. Add a Page subtitle.

Also you can style your Hero with a background image / video or color :

  1. Align the Title.
  2. Hide the Page title.
  3. 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.
  4. Add a background Video.
  5. Add a background image and change its position  and screen coverage.

Customizing Your Theme

All theme customization is done via WordPress’s 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 three sections.

In the Header style section  you can set the logo layout you wish your header to have and make it full width.

Under the Top menu bar you can add some custom text to it like your email or phone number. as well as select whether you need to show or not Search module or your social Icons.

In the Primary menu bar  you can select if you wish to have a sticky menu and change various display settings like the vertical padding of the menu and its text size.

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.

Blog Settings

This tab allows you to customize your blog and post options.

Under Post Options you can select which elements you wish your single blog posts to have. This includes showing or hiding the date, the featured image, the author and author box etc. Or even enabling/disabling the Lightbox option for your galleries.

In Archive options you have customize the default WordPress archive pages like category, tag, etc.

  1. Change the Layout by selecting in how many columns you need your content to appear.
  2. Enable Masonry effect in case you have articles with different content and featured image height.
  3. Select the article excerpt length.
  4. Select a pagination method.

Tours & Destinations

Through this tab you can control the Tours Search and Destination pages options

Colors

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 AppearanceColorsHero, but change the footer background image/color  from AppearanceColorsFooter

Typography

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.

Titles

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.

Social Networks

In this section You can add your Social Network URLs. These icons will be displayed in the Theme-Social Icons Widget automatically.

Here you can modify the credits text and your Footer Column Layout.

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.

Other

Here you can download your sample content files.

Widgets

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.

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.

Widgets

We have handcrafted some custom widgets to help you better display your content. You will find them under Appearance  Customize Widgets or Appearance Widgets

Theme-Contact

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.

  1. Add a title for your Contact widget.
  2. Add a map code (iframe).
  3. Add a contact title
  4. Create new complementary elements.
  5. Add an icon code  (from fontawesome.io) and some text along.

Theme-Schedule

This widget allows you to create a small Schedule table with extra contextual information.

  1. Add a title for your widget
  2. Add some complementary text. You can use HTML tags also if you wish.
  3. Add a new day/time widget.
  4. Add your day and time information for each item.

Theme(home)-Instagram

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

  1. Add a title for your Instagram Widget.
  2. Add your Instagram Account.
  3. Add a number of photos you wish to display.
  4. Select whether you need your images to open in the current window or open in a new tab.
  5. 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.

  1. Add a title.
  2. Select the post type you want to get the latest items.
  3. Check if you need random posts instead.
  4. 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.

  1. Add a title.
  2. Select the post type.
  3. Select the output columns.
  4. Add the Item you wish to output.
  5. Select the Item from the dropdown menu.

Theme(home)-Latest Post Type

This widget is built to help you display your latest posts  in your Homepage Widget  area.

  1. Add a title.
  2. Add a subtitle.
  3. Select the post type you want to get the latest items.
  4. Check if you need random posts instead.
  5. Add the number of posts.
  6. Select the output columns.

Theme-Social Icons

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.

  1. Add a Title for your Callout widget.
  2. Add a Subtitle for your Callout widget.
  3. Select a price and duration for your package.
  4. Select a Button text and a URL and change the text alignment.

Theme (Home)-Destinations

  1. Add a Title for your Destinations widget.
  2. Add a Subtitle for your Destinations widget.
  3.  Select the columns for your Destinations.
  4. Add a new item.
  5. Select the Destination you want from the dropdown.

Theme (Home)-Destination

  1. Add a Title for your Destination widget.
  2. Add a Subtitle for your Destination widget.
  3. Select the Destination you want from the dropdown.
  4. Change the excerpt length (in words) for the selected item.

Customize Widgets

In some themes widgets, You can use the Customize button to add a background image or color. You can also create a color overlay or stretch your background image to cover the entire width of the widget. You can also enable a parallax effect for your background image.

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 drop down in the Page Attributes metabox.

ci_page_builder_template

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.

Next Steps

Still have questions or problems setting up your CSSIgniter Theme? We will be happy to help you out in our support forums

Use the coupon code IGNITER30 to get 30% off any purchase Buy Now!