latest version

Funfetti Documentation

General Information

General Information

Thank you for purchasing Funfetti! We’re very pleased that you have chosen our theme to use on your website. We’re doing our best not to disappoint you! Before you get started, please check out these documentation pages. Funfetti can only be used with WordPress and we assume that you already have it installed and ready to go. If you don’t, please see WordPress Codex to get started.

Requirements

Before using Funfetti, please meet the following requirements:

  • Essentials to run WordPress – Read more about WordPress Minimum Requirements – in case any doubts regarding the server, contact your host provider.
  • Latest version of WordPress, which you can download here.
  • Create secure FTP and Database.

Installation

In our guide, we will show you step by step instructions on how to install our WordPress theme for beginners. Below you will find two ways to install a WordPress theme.

Installation via Administration Panel

If Funfetti files are downloaded from your Themeforest account, you can start an installation using WordPress administration panel.

Follow steps below to install the theme:

  • Step 1 - Once you’ve logged in to your administration panel, go to My Sites > Network Admin.
_images/Installation1.jpg

  • Step 2 - Then click on Themes > Add New, you will be directed to a page where you can choose available themes.
_images/Installation2.jpg

  • Step 3 - Once directed to the page, on the upper left side of the screen click on Upload Theme button.
  • Step 4 - Choose the Funfettitheme.zip file from your computer, then click Install Now.
_images/Installation4.png

  • Step 5 - Click on My Sites then go to Appearance > Themes and Activate Funfetti.
_images/Installation5.png

  • Step 6 - After activating Funfetti, you will be sent to Theme Installation Instruction steps. By following this steps you will be asked to install required plugins, activate them, and import demo content (required).
_images/Installation6.png

Common Install Error: Are You Sure You Want To Do This?

If you get the following question message when installing Funfettitheme.zip file via WordPress, it means that you have an upload file size limit. Install the theme via FTP or call your hosting company and ask them to increase the limit.

Installation via FTP

To install Funfetti WP via FTP, follow steps below:

  • Step 1 – Unarchive Funfettitheme.zip file
  • Step 2 – Access your host web server using FTP client
  • Step 3 – Find directory wp-content > themes
  • Step 4 – Put folder Funfettitheme in directory wp-content > themes
_images/inst_dir.png
  • Step 5 - Go to your WordPress administration panel, navigate to Appearance > Themes then activate Funfettitheme.

Learn more:

Unyson, Extension, and Plugins

Some functionalities of the Funfetti Theme are available because of the plugins we used to create it. Once Funfetti is activated in your WordPress admin panel you should see notification about bundled plugins we recommend to install – they are included in Funfetti package – so you don’t have to do anything more than click install and activate.

Unyson

Unyson is a framework for WordPress that facilitates development of a theme. This framework was created from the ground up by the team behind ThemeFuse from the desire to empower developers to build outstanding WordPress themes fast and easy. This documentation is heavily modified by createIT to ensure all custom extensions are well documented.

This documentation assumes you have a working knowledge of WordPress. If you haven’t, please start by reading WordPress Documentation.

Minimum Requirements

  • WordPress 4.4 or greater
  • PHP version 5.2.4 or greater
  • MySQL version 5.0 or greater

Installation

Unyson is part of Funfetti plugin that should be activated to be able to use the fully use this theme.

After plugin will be activated you will notice the Unyson entry in the sidebar:

_images/unysone_extension.png
Configure the plugin by going to the Unyson menu and activating the following extensions:
  • Backup & Demo Content: This extension lets you create an automated backup schedule, import demo content or even create a demo content archive for migration purposes.
  • SASS Compiler: Compiles SASS files. Remember to activate it when you are going to change theme colors via Customize.
  • Visual Composer: Allows for seamless integration with Visual Composer
  • Funfetti Team: This extension will add team post type support
  • CT Flickr shortcode: This extension will add a flickr shortcode and widget.
  • Funfetti Package: This extension will add packages post type support.
  • Funfetti Testimonials: This extension will add testimonials post type support.
  • CT Events: This extension will add event post type support.
  • CT Image Boxes: This extension will add team post type support.
  • Funfetti Services: This extension will add packages post type support.
  • CT Shop Locator: Shop locator posts and shortcode.
  • CT FAQ: This extension will add FAQ post type support
  • Funfetti Testimonials: This extension will add testimonials post type support

License

The licenses for most software are designed to take away your freedom to share and change it. By contrast, the GNU General Public License is intended to guarantee your freedom to share and change free software. Unyson inherits the General Public License (GPL) from WordPress.

Extension

On the Unysone page you’ll see a list of avaliable extensions separated in two sections:

Active Extensions - Extensions that should be activate to be able to fully use Funfetti WP theme functionality:

Available Extensions - Extensions not yet downloaded or activate.

Note

We recommend to not activate any of the extensios that are not part of the list above. They may not be compatible with the theme and could create unexpected issues.

Plugins

Visual Composer
_images/vc.png

Simply drag and drop elements to build your page content. We prepared components which will help you determine main structure of the webpage – easily set up backgrounds, colors and styles for whole sections as well as lots of various smaller components which you can freely put wherever you want.

Note

As the VC plugin used with Funfetti WP Theme is part of a bundle, that mean that theme author has a license and only he/she can download latest versions of VC and include it in the theme. You as a theme user may use Visual Composer free of charge while you use the theme that came with VC (because you have a license for that theme).

Learn more:

For more information about Visual Composer, please check articles below:

Contact Form 7

Contact forms in Funfetti WP are created with the use of Contact Form 7 Plugin. Below you will find information how to recreate Contact forms used in our theme by adding the correct markup for the Form section of this plugin.

_images/custom_form.png

If you never before used this plugin I suggest you to check Getting Started with ContactForm 7.

Booki

A modern booking plugin for WordPress. This plugin allows you to setup appointments or reservations with time that adapts to users timezone. You can make payment via PayPal or simply book and pay later.

_images/booki.png

Learn more:

For more information about Booki:

MailChimp for Wordpress

MailChimp for WordPress helps you add more subscribers to your MailChimp lists using various methods. You can create good looking opt-in forms or integrate with any other form on your site, like your comment, contact or checkout form.

_images/Installation7.png

If you never before used this plugin I suggest you to check Knowledge Base for this plugin.

Demo Content

Note

To be able to use theme content installation and backup functionality make sure to activate Backup & Demo Content Unyson’s extension.

_images/unysone_extension.png

The fastest and easiest way to import our demo content is to use Theme Options Demo Content Installer. It will import all pages and posts, sample slider, widgets, theme options, assigned pages, and more.

Import Demo Content

To import our demo content, please follow the steps below:

  • Step 1 – Navigate to Tools where after activating the Unyson extension Demo Content Install option will be available

    _images/demo_content_inst.png
  • Step 2 – Choose import option you want to use from available options

  • Step 3 - To be able to continue you need to agree to this term.

    _images/warning_message.png
  • Step 4 – Wait until the content will be installed

    _images/install_new_content.png

Importing can take a few minutes. Please be patient and wait for it to complete. Once it is loading, you will see message with indicating progress.


We recommend this approach on a newly installed WordPress. It will replace the content you currently have on your website. However, we create a backup of your current content in (Tools > Backup). You can restore the backup from there at any time in the future.

_images/tools_backup.png

Support

All of our items comes with free support. Free support is limited to questions regarding the themes features or problems. We provide premium support for code customisation or third-party plugins.

Note

