• Facebook
  • Twitter

General Information


Thank you for purchasing Charlotte! We’re very pleased that you have chosen our theme to build your website and we’re trying our best not to disappoint you! Before you get started, please check out these documentation pages. Charlotte can only be use with WordPress which we assume you already have installed and ready to go. If not, please check out WordPress Codex.


Requirements for Charlotte


Before using Charlotte, please meet the following requirements:

  • essentials to run WordPress – here you can find more information – 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.

What’s Included


When purchasing our theme from Themeforest, you need to download the Charlotte files from your Themeforest account. Navigate to downloads tab on Themeforest and find Charlotte. Below you’ll find a full list of what is included the .zip file, along with a brief description of each item.
Charlotte Folder contains:

    • charlottetheme.zip – main installation folder

Support


All of our items come with free support. For some help you can reach to our dedicated support forum. Free support is limited to questions regarding the themes features or problems. We provide premium support for code customizations or third-party plugins. If you need help with anything other than minor customizations of your theme, feel free to contact us on premium@createit.pl.

For free support, follow the steps below

  • Step 1Click Here to create a free forum account. You’ll need your Themeforest purchase code, which can only be received when purchasing the theme from Themeforest.net.
  • Step 2 – Enter your Themeforest Purchase Code, an e-mail and a password.
  • Step 3 – Once you have an account, sign in to the forum and get started.
  • Step 4 – Find your theme on a forum home page.
  • Step 5 – Create new issue by clicking on a button at the right.

Before You Post On 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 everyones 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 – Always use our Forum Search before you post, it’s possible that your issue has already been brought up and answered.
  • Step 3 – If your question hasn’t been brought up, 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 4 – We usually answer questions in 24 hours on working days. However if you don’t get any answer in 72 hours bump up your question or send us an e-mail.

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

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

Installation


There are two ways to install the theme: through WordPress, or via FTP. But first, you need to download the Charlotte files from your Themeforest account. Navigate to downloads tab on Themeforest and find Charlotte. Click the download button.

For more information check also this article from Knowledge Base.


Installation via Administration Panel


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

Once you’ve logged in to your administration panel go to Appearance > Themes. Depending on your version of WordPress you’ll see Add New or two other tabs: Manage Themes and Install Themes.

Themes section

Themes section

Here you’ll find instructions how to proceed with 3.9.0 and lower versions of WordPress.

 

If you’re using newer version, follow steps below to install the theme:

  • Step 1 – click on Install Themes tab
    Install Themes tab

    Install Themes tab

  • Step 2 – choose Upload option to upload .zip file
    Upload theme

    Upload theme

  • Step 3 – choose charlottetheme.zip from you computer.
  • Step 4 – once the file is chosen click Install Now
    Install theme

    Install theme

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

If you get the following question message when installing Charlotte.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.


Custom post types


Charlotte comes with number of custom post type, for example:

  • portfolio items,
  • faq items,
  • galleries,

For the correct operation of Charlotte you have to install and activate dedicated for custom post types plugin:

custom-post-types

custom post types

With these plugins your custom post types will be saved in your admin panel, even if you change your WordPress theme.


Notice: Plugin must be installed and activated right after you install and activate the Charlotte – otherwise you might be encountered problems with correct theme functioning.

install

Install the plugin


Installation via FTP


To install Charlotte via FTP, follow steps below:

  • Step 1 – Unarchive charlottetheme.zip file
  • Step 2 – Access your host web server using FTP client
  • Step 3 – Find directory wp-content > themes
  • Step 4 – Put folder Charlotte in directory wp-content > themes
Installation directory

Installation directory


Learn more:

WordPress codex – FTP clients


Import demo content


The fastest and easiest way to import our demo content is to use Theme Options 1-click Demo Importer. It will import all pages and posts, several sample sliders, widgets, theme options, assigned pages, and more. We recommend this approach on a newly installed WordPress. It will not replace content such as posts, pages, portfolio, etc. and delete current menus, but configure them and replace theme options. By that, if you have created some posts, pages or portfolio content before an import, you won’t loose them.

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

  • Step 1 – install and activate plugins listed in Recommended Plugins message {warning}
    Recommended plugins

    Recommended plugins

    and WooCoomerce plugin, if you’d like to use shop functionalities.

  • Step 2 – setup Media thumbnails sizes in Settings > Media to recommended values:
    • Thumbnail size: 150 x 150px
    • Medium size: 300 x 300px
    • Large size: 1024 x 1024px

