Search Results

About Moliere

Moliere is a powerful Hotel theme with a unique design and  vast customization options.

Image Sizes

The minimum recommended image sizes for Moliere are:

• Post thumbnail: 850x478px
• Item thumbnail: 615x346px
• Media Item tall: 615px unlimited in height
• Large Item image: 1260x709px
• Article Image: 510x510px
• Hero image: 1700x956px

Getting Started

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.

Required Plugins

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. This plugin is located inside the /plugins/ folder in your theme archive.

Recommended plugins

Under the Recommended Plugins tab you will find a list of supported plugins that will enhance the theme’s functionality.  It is recommended to install and activate them before importing your sample content.

• WooCommerce: To enable eCommerce functionality for your website
• Elementor: A free page builder that delivers high-end page designs and advanced capabilities.
• MaxSlider : Use this plugin to help you create custom sliders and use them anywhere you wish shortcodes.
• One Click Import : Use this plugin to help you import your content with just one click.
• Contact Form 7: Use the plugin in order to get booking and contact forms on sample content import

All the above are mandatory while these:

• WPForms use this plugin to create a contact form, then copy the shortcode it gives you and paste it in an empty page.

plugins are complementary.

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

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

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.

Customizing Your Theme

All theme’s customizations and settings can be 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:

Let’s take a look at the options each tab gives you.

Global

Global section will allow you to control the layout, colors and typography that will apply everywhere in the theme:

Global→Layout

Let’s have a look at each option this section provides:

1. Apply a full width or boxed container for all content.
2. Control the inner full content width.
3. Control the content width from (from 1 to 12).For example 8 means that your content width will have the 8/12 of your Inner Site Width while the other will be reserved for the sidebar.
4. The sidebar width.For example 5 means that your content width will have the 5/12 of your Inner Site Width while the other will be reserved for the main content.

When selecting a Boxed layout you will get this screen:

1. You can switch layouts anytime you wish.
2. Control the outer width of your main content.
3. Control the inner width of your main content.

Global→Colors

This section will allow you to change the background color / image as well as all your basic theme elements, like your links, forms, headings, buttons colors:

1. Change the body background color.
2. Add of remove background image.
3. Control the background location and size.
4. When using a boxed layout you can select the inner background color.
5. Select the boxed layout background image.
6. Also you can control the boxed background image location and size.

Typography

Customizing your fonts is included natively in Moliere:

1. Enable the use of Google Fonts. Not checking this option will give you web safe font controls for your main body text.
2. Change the main font family you need to use.
3. Change your settings depending on the visitor viewport. This gives you the advantage of having different font sizes for Desktop, Tablet and mobile devices.
4. Change the font size and Line height.
5. Change the text type and your letter spacing.

Top Bar

Top Bar section will allow you to control the area before your main header. This area contains various elements, like search, social icons and placeholders via shortcodes as well as informatory text.

You can control its layout, content, colors and typography directly via the customizer.

Top Bar→Layout

In this section you can:

1. Show / hide the top bar.
2. Change the top bar visibility in mobile devices.
3. Change the padding of the top bar in desktop, tablet, mobile.
4. Arrange the top and bottom distance of  the top bar. The chain button will allow you to change these values equally.

Top Bar→Content

Here you can control what the top bar will actually have as content:

1. Control the Left Content area, using various shortcodes or text.
2. Control the Right Content area again using shortcodes or text.

You can find all theme’s shortcodes here.

Top Bar→Colors

Here you can control all related colors of each element that renders in the top bar.

Top Bar→Typography

Controlling typography is quite simple as well. In this section you can:

1. Change the main font family you need to use.
2. Change the font size and Line height.
3. Change the text type (uppercase,lowercase) and your letter spacing.
4. Change your settings depending on the visitor viewport. This gives you the advantage of having different font sizes for Desktop, Tablet and mobile devices.

Header

Here you can control the basic Layout, Content, Colors and Typography of your header. You can also control if you need your header to stick to the top when scrolling.

Header→Layout

Here you can control the basic structure of your header area.

In detail you can:

1. Control the header type. Normal means the header will not cover the hero, while being transparent will do! (Even if you don’t have transparency setup from your Header Colors section)
2. Make the header cover the full width of the screen.
3. Change the Header top and bottom padding and lock these values to behave the same.
4. Change the padding section in any device type.

Header→Content

While your header actually has the main menu attached you can add any text/shortcode you wish before or after the main menu. Add a social icon shortcode for example.

Header→Colors

Here you can control all header colors. Pay special attention to the transparency control when using the Transparent header type.

Header→Sticky Colors

Here you can control the colors for your sticky header.

Header→Typography

Here you can control the Main Menu Font style.

1. Change the main menu font family and settings
2. Change the submenu font family and settings

Also in the same section you can change (if you are using a text logo):

1. The text Logo font family and style.
2. The tagline font family and style.

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.

1. Select an image Logo.
2. Select an alternate logo that will appear either when your header is sticky with different background color, or when your header has the transparent type selected. This extra field will ensure maximum contrast in any case scenario.
3. Limit the size logo in half (you will need to use a 2x image) for retina devices.
4. Add you site title.
5. Add you site tagline.
6. Show/hide your site title.
7. Show/hide your tagline.

For you main site icon you can select any image you want as long as its 512x512px in width and height and its square.

Hero