Our support hours: 10:00 AM – 6:00 PM UTC +1 on Monday to Friday.

Free Support

For issues and concerns, you can reach us through these support methods:

  • E-mailsupport@createit.pl

  • Help Desk – Click here to go to our support website. Just click on the Submit Ticket button and follow instructions to create a ticket.

  • Forum – Comment/Post on the product you have issues/queries in ThemeForest or CodeCanyon websites.

    Before You Post in a Forum

    We urge you to follow the steps below, before you post a new topic on the forum, to speed up your request. It’s in everyone’s interest and will benefit in making the entire forum more efficient:

    • Step 1 – Always check the Documentation and the Knowledgebase Section. Most questions are already answered in those areas.
    • Step 2 – If your question hasn’t been brought up on the forum, please post a new topic. Always be as specific as possible. Creating a topic requires entering the live URL to your home page or page that shows the issue in question. It also has bars for WP and FTP login info, which aren’t required, however, providing us with your login information can save a lot of time for both of us. Login credentials are securely stored and accessible only by our support staff.
    • Step 3 – We usually answer questions in 24 hours on working days. However, if you don’t get any answer within 72 hours bump up your question or send us an e-mail.

For all support methods, you will receive confirmations and replies on your queries through e-mail or by tracking your ticket which you will also get through e-mail. To track your ticket, please click here.

Once we reply to your query, each ticket will be open for 7 days without a reply from you. On the 6th day without a reply, an e-mail will be sent to notify you of the ticket’s inactivity. To make the ticket active again, you simply need to reply or follow the steps in the e-mail. If you won’t make the ticket active within 7 days, on the 8th day the ticket will automatically be closed.

Premium Support

We can create your website from scratch, redesign it or just extend the current ones. For more information, please take a look at our website. Typical issues covered by Premium Support:

  • Custom CSS
  • Support for third party software and plug-ins
  • WordPress Installation with Theme configuration
  • Server configuration
  • Site structure modifications
  • Graphic adjustments, etc.
  • WordPress general howto’s

Page

You can use Pages to organize and manage any content on your website. You can create multiple pages on your website for different types of content or setup onepager with scroll-to-section menu.

Create New Page

To create a new Page in Funfetti follow the steps below:

  • Step 1 - In Dashboard, navigate to Pages > Add New. You will be directed to a page where you can add details on the page.

    _images/newPage.png
  • Step 2 - Add the Title of the page.

  • Step 3 - Add content – we recommend you to create page content using Visual Composer or by modifying demo content.

    _images/newPage1.png
  • Step 4 - Choose page attributes.

    _images/newPage2.png
    • Parent – If you want to create this page as a subpage.
    • Template – You can choose one of defined page templates
    • Order – The order of the page.
  • Step 5 - After adding all the contents of the page, click on the Publish button.

Create Page Using Visual Composer

When using Visual Composer to add content, you have 2 Editor options, the Backend Editor and Frontend Editor.

_images/newPage3.png
Backend Editor
_images/newPage4.png
Frontend Editor

In adding contents to the page, there are many options to choose from. Some of the options are:

  • Elements - You will be able to choose elements that are needed and used on the page.

    _images/newPage5.png
  • Text Block – This is where you add Text to the page.

    _images/newPage6.png
  • Row – An area where you can add elements.

    _images/newPage7.png

Homepage Setup

If you have added some pages via Pages > Add New you can choose one and set it up as a homepage.

Use Static front page tool in Settings > Reading and choose from the list your homepage. Remember to click Save changes at the end of editing.

_images/newPage8.png

Funfetti Elements

Funfetti Custom Shortcodes

With Funfetti comes many custom shortcodes for (Visual Composer) VC that are used to show content created in Funfetti.

Below you will find short information about this Visual Composer elements:

_images/short.png

Button

_images/short1.png

This theme comes with VC element that give you the option to create buttons that can be used in the theme.

_images/short2.png

-General Tab-

  • Text - The label of the button.
  • URL (Link) - URL link for the button.
  • Style - Display style of the button.
  • Outline and Text - Color of the button’s outline and text.
  • Hover background - Background color of the button when hovered.
  • Hover Text - Text color of the button when hovered.
  • Shape - Shape of the button.
  • Size - Size of the button.
  • Alignment - Alignment of the button.
  • Set full width button? - Option to make the button full width.
  • Add Icon? - Option to add an icon in the button.
  • CSS Animation - If Add icon is Yes, this option will show. Add the icon you would like to use.
  • Element ID - A unique ID for the button.
  • Extra class name - You can add a Custom CSS variable that is made in the Customizer > Additional CSS, click here for details.
  • Advance onclick action - Option to be add a javascript action.
_images/short40.png

Button with Accordion

_images/short3.png

This will let you create a button with accordion display.

_images/short4.png

-General Tab-

  • Text - Text inside the button.
  • Alignment - Alignment of the button in the page.
  • Button Color - Color of the button.
  • Text Color - Color of the text in the button.

-Funfetti Tab-

  • Text on reveal - Text that will be revealed when the button is clicked.
  • Alignment - Alignment of the text in Text on reveal.

-Design options Tab-

  • Design options - Add/Change the margin, border, or padding of the promo section.
  • Border color - Color of the border line.
  • Border style - The style of the border line.
  • Border radius - The size of the border.
  • Background - Background color or image of the promo section.
_images/short41.png

Styled Header

_images/short5.png

Lets you add a styled header on a page. You will be able to customize this header in the Styled Header Settings.

_images/short6.png

-General Tab-

  • Header type - Set what type of header you want to use.
  • Icon - This option will show when Text with icon or Only Icon is chosen as a Header type. Set the Icon of the header.
  • Header icon color - Color of the icon in the header.
  • Header level - Level of the header in the CSS.
  • Header title - Title that will be shown in the header.
  • Header title font size [px] - Font size of the header title.
  • Header title font weight - Option to add weight on the header title.
  • Header title color - Header title’s font color.
  • Header subtitle title - The subtitle that will be shown in the header.
  • Header subtitle title font size [px] - Font size of the header subtitle.
  • Header subtitle title font weight - Option to add weight on the header subtitle.
  • Header subtitle title color - Header subtitle’s font color.
  • Header top margin [px] - Top margin of the header.
  • Header bottom margin [px] - Bottom margin of the header.

-Design options Tab-

  • Design options - Add/Change the margin, border, or padding of the promo section.
  • Border color - Color of the border line.
  • Border style - The style of the border line.
  • Border radius - The size of the border.
  • Background - Background color or image of the promo section.
_images/short42.png

News and Events

_images/short7.png

This theme element will let you add a slider of the events items that are made. You can add filtering using the category of the event.

_images/short8.png

-Filters Tab-

  • Limit - Set results limit.
  • Skip X elements - Skip a number of elements from the results.
  • Order - How the posts order looks.
  • Order by - How the posts are ordered.
  • Specify post - Only selected posts are shown.
  • Exclude post - None of the selected posts will be displayed.
  • Specify Category - Only show posts under the categories.
  • Exclude Category - None of the posts under the categories are shown.
  • Specify post tags - Only show posts with selected tags.
  • Keyword search - Show items with certain keyword.
_images/short43.png

Pricing tables

_images/short9.png

This element lets you add a pricing table that you can customize.

_images/short10.png

-General Tab-

  • Number of boxes - Set the number of pricing tables that will be shown in the row.