If you’re using WooCommerce product images sizes in WooCoomerce > Settings > Products

  • Step 3 – navigate to Appearance > Theme Options > General – 1-click Demo Import
  • Step 4 – click the Import demo content button with multipage or onepager version.
    (WARNING:The image below is only an example of how the 1-Click Demo section might look like. Depending on the theme, the amount of images and/or tabs of the import demo contents, this option might look different.)

     

    1 click to import demo content

    1 click to import demo content

  • Step 5 – importing can take a few minutes. Please be patient and wait for it to complete. Once it will be loading, you will see message with indicating progress.

Learn more:

Common errors with “1-Click Demo Import”


Theme Setup


Major Charlotte content structure can be divided in three sections:

  • Navigation Menu
  • Sidebar Block
  • Page Content

 

Content structure

Content structure

Navigation Menu

Menu bar contains two main components:

  • menu
  • widgets

Menu can be setup via Appearance > Menus section – just select pages you would like to display in navigation – for more information check Menu setup section.

Menu appearance can be edited via Appearance > Customizer – Main Navbar (for more information please check the customizer documentation.)

Decorative diamonds above and below the menu links are Top and Bottom dividers. On demo page we used assets/images.hr1.png patterns with dividers background style parameters setup to repeat.

You can display widgets below the menu. To enable sidebar with widgets – please set the bottom sidebar to show.

Main navigation sidebar

Main navigation sidebar

Content of the sidebar can be setup via Widgets section

Main navigation Widgets

Main navigation Widgets

On demo page in Main Navigation Sidebar you’ll find the following widgets:

  • CT – contact info
  • CT – divider (with setup Built-in style to type 2)
  • CT – contact info
  • CT – socials

Sidebar Block

Sidebar Blocks can be created separately for each page. Please check Sidebar Blocks documentation.

In sidebar block you can add any content you want, using Visual Composer or shortcodes. In our demo page we’re mostly using sidebar blocks:

  • Divider
  • Header
  • Text
Sidebar block content

Sidebar block content

Sidebar block background and animation can be edited via Appearance > Customize.

Please read more about pages sidebar options here.

Page content

There are several types of pages included in Charlotte. Content such as:

is generated from custom post types created in sections: Restaurant Menu, Portfolio items, Posts

Pages with standard content for example:

  • About
  • Booking
  • Catering
  • Contact

are created with Visual Composer elements.

About Us

About us page

About us page

 

About us - shortcodes content

About us – shortcodes content

Booking

Booking page

Booking page

Booking - shortcodes

Booking – shortcodes

Contact form 7

Contact form can be created via Contact section and added in page content with Contact Form 7 widget.
Please check the plugin documentation for advanced form configuration.

Contact form 7

Contact form 7

Catering

Catering

Catering

 

Catering - shortcodes

Catering – shortcodes

Contact

Contac page - shortcodes

Contac page – shortcodes

Contact page

Contact page

Please notice to set page template to Contact us Template – only this template comes with embed big google map. Map location can be defined via Appearance > Customizer – General.

Contact us Template isn’t compatible with Sidebar Blocks.

Map Location

Map Location


Customizer


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

Charlotte Customizer

 

Charlotte – style

You can pick the color scheme of the site here.

Charlotte – style

  • Motive Light – A light motive color of the site.
  • Motive –  The main color scheme of the site.
  • Motive dark – A dark motive color of the site.
  • Motive darker – A darker motive color of the site.
  • Navbar color – The font color of the words in the Navigation bar.
  • Navbar link hover – The font color of the words with links when hovered.
  • Navbar link color – The font color of words with links in the Navigation bar.
  • Base font navbar – The font style of the words with links in the Navigation bar.
  • Size – The font size of the words with links in the Navigation bar.
  • Select content pattern – The background pattern of the site.

General

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