This is the basic section before the contents of your page and you can control the Layout, Content colors and typography of this particular section.

Hero→Layout

Here you can:

1. Show or hide the hero section
2. Change the section visibility depending on the device viewport size.
3. Change the hero height,
4. Control the hero height in desktop/mobile/tablet
5. Change the hero padding and lock the proportions in order to change dynamically.
6. Control the hero padding in desktop/mobile/tablet
7. Control the horizontal alignment of your hero content.
8. Control the vertical alignment of your hero content.

Hero→Colors

Here you can:

1. Add a background color.
2. Add a background image and control your image settings and position.
3. Use an overlay background color for your image to increase the contrast for your content.
4. Change the primary text color.
5. Change the secondary text color.

Hero→Content

This is the basic Hero content section:

1. Have a global title for the entire site
2. Have a global subtitle for the entire site
3. Change the title in category/tag archives
4. Change the subtitle in category/tag archives

Hero→Typography

Here you can control:

1. Your primary title heading type. This can be any suggested HTML tag
2. Change the primary text font family and settings
3. Change the primary text settings in mobile, desktop, tablet viewport
4. Your subtitle HTML tag
5. Change the secondary text font family and settings
6. Change the secondary text settings in mobile, desktop, tablet viewport

Blog

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

Blog→Layout

Here you can change your single post and archive (category and tags) looks.

1. Change the main blog page Layout.
2. Change your archive layout type.
3. Change the pagication method.
4. Change the Related post columns.

Blog→Content

Here you can control which elements you want to show/hide in your Single Post pages and Archives:

For Archives:

1. Change the excerpt length in words
2. Show or hide the featured image
3. Show or hide the post title
4. Show or hide the post meta
5. Show of hide the content
6. Show or hide the Read more button

While in Single Posts you can:

1. Show or hide featured images.
2. Show or hide the title.
3. Show or hide meta information.
4. Show tags.
5. show post pagination.
6. Show the author box.
7. Show related posts.
8. Show comments.

Blog→Typography

Here you can change your Archive typography:

1. Change the archive heading HTML tag.
2. Change the post title font family
3. Change the font size and other settings in different viewports
4. Change the post meta font family and settings
5. Change the post size and other settings in different viewports

Same applies in single post typography:

Here you can:

1. Change the post heading HTML tag
2. Change the Font family and settings of the post title
3. Change the post meta font family and settings
4. Change the font size in various viewports

Sidebar

Here you can change your sidebar options.

Sidebar→Layout

Under the Layout section you can:

1. Change the Sidebar padding in any possible viewport
2. Change the widget padding in both mobile/desktop/tablet.
3. Change the widget title padding
4. Change the widget bottom margin.

Sidebar→Colors

Here you can customize all sidebar and widget colors.

Sidebar→Typography

1. Change the sidebar widget text family and settings.
2. Change the sidebar widget text size in Desktop/Mobile/Tablet.
3. Change the sidebar widget title font family and settings.
4. Change the sidebar widget title font size in Desktop/Mobile/Tablet

Footer

Footer section also has a full customizable layout, color and typography section:

Footer→Layout

Here you can:

1. Show or hide the footer area
2. Select the footer visibility in Mobile devices
3. Select the footer columns you need
4. Make the footer full width
5. Change the Footer padding
6. Change the Footer padding in all possible viewports
7. Change the Footer widget titles padding and
8. Change the Footer widget titles padding in Mobile devices.

Footer→Colors

Here you can change most of the footer and footer contents colors. While in general you can:

1. Add a background color.
2. Set a background image and customize its appearance.

Footer→Typography

Footer Credits

After the main footer area we have reserved a Footer Credits section you can add you copyright text or any content you wish via shortcodes.

Footer Credits→Layout

Here you can

1. Show or hide the footer credits
2. Change the credit visibility in mobile devices

Footer Credits→Content

Currently there are two areas you can use to add your content.  Both these support some HTML eleements.

1. Add your text/shortcode in the Left content area.
2. Add your text/shortcode in the Right content area.

Footer Credits→Colors

Here you can control all Footer Credits colors.

Footer Credits→Typography

This section gives you the option to change the credits text style.

1. Change the Font family and font settings of the Footer credits section
2. Control all font settings in any possible viewport.

Social

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

Here you can add your social network URL and change your icon colors

Social→Layout

1. Select if you wish to open your links in new tabs
2. Change the font size
3. Change the icon size

Social→Colors

Change the Social icon and background colors

Social→Content

Add you social networks in the content area.

Utilities

This section provides control over the Lightbox (gallery popup) and the Back to top button.

Utilities→Lightbox

Here you can switch the theme Lightbox off, if you need to use a third party one, or simply nothing.

Utilities→Back to top button

This section will help you

1. Enable the back to top button
2. Change the button visibility
3. Change the button position and
4. Change the button position in various viewports
5. Select its background color
6. Change its icon color

Menus

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.

Widgets

Through this tab you can add widgets to the theme’s sidebars. The theme features eight widgetized areas to provide you maximum flexibility when displaying your content.

Homepage Settings

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. Here you can also set the Blog page to be your default posts page.

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.

Creating a Widgetized Front Page

Navigate to Content Area→Layout and under the Layout dropdown select the Widgetized front page.

Then open in the Content Area the Content tab and set a MaxSlider Shortcode.