-Table Tab-

  • Highlighted tab? - Options to show this table as an highlighted table.
  • Title - Title of the table.
  • Currency - Currency of the price inside the pricing table.
  • Price - Price inside the table.
  • Subtitle - Subtitle of the table.
  • Features - Features to be shown inside the table. Each feature is separated by a comma.
  • Include button - Option to add a button in the table.

-Button Tab-

  • Text - The text label of the button.
  • URL (Link) - URL link for the button.
  • Style - Display style of the button.
  • Shape - Shape of the button.
  • Color - Color of the button.
  • Size - Size of the button.
  • Alignment - Alignment of the button.
  • Add Icon? - Option to add an icon in the button.
  • CSS Animation - If Add icon is Yes, this option will show. Add the icon you would like to use.
  • Element ID - A unique ID for the button.
  • Extra class name - You can add a Custom CSS variable that is made in the Customizer > Additional CSS, click here for details.
  • Advance onclick action - Option to be add a javascript action.
_images/short44.png

Two Images

_images/short11.png

Add two images in the same space with an option to move the second image using its X and Y axis.

_images/short12.png

-General Tab-

  • First Image - Set the first image.
  • Second Image - Set the second image.
  • X axis offset - Horizontal offset of the second image from the first image.
  • Y axis offset - Vertical offset of the second image from the first image.
_images/short45.png

Events display

_images/short15.png

Lets you display events by category. You can filter the category that will show.

_images/short16.png

-Filters Tab-

  • Limit - Set results limit.
  • Skip X elements - Skip a number of elements from the results.
  • Order - How the posts order looks.
  • Order by - How the posts are ordered.
  • Specify Events - Only selected posts are shown.
  • Exclude Events - None of the selected posts will be displayed.
  • Specify Category - Only show posts under the categories.
  • Exclude Category - None of the posts under the categories are shown.
  • Specify post tags - Only show posts with selected tags.
  • Keyword search - Show items with certain keyword.

-Design options Tab-

  • Design options - Add/Change the margin, border, or padding of the promo section.
  • Border color - Color of the border line.
  • Border style - The style of the border line.
  • Border radius - The size of the border.
  • Background - Background color or image of the promo section.
_images/short47.png

FAQ Single Category

_images/short17.png

This element lets you add an FAQs with a single category on the page.

_images/short18.png

-Category Tab-

  • Choose a FAQ Category - Category of the FAQs that you want to show.

-Filters Tab-

  • Limit - Set results limit.
  • Skip X elements - Skip a number of elements from the results.
  • Order - How the FAQs order looks.
  • Order by - How the FAQs are ordered.
  • Specify FAQ - Only selected FAQs are shown.
  • Exclude FAQ - None of the selected FAQs will be displayed.
  • Specify FAQ Categories - Only show FAQs under the categories.
  • Exclude FAQ Categories - None of the FAQs under the categories are shown.
  • Specify post tags - Only show posts with selected tags.
  • Keyword search - Show events with certain keyword.
_images/short48.png

FAQ All Categories

_images/short19.png

This element lets you add all the FAQs on the page.

_images/short20.png

Packages All

_images/short25.png

This element lets you show all the available Packages.

_images/short26.png

-Design options Tab-

  • Design options - Add/Change the margin, border, or padding of the promo section.
  • Border color - Color of the border line.
  • Border style - The style of the border line.
  • Border radius - The size of the border.
  • Background - Background color or image of the promo section.
_images/short49.png

Packages grid

_images/short29.png

This element lets you show available Packages in a grid view.

_images/short30.png

-Design options Tab-

  • Design options - Add/Change the margin, border, or padding of the promo section.
  • Border color - Color of the border line.
  • Border style - The style of the border line.
  • Border radius - The size of the border.
  • Background - Background color or image of the promo section.
_images/short51.png

Shop locator

_images/short33.png

Lets you show all the available Services in a carousel on the page.

_images/short34.png
  • Title - Title of the Shop locator.
  • Subtitle - Subtitle of the Shop locator.
  • Small icon cluster - Icon for a small number of store locations clustered in the same area.
  • Medium icon cluster - Icon for few store locations clustered in the same area.
  • Big icon cluster - Icon for many store locations clustered in the same area.
  • Marker icon - Marker icon for the location of the store.
  • Map style code - Paste “JavaScript Style Array” here, you can find and create it on: snazzymaps.com
_images/short53.png

Testimonials slider

_images/short35.png

Gives you an option to show people dynamic Testimonial Items that are made on your site.

_images/short36.png

-General Tab-

  • Text color - Font color of the testimonials.
  • Position color - Font color for the position of the Testimonial’s Author.
  • Dots color - Color for the dots that is shown when Dots option is checked.
  • Background color - Background color of the slider.
  • Autoplay - Make the slider automatically move.
  • Fade - Option to make the testimonials fade rather than slide to change.
  • Speed [ms] - Speed of the autoplay.
  • Dots - Option to show navigation dots at the bottom of the testimonial slider.
  • Order - How the testimonials order looks.
  • Order by - How the testimonials are ordered.
  • Limit - Limit on how many testimonials will show.

-Design options Tab-

  • Design options - Add/Change the margin, border, or padding of the promo section.
  • Border color - Color of the border line.
  • Border style - The style of the border line.
  • Border radius - The size of the border.
  • Background - Background color or image of the promo section.
_images/short54.png

Funfetti Plugin Elements

Some plugins that are used in Funfetti generates an element that helps customize the pages on your site. You will see the plugin elements as follows:

Contact Form 7

_images/short37.png

This is the plugin that can add a Contact Forms on a page. To know how to create a contact form, go to the Create Contact Form tutorial.

_images/short38.png

Visual Composer

_images/short39.png

This element lets you customize your page using a simple drag and drop of elements to build your page content. You can easily setup the backgrounds, colors, and styles for a whole section as well as lots of various smaller components which you can freely put wherever you want.

Some of these elements are:

Single Image
_images/vcElement.png

This element will let you add a single image in your page.

_images/vcElement3.png
Video Player
_images/vcElement2.png

This element will let you add a video or MP3 file inside your page by adding the link for the video/MP3.

_images/vcElement5.png
Progress Bar
_images/vcElement6.png

This element will add an animated progress bar in your page.

_images/vcElement7.png
Chart
_images/vcElement8.png

This element lets you add a graph. These are the types of graph that you can add:

  • Pie

    _images/vcElement9.png
  • Round

    _images/vcElement10.png
  • Line

    _images/vcElement11.png

Blogs Posts

Funfetti is loaded with options for the blog. It offers many different options for you to present your blog posts, along with several different blog post layouts. In addition, there are numerous theme options and shortcode options that allow you to customize how posts are displayed.

Create New Blog Post

No matter which method you use to display your blog posts, first thing you need to do is create them.

Funfetti offers several blog post formats:

_images/newblog.png

Follow the steps below to create a blog post:

  • Step 1 - Navigate to Blog Posts > Add New in the Dashboard.
_images/newblog1.png
  • Step 2 - Create a title and insert your post content in the editing field. You can use any of our shortcode elements inside the post. If you want to use some additional fields, choose them from Screen Options at the top of the screen.
_images/newblog2.png
  • Step 3 - Add Blog Categories on the right side. Categories are meant for broad grouping of your posts, think of these as general topics. Categories are hierarchical, so you can add sub-categories. Sub-categories are made when a Category is added to a Parent Category . To assign it to the post, check the box next to the Category name.