General

  • Logo standard – Logo in the Navigation bar.
  • Logo mobile – Logo shown in mobile version.
  • Login logo – logo shown in the login section.
  • Favicon – Icon used as the image in the tab of the site.
  • Apple touch icon
  • Map template location – Address for the map template.
  • Map template latitude – Latitude coordinate for the location in the map.
  • Map template longitude – Longitude coordinate for the location in the map.
  • Search icon in navbar – Option to shoe or hide the search icon in the navigation bar.
  • Page 404 sidebar background image – Image used as the background for the 404 page’s sidebar.
  • Page 404 sidebar background style – Style of the 404 page’s sidebar background.
  • Page 404 sidebar animated background – Option to add animation on the 404 page’s sidebar background.

Pages

Pages is divided into 2:

Pages

Page sidebar options

Page sidebar options

  • Select sidebar block – What the side bar will show.
  • Page sidebar background image – Set an image as the background for the sidebar.
  • Page sidebar background style – The background style of the sidebar.
  • Page sidebar animated background – Option to add animation on the sidebar background.
Header

Header

  • Header Image – Image set as the Header background.
  • Header Image mobile – Image set as the Header background in the mobile version.

Main navbar

You can customize the navigation bar’s look.

Style

  • Navbar background image – Set a background image for the sidebar.
  • Top divider background – Add a top divider image.
  • Bottom divider background – Add a bottom divider image.
  • Top divider background style – Top divider background style.
  • Bottom divider background style – Bottom divider background style.
  • Bottom sidebar – Option to show bottom widgets area.

Posts

Posts is divided into 3:

Posts

Blog Sidebar options

Blog Sidebar options

  • Show blog title block – Option to show the blog title block.
  • Show blog single title block – Option to show the blog single title block.
  • Show sidebar widgets on blog index – Option to show sidebar widgets on blog index.
  • Show sidebar widgets on blog single – Option to show sidebar widgets on blog single.
  • Blog index sidebar background image –  Set the background image of the blog index sidebar.
  • Blog index sidebar background style – The style of the background image of the blog index sidebar.
  • Blog single sidebar background image – Set the background image of the blog single sidebar.
  • Blog single sidebar background style – The style of the background image of the blog single sidebar.
  • Blog index sidebar animated background – Option to add animation on the background of the blog index sidebar.
  • Blog single sidebar animated background – Option to add animation on the background of the blog single sidebar.
Index

Index

  • Blog index meta separator – Icon/sign that separates the information about the blog.
  • Blog title – Title of the blog page.
  • Show posts index page title row – Option to show posts index page title row.
  • Show posts index page title text – Option to show posts index page title text.
  • Post detail button label – What is written in the post detail button.
  • Pagination prev label – Label for the pagination of previous page.
  • Pagination next label – Label for the pagination of next page.
  • Show meta – Show the meta details of the blog posts.
  • Tags label – Label for tags.
  • Date – Option to show the date when the blog is posted.
  • Show featured media on blog index – Option to show media (images, videos, etc.,) that is in the blog post in the blog index.
  • Title / quote author – Option to show the author of the post.
  • Comments count – Option to show comment count.
  • Post text – Set what the post text will show.
  • Author link – Option to show author link.
  • Show read more button? – Option to show read more button.
Single

Single

  • Date – Option to show the date of the blog.
  • Blog single meta separator – Icon/sign that separates the information about the blog.
  • Show posts single page title row – Option to show posts single page title row.
  • Post single page title – Option to show posts single page title text.
  • Date – Option to show the date of the blog.
  • Show featured media on single post – Option to show media (images, videos, etc.,) that is in the blog post in the blog index.
  • Title / quote author –  Option to show the author of the post.
  • Content – Option to show the content of the blog.
  • Author link  – Option to show author link.
  • Comments – Option to allow comment in blog post.
  • Comment form – Option to show the comment form for the blog.
  • Tag cloud – Option to show tags of the blog.
  • Categories – Option to show blog category.
  • Show author box
  • Pagination – Option to show pagination.
  • Tags label – Label for tags.
  • Previous post label – Label for the pagination of previous post.
  • Next post label – Label for the pagination of next post.
  • By label – Label of by.
  • Comment reply label – Label of reply.
  • Leave a comment label – Label for Leave a comment.
  • Comment Form submit label – Label Comment Form Submit.
  • Comment Form name placeholder – Label Comment Form name.
  • Comment Form email placeholder – Label Comment Form email.
  • Comment Form message placeholder – Label Comment Form message.
  • Bottom divider – Add a bottom divider image.
  • Bottom divider background style – Bottom divider background style.
  • Comments top divider – Top divider for the comments.
  • Comments top divider background style – Top divider background style for the comments.
  • Comments bottom divider – Bottom divider for the comments.
  • Comments bottom divider background style Bottom divider background style for the comments.
  • Comment Form divider background style – Comment form divider background style for the comments.