Then select this page as a static frontpage from Settings→Reading.

Creating a Page Builder Frontpage / Landing Page

Create a new page like described here and navigate to Content Area→Layout and under the Layout dropdown select the Contained or Full Width Page builder option

If this is your homepage select it as a static frontpage from Settings→Reading.

Creating a Rooms Listing Page

Create a new page like described here and then navigate to Content Area→Layout and under the Layout dropdown select the Room Listing option.

Here you can

1. Show or hide the page title
2. Select a Room category that will be the base for your Room items. Leaving this blank will fetch all your Rooms.
3. Change the grid loading effect
4. Change the grid spacing
5. Change the number of columns for your list
6. Use a masonry effect for different image sizes.
7. Use category filtering. This will display all categories as filter options and will also show all your rooms
8. Change the items per page,-1 will show them all, while not having anything here will default to the Settings→Reading Post to show option.

Adding a new Room

Adding a new Room is relatively easy. Navigate to Rooms→Add New and you will see this screen

1. Add a new Room name
2. Add some content / galleries / amenities
3. Change your Rooms settings.
4. Organize your Rooms via Categories (You can add a new category directly from this section or  Categories→Add New)
5. Set a basic Featured image that will be used page Room listings and Room taxonomy listings

While most of them are straight forward, we will have a look a the Room details which will help you customize each Room separately, altering the main Customizer settings to your needs.

Room settings consists of 6 main customization tabs. These are exactly the same options as Pages but with certain functionality to match the Rooms post type.

These tabs are

1. Top Bar
2. Header
3. Hero
4. Content Area
5. Footer
6. Footer Credits

While most of these section are inherited from your Customizer settings we will focus on the Content Area.

Navigating to the Layout tab will give you the option to

1. Change the Layout for this specific area.
2. Show / Hide the main title.
3. Show / Hide the main subtitle.

While you can control your  Content

1. Add a shortcode or content before the main room area
2. Add subtitle that will appear under your main Room title
3. Add an offer text for the room listing page
4. Add a slider gallery with your images

Creating an Attraction Listing Page

First Create a new page like described here then navigate to Content Area→Layout and under the Layout dropdown select the Attraction Listing option.

1. Show or hide the page title
2. Change the grid loading effect
3. Change the grid spacing
4. Change the number of columns for your list
5. Use a masonry effect for different image sizes.
6. Change the items per page,-1 will show them all, while not having anything here will default to the Settings→Reading Post to show option.

Adding a new Attraction

Attraction items are Custom post types you can add from Attractions→Add New. These items don’t have any taxonomy option though.

1. Add a new Attraction name
2. Add some content / galleries / etc
3. Change your Attraction settings.
4. Set a basic Featured image that will be used page Room listings and Room taxonomy listings
5. Publish your post.

Attraction settings consists of 6 main customization tabs. These are exactly the same options as Pages but with certain functionality to match the Attraction post type.

These tabs are

1. Top Bar
2. Header
3. Hero
4. Content Area
5. Footer
6. Footer Credits

and the have the same behaviour as the Page settings.

Creating a Full width page

To add new posts to your blog, go to Pages → Add new and navigate to Content Area→Layout and under the Layout dropdown select the Fullwidth or Fullwidth Narrow option.

Creating a Service page

Services are a simple pages but with a common parent page as a listing page. Creating them will be as simple as creating a new page from Page→Add New and selecting a common parent page from Page Attributes section. These services have a different Hero Layout

Besides the Hero background for Services, all other options are the same as a single page.

Adding a new page

To add new posts to your blog, go to Pages > Add new and proceed to:

1. Add a title to your page
2. Enter the content in the editor
3. Change the page settings
4. Upload a featured image by clicking “Set featured image” on the Featured Image panel
5. once finished clicking the Publish button to publish the post

Page Settings

This is the main settings panel which you can use to alter your page functionality and looks. Here you can alter your page to behave as a listing page for Rooms and Attraction or a listing page for children pages when the one editing is a parent to them. Lets check all Tabs one by one to identify their functionality.

1. Here you can bypass all Top Bar Customizers settings
2. Differentiate a page header from the default one you created in Customizer
3. Change the Hero content and styling for specific page
4. Change the Page type and enchant its layout functionality from Content Area
5. Change the Footer section properties for a certain page
6. Change the Footer Credits section properties for a certain page

While All tabs are mimicking the Customizer behaviour but for the page you are creating, under the Content Area tabs we have a set of special options for each page.

Page→Top Bar

This will Control the top bar layour of that particular page. If settings stay intact, customizer ones will be imported

1. Show or not the Top Bar for that page
2. Change the Top bar visibility

In the same section you can control the top bar content, again for this particular page.

1. Add content (shortcodes or HTML).
2. Add content on the left top bar area.
3. Add content on the right top bar area.

In the next tab you can change the Top bar colors for that page

1. Change the background color.
2. Change the border color.
3. Change the text color.
4. change the link color.
5. change the hover color of the link.

Page→Header

Here you can control the Header Layout

1. Change the  Header type of the page
2. Change the Header padding of the page
3. Change the menu layout for that page
4. Change the menu padding

While, you can also add content before or next to the main menu, for that page only.

Also you can

1. Add Content like text or shortcodes before the header
2. Add Shortcodes or HTML in the main header area
3. Add A main menu
4. Add a Main menu that will appear on the right side when a Menu split is selected.