_images/newblog3.png
  • Step 4 - To add Tags, write the Tags at the textbox below the Blog Categories. Tags are meant to describe specific details of your posts. They are the micro-data that you can use to micro-categorize your content. Tags are not hierarchical. Type the name of the tag in the field, separate multiple tags with commas.
_images/newblog4.png
  • Step 5 - To add a Single image, click the Featured Image box, select an image and click Set Featured Image.
_images/newblog5.png

To add more than one image, use Image Gallery (Visual Composer element) , each image will be a slide in the gallery slideshow. Gallery can be created by adding images from Media gallery or by adding External links of the images that will be used.

_images/newblog6.png
  • Step 6 – To post Video, use Video Player (Visual Composer element) and paste the direct video URL from Youtube, Vimeo or Dailymotion and more.

  • Step 7 – to post Audio, use Video Player (Visual Composer element) and paste the direct audio URL from Soundcloud, Mixcloud and more.

    _images/newblog7.png
  • Step 8 – For Quotation, use WordPress Blockquote option (Shift + Alt + Q). quote

  • Step 9 – For Links, use WordPress Inser/Edit Link option (Ctrl + K). link
  • Step 10 – Create an excerpt – Excerpts are optional hand-crafted summaries of your content that can be used in your theme. Learn more about manual excerpts.
  • Step 11 – Once finished, click Publish to save the post.

You will see all the Blogs created at Blog Posts > All Posts.

Blog Index Page

The most popular way of displaying blog posts is to setup blog index page. There all of your posts will be displayed and ordered by publish date.

To set the page as your post page, navigate to Posts page tool in Settings > Reading and choose Blog index page from the ones you created.

_images/blogInPage.png

Note

On Blog index page you will see only your posts, so don’t add any other content to it.

Blog Category

Categories are meant for broad grouping of your posts, think of these as general topics. Categories are hierarchical, so you can add sub-categories. Sub-categories are made when a Category is added to a Parent Category.

Adding categories to a blog would make it easier to locate and post on similar topics by category.

Create Blog Category

To create a Category for a blog, follow these steps:

  • Step 1 - Navigate your Dashboard to Blog Posts > Categories. You will see the Blog Categories page.

    _images/blogCat.png
  • Step 2 - In the page, find the Add New Category area. Add All the necessary information.

    _images/blogCat1.png
    • Name - The name of the category.
    • Slug - The URL-friendly version of the name. Usually all lowercase.
    • Parent Category - If the category is a sub-category, then look for the parent category in the drop-down box.
    • Description - Description of the category.
  • Step 3 - Once done filling out the information of the category, click on Add New Category button to save.

Delete Blog Category

To delete a Category, navigate your Dashboard to Blog Posts > Categories.

In the Blog Categories page, you will see all the created category.

To delete a category, you have two options:

  • Single Delete - Hover your mouse pointer on the category that you would like to delete. You will see a Delete option pop-up. Click on Delete to delete.

    _images/blogTag2.png
  • Multiple Delete - To delete multiple categories, click on the box beside the categories you would want to delete. Then click on the drop-down box for Bulk Actions and choose the Delete option. Click on Apply button to delete.

    _images/blogTag3.png

Blog Tags

Tags are meant to describe specific details of your posts. They are the micro-data that you can use to micro-categorize your content. Tags are not hierarchical.

Adding tags to a blog post would make it easier to relate a post with another post even if the categories are different.

Create Blog Tags

To create a Tag for a blog, follow these steps:

  • Step 1 - Navigate your Dashboard to Blog Posts > Tags. You will see the Tags page.

    _images/blogTag.png
  • Step 2 - In the page, find the Add New Tag area. Add All the necessary information.

    _images/blogTag1.png
    • Name - The name of the tag.
    • Slug - The URL-friendly version of the name. Usually all lowercase.
    • Description - Description of the tag.
  • Step 3 - Once done filling out the information of the tag, click on Add New Tag button to save.

Note

Adding a tag may affect the tags from other component of the site.

Delete Blog Tags

To delete a tag, navigate your Dashboard to Blog Posts > Tags.

In the Tags page, you will see all the created tags.

To delete a tag, you have two options:

  • Single Delete - Hover your mouse pointer on the tag that you would like to delete. You will see a Delete option pop-up. Click on Delete to delete.

    _images/blogTag2.png
  • Multiple Delete - To delete multiple tags, click on the box beside the tags you would want to delete. Then click on the drop-down box for Bulk Actions and choose the Delete option. Click on Apply button to delete.

    _images/blogTag3.png

Note

Deleting a tag may affect the tags from other component of the site.

Events

Create New Event

To create a new event, follow the steps:

  • Step 1 - To start creating an event, on your Dashboard navigate to Events > Add New. The Add New Event page will show.

    _images/newEvent.png
  • Step 2 - Once your in the Add New Event page, you can add details about the event like title, pictures, videos, pricing, etc., to help with the promotion of the event. You can use the Elements in Funfetti to customize it to your liking.

    _images/newEvent1.png
  • Step 3 - This are the needed information for the event, you can add the details.

    _images/newEvent3.png
    1. Title - The name of the event.
    2. Editor container - You can add the information for the event, like the rules and requirements to attend the event.
    3. Event Categories - Group an event with other events in the same category.
    4. Featured Image - The Image shown in the listings/pages.
  • Step 4 - Add all the needed details and descriptions for the event, Once satisfied click on Publish button.

Events Category

Categories are meant for broad grouping of your posts, think of these as general topics. Categories are hierarchical, so you can add sub-categories. Sub-categories are made when a Category is added to a Parent Category.

Adding categories to an event would make it easier to locate and post on similar topics by category.

Create Events Category

To create a Category for an event, follow these steps:

  • Step 1 - Navigate your Dashboard to Events > Event Categories. You will see the Event Categories page.

    _images/newEvent4.png
  • Step 2 - In the page, find the Add New Event Category area. Add All the necessary information.

    _images/newEvent8.png
    • Name - The name of the category.
    • Slug - The URL-friendly version of the name. Usually all lowercase.
    • Parent Category - If the category is a sub-category, then look for the parent category in the drop-down box.
    • Description - Description of the category.
    • Upload - Upload an image to represent this category.
  • Step 3 - Once done filling out the information of the category, click on Add New Category button to save.

Delete Events Category

To delete a Category, navigate your Dashboard to Events > Event Categories.

In the Event Categories page, you will see all the created category.

To delete a category, you have two options:

  • Single Delete - Hover your mouse pointer on the category that you would like to delete. You will see a Delete option pop-up. Click on Delete to delete.

    _images/newEvent9.png
  • Multiple Delete - To delete multiple categories, click on the box beside the categories you would want to delete. Then click on the drop-down box for Bulk Actions and choose the Delete option. Click on Apply button to delete.

    _images/newEvent10.png

Add Events to Page

To add events on a page, you can use elements in the Visual Composer: Events Carousel or Events display

_images/newEvent2.png

This is the element that will add an event on the page. For more information about this element, go to Funfetti Custom Shortcodes and look for Events Carousel or Events display.

Sample Events Page

  • Events Carousel

    _images/newEvent13.png
  • Events display

    _images/newEvent12.png

FAQ

Create FAQ Item

Frequently Asked Questions (FAQ) of Funfetti is generated by the theme from FAQ items.

To create a new FAQ item, navigate in WordPress Dashboard to FAQ > Add New.

_images/faq.png

The Add New FAQ page will show, information on the FAQs can be define here.