Socials

This is where you can set your socials account.

Socials

  • Show socials box – Option to show social box in the header.
  • Select header socials style – What the style of the header socials will look.
  • Bitbucket username – Account for the site.
  • Dribbble username – Account for the site.
  • Dropbox username – Account for the site.
  • Email – Email address for the site.
  • Facebook – Account for the site.
  • Twitter – Account for the site.
  • Pinterest – Account for the site.
  • Instagram – Account for the site.
  • RSS – Account for the site.
  • LinkedIn – Account for the site.
  • Google Plus – Account for the site.
  • Tumblr – Account for the site.
  • Skype – Account for the site.
  • Dribble – Account for the site.
  • Dropbox – Account for the site.
  • Flickr – Account for the site.
  • Github – Account for the site.

Shop

Shop is divided to 3:

Shop

Shop Sidebar options

Shop Sidebar options

  • Shop index sidebar background style – 
  • Shop single sidebar background style 
Shop index options

Shop index options

  • Show share icons? – Option to show share icons.
  • Top navbar Basket label – Label for the navigation bar basket.
  • Top navbar Basket empty label – Label when the navigation bar is empty.
Shop index options

Shop single product option

  • Page title – Title for the single product page.

Restaurant Menu

Restaurant Menu is divided into 3:

Restaurant Menu

Sidebar

Sidebar

Menu index

Menu index

Filtering

Filtering

  • Separate category slugs by commas

Gallery Setup

Gallery Setup is divided into 4:

Gallery Setup

General options

General options

  • Select portfolio type – How the gallery/portfolio is going to look.
  • Custom index slug – Slug for the page.
  • Limit – Number of items in the gallery/portfolio that will show.
Masonry type options

Masonry type options

  • Columns – Number of post per column.
  • Pagination prev label – Label for the pagination previous page.
  • Pagination next label – Label for the pagination next page.
Filters

Filters

  • Separate category slugs by commas.
Infinite type options

Infinite type options

  • Columns – Number of column post per row.
  • Random sizes – Option to show the images with random sizes.

Google Maps API

Google Maps API Config

  • Google maps API key – API key set for the google maps.

Site Identity

Site Identity

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

Menus

Menus

  • Menus – These are the menus made by you. You can make/add a new menu or delete it here.
  • Menu Location – Charlotte supports 2 menus: Primary Menu and Sidebar Menu
    • Top primary menu – Choose which menu in the Menus you would like to use as the primary menu.
    • Secondary menu in left sidebar – Choose which menu in the Menus would like to use as the sidebar menu.

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.

Widgets

Notice:

You can also do the same thing by going to Appearance > Widgets.

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.

Homepage Setting 1

    • A static page – Set a page that would stay the same until the page is replaced manually.

Homepage Settings 2

Notice:

You can also do this by going to Settings > Reading.

WooCommerce

WooCommerce is divided into 3:

WooCommerce

Store Notice

Store Notice

  • Store notice – If enabled, this text will be shown site-wide. You can use it to show events or promotions to visitors.
  • Enable store notice – Option to enable Store notice on the site.
Product Catalog

Product Catalog

  • Choose what to display on the main shop page.
  • Choose what to display on product category pages.
  • How should products be sorted in the catalog by default?
Product Images

Product Images

  • Image size used for the main image on single product pages. These images will remain uncropped.
  • Image size used for products in the catalog and product gallery thumbnails.
  • Thumbnail cropping

Additional CSS

You can add your own CSS code for your site.