Finally, you can change all header Colors like

1. All Header area colors
2. All Logo colors
3. All Menu colors
4. All Sub menu colors

Page→Hero

Here you can control the Hero layout of the page. Leaving these settings untouched will automatically inherit all your Customizer settings under Customize→Hero

1. Choose to show or not the hero
2. Change the Hero height
3. Change the horizontal alignment of your text
4. change the vertical alignment of your text

Next, you can change the Hero Content, like:

1. Add a shortcode before the hero section
2. Add a title
3. Add a subtitle
4. Add a callout button text
5. Add a URL for your button

Along, you can change the colors or the background of the Hero section.

1. Add a background color
2. Select an image and change its position settings
3. Add an overlay color for your background image
4. Select the title text color
5. Select the subtitle text color
6. Select the button background color

Finally you can set the Hero typography settings

1. Change the title text font and font style.
2. Select the HTML tag for this element.
3. Select a secondary text font.
4. Select a secondary text HTML tag.

Page→Content Area

Here you can control the main content area Layout

1. Change the Page default layout
2. Show its title or not

Also you can

1. Set a shortcode to show before your main page content

Page→Footer

This is the main layout section for the page footer

You can select whether you can

1. Show or hide the footer

While you can also add some content before the main page footer area

1. Add some text or shortcode before the footer.

Also you can change all page footer colors, for that specific page

1. Change the Footer background
2. Add a Footer image and select its settings
3. Change the Footer Widgets colors

Page→Footer Credits

You can change the Layout of the page Footer credits

1. Showing or not the credits area

Also you can control the content before the page Footer Credits section

1. Add a shortcode or text there

Finally you can change the Footer Credits Color for this page

1. Change the background color of your Credits footer section for a specific page
2. Change the text color for the Credits footer section for a specific page
3. Change the like color for the Credits footer section for a specific page
4. Change the link hover color for the Credits footer section for a specific page
5. Change the border  color for the Credits footer section for a specific page

Creating a page for your posts

To setup your blog page you can go to Pages → Add New and create a page named Blog. Then navigate to Settings → Reading and set that page as your posts page.

Now you can add that page to your menu to give your visitors easy access to all your posts.

In this page you can control via its Page Settings section how the hero behaves in the blog page but it will also affect the hero section of the following pages: Categories, tags, author archives & date archives. If you don’t change anything in this page, Customizer settings will be respected.

Handling Hero images in Categories / Tags

You can change in each category your Hero background image and title to your preference, from Posts→Categories and Posts→Tags under the Hero section. If no Hero image is selected, the category/tag will default to the Blog page values, and if no blog page settings exist then it will inherit the Customizer→Hero values.

Lets have a quick look how to change the Hero background for every category. First navigate to Posts→Categories and add a new or edit the category you need to change.  Then scroll down to this screen:

1. You can set your taxonomy title
2. Change your taxonomy subtitle
3. Select a background color
4. Upload a background image for your hero
5. Change the background image settings

Following this section there is a color selection for every aspect of the taxonomy hero

while scrolling more you will get this

1. You can change the primary text font (title)
2. The primary font HTML tag
3. The secondary text font
4. The secondary font HTML tag

These settings are the same for Tag archives also.

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-Tabular Data

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 item
4. Add your item Label.
5. Add the item value
6. Remove the 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 the Instagram Photo size.
5. Select whether you need your images to open in the current window or open in a new tab.
6. Change the link text.

Theme (home)-Latest Posts

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

1. Add a title.
2. Add a subtitle.
3. Select the category your need to display the latests posts from.
4. Show random posts instead.
5. Change the post number.
6. Adjust the number of columns for your content.
7. Show carousel like widget with your posts.

Theme-Callout

This is a simple Callout widget, that will allow you to add a text with a button in any sidebar you want.

1. Add a widget title
2. Add a Title for your Callout widget.
3. Add a Subtitle for your Callout widget.
4. Select a Button text
5. Select a button URL.

Theme-Buttons

This widget will help you render a list of buttons.

1. Select the Widget Title.
2. Add a new button.
3. Add the button title.
4. Add a button subtitle.
5. Add a button icon.
6. Add a button  link.
7. Remove the button.

Theme-Page Children Menu

When you have a parent page, in any of its children that this widget is present it will create a menu linking to other children of the same parent page.

1. Widget Title
2. Hierarchy settings.

Theme-Social Icons

This widget displays your site’s social icons. In order to set them up, you need to visit Appearance→ Customize → Social → Content and provide the appropriate URLs where desired.

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. Add a subtitle
3. Select the post type.
4. Select the output columns.
5. Add the Item you wish to output.
6. Select the Item from the drop-down menu.

Shortcodes

You can use these shortcodes in any HTML/shortcode reserved area:

[site-socials]

This shortcode will display the site’s social icons. You can edit these icons from Customize→Socials→Content

[site-search]

Displays a search icon which, when clicked, drops down a searchform from the top of the page.

[site-title]

Displays the site title.

[site-tagline]

Displays the site tagline.

[custom-menu name="Menu name"]

Displays the *top level items* of a menu. Inside the name=”” parameter there should be the *name* of a user-created menu, not its slug. e.g. [custom-menu name=”Main Menu”]

[minicart-button]