_images/faq1.png
  1. Title – The FAQ’s question should be written as the title.
  2. Editor Container – Where the answers for the question is added.
  3. FAQ Categories (optional) – Assign to preexisting category or add a new one.

Once done, click on Publish button.

Create FAQ Categories

Categories are convenient ways to organize your FAQ items, that can be added to more than just one category.

To create new FAQ Category, navigate in WordPress Dashboard to FAQ > FAQ Categories.

_images/faq2.png

The FAQ Categories page will show, here you can add the details of the FAQ Category that you would like to create.

_images/faq3.png

After adding all the details, click on Add New category to save.

Delete FAQ Category

To delete a Category, navigate your Dashboard to FAQ > FAQ Categories.

In the FAQ Categories page, you will see all the created category.

To delete a category, you have two options:

  • Single Delete - Hover your mouse pointer on the category that you would like to delete. You will see a Delete option pop-up. Click on Delete to delete.

    _images/faq4.png
  • Multiple Delete - To delete multiple categories, click on the box beside the categories you would want to delete. Then click on the drop-down box for Bulk Actions and choose the Delete option. Click on Apply button to delete.

    _images/faq5.png

Create FAQ Page

Frequently Asked Questions (FAQ) of Funfetti is generated by the theme from FAQ.

To create an FAQ Page, follow these steps:

  • Step 1 - Create a new page where to add the FAQs.

    _images/newPage.png
  • Step 2 - Add a row element to the page, click the Edit this row option of the row. The Row Settings will pop-up.

    _images/portPage.png
  • Step 3 - Change the settings to your preference.

  • Step 4 - In the row, to add a title for the page. You have the option to add a Text Block or Section/Header Title element.

  • Step 5 - Add a new row to add the FAQ Items. The FAQ Items can be generated by 2 types of Theme Element: FAQ Single Category or FAQ All Categories.

    _images/faq6.png
    1. FAQ Single Category - This will let you display FAQs under the set category.
    2. FAQ All Category - All the FAQs that are created are posted.
  • Step 6 - You can customize the page by adding other elements to the page.

  • Step 7 - Once you have finished customizing the page, click on the Publish button.

Sample for FAQ Page

  1. FAQ Single Category

    _images/faq7.png
  2. FAQ All Categories

    _images/faq8.png

Image boxes

Create Image box

To create a new Image boxes item, navigate in WordPress Dashboard to Image boxes > Add New.

_images/imgbox.png

The Add New Image box page will show. Add the details for the Image box.

_images/imgbox1.png
  1. Title - The name of the Image box.
  2. Editor container - You can customize how the image box will be shown in the website.
  3. Icons - Choose the category of where to show the icon box.
  4. Images - Use tag Image Box to make an image box.
  5. Featured Image - Image box’s picture that will be shown in the site.

After adding all the details, click on Publish button to save.

Delete Image box

To delete a Image box, navigate your Dashboard to Image boxes > All Image boxes

In the Image boxes page, you will see all the created Image boxes.

To delete a Image box, you have two options:

  • Single Image box Delete - Hover your mouse pointer on the image box that you would like to delete. You will see a Trash option pop-up. Click on Trash to delete.

    _images/imgbox2.png
  • Multiple Image box Delete - To delete multiple image boxes, click on the box beside the image box you would want to delete. Then click on the drop-down box for Bulk Actions and choose the Move to Trash option. Click on Apply button to delete.

    _images/imgbox3.png

Create Image box’s Icons

To create new Icons, navigate in WordPress Dashboard to Image boxes > Icons.

_images/imgbox4.png

The Icons page will show, here you can add the details of the Icons that you would like to create.

_images/imgbox5.png

After adding all the details, click on Add New category to save.

Delete Image box’s Icons

To delete a Category, navigate your Dashboard to Image boxes > Icons.

In the Icons page, you will see all the created category.

To delete a category, you have two options:

  • Single Delete - Hover your mouse pointer on the category that you would like to delete. You will see a Delete option pop-up. Click on Delete to delete.

    _images/imgbox6.png
  • Multiple Delete - To delete multiple categories, click on the box beside the categories you would want to delete. Then click on the drop-down box for Bulk Actions and choose the Delete option. Click on Apply button to delete.

    _images/imgbox7.png

Create Image box’s Images

To create new Icons, navigate in WordPress Dashboard to Image boxes > Images.

_images/imgbox8.png

The Images page will show, here you can add the details of the Images that you would like to create.

_images/imgbox9.png

After adding all the details, click on Add New category to save.

Delete Image box’s Images

To delete a Category, navigate your Dashboard to Image boxes > Images.

In the Images page, you will see all the created category.

To delete a category, you have two options:

  • Single Delete - Hover your mouse pointer on the category that you would like to delete. You will see a Delete option pop-up. Click on Delete to delete.

    _images/imgbox10.png
  • Multiple Delete - To delete multiple categories, click on the box beside the categories you would want to delete. Then click on the drop-down box for Bulk Actions and choose the Delete option. Click on Apply button to delete.

    _images/imgbox11.png

Add Image box to Page

To add Image box on a page, you can use an element in the Visual Composer: Post Masonry Grid

_images/imgbox12.png

This is the element that will add the image box, depending on the category, on the page.

_images/imgbox13.png

In the Data source drop down box, look for Ct-image-boxes. This will add the content from the Image boxes.

To choose a category to display from the Image boxes, add the category in Narrow data source.

You can customize the look and details on how it would look on the other tabs.

Click on Save changes button to save.

_images/imgbox14.png

Packages

Create Packages

To create a new Packages item, navigate in WordPress Dashboard to Packages > Add New.

_images/pack.png

The Add New Packages page will show. Add the details for the Package.

_images/pack1.png
  1. Title - The name of the Package.

  2. Editor container - You can customize how the Package will be shown in the website.

  3. Options

    • Previous Price - Previous price for the package.
    • Current Price - The value/price for the package.
    • Duration - Duration which the package could be used.
  4. Theme Information

    • Theme Title - Title of the package when in slider form.
    • Theme thumbnail Image - Image shown in slider form.
    • Theme Excerpt - A short description of the package shown in slider form.
  5. Promo Section

    • Header Title - Title of the Promo section in the package.
    • Background Image - Set an image to be used as the background image of the promo section.
    • Direct Video URL - Add a video in the promo section.
    • Content - Text content in the promo section.
    • Button Text - Label of the button.
    • Custom Link - URL for the button.
    • Button outline text - Color for the text and outline of the button.
    • Button hover bg - Background color when button is hovered.
    • Button hover outline - Color for the text when button is hovered.
  6. Ages - Category for the package’s age.

  7. Gender - Category for the gender.

  8. Featured Image - Package’s picture that will be shown in the site.

After adding all the details, click on Publish button to save.

Delete Package

To delete a Package, navigate your Dashboard to Packages > All Packages

In the Packages page, you will see all the created Packages.

To delete a Package, you have two options:

  • Single Package Delete - Hover your mouse pointer on the Package that you would like to delete. You will see a Trash option pop-up. Click on Trash to delete.

    _images/pack2.png
  • Multiple Package Delete - To delete multiple Packages, click on the box beside the Package you would want to delete. Then click on the drop-down box for Bulk Actions and choose the Move to Trash option. Click on Apply button to delete.

    _images/pack3.png

Create Package’s Ages

To create new Ages, navigate in WordPress Dashboard to Packages > Ages.

_images/pack4.png

The Ages page will show, here you can add the details of the Ages that you would like to create.

_images/pack5.png

After adding all the details, click on Add New category to save.