Additional CSS

 

Notice:

All changes made with customizer will only be applied when you click on

save


Pages Options


In Pages panel you are able to edit the following options:

  1. Page sidebar options:
    • Select sidebar block
    • Background style
    • Animation background – yes/no
    Pages sidebar options

    Pages sidebar options

  2. Header settings:
    • Header image
    • Header background image
    Pages header options

    Pages header options

Notice: – settings above are by default applied for all your pages. Although you can customize them for each page separately using Page side content settings – you will see this option during page content editing.

Single page - sidebar block setting

Single page – sidebar block setting

 


Main Navbar


In Main Navbar tab you can define the following settings:

  • Navbar background image
  • Top divider background
  • Bottom divider background
  • Top divider background style
  • Bottom divider background style
  • Bottom widgets area

 

Main navbar style settings

Main navbar style settings

 


Posts options


When using the assigned blog page, as described in Blog Index page, all options are located in Appearance > Customize on the Posts tab. There are dozens of options to choose from, such as layout, categories, dates, etc. There are general blog options and single post page options. Each one has a title and a description which explains you what it does. Any type of blog options that you need to set, will be in theme options of assigned blog page.

INDEX PAGE OPTIONS:

  • Blog index meta separator – image, which should be displayed between post meta information: date, category, comments
    separator-meta
  • Blog title – it will be displayed as title of your index page,
  • Show index as – select the way of displaying posts on index,
  • Show posts index page title row – hide/show blog title container,
  • Show posts index page title text – hide/show blog title,
  • Post detail button label – define custom label for button Read More,
  • Pagination prev label – define custom label for button Previous Page,
  • Pagination next label – define custom label for button Next Page,
  • Show meta – display post meta information: date, category, comments,
  • Date – show/hide posts date
  • Show featured media on blog index – show/hide image, video or gallery assigned to post (if you select Hide – it will display only text on blog index page),
  • Title / quote author – show/hide posts author,
  • Post text – display full posts text, post excerpt or no intro text in posts list,
  • Show read more button – show/hide button Read More
  • Sidebar – show/hide sidebar on blog index page,
  • Tags labels – define custom labels, for “Tags” ,
Blog index page settings

Blog index page settings

SINGLE POST OPTIONS – select how single post page should look like:

  • Blog single meta separator – image, which should be displayed between post meta information: date, category, comments
    separator-meta
  • Post single page title – it will be displayed as title of your index page,
  • Show index as – select the way of displaying posts on index,
  • Show posts index page title row – hide/show blog title,
  • Date – show/hide posts date
  • Show featured media on blog index – show/hide image, video or gallery assigned to post (if you select Hide – it will display only text on blog index page),
  • Title / quote author – show/hide posts author,
  • Content – show/hide,
  • Author link – show/hide,
  • Comments – show/hide,
  • Comment form – show/hide,
  • Comments count – show/hide,
  • Tag cloud – show/hide,
  • Categories – show/hide,
  • Show author box – show/hide,
  • Pagination – show/hide,
  • Tags label
  • Previous post label
  • Next post label
  • By label
  • Comment reply label
  • Leave a comment label
  • Comment Form submit label
  • Comment Form name placeholder
  • Comment Form email placeholder
  • Comment Form message placeholder
  • Bottom divider
  • RemoveChange Image
  • Bottom divider background style
  • Comments top divider
  • RemoveChange Image
  • Comments top divider background style
  • Comments bottom divider
  • RemoveChange Image
  • Comments bottom divider background style
  • Comment Form divider
  • RemoveChange Image
  • Comment Form divider background style
Single post settings

Single post settings

BLOG SIDEBAR OPTIONS:

  • Show blog title block,
  • Show blog single title block
  • Show sidebar widgets on blog index
  • Show sidebar widgets on blog single
  • Blog index sidebar background image
  • Blog index sidebar background style
  • Blog single sidebar background image
  • Blog single sidebar background style
  • Blog index sidebar animated background
  • Blog single sidebar animated background
Blog sidebar options

Blog sidebar options


Common issue: How to change post intro text?

Intro text, which can be displayed on Blog index page is an Excerpt. You can edit it manually for every post with the following field:

Excerpt

Excerpt

Notice: if you don’t see Excerpt field when you are editing your post, go to Screen Options at the top of the post edition window (on the right hand side) and enable Excerpt with checkbox.


Gallery Setup


Gallery is built out of Portfolio Items – a custom post types, which can be created via Portfolio section.

Creating Portfolio items

To create new Gallery elements, navigate to Portfolio items > Add New

Add a new portfolio item

Add a new portfolio item

For new portfolio item  you can define:

  • Title (required),
  • Tags (optional),
  • Categories (optional),
  • Order attribute (optional),
  • Images (recommended),

After every modification click on Update to keep your changes saved.

Portfolio items

Portfolio items

Gallery setup

Once your portfolio items are created you can build a Gallery. Please navigate to Appearance > Customize – Gallery Setup

In main tab – General Options you can:

  • select gallery type,
  • define gallery page slug
  • define maximum number of displayed items

Gallery general options

Gallery general options

Depending on which gallery style you have selected in the General tab – define more advanced options, such as Number of columns, pagination settings, or gallery thumbnail sizes for the infinite scroll.


Restaurant Menu


Charlotte comes with an option to create a restaurant menu. Below you will find available settings for Restaurant Menu page template, where all restaurant products are displayed. All products are grouped by categories. You can define order of displayed categories together with order of displaying single products.

SIDEBAR OPTIONS:

  • Show Menu Card title block
  • Select title block for menu sidebar
  • Menu sidebar background image
  • Menu sidebar background style
  • Menu sidebar animated background
  • Sidebar bottom divider background
  • Sidebar bottom divider background repeat
Menu sidebar options

Menu sidebar options

MENU INDEX OPTIONS – select how your menu page should look like:

  • Menu index top divider background
  • Menu index bottom divider background
  • Menu index top divider repeat
  • Bottom divider background style.
  • Menu index bottom divider repeat
  • Bottom divider background style.
  • Currency
  • Menu index currency position
  • Select currency position – select if we should display on the left or right side of a price.
Menu index page options

Menu index page options

FILTERING – define product categories order in menu card:

  • Categories order by – select attribute by which products categories will be filtered,
  • Categories order – select order type: descending, ascending,
  • Categories custom order – if you want to setup custom order of categories, define it here – just type categories names (slugs), after commas by order you want to have,
  • Food items order by – select attribute by which products will be filtered,
  • Food items order – select order type: descending, ascending,
Menu filtering options

Menu filtering options


Pages


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 pages


To create a new Page follow the steps below:

  • Step 1 – select Pages > Add New
  • Step 2 – add Title
  • Step 3 – add content – we recommend you to create page content using shortcode generator or by modifying demo content
  • Step 4 – choose page attributes:
    • Parent – if you want to create subpage
    • Template – you can choose one of defined page templates: Default Template,
      Archive Template,
      Archives,
      Big slider template,
      Contact Us Template,
      Gallery Temaplate - 4 columns,
      Gallery template - 5 columns,
      Gallery template - infinite scroll,
      Restaurant Menu Template
    • Page order
  • Step 5 – choose template settings
  • Step 6 – click Publish to make your page public.
Page attributes

Page attributes

Template settings

Template settings


Learn more:

WordPress Pages


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.

Static front page

Static front page


Menu setup


Depending on which version of content arrangement you choose, you can create onepager or multipage navigation menu.

To create navigation menu dedicated to multipage websites, please follow the steps below:

  • Step 1 – Navigate to Appearance > Menus
    Menus

    Manage your menus

  • Step 2 – Click on create a new menu, enter menu Name and click on Create Menu button
    Add new menu

    Add new menu

  • Step 3 – From the right side choose pages that you want to add to your menu and click on Add to Menu. Once menu items are added, you can reorder or nest them via drag and drop tool. Remember to click Save Menu when you finish to keep your changes saved.
    Add pages to menu

    Add pages to menu

  • Step 4 – You can easily rename every menu item in item details.
    Rename your menu items

    Rename your menu items

  • Step 5 – Optionally you can add to menu other items, like Links or Categories
  • Step 6 – Check your menu as Primary Navigation to set it up as main menu.
    Primary navigation

    Primary navigation

  • Step 7 – Always click Save Menu after providing any changes.