Displays a cart button which, when clicked, expands into a minicart. Please note, this shortcode is only available when the WooCommerce plugin is activated.

[menu-items]

Elementor Widgets

Moliere comes with custom Elementor widgets which have the same functionality as its widgets, making landing pages easier to create.

Moriele Element

This is your Swish knife when using Elementor plugin. With Moliere Element you can render all your content from posts/pages/rooms/attractions and their taxonomies(if any) as well as manually get any part of your content using a search keyword. Let’s have a quick look

1. Select in how many columns your content will render
2. Select the main source type for your content. Notice, you can select a manual mode, where you will get the source based on you search criteria
3. Filter your source content by author.
4. Select a category. If blank all categories will be shown.
5. Exclude a category.
6. Select a posts per page
7. Select the offset of the rendered posts (2 for example, will leave the first two).
8. Select the order by a value (Date, etc)
9. Select the order of your results (descending etc)

Hooks

Hooks will allow you to add extra functionality at a various areas inside the theme. For example, you might need to add a simple ad banner or text after each post, or after your header! Hooks will help you achieve this.

Check this WordPress Hooks API guide to make yourself familiar with Hooks (actions/filters etc).

Visualization of basic theme hooks

Examples

add_action( 'moliere_head_mast_before', 'moliere_custom_script_before_header' );

function moliere_custom_script_before_header() {   
 // Your PHP goes here
}

add_action( 'moliere_after_header', 'moliere_custom_html_after_header' );
function moliere_custom_html_after_header() { ?>      
<!-- Your HTML goes here -->
<?php }

Still have questions or problems setting up your CSSIgniter Theme? We will be happy to help you out! Please visit our support Hub 

About Decorist

Decorist is a powerful WooCommerce theme with a unique design and a versatile product search.

Image Sizes

The minimum recommended image sizes for Decorist are:

• Post thumbnail: 960x540px
• Item thumbnail: 630x355px
• Media Item thumbnail: 520x520px
• Media Small Item thumbnail: 90x90px
• Full Width single image: 1290x750px
• Hero Image: 1920x300px
• Large Item block: 910x510px
• Long Item block: 1920x215px
• Medium Item block: 630x3450px
• Xtra Large Item block: 1290x725px

Notice, the original demo images are not redistributed (unless noted). Instead blurred equivalents will be imported while installing the sample content.

Getting Started

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.

Required Plugins

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. This plugin is located inside the /plugins/ folder in your theme archive.

Recommended plugins

Under the Recommended Plugins tab you will find a list of supported plugins that will enhance the theme’s functionality.  It is recommended to install and activate them before importing your sample content.

• WooCommerce: To enable eCommerce functionality for your website
• Elementor: A free page builder that delivers high-end page designs and advanced capabilities.
• MaxSlider : Use this plugin to help you create custom sliders and use them anywhere you wish shortcodes.
• One Click Import : Use this plugin to help you import your content with just one click.

All the above are mandatory while these

• WPForms use this plugin to create a contact form, then copy the shortcode it gives you and paste it in an empty page.
• WP Instagram Widget: Use this plugin to help you display your Instagram feed in any of the theme’s sidebars.

plugins are complementary

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

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

Figure 4. One Click import screen

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

Header Options are split into two sections.

In the Header style section  you can set the layout style your wish your header to have.

1. Make the header full width.
2. Enable AJAX Search Form.

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.

1. Change the Vertical Padding.
2. Change the menu size.
3. Enable/Disable the sticky menu bar.

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.

1. Upload your logo
2. If you are uploading a retina size image (2x) this option will contain it to half of its original width
3. Change the site title, this will be served as an alternative to the image logo
4. Change the site subtitle (tagline)
5. Show or hide the site title
6. Show or hide the site tagline
7. Upload a site icon.

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.

1. Change the Layout by selecting in how many columns you need your content to appear.
2. Show or hide the sidebar.
3. Enable the Masonry effect in case you have articles with different content and featured image height.
4. Select the article excerpt length.
5. 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:

1. Show/Hide the featured image of your post.
2. Show/Hide the date the post is published
3. Show/Hide the author.
4. Show/Hide Comments
5. Show/Hide the post Category
6. Show/Hide tags
7. Show/Hide the author box
8. Show/Hide related posts
9. Show/Hide social sharing icons
10. Enable/Disable Lightbox

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

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.

Menus

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. Decorist has two main menu locations, one is reserved as the main navigation menu while the second is complimentary for the WooCommerce  Account page or a Track your order button like our demo.
In all menu items you can add a special FontAwesome Class that will add and icon before any menu item.

Notice that there is a special menu item in the main menu, there you can link to a special product category you wish or a page in the main menu with some spacing

Adding the menu-item-first  class along with a class icon like fas fa-percent for example will keep the menu item aligned left and add a Font Awesome icon to it. You can select any icon from this list here. You can add a class in any menu item from Appearance→Menus  (You must have the Class field enabled from Screen Options) or from Appearance→Customize→Menus.

Titles

In this tab you can change the titles for various theme pages, like the blog, search and 404.

Footer

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

In the Footer Style section you can:

1. Change the number of Columns in your footer.
2. Make the footer Full Width.

In the Bottom bar section you can:

1. Show the bottom bar.
2. Add a credits text.
3. Add generic icons for Payment or brands from https://fontawesome.com/icons?d=gallery&s=brands&c=payments-shopping

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.