Delete Package’s Ages

To delete a Category, navigate your Dashboard to Packages > Ages.

In the Ages page, you will see all the created category.

To delete a category, you have two options:

  • Single Delete - Hover your mouse pointer on the category that you would like to delete. You will see a Delete option pop-up. Click on Delete to delete.

    _images/pack6.png
  • Multiple Delete - To delete multiple categories, click on the box beside the categories you would want to delete. Then click on the drop-down box for Bulk Actions and choose the Delete option. Click on Apply button to delete.

    _images/pack7.png

Create Package’s Genders

To create new Genders, navigate in WordPress Dashboard to Packages > Genders.

_images/pack8.png

The Genders page will show, here you can add the details of the Genders that you would like to create.

_images/pack9.png

After adding all the details, click on Add New category to save.

Delete Package’s Genders

To delete a Category, navigate your Dashboard to Packages > Genders.

In the Genders page, you will see all the created category.

To delete a category, you have two options:

  • Single Delete - Hover your mouse pointer on the category that you would like to delete. You will see a Delete option pop-up. Click on Delete to delete.

    _images/pack10.png
  • Multiple Delete - To delete multiple categories, click on the box beside the categories you would want to delete. Then click on the drop-down box for Bulk Actions and choose the Delete option. Click on Apply button to delete.

    _images/pack11.png

Add Packages to Page

To add Packages on a page, you can use elements in the Visual Composer: Packages All, Packages Carousel, and Packages grid.

_images/pack12.png

These are the elements that will add the Packages into a page.

For more information about this element, go to Funfetti Custom Shortcodes and look for Packages All, Packages Carousel or Packages grid.

Sample of Packages in Pages

  • Packages All

    _images/pack13.png
  • Packages Carousel

    _images/pack14.png
  • Packages grid

    _images/pack15.png

Services

Create Services

To create a new Services item, navigate in WordPress Dashboard to Services > Add New.

_images/serv.png

The Add New Services page will show. Add the details for the Service.

_images/serv1.png
  1. Title - The name of the Service.

  2. Editor container - You can customize how the Service will be shown in the website.

  3. Discussion - Option to allow comments and/or allow trackbacks and pinbacks on a page.

  4. Options

    • Title
  5. Services Category - Category for the service.

  6. Post Attributes

  7. Featured Image - Service’s picture that will be shown in the site.

After adding all the details, click on Publish button to save.

Delete Services

To delete a Service, navigate your Dashboard to Services > All Services

In the Services page, you will see all the created Services.

To delete a Service, you have two options:

  • Single Service Delete - Hover your mouse pointer on the Service that you would like to delete. You will see a Trash option pop-up. Click on Trash to delete.

    _images/serv2.png
  • Multiple Service Delete - To delete multiple Services, click on the box beside the Service you would want to delete. Then click on the drop-down box for Bulk Actions and choose the Move to Trash option. Click on Apply button to delete.

    _images/serv3.png

Create Services Categories

To create new Services Categories, navigate in WordPress Dashboard to Services > Services Categories.

_images/serv4.png

The Services Categories page will show, here you can add the details of the Services Categories that you would like to create.

_images/serv5.png

After adding all the details, click on Add New category to save.

Delete Services Categories

To delete a Category, navigate your Dashboard to Services > Services Categories.

In the Services Categories page, you will see all the created category.

To delete a category, you have two options:

  • Single Delete - Hover your mouse pointer on the category that you would like to delete. You will see a Delete option pop-up. Click on Delete to delete.

    _images/serv6.png
  • Multiple Delete - To delete multiple categories, click on the box beside the categories you would want to delete. Then click on the drop-down box for Bulk Actions and choose the Delete option. Click on Apply button to delete.

    _images/serv7.png

Shop Locator

Create Shop Locator

To create a new Shop Locator item, navigate in WordPress Dashboard to Shop Locator > Add New.

_images/shop.png

The Add New Shop Location page will show. Add the details for the Shop Location.

_images/shop1.png
  1. Title - The name of the Shop Location.

  2. Options

    • Location - Add the address for the shop location.
    _images/shop2.png
  3. Shop Locator Categories - Set the category for the shop location.

  4. Featured Image - Shop Location’s picture that will be shown in the site.

After adding all the details, click on Publish button to save.

Delete Shop Locator

To delete a Shop Location, navigate your Dashboard to Shop Locator > Shop Locations

In the Shop Locator page, you will see all the created Shop Locations.

To delete a Shop Location, you have two options:

  • Single Shop Location Delete - Hover your mouse pointer on the Shop Location that you would like to delete. You will see a Trash option pop-up. Click on Trash to delete.

    _images/shop3.png
  • Multiple Shop Location Delete - To delete multiple Shop Location, click on the box beside the Shop Location you would want to delete. Then click on the drop-down box for Bulk Actions and choose the Move to Trash option. Click on Apply button to delete.

    _images/shop4.png

Create Shop Locator Categories

To create new Shop Locator Categories, navigate in WordPress Dashboard to Shop Locator > Shop Locator Categories.

_images/shop5.png

The Shop Locator Categories page will show, here you can add the details of the Shop Locator Categories that you would like to create.

_images/shop6.png

After adding all the details, click on Add New category to save.

Delete Shop Locator Categories

To delete a Category, navigate your Dashboard to Shop Locator > Shop Locator Categories.

In the Shop Locator Categories page, you will see all the created category.

To delete a category, you have two options:

  • Single Delete - Hover your mouse pointer on the category that you would like to delete. You will see a Delete option pop-up. Click on Delete to delete.

    _images/shop7.png
  • Multiple Delete - To delete multiple categories, click on the box beside the categories you would want to delete. Then click on the drop-down box for Bulk Actions and choose the Delete option. Click on Apply button to delete.

    _images/shop8.png

Team Member

Create Team Member

To create a new Team Member item, navigate in WordPress Dashboard to Team members > Add New.

_images/team.png

The Add New Team member page will show. Add the details for the team member.

_images/team1.png
  1. Title - The name of the team member.

  2. Editor container - You can add here the role of the team member that will be shown in the website.

  3. Team options

    • Position - Team member’s position in the company.
    • Facebook - Team member’s facebook account.
    • Twitter - Team member’s twitter account.
    • Pinterest - Team member’s Pinterest account.
    • Instagram - Team member’s instagram account.
    • RSS - Team member’s RSS account.
    • LinkedIn - Team member’s LinkedIn account.
    • Google Plus - Team member’s Google Plus account.
    • Tumblr - Team member’s Tumblr account.
    • Skype - Team member’s Skype account.
    • Dribble - Team member’s Dribble account.
    • DropBox - Team member’s DropBox account.
    • Flickr - Team member’s Flickr account.
    • GitHub - Team member’s GitHub account.
    • Stack Exchange - Team member’s Stack Exchange account.
    • Stack Overflow - Team member’s Stack Overflow account.
    • VIMEO - Team member’s VIMEO account.
    • Weibo - Team member’s Weibo account.
    • Xing - Team member’s Xing account.
  4. Team Categories

  5. Featured Image - Team members picture that will be shown in the site.

After adding all the details, click on Publish button to save.

Delete Team Member

To delete a Team member, navigate your Dashboard to Team members > All Team members

In the Team members page, you will see all the created team members.