What is sidebar block?


As you can see most of Charlotte content is arranged in two main content columns and navigation menu on the left side.

 

Main Theme structure

Main Theme structure

Navigation Menu can be setup via Appearance > Menus by Primary Navigation option. Main page content (right part of the content) is created in standard way with Visual Composer or shortcode through Pages section.

To create a central part of the content you need to use Sidebar Blocks. These are the custom post types – which can be built with shortcodes or Visual Composer widgets such as other posts or pages.

To create a new Sidebar Block – please navigate to Sidebar Blocks section and click on Add New:

Add a new sidebar block

Add a new sidebar block

You can also edit block imported with our demo content. To do this – just click on Sidebar Block to display list of all blocks. You can go to edition page with Edit button.

For Example to edit content of the main theme slider – go to edition page of Big Slider block.

Main Slider

Main Slider

You can edit each slide content with Visual Composer elements:

Edit slider elements

Edit slider elements

<


Assign sidebar block to page


Sidebar blocks can be assigned individually for each page with Page side content options:

Page side content options

Page side content options

But for Pages in general, Blog and Restaurant Menu you can define Sidebar blocks via Appearance > Customize menu.

Setup global options for sidebar block

Setup global options for sidebar block


Creating Restaurant Menu


With Charlotte you can define menu for the restaurants or cafeteria.

Products menu

Products menu

You can create each product for your menu through Restaurant Menu section

creating product

For each product you can define:

  • Menu product name (required),
  • Menu product description (optional),
  • Price (recommended),
  • Tags (optional)
  • Categories (recommended),
  • Order attribute (optional),
  • Featured image (recommended),

All Menu products will be displayed on page with Restaurant Menu template, which can be defined in pages options.

You can setup the way of displaying menu via Appearance > Customize section.


Blog


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

There are several ways to display your blog posts, we will cover each method as well as describe blog post types, post options and theme options. The following sections will cover each of these aspects of the blog.


Creating blog posts


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

Charlotte offers several blog post types:

  • Standard
  • Aside
  • Image
  • Video
  • Audio
  • Quote
  • Link
  • Gallery
Post formats

Post formats

Follow the steps below to create a blog post

  • Step 1 – navigate to Posts in your WordPress admin.
  • Step 2 – click on Add New to make a new post. Create a title and insert your post content in the editing field. You can use any of our VisualComposer elements inside the post.
    Add new post

    Add new post

    If you want to use some additional fields, choose them from screen options at the top of the screen.

    Screen options

    Screen options

  • Step 3 – add Categories from the right side. To assign it to the post, check the box next to the Category name.
  • Step 4 – add Tags from the right side. Type the name of the tag in the field, separate multiple tags with commas.
  • Step 5 – for a single image, click the Featured Image box, select an image and click Set Featured Image.
  • Step 6 – for a Gallery, insert more than one Featured Image, each image will be a slide in the gallery slideshow. Slides will be order by the date when the images was added to Media
  • Step 7 – for a video post, paste the iFrame embed into the Video Embed Code field, file url to M4V file url or OGV File URL or Direct video url from Youtube, Vimeo or Dailymotion
  • Step 8 – create an excerpt – Excerpts are optional hand-crafted summaries of your content that can be used in your theme. Learn more about manual excerpts
    Excerpt

    Excerpt

  • Step 9 – once you finished, click Publish to save the post.

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.

Blog index page

Blog index page

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


Generating and using API key in theme


Google Maps V3 no longer supports keyless access so you need to get a key for every (referrer-)domain which has never had a Google Map on it before. You can generate new API key or use the one you’ve already created.

How to generate my API key?

To generate API key you just need to click GET A KEY and follow the directions.

Alternatively, follow these steps to get an API key:

  1. Go to the Google API Console.
  2. Create or select a project.
  3. Click Continue to enable the API and any related services.
  4. On the Credentials page, get a Browser key (and set the API Credentials).
  5. Note: If you have an existing Browser key, you may use that key.
  6. To prevent quota theft, secure your API key following these best practices.
  7. (Optional) Enable billing. See Usage Limits for more information.