WooCommerce

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;

1. Choose what you want to render in the main shop page.
2. Choose what you want to display in the category pages
3. Change the default product sorting
4. Change  products per row
5. Select how many rows of products you need per page
6. Change the sidebar location
7. Show or hide, categories
8. Show or hide  star ratings
9. 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.

Widgets

Through this tab you can add widgets to the theme’s sidebars. The theme features eight widgetized areas to provide you with maximum flexibility when displaying 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. Here you can also set the Blog page to be your default posts page.

Adding a new post

To add new posts to your blog, go to Posts > add new and proceed to:

1. Add a title to your post
2. Enter the content in the editor
3. Upload a featured image by clicking “Set featured image” on the Featured Image panel
4. Add a category
5. Add a tag to the post
6. once finished clicking the Publish button to publish the post

Creating a page for your posts

To setup your blog page you can go to Pages > Add New and create a page named Blog. Then navigate to Settings > Reading and set that page as your posts page.

Now you can add that page to your menu to give your visitors easy access to all your posts.

Adding Products

Earlier we saw how we can install WooCommerce. Let’s take a brief look at creating products. Start by going to Products > Add Product.

1. First we need to fill in the product title,
2. Add the product’s description,
3. In the Product Data metabox you will fill all the required product info, such as price, inventory, tax and shipping information and more,
4. Fill in a short product description
5. Add product gallery images to upload additional photos for the product,
6. Click Set Product Image to add the product’s featured image
7. Add Tags to your product to make filtering easier
8. 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.

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:

Front Page Page

First  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 Front page template page under the WordPress text Editor you have a Front page 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:

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, from YouTube or Vimeo.
5. Add a background image and change its position and screen coverage.

Front page Options

Here, you can add a call-out button in your front page hero section. Under Frontpage Options you can

1. Add a button text and
2. Add a button URL

In the Slider Tab you can select a MaxSlider Slideshow to appear instead of a hero image or choose to not have a slideshow at all.

Setting Up the Frontpage

If you want to setup the frontpage you will need to assign the page with the frontpage template as your homepage from Settings→Reading. Then head over to Appearance→Customize→Widgets→Frontpage. Here you can add/edit widgets that will fetch your posts, products, categories or pages. We have 4 premade Front Pages for you.

Frontpage 1

This one consists of the following 8 widgets

Frontpage 2

This want consists of the following 4 widgets

Frontpage 3

This one has 4 widgets like show bellow

Frontpage 4

This Frontpage is created by Elementor. You can create Elementor landing page or a front page like described here

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. You cannot control the background image from the Layout Section of this page since it is registered by WordPress.

Full Width Page

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

Default Template

In this page you can add any content you wish as you would do in a normal page. The default template gives you the option to select a Featured image layout under the Featured Image Section.

Page builder and Page Builder Contained 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. The main difference between them is that the Page Builder Contained template restricts the builder width to the theme’s default container width.

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.

That’s it. You can now start building your page using a page builder of your choice. On the theme’s demo we have used extensively the Elementor page builder plugin.

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 the Instagram Photo size.
5. Select whether you need your images to open in the current window or open in a new tab.
6. 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 your widget 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)-Latest Products

Here you can display your latest products either from a category or not.

1. Add a title
2. Add a subtitle
3. Select if you wish a specific category you want to retrieve your latest products
4. Select the number of products
5. Select the output columns

Theme (home)-Latest Posts

This widget is built to help you display your latest posts in any widget area you wish.

1. Add a title.
2. Add a subtitle.
3. Select the category your need to display the latests posts from.
4. Show random posts instead.
5. Change the post number.
6. Adjust the number of columns for your content.
7. Show carousel like widget with your posts.

Theme (home)-Woocommerce Categories

This widget will display various layout of selected categories.

1. Add a title
2. Add a subtitle
3. Select the proper layout for your products
4. Add categories as Layout items
5. Select the item/category you want to display

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)-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 drop-down menu.

Elementor Widgets

Decorist comes with custom Elementor widgets which have the same functionality as its widgets, making landing pages easier to create.

Next Steps

Still have questions or problems setting up your CSSIgniter Theme? We will be happy to help you out! Please visit our support Hub 

About Nozama

Nozama is a powerful WooCommerce theme with a unique design and a versatile product search.

Image Sizes

The minimum recommended image sizes for Nozama are:

• Post thumbnail: 960x540px
• Item thumbnail: 630x355px
• Media Item thumbnail: 520x520px
• Media Small Item thumbnail: 90x90px
• Full Width single image: 1290x750px
• Hero Image: 1920x300px
• Large Item block: 910x510px
• Long Item block: 1920x215px
• Medium Item block: 630x3450px
• Xtra Large Item block: 1290x725px

Notice, the original demo images are not redistributed (unless noted). Instead blurred equivalents will be imported while installing the sample content.

Getting Started

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.

Required Plugins

Figure 1: Welcome screen after installing Nozama

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. This plugin is located inside the /plugins/ folder in your theme archive.

Recommended plugins

Under the Recommended Plugins tab you will find a list of supported plugins that will enhance the theme’s functionality.  It is recommended to install and activate them before importing your sample content.

Figure 2. Recommended Plugins

