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.

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

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 1 – Click 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

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

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

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

  Upload theme

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

  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.

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

Learn more:

WordPress codex – FTP clients

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

  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

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

Major Charlotte content structure can be divided in three sections:

• Navigation Menu
• Sidebar Block
• Page Content

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

Content of the sidebar can be setup via Widgets section

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

• Our Menu
• Gallery
• Blog

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 – shortcodes content

Booking

Booking page

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

Catering

Catering

Catering – shortcodes

Contact

Contac page – shortcodes

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

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

• Show shop index title block – Option to show the shop index title block.
• Show shop single title block – Option to show the shop single title block.
• Show sidebar widgets on shop index – Option to show the sidebar widget on shop index.
• Show sidebar widgets on shop single – Option to show the sidebar widget on shop single.
• Select title block for shop index – Select a title block for the shop index.
• Select title block for shop single – Select a title block for the shop single.
• Shop index sidebar background image – Set a shop index background image.
• Shop index sidebar background style – Set a shop index background style.
• Shop single sidebar background image – Set a shop single background image.
• Shop single sidebar background style – Set a shop single background style.
• Shop index sidebar animated background – Option to add animation on shop index sidebar background.
• Shop single sidebar animated background – Option to add animation on shop single sidebar background.

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

• Show Menu Card title block – Option to show the menu card title block.
• Select title block for menu sidebar – Set a title block for menu sidebar.
• Sidebar bottom divider background – Add an image to be the bottom divider background.
• Sidebar bottom divider background repeat – Option on how to display the bottom divider background.

Menu index

Menu index

• Menu index top divider background – Add an image to be the menu index top divider background.
• Menu index bottom divider background – Add an image to be the menu index bottom divider background.
• Menu index top divider repeat – Bottom divider background style.
• Menu index bottom divider repeat – Bottom divider background style.
• Currency – Set the currency for the amount in the menu.
• Menu index currency position – Select currency position.

Filtering

Filtering

• Categories order by – How the categories are ordered.
• Categories – How the categories order looks.
• Categories custom order – Separate category slugs by commas
• Food items order by – How the food items are ordered.
• Food items order – How the food items order looks.

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

• Show categories? – Option to show categories.
• Show All button – Option to show the Show All button.
• Categories All button label – Label for All Categories.
• Categories buttons order by – How the categories are ordered.
• Categories buttons order – How the categories order looks.
• Categories custom order – Separate category slugs by commas.
• Gallery items order by – How the gallery items are ordered.
• Gallery items order – How the gallery items order looks.

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

• Shop page display – Choose what to display on the main shop page.
• Category display – Choose what to display on product category pages.
• Default product sorting – How should products be sorted in the catalog by default?

Product Images

Product Images

• Main image width – Image size used for the main image on single product pages. These images will remain uncropped.
• Thumbnail width – Image size used for products in the catalog and product gallery thumbnails.
• Thumbnail cropping
  • 1:1 – Images will be cropped into a square
  • Custom – Images will be cropped to a custom aspect ratio
  • Uncropped – Images will display using the aspect ratio in which they were uploaded

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

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

2. Header settings:
   • Header image
   • Header background image
   

   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

 

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

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

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

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

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

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

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

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

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.

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

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

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

Template settings

Learn more:

WordPress Pages

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

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
  

  Manage your menus

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

  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

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

  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

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

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

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

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

You can edit each slide content with Visual Composer elements:

Edit slider elements

<

Sidebar blocks can be assigned individually for each page with 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

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

Products menu

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

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.

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

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

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

  

  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

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

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

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

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

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

You can edit following row attributes:

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

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

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.

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

Installation

1. Activate plugin “WooCommerce”
   After activation you will see notification about installing 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
   • Step 1 – add products
   • Step 2 – setup your products
   • Step 3 – sell what you’ve got
   • Step 4 – setup shipping options
   • Step 5 – manage your orders

Translation

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