To delete a Team member, you have two options:

  • Single Team member Delete - Hover your mouse pointer on the testimonial that you would like to delete. You will see a Trash option pop-up. Click on Trash to delete.

    _images/team8.png
  • Multiple Team member Delete - To delete multiple testimonials, click on the box beside the testimonials you would want to delete. Then click on the drop-down box for Bulk Actions and choose the Move to Trash option. Click on Apply button to delete.

    _images/team9.png

Create Team Category

Categories are convenient ways to organize your Team items, that can be added to more than just one category.

To create new Team Category, navigate in WordPress Dashboard to Team > Team Categories.

_images/team4.png

The Team Categories page will show, here you can add the details of the Team Category that you would like to create.

_images/team5.png

After adding all the details, click on Add New category to save.

Delete Team Category

To delete a Category, navigate your Dashboard to Team > Team Categories.

In the Team Categories page, you will see all the created category.

To delete a category, you have two options:

  • Single Delete - Hover your mouse pointer on the category that you would like to delete. You will see a Delete option pop-up. Click on Delete to delete.

    _images/team6.png
  • Multiple Delete - To delete multiple categories, click on the box beside the categories you would want to delete. Then click on the drop-down box for Bulk Actions and choose the Delete option. Click on Apply button to delete.

    _images/team7.png

Create Team Member Page

Teams of Funfetti is generated by the theme from Team members items.

To create a simple Team Page, follow these steps:

  • Step 1 - Create a new page where to add the Teams page.

    _images/newPage.png
  • Step 2 - Add a row element to the page, click the Edit this row option of the row. The Row Settings will pop-up.

    _images/portPage.png
  • Step 3 - Change the settings to your preference.

  • Step 4 - In the row, to add a title for the page. You have the option to add a Text Block or Section/Header Title element.

  • Step 5 - Add a new row to add the Team members items. To add the Team members items, add a Team display element to the page.

    _images/team2.png
  • Step 6 - Add the team ID at the Data Source. Click Save changes to save.

    _images/team3.png
  • Step 7 - You can add more elements on the page as you like. Once satisfied, click on the Publish button.

Sample of Team Members in a Page

_images/team10.png

Testimonials

A Testimonial is a statement that testify to someone’s character and qualifications. You can use this statements on your page to establish confidence.

Create Testimonials

To create a new testimonial, on your Dashboard navigate to Testimonials > Add New.

_images/testi.png

The Add New Testimonial page will show. Add the details for the testimonial.

_images/testi1.png
  1. Title - The title of the single testimonial page.

  2. Editor container - You can add here the testimonial.

  3. Author

    • Name - The name of the one who said the testimonial.
    • Company - Name of the company.
  4. Featured Image - Author’s picture.

After adding all the details, click on Publish button to save.

Delete Testimonials

To delete a Testimonial, navigate your Dashboard to Testimonials > Testimonials

In the Testimonials page, you will see all the created testimonials.

To delete a testimonial, you have two options:

  • Single Testimonial Delete - Hover your mouse pointer on the testimonial that you would like to delete. You will see a Trash option pop-up. Click on Trash to delete.

    _images/testi3.png
  • Multiple Testimonials Delete - To delete multiple testimonials, click on the box beside the testimonials you would want to delete. Then click on the drop-down box for Bulk Actions and choose the Move to Trash option. Click on Apply button to delete.

    _images/testi4.png

Add Testimonials to Page

To add testimonials to a page, an element in the Visual Composer is used.

_images/testi2.png

These are the elements that will add an event on the page. For more information about this element, go to Funfetti Custom Shortcodes > Testimonials slider.

Sample Testimonial in a Page

_images/testi5.png

Booki Plugin

Booki is a modern booking plugin for WordPress. This plugin allows you to setup appointments or reservations with time that adapts to users timezone. You can make payment via PayPal or simply book and pay later.

Create New Booking Project

To create a booking project, navigate to Booki > Projects.

_images/booki1.png

You will be directed to the Create, edit, and delete projects page.

As the page name suggests, you can create, edit, and delete projects in this page.

_images/booki2.png

To create a new project, follow these steps:

Under the Projects tab:

  • Step 1 - Choose Create new in the Project’s drop down box.

    _images/booki3.png
  • Step 2 - Add the name of your project.

  • Step 3 - Fill in the needed information as required for your booking.

    Note

    Read the descriptions of the information to be guided.

    • Booking mode

    • Maximum booking days or time slot

    • Minimum booking days or time slot

    • Calendar mode

    • Tag

    • Project listing settings

      • Description
      • Preview Image
    • General project settings

      • Project status
      • New Booking Notification Recipient(s)
      • Default step
      • Booking wizard mode
      • Ban list
      • Default date selected
    • Booking control label settings

      • Booking tab caption
      • Custom form fields tab caption
      • Attendees tab caption
      • Available days field label
      • Selected days field label
      • Booking time field label
      • Optional features heading
      • Next button caption
      • Back button caption
      • Create booking button caption
      • From
      • To
      • Proceed to login label
      • Make booking label
      • Available seats label
    • Optional HTML content

      • Content above booking calendar
      • Content below booking calendar
  • Step 4 - After all the needed information are added, click the Create button to save.

    _images/booki4.png
  • Step 5 - Once the project is created, you will see the project short code below the project name.

    _images/booki5.png

    Note

    The short code is used to call the project that you would like to use in an element or widget.

  • Step 6 - Also, after the project is created, other tabs beside project can now be use to customize your project.

    _images/booki6.png
    • Form builder - Create a booking form that allows the user to input information for the booking.

      • Element type
      • Label
      • Value
      • CSS class name
      • Column Index
      • Row Index
      • Validation - Basic constraints
      • Validation - Advance constraints
    • Booking period - Specify the days that allows booking.

      • Booking date range: Start date & End date
      • Minimum notice
      • Email reminder
      • Seats
      • Deposits
      • Quantity elements general settings
      • Quantity elements
      • Days to exclude from list of days in selected season
      • Cost
    • Optional Lists - Add in the booking form extra billable items option for the user. These are displayed as checkboxes and are added to the bill.

      • Optional Item Name
      • Cost
    • Optional Cascading Lists -

      • Select Cascading List
      • Label
      • Is required
      • Value
      • Cost
      • Dropdown list items
      • Select the parent list

Delete Booking Project

To delete a project in booki, navigate to Booki > Projects.

You will be directed to the Create, edit and delete projects page.

Choose the project you want to delete at the Project dropdown box. The Project dropdown box have all the available projects.

_images/booki7.png

Scroll down and look for the Delete button.

_images/booki8.png

Add Booki Shortcode to Page

To add a Booki shortcode to a page, follow these steps:

Directly to the Page

  • On the page you want to add the booking project, create/add a text block.

  • In the content editor, add the Booki shortcode.

    _images/booki12.png
  • Click Save changes to save the details.

  • The result of adding this short code should look like this:

    _images/booki13.png

Contact Form

Create Contact Form

To create a new Contact Form item, navigate in WordPress Dashboard to Contact > Add New.

_images/newContact.png

The Add New Contact Form page will show. Add the details for the Contact Form.

_images/newContact1.png
  1. Title - The title for the Contact Form

  2. Form Details - Details and information of the form.

    • Form - The codes for the user interface of the form.
    • Mail - Set the email template of the form.
    • Messages - Message prompt when an action is done with the form.
    • Additional Settings - You can add customization code.

After adding all the details, click on Save button to save.

Note

For information on how to use this plugin or what markup to use click here to go to General Information > Unyson, Extension, and Plugins > Contact Form 7.

Create Contact Page