• WooCommerce: To enable eCommerce functionality for your website
• Elementor: A free page builder that delivers high-end page designs and advanced capabilities.
• MaxSlider : Use this plugin to help you create custom sliders and use them anywhere you wish shortcodes.
• One Click Import : Use this plugin to help you import your content with just one click.

All the above are mandatory while these

• WPForms use this plugin to create a contact form, then copy the shortcode it gives you and paste it in an empty page.
• WP Instagram Widget: Use the latest version of this plugin to help you display your Instagram feed in any of the theme’s sidebars.

plugins are complementary

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.

Figure 3: Getting Started

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

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

Figure 4. One Click import screen

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

Header Options are split into two sections.

In the Header style section  you can set the layout style your wish your header to have.

1. Make the header full width.
2. Enable AJAX Search Form.

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.

1. Change the Vertical Padding.
2. Change the menu size.
3. Enable/Disable the sticky menu bar.

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.

1. Upload your logo
2. If you are uploading a retina size image (2x) this option will contain it to half of its original width
3. Change the site title, this will be served as an alternative to the image logo
4. Change the site subtitle (tagline)
5. Show or hide the site title
6. Show or hide the site tagline
7. Upload a site icon.

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.

1. Show or hide the sidebar.
2. Select the article excerpt length.
3. 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:

1. Show/Hide the featured image of your post.
2. Show/Hide the date the post is published
3. Show/Hide the author.
4. Show/Hide Comments
5. Show/Hide the post Category
6. Show/Hide tags
7. Show/Hide the author box
8. Show/Hide related posts
9. Show/Hide social sharing icons
10. Enable/Disable Lightbox

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

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.

Menus

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. Nozama has two menu locations, one is reserved as the main navigation menu while the second is complimentary for the WooCommerce  Account page.

Notice that there is a special menu item, you can link to a special product category you wish or a page.

Adding the menu-item-first  class along with a class icon like fas fa-star for example will keep the menu item aligned left and add a FontAwesome icon to it. You can select any icon from this list here. You can add a class in any menu item from Appearance→Menus  (You must have the Class field enabled from Screen Options) or from Appearance→Customize→Menus.

For the account menu, you can use a custom class in order to render an icon before the menu item. The default one is fas fa-user.

Titles

In this tab you can change the titles for various theme pages, like the blog, search and 404.

Footer

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

In the Footer Style section you can:

1. Change the number of Columns in your footer.
2. Make the footer Full Width.

In the Bottom bar section you can:

1. Show the bottom bar.
2. Add a credits text.
3. Add generic icons for Payment or brands from https://fontawesome.com/icons?d=gallery&s=brands&c=payments-shopping

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.

WooCommerce

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;

1. Choose what you want to render in the main shop page.
2. Choose what you want to display in the category pages
3. Change the default product sorting
4. Change  products per row
5. Select how many rows of products you need per page
6. Change the sidebar location
7. Show or hide, categories
8. Show or hide  star ratings
9. 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.

Widgets

Through this tab you can add widgets to the theme’s sidebars. The theme features eight widgetized areas to provide you with maximum flexibility when displaying 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. Here you can also set the Blog page to be your default posts page.

Adding a new post

To add new posts to your blog, go to Posts > add new and proceed to:

1. Add a title to your post
2. Enter the content in the editor
3. Upload a featured image by clicking “Set featured image” on the Featured Image panel
4. Add a category
5. Add a tag to the post
6. once finished clicking the Publish button to publish the post

Creating a page for your posts

To setup your blog page you can go to Pages > Add New and create a page named Blog. Then navigate to Settings > Reading and set that page as your posts page.

Now you can add that page to your menu to give your visitors easy access to all your posts.

Adding Products

Earlier we saw how we can install WooCommerce. Let’s take a brief look at creating products. Start by going to Products > Add Product.

1. First we need to fill in the product title,
2. Add the product’s description,
3. In the Product Data metabox you will fill all the required product info, such as price, inventory, tax and shipping information and more,
4. Fill in a short product description
5. Add product gallery images to upload additional photos for the product,
6. Click Set Product Image to add the product’s featured image
7. Add Tags to your product to make filtering easier
8. 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.

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:

Front Page Page

First  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 Front page template page under the WordPress text Editor you have a Front page 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:

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, from YouTube or Vimeo.
5. Add a background image and change its position and screen coverage.

Front page Options

Here, you can add a call-out button in your front page hero section. Under Frontpage Options you can

1. Add a button text and
2. Add a button URL

In the Slider Tab you can select a MaxSlider Slideshow to appear instead of a hero image or choose to not have a slideshow at all.

Setting Up the Frontpage

If you want to setup the frontpage you will need to assign the page with the frontpage template as your homepage from Settings→Reading. Then head over to Appearance→Customize→Widgets→Frontpage and Add six widgets  like this:

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. You cannot control the background image from the Layout Section of this page since it is registered by WordPress.

Full Width Page

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

Default Template

In this page you can add any content you wish as you would do in a normal page. The default template gives you the option to select a Featured image layout under the Featured Image Section.

Page builder and Page Builder Contained 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. The main difference between them is that the Page Builder Contained template restricts the builder width to the theme’s default container width.

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.

That’s it. You can now start building your page using a page builder of your choice. On the theme’s demo we have used extensively the Elementor page builder plugin.

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 the Instagram Photo size.
5. Select whether you need your images to open in the current window or open in a new tab.
6. 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 your widget 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)-Latest Products