In the Google API Console, you can also look up an existing key or view a list of enabled APIs.

For more information on using the Google API Console, see API Console Help.

Where I should add the generated API key ?

Depending on the theme you are uisng, this option can be find in the Theme options section in the WordPress Dashboard or in the Customizer of the theme.

If the theme you bougth is customized with the use of the Customizer:

The API key can be added in the Customizer on path Google Maps API > Config

Adding API key in Customizer

Adding API key in Customizer

If the theme you are using is custimze with use of the Theme option in WordPress Dashboard:

The API key can be added in the Theme Options section on path Appearance > Theme Options > General > Main

Adding API key in theme options page

Adding API key in theme options page


Widgets



Using widgets


(WARNING:The image below is only an example of how the Widget section might look like. Depending on the theme this option’s content might look different.)

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. Widgets require no code experience or expertise. They can be added, removed, and rearranged on the WordPress Administration Appearance > Widgets panel.

Just drag and drop the widgets you want, into the right hand side where your sidebars and footer widgets are listed. Simply drag your widgets over to the sidebar or footer column, and then populate the content.
There are various fields and settings you can choose for each individual widget and all are self explanatory. You can also use multiple widgets per footer column, just drag and drop them into place. And you can put as many widgets as you want inside sidebar. Once you have finished populating the widgets, always make sure to hit the Save button to save the settings.

Just drag widget from the left hand side and drop it on the right

Just drag widget from the left hand side and drop it on the right


Plugins


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

Notice:
We can’t guarantee Charlotte’s compatibility with third party plugins. If you want to avoid unexpected bugs and errors use as little plugins as possible.

Below you will find the list of plugins we recommend you to use with Charlotte.


Visual Composer


REMEMBER: Charlotte is not compatible with VC Fronted Editor

Charlotte can be easily customized with Visual Composer.

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.

How to start?

We recommend you to use row as essential element of page structure.

Row

Row

You can edit following row attributes:

Click pen to open edition tools

Click pen to open edition tools

  1. Header text
  2. Level of header
  3. Header alignment
  4. Header font style
  5. Section type – determines section background, you can choose from predefined color styles: white, grey, dark grey, dark blue, motive or effects: pattern, parallax, kenburns, video
  6. Padding – top, bottom or both
  7. Padding size – if you don’t want to have padding, choose None
  8. Section height
  9. Type of section layout – boxed or wide
  10. Onepager element and ID – if you want to use section for scroll-to-section navigation
  11. Custom class – if you want add custom CSS styles for element

You can also check additional options in tabs: General, Design Options and Animations

Row parameters

Row parameters

Once your section row is created you can choose number of columns in section, their width and optionally offset value.

Section grid

Section grid

If you want to create full_width element you need to choose 1 column greed in section and set it as full_width element.

Click pen to edit column.

Click pen to edit column.

Full width column

Full width column

Once you set up your section – you can put inside it as many components as you want.


Learn more:

For more information about Visual Composer, please check articles below:
How to install Visual Composer
Visual Composer demo
Visual Documentation


WooCommerce


Installation
  1. Activate plugin “WooCommerce”
    After activation you will see notification about installing WooCommerce pages:
    WooCommerce pages

    WooCommerce pages

    Click on Install to import following WooCommerce pages:

    • My Account
    • Checkout
    • Cart
    • Shop
  2. Configure WooCommerce settings
  3. Learn more about WooCommerce
Translation

WooCommerce plugin can be translated to any language. Here you can find instructions how to do that.


Customization


Charlotte appearance, which you can see on our demo page, is one of many available options. You have a couple of alternatives to customize the way you want it, except changing components’ appearance.

    1. Theme Customizer – navigate to Appearance > Themes and click Customize to open customization panel with options to change colors and backgrounds
    2. Use Custom CSS
    3. Create your own shortcodes
    4. Contact us – we can create your website from scratch, redesign it or just extend existing one – just send us an mail to premium@createit.pl

Elite Author
We are elite
CreateIT
Who we are

Hi, we are createIT. We create IT. Web applications and websites to be precise.

And we are REALLY good at it.

Get to know us at www.createIT.pl
Thanks for buying!