Contact Form Page of Funfetti is generated by the theme from Contact Form item.

To create an Contact Form Page, follow these steps:

  • Step 1 - Create a new page where to add the Contact Form.

    _images/newPage.png
  • Step 2 - Add a row element to the page, click the Edit this row option of the row. The Row Settings will pop-up.

    _images/portPage.png
  • Step 3 - Change the settings to your preference.

  • Step 4 - In the row, to add a title for the page. You have the option to add a Text Block or Section/Header Title element.

  • Step 5 - Add a new row to add the Contact Form item. The Contact Form can be generated by Contact Form 7 of Theme Element.

    _images/newContact2.png
  • Step 6 - The Contact Form 7 Settings will pop-up. Change details as needed.

    _images/newContact3.png
    • Select contact form - The form you want to add to the page.
    • Search title - Optional title to search if no form is added.
  • Step 7 - You can customize the page by adding other elements to the page.

  • Step 8 - Once you have finished customizing the page, click on the Publish button.

    _images/newContact4.png

Widgets & Menu

Widgets

Widgets are small blocks of content, which you can find in theme footer or sidebar. They were originally designed to provide a simple and easy-to-use way of giving design and structure control of the WordPress Theme to the user, which is now available on WordPress Themes to include the header, footer, and elsewhere in the WordPress design and structure.

_images/widget1.png

How to Edit Widgets

You can access widget edit screen under Appearance > Widgets panel or via Customize on path Appearance > Customise > Widgets. It has three main areas:

  • Available Widgets
  • Inactive Widgets
  • Inactive Sidebars and widget areas

To add a widget to your site, drag and drop the name of the widget you want to use from the Available Widgets section into one of the widget areas on the right-hand side of the window. After you have added it, the widget will open up (or if it doesn’t, you can click on the triangle to open it) and you can change the settings and save the widget. The specific settings needed will depend on what type of widget you are using. For instance, if it is a text widget, you just need to type in the text (and optionally, HTML code), and save the widget.

Customising Funfetti

Funfetti comes with an advanced customizer, which allows to edit most of the theme’s elements in one place. If you want to use it, navigate to Appearance > Customize.

_images/custom.png

Site Identity

Here you will have the option to customize your site’s identity or how it can be viewed by people.

_images/custom1.png
  • Logo - Logo of the site that will be displayed in the header.
  • Site Title - The title of the site you created.
  • Tagline - The slogan/catchphrase for you site. What people will remember if they see your site.
  • Site Icon - The icon used as a browser icon. Icons must be square, and at least 512 pixels wide and tall.

Add all the information you like to add, then click on the Save button.

General

The General is divided into 4:

_images/custom2.png
  • Motive

    • Pick Motive color - The primary color scheme of the site.

    • Pick the accent motive color - The secondary color scheme of the site.

      _images/custom3.png
  • Preloader

    • Preloader on/off - Option to show preloader when loading a page.

      _images/custom4.png
  • Slider Arrows

    • Slider previous arrow - Set the slider’s previous arrow.

    • Slider next arrow - Set the slider’s next arrow.

      _images/custom5.png

      Sample slider with arrow

      _images/custom28.png
  • Currency

    • Currency - Set currency for Packages prices.

      _images/custom31.png

Add all the information you like to add, then click on the Save button.

Header & Navigation

The Header & Navigation is where you set the behavior of the header and how it looks.

The header settings is divided into 5 parts:

_images/custom7.png
  • Header Settings

    • Page header type - Choose which type of head section you want to display (works only when header is enabled).

    • Mobile Background - Background Image of for mobile devices.

    • Header Background Image - Background image of header for desktop.

    • Header Height - Height of the Header.

      _images/custom8.png
  • Topbar Settings

    • Topbar Text and Icon Color - Text and Icon color of the topbar.

    • Topbar Text and Icon Color on Hover - Text and Icon color of the topbar when hovered.

      _images/custom9.png
  • Topbar Information

    • Business Address - Office address of the site.

    • Email Address - Email Address which is displayed after the office address.

    • Contact Number - Contact Number which is displayed after the contact text.

      _images/custom10.png
  • Topbar Social Icons

    • Facebook

    • Twitter

    • Pinterest

    • Instagram

    • RSS

    • LinkedIn

    • Google Plus

    • Tumblr

    • Skype

    • Dribble

    • Dropbox

    • Flickr

    • Github

      _images/custom11.png
  • Menu Navigation

    • Button in navigation - Option to display button in the navigation.

    • Button title - Title for the button in the navigation.

    • Button link - URL for where the button will direct.

    • Open link in new window - Option to open the link in a new tab.

    • Logo image - Logo image in mobile navigation.

    • Search in navigation - Option to add a search icon at the end of the navigation.

      _images/custom12.png

Add all the information you like to add, then click on the Save button.

Blog

This is where you can customize the Blog side bar location:

_images/custom13.png
  • Blog

    • Display blog sidebar - Option to display sidebar on all blogs page.
    • Place to display sidebar - Area where the sidebar is located.

Add all the information you like to add, then click on the Save button.

Single Blog Post

This is where you can customize the Blog’s single page side bar location:

_images/custom17.png
  • Display blog sidebar - Option to display sidebar on single blog post page.
  • Place to display sidebar - Area where the sidebar is located.
  • Tags after post - Option to display tags after the blog post.
  • Display comments after post - Option to display area to add/write comments on the blog.

Add all the information you like to add, then click on the Save button.

Services Sidebar

This is where you can customize the Service’s single page side bar location:

_images/custom27.png
  • Display services sidebar - Option to display sidebar on services post page.
  • Place to display sidebar - Area where the sidebar is located.
  • Tags after post - Option to display tags after the services post.
  • Display comments after post - Option to display area to add/write comments on the services post.

Add all the information you like to add, then click on the Save button.

Coming Soon Template

The Coming Soon Template is divided into 2:

_images/custom14.png
  • Coming Soon Header Settings

    • Upload Header Background - Header background of the Coming soon page.

    • Logo - Option to show the customized logo.

    • Upload Logo - Logo that will be shown in the coming soon page.

    • Title - Title that will be shown if Logo is not displayed.

    • Display Social - Option to display socials that are set in Topbar Social Icons.

    • Coming Soon Header Text - Text that will be displayed at the header of the coming soon page.

      _images/custom15.png
  • Coming Soon Footer Elements

    • Information - Option to display information about the site. Information are from Topbar Information Settings.

    • Display Copyright Area - Option to display the copyright of the site. Copyright information are from Footer Elements Settings.

      _images/custom16.png

Coming Soon Page Sample

_images/custom29.png

Add all the information you like to add, then click on the Save button.

Homepage Settings

Option for the front page is shown here.

  • Front page displays - Options on how the front page/home page looks like.

    • Your latest posts - Show the latest post on your blogs.

      _images/custom19.png
    • A static page - Set a page that would stay the same until the page is replaced manually.

      _images/custom18.png

Note

You can also do this using the Homepage Setup instructions in Page > Homepage Setup.

Widgets

You can customize what is inside the widgets on the page. If a widget is placed on the page you see on the preview, it will be listed on the left side under widgets.

_images/custom25.png
  • Pre-footer column 1
  • Pre-footer column 2
  • Pre-footer column 3
  • Footer column 1
  • Footer column 2
  • Footer column 3

Note

You can also do the same thing by following How to Edit Widgets instructions in Widgets & Menu > Widgets.

Additional CSS

You can add your own CSS code for your site.

_images/custom26.png