Here you can display your latest products either from a category or not.

1. Add a title
2. Add a subtitle
3. Select if you wish a specific category you want to retrieve your latest products
4. Select the number of products
5. Select the output columns

Theme (home)-Latest Posts

This widget is built to help you display your latest posts in any widget area you wish.

1. Add a title.
2. Add a subtitle.
3. Select the category your need to display the latests posts from.
4. Show random posts instead.
5. Change the post number.
6. Adjust the number of columns for your content.
7. Show carousel like widget with your posts.

Theme (home)-Woocommerce Categories

This widget will display various layout of selected categories.

1. Add a title
2. Add a subtitle
3. Select the proper layout for your products
4. Add categories as Layout items
5. Select the item/category you want to display

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)-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 drop-down menu.

Elementor Widgets

Nozama comes with custom Elementor widgets which have the same functionality as its widgets, making landing pages easier to create.

Next Steps

Still have questions or problems setting up your CSSIgniter Theme? We will be happy to help you out! Please visit our support Hub 

About Vidiho Pro

Vidiho Pro is a video theme for WordPress. It is suited for video professionals and bloggers.

Image Sizes

The recommended image sizes are:

Post Thumbnail: 750x500px
Media Item:  555x400px
Media Item Tall:  555px in width and unlimited in height
Video Item Media: 555x950px (It is recommended to set as featured an image at least 750×950,or 1140×950 if it’s going to be on the slider)
Video Item small: 100x100px
Fullwidth image: 1140x650px
Hero Image: 1920x500px
Featured gallery small: 100x100px

 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.

• Vidiho 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 Demo Import  Use this plugin to help you import your content with just one click.
• 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 Demo Import

To automate the process of importing and for a better experience we have natively included support for One Click Demo Import Plugin. Let’s install it first:

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.

Adding a Video Item

Getting familiar with the Video Screen

Head over to Videos→Add New. Then you should see this screen

Here you can start adding content for your video:

1. Add a title for your Video.
2. Add your Video Content.
3. Add Some Content for the Hero Section.
4. Enable the comment/discussion section.
5. Add a Video Category.
6. Select the Featured image for your item.
7. Change the Sidebar appearance.
8. Publish your package.

Adding Video Details

Here you can add the video itself along with its thumbnail and also set the post’s layout.

1. Add your video URL. Using minified Youtube or Vimeo URL is not recommended
2. Select the video thumbnail, if not a default will be selected.
3. Change the Video page Layout.

Controlling the Video Hero Section

In this tab you can optionally modify the hero color/image and the title’s alignment.

1. Select your Title Alignment.
2. Select a Hero image
3. Change the image position and whether you need to cover its container.

Adding the video to the homepage slider

Enable this option if you want the Video item you are editing to appear in the frontpage slider.

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 Widgets

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 > Front Page  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.

Frontpage template 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.

Widgets on the theme’s demo widgetized frontpage

The frontpage on the theme’s demo consists of two Latest Video widgets along with a Latest Posts and a Latest video again widget. Finally we have a dummy Newsletter widget.

Frontpage Elementor

Elementor is a free versatile page builder which Vidiho Pro supports natively and you can use it against the Frontpage Elementor page template.
Vidiho Pro comes with four custom Elementor widgets which have the same functionality as the Vidiho Pro widgets.

Video Listing

Create a new page and select the Video Listing Template. A new section will appear where you can create video listings depending on the video category. So under the Video Listing Options you can:

1. Select the video category.
2. Change the loading Effect of the grid.
3. Use spaces or not between your video items.
4. Change the columns for your video grid
5. Add a category filter, this will display all items at once, ignoring any other settings.
6.  Select how many video items you need to show each time.

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

n 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

Header Options are split into two sections.

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

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 or disable the slider.
3. Enable Masonry effect in case you have articles with different content and featured image height.
4. Select the article excerpt length.
5. Select a pagination method.

Video Settings

Through this tab you toggle the theme’s Floating Video feature and the appearance of the featured image in video post types.

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 Appearance→Colors→Hero, and change the footer background image/color  from Appearance→Colors→Footer

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.

Menus

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.

Footer

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

You can change the Footer style under Customize > Footer >Footer Style by

1.  Changing the column layout
2. Using a Full width footer

In addition you can under  Customize > Footer > Bottom Bar

1. Show the bottom bar.
2. Change the credits text.
3. Show social icons in footer.

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.

HomePage Settings

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. Here you can also control the slider settings, slide the transition time and effect. Also you can disable or not the frontpage slider.

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. Center the title.
5. Show as Carousel.
6. Add the Item you wish to output.
7. Select the Item from the dropdown menu.
8. Remove the item.

Theme (home) – Latest Videos

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 category want to get the latest videos.
4. Check if you need random videos instead of latest.
5. Add the number of posts.
6. Select the output columns.
7. Center the widget title.
8. Show Items in a carousel.

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) – Latest Posts

This will allow you to display your Latest posts in the Frontpage

1. Add a title.
2. Add a subtitle.
3. Select the category want to get the latest posts.
4. Check if you need random posts instead of latest.
5. Add the number of posts.
6. Select the output columns.
7. Center the widget title.
8. Show Items in a carousel.

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.

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! Please visit our support Hub