Documentation

Overview

1. Getting Started

1.1 Welcome to Cecile

1.2 Theme Requirements

You can click here to find out more about requirements of WordPress.

- Recommended PHP Configuration Limits

1.3 WordPress Base Knowledge

2. Installation

2.1 Via WordPress

2.2 Via FTP

2.3 Plugins Installation

2.3.1 Install plugins

In order to use the theme, you should install and activate all required plugins such as Arrowpress Core, Easy Appointments, Elementor, Kirki Toolkit. All other plugins which recommended, it's up to you whether to use it or not. For example, if you don't want to use Shop features, you can deactivate and delete all WooCommerce plugins.

- First method

Install plugins via installing plugins message.

After installing and activating the theme you will see the message about installing required plugins at the top of the page.

You should click Begin installing plugins link or go to Appearance > Install Plugins in order to install needed plugins for Cecile theme.

You will be redirected to Install Required Plugins page, here you will find all of the theme required plugins. In order to install these plugins, you just need to check all of them and select install then click apply. It will need a while for plugins to be installed successfully.

When the installation process is done, you can click Return to Required Plugins Installer and select active then check all plugins to active these plugins.

- Second method

Install plugins via WordPress Admin Panel.

Besides, you can install some plugins, which are available in wordpress.org by navigating Plugins > Add New in admin sidebar. You should enter plugin's name to search plugin and click "Install Now" to install the plugin you want. After that, click "Active" button to start using that plugin.

- Third method

Install plugins manually (Via FTP)

If you want to manually install plugins, you can follow some basic steps below.

1. Download your WordPress Plugin to your desktop and extract plugin folder if it is a zip archive.
2. With your FTP program, upload the Plugin folder to the wp-content/plugins folder in your WordPress directory.
3. Go to Appearance > Plugins and find the newly uploaded Plugin in the list.
4. Click Activate to activate it.

2.3.2 Plugin Configuration

Some plugins will need to be configured before using.

*Note: repeat with 2.3.1 - second method

You can install some plugins such as Elementor, Kirki Toolkit which available in wordpress.org by navigating Plugins > Add New in admin sidebar. You should enter plugin name to search plugin and click "Install Now" to install the plugin you want. After that, click "Active" button to start using that plugin.

- Elementor

You can see here for more details.

- After installing the Elementor, please go to Elementor > Settings. In the post types field, you should check all post type as the screenshot below.

- MailChimp for WP

Go to MailChimp for WP > MailChimp to access general setting page of MailChimp. You should connect to your MailChimp account by entering API Key.

After that, navigate to MailChimp for WP > Forms and create a form with the content below

<input type="email" name="EMAIL" placeholder="Email" required class="type-email"/> <p class="privacy"> I have read and understand the <a href="#" class="hover-underline" target="_blank">Privacy and Cookies Policy</a> and agree to receive information. </p> <input type="submit" value="Send" />

After installing the demo successfully. If a MailChimp form is already existed, you can do nothing or change the form content and click Save changes to display the form in the front end.

- Contact Form

Go to Contact > Form and create the form you want or edit existing form.

When you want to add a form which displays the same as in our demo site, you should change the content of the contact form in Contact > Form so the form can have a similar style. After changing form content, you can adjust the text or the field to what you want.

Below is the contact form content we used in our demo site. Each form can have a different style based on the content in the contact form. If you import demo content successfully, you can skip this step.

- Contact form in Contact Us

<div class="col-sm-6 form-row"><label class="animate">First Name</label>[text* first-name]</div> <div class="col-sm-6 form-row"><label class="animate">Last Name</label>[text* last-name]</div> <div class="col-sm-6 form-row"><label class="animate">Email Address</label>[email* your-email]</div> <div class="col-sm-6 form-row"><label class="animate">Phone Number</label>[text* your-phone]</div> <div class="col-sm-12 form-row"><label class="animate">Message</label>[textarea your-message]</div> [submit "Submit"]

- Woocommerce

WooCommerce is the most popular WordPress eCommerce plugin. Packed full of features, perfectly integrated into your self-hosted WordPress website.

You can see here for more details and woocommerce documentation.

- Change Image Sizes

You can change the product image sizes in Appearance > Customizer > Woocommerce > Product Image on admin sidebar.

- Product image in Shop page: You could change Thumbnail width

- Product image in single product page: You could change Main Image width

- Change Product Catalog

You can change the product catalog in Appearance > Customizer > Woocommerce > Product Catalog on admin sidebar.

- Enable store notice

Navigate to Appearance > Customizer > Woocommerce > Store Notice, check the box Enable store notice

You can change text in this field

- Change Checkout

You can change the product catalog in Appearance > Customizer > Woocommerce > Checkout on admin sidebar.

2.3 Activate theme

Note: In order to fully use the features of the theme, you need to have the theme activated.

After installation, please log in admin panel through your admin account, the go to Setting -> Activate theme -> Enter purchase code -> Save Activate Theme and insert the “Purchase Code”.

Click here to know how to get Purchase Code. Note that, with “Regular License”, one Purchase Code is used for only 1 domain.

In order to use theme on developer site, there are 2 options

• Option 1: Work on your localhost.

• Option 2: Use subdomain. We allow using unlimited subdomain for dev site purpose. However, you have to insert the purchase code for the principal domain before using this purchase code for other subdomains.

  For example, with your main domain “ mydomain.com”, you are able to create several subdomains such as dev.mydomain.com, staging.mydomain.com, abc.mydomain.com…

Note: If you want to change the domain? You can follow the instructions here and you can only change the domain once.

Note: Once Required Plugins are configured, you may be interested in installing sample content as our demo sites. In the next section, we will guide you about demo installation.

2.4 Demo Installation

2.4.1 First Method: One click import

1. Go to Appearance > Import Demo Content
2. Import Base Content
   
3. After successful importing Base Content, you can go to Appearance > Import demo content and import Home Demos you want
   

Note: After the Installation is successful, go to Elementor -> Tools -> Replate URL with your site. Ex: Your website is http://hcaresol.pt/teste/ then you enter new domain http://hcaresol.pt/teste/ and old domain http://hn.arrowpress.net/cecile-sample/ and click button Replate URL

Note: If this method doesn't work with your server, you can try import all demos by the second method.

2.4.2 Second Method: One click demo import plugin

Install demo with One click demo import plugin.

1. Install and activate One Click Demo Import plugin.

2. Select file in theme_import/content.xml folder and click "Open".

3. Go to Appearance > Import demo data and choose XML file placed in theme_import/content.xml

   

4. In Widget import section, you should select import file for widget in theme_import/widget.wie

5. In Customize import section, you should select import file for Customize in theme_import/customize.dat

6. Click Import button.

7. After successfully finish above process, you should go to Setting > General and select homepage. Go to Appearance > Menu and assign menu to menu location such as Primary Menu. If you don't know how to set menu, please see Build your site > Menu setup.

2.4.3 Third Method (All-in-One WP Migration)

Install demo via All-in-One WP Migration plugins.

2.4.4 Fourth Method (WordPress importer)

Import demo data manually.

3. Theme Configuration

3.0 Set Up Primary Color

Firstly, you need go to Appearance -> Cusomize -> General -> Color -> Choose primary color -> Publish

Later, you need go to Edit With Elementor -> Click Icon Bar -> Site Settings -> Global Colors -> Change the primary color similar to the one you configured earlier and if you choose a different homepage than defaut home you need to reselect your default homepage color that is the same as the primary one.

3.1 Set Up Menu

1. Creating your Menu

Step 1- Login to the WordPress Dashboard.

Step 2- From the 'Appearance' menu on the left-hand side of the Dashboard, select the 'Menus' option to bring up the Menu Editor.

Step 3 - Select Create a new menu at the top of the page.

Step 4 - Enter a name for your new menu in the Menu Name box.

Step 5 - Click the Create Menu button. Your menu is now defined, and you can now add pages to it (steps below).

Step 6 - Select the Pages that you want to add by clicking the checkbox next to each Page's title.

Step 7 - Click the Add to Menu button located at the bottom of this pane to add your selection(s) to the menu that you created in the previous step.

Step 8 Fill information of menu that you want to display.

Step 9 - Assign each Theme Location with a menu. You can assign menus to multiple Theme Locations.

Step 10 - Click the Save Menu button once you've added all the menu items you want. Your custom menu has now been saved.

Menu Home will be displayed.

2. Mega Menu

Mega Menus allow you to add multi-column drop down menus to your navigation with rich media such as images. In this article, we will show you how to easily add a mega menu to your WordPress site.

If you want to use mega menu, you should check the box Enable Mega Menu & Choose Mega Menu

Display on Frontend

3.2 Set Up Header

Step 1 - From admin Dashboard, navigate to Header Builder > Add New Header

Step 2 - Using Elementor backend editor Cecile then add element to your Header 

Step 3 - Build your header style with unlimited layout

Step 4 - Use Elementor to drag or drop element to create header.

Elementor Layout setting

Front end looks like :

Step 4 - Navigate to : Apperance > Customize > Header.

Choose your header for  page.

Cecile has 7 header styles.

Header 1 Header 2 Header 3 Header 4 Header 5 Header 6

3.3 Set Up Home Page

You can quickly build a home page using Elementor for WordPress which are 'drag and drop' frontend and backend page builder plugin, that will save you tons of time working on the site content. You will be able to take full control over your WordPress site, build any layout you can imagine – no programming knowledge required

From your Dashboard admin, navigate to Pages

  - Select All Pages to see all pages then click edit one page you want

  - Select Add New to create new page

3.3.1 How to use Elementor

Have you ever used Elementor ? Please follow this guide first : Elementor guide

Official Plugin Documentation For More information about the Elementor check the official documentation.

Backend Editor Cecile

How to use Back End Cecile

a. Add and modify Row Layout

Step 1 - Go to your page / post, first activate the backend editor and click Edit with Elementor

Step 2 - You will see all elements in left sidebar, please choose element that you want to use.

or you will see button "Add New Section" ,"Add Template" , please click to one of those button to add element.

Step 3 - To change the Row layout ( number of columns ) you need to click button marked below, content will in left sidebar.

b. Edit Element

Click on the Edit This Element (pencil icon) to Edit the Row element.

c. Remove Element

Trash Box Icon - To Remove Row, Column or Module you need to click the Trash Box icon.

d. Add Element

Trash Box Icon - To Add Row, Column , please click to add icon.

3.3.2 Page Options

a. Page Attributes

You can select page attributes on right sidebar of admin page layout. Each Page template have each style .

b. Page configure default template

For each page you can change the page layout style, custom header , custom footer and much more! Check the screenshot below and read the documentation to see how it works .

• General - Select if you want the page to have a Fullwidth layout and config sidebar, ...
• Skin - Select if you want to custom color in customize.
• Breadcrumbs - Select if you want to custom breadcrumb in customize.
• Header Layout - Select if you want to custom header in customize.
• Footer Layout - Select if you want to custom footer in customize.

3.3.3 Set a page as Home Page

Step 1 - Go to Settings > Reading in your WordPress Dashboard panel.

Step 2 - Set "Front page displays" to a "Static Page".

Step 3 - In the drop down menu for "Front Page" choose a page which will be your home page.

Step 4 - In the drop down menu for "Posts Page" choose a page which will be your posts page.

Step 5 - Save changes.

Cecile uses woocommerce to set up product, if you want to know how to use, please click the link:

Woocommerce .

In our theme, we have an element called " APR Products " for setting product displayed in homepage, please click to add element --> then choose "APR Products".

In our theme, we have an element called "APR Tab " for setting product displayed in homepage, please click to add element --> then choose "APR Tabs".

---

3.4 Set Up Template

Step 1 - From admin Dashboard, navigate to Elementor > My templates

Step 2 - Click to Add New popup to require add new template to display, please name your template and click Create Template

Step 3 - Using Elementor backend editor Cecile then add element to your Template 

Step 4 - Drag or drop element that you want to build your template style with unlimited layout

Step 5 - You can insert the template available by clicking icon Add Template

Step 6 - Choose tab My Template and you can add template that has created to page.

3.5 Set Up Blog Page

3.5.1 Create the blog post

Step 1 - Log in to your WordPress Administration Panel (Dashboard).

Step 2 - Click the 'Posts' tab.

Step 3 - Click the 'Add New' sub-tab.

Step 4 - Start filling in the blanks: enter your post title in the upper field , you can add content of post by using elementor to create.

Step 5 - As needed, select a category, add tags, fill in the meta setings below the editor.

Step 6 - Upload a featured image for your Post.

Step 7 - Select Post Format and enter suitable content for post format in Post Format box. You can create blog post with a lot of Formats like link, gallery, image ..... Select format on Format box from in right sidebar .

- Video and audio format: you will need to enter embed link of youtube, vimeo or soundcloud or paste the iFrame embed from either Youtube or Vimeo into the Video Embed Code field in Video & Audio Embed Code.

- Project format: If you choose Project format, you will see Image Project box displayss in the right of page. Image in project will be shown as slider.

- Blockquote format: If you choose Blockquote format, you will need enter quote text

- Link format: For Link format, you will need enter title and link

Step 9 -  When your post is ready, click Publish.

3.5.2 Manager current all blogs

Navigate to Posts → All Posts

You can see all informations of you blog post, add new, edit or delete them.

3.6 Set Up Widgets

Step 1 - From admin Dashboard, navigate to Footer > Add New Footer

Step 2 - Using Elementor backend editor Cecile then add element to your Footer 

Step 3 - Build your footer style with unlimited layout

Step 4 - Drag or drop element to create footer.

Footer default.

Change Content footer default

Go to Appeareance > Widget, you can find footer sidebar for each footer.

Front end look like :

After you create your footer elements. Navigate to Dashboard ->> Homepage and scrolldown until you see Page setting ->> choose Footer and choose footer that you want to use.

Or you can choose footer in Customizer. Navigate to : Apperance > Customize > Footer.

Choose your footer for  page.

Cecile has 6 footer styles.

Footer 1 Footer 2 Footer 3 Footer 4 Footer 5 Footer 6

3.7 Woocommerce Set Up

3.7.1 Plugin Advanced AJAX Product Filters

Go to BeRocket > Product Filters to access general setting of BeRocket

- Create Active filter

You need click Add Filter -> Enter title for filter

Then you need choose widget type, choose style for filter and advanced add class ce-active-filter -> Save change

- Create Filter by size

You need click Add Filter -> Enter title for filter

Then you need choose widget type, choose style for filter and advanced add class ce-filter-size -> Save change

- Create Filter by color

You need click Add Filter -> Enter title for filter

Then you need choose widget type, choose style for filter and advanced -> Save change

- Create Filter by category

You need click Add Filter -> Enter title for filter

Then you need choose widget type, choose style for filter and advanced add class ce-filter-category -> Save change

- Create Filter by price

You need click Add Filter -> Enter title for filter

Then you need choose widget type, choose style for filter and advanced add class ce-filter-price -> Save change

3.7.2 Check in-store availability

If your store has more than one store. You need go to Products -> Stores -> Create store for shop

With a Simple product, you can go to Edit Product -> In tab General -> Enter store for your product if stocks are available -> Save.

With a Variable product, you can go to Edit Product -> In tab Variations -> Click a variation -> Enter store for your product if stocks are available -> Save.

Frontend display results.

4. Theme Customization

Cecile Theme use Customizer provides an ultra effective and intuitive way to customize theme layout & setting with real-time preview. Bring all of settings to customizer, you do not need to using another theme option anymore

There are 2 ways to access theme options.

1) Click Cusomize link at the top of the page.

2) To access Customizer go to your admin Dashboard  Navigate to Appearance >> Customize

After that, you will see a logical tabbed section including a lot of tabs for you to discover. Below sections will go through each tab in detail for you

4.1 General

Customize General parts like layout, color, etc.

4.1.1 Layout

Settings General Layout / Site Width / Sidebar Left / Sidebar Right for Site.

4.1.2 Color

Change main color, background color and custom button color for Site.

4.1.3 Typography

Change color, font-size, font family for the heading and text body for Site.

4.1.4 Preloader

Show / Hide Preloader

4.1.5 Breadcrumbs & Page Title

Show / hide and create style for breadcrumb, page title for Site.

4.2 Header

You can choose header for your website

4.3 Footer

You can choose footer for your website

4.4 Blog

Customization for Blog pages.

4.4.1 General

You can choose layout, change title for Blog page.

4.4.2 Blog Archive

You can easily setting option like choose layout, choose sidebar, post meta,... for Blog page.

If you want to have settings for each category then you can go to the Edit category then you can set the options available if you want.

4.4.3 Blog Single Post

You can easily setting option like choose layout, choose sidebar, post meta,... single post.

If you want to have settings for each post then you can go to the Edit Post then you can set the options available if you want.

4.5 Shop

Customization for Shop pages and Shop single.

4.5.1 General

With the config options in Customize, it will be displayed in all the categories of the product.​​ Select background color, show / hide button add cart, quickview... for shop pages.

4.5.2 Shop Archive

Select layout, sidebar left / right ... for shop pages.

If you want to have settings for each category then you can go to the Edit category then you can set the options available if you want.

After you install demo content successfully we have set up a few layouts for each category. You can refer to the category link mounted on the shop menu.

4.5.3 Shop single

With the config options in Customize, it will be displayed in all product page.​​ Select layout, sidebar left / right, background color ... for shop single page.

If you want to have settings for each Products then you can go to the Edit Product then you can set the options available if you want.

After you install demo content successfully we have set up a few layouts for each product. You can refer to the product link mounted on the shop menu.

4.6 404 Page & Maintenance

Customization for 404 page.

Customization for Coming soon.

4.7 Advanced

Add Custom CSS and JS to change style, show / hide go to top button, show / hide animation for site.

4.8 Popup

4.8.1 Account

You can easily turn on / off pop up and change content with Customize account​​

4.8.2 Newsletter

You can easily turn on / off pop up and change content with Customize newsletter​​

4.8.3 Suggest Search

You can easily turn on / off pop-ups and select post type search if you want.

4.8.4 Fake Sale

You can easily turn on / off pop-ups and enter ID product if you want display.

Then enter ID product you need go to Edit product and enter Fake User Purchased. Corresponding to the Product ID you want to display​.​

4.8.5 Recommended Products

You can easily turn on / off pop-ups and enter ID product if you want display.

4.8.6 Email Notification

You can easily turn on / off pop-ups and you can change content.

4.9 Portfolio

4.9.1 Portfolio Archive

You can easily set up and change layout with customize portfolio​​

4.9.2 Portfolio Single

You can easily set up and change layout with customize portfolio single

5. Shortcode

In order to add shortcodes using elementor, you should enable elementor editor and select the element you want to add.

ArrowTheme shortcodes

Shortcodes are some of the easiest ways to add customized content to your site.

We gave you a plenty of shortcodes that are additional things in pro version of elementor - APR Elementor Pro, you just take advantage of it.

With APR Elementor Pro we have an additional icon set, it is not fontawesome like Elementor.

A little note when you use this icon is that you should use it for shortcode of APR ELEMENTOR PRO, with the Elementor shortcode we don't guarantee it will get options in the style tab.

6. Widgets

In order to add Widget to sidebar, you should click to the widget which you want to add and select sidebar.

6.1 Widget Contact

This widget provides options for you to enter some informations such as address, phone number, email and website link:

6.2 Widget Post

Make sure the post has been created

7. Update

7.1 Update Theme

Before updating the theme, we want you to know that updating the theme doesn't affect to your site data. All of your content and theme settings are preserved.

To avoid the unwanted problem, you should backup the theme files or even theme options you select in Cecile Options. Normally, the theme options you select in Cecile Option won't change after updating the theme

Backup Theme Files

- Backup of the theme folder (cecile) which located in wp-content/themes/

Backup Theme Options

1. You need to install Customizer Export/Import plugin

2. Then, go to Cecile Options > Import/Export

3. Click Export backup customize option.

Update using FTP

1. Go to http://themeforest.net/downloads and find cecile theme.

2. Click the Download button next to Cecile theme and choose to download the "Installable WordPress File only" which is just the WordPress file, or choose the "All Files and documentation" which is the entire package that contains everything.

   

   If you download "All Files and documentation", you should extract it and you will find theme folder named cecile.zip which is located inside "Theme files" folder. Unzip the theme zip file(cecile.zip) to get the "Cecile" theme folder. .

3. Replace the old theme folder in wp-content/themes/ with new theme folder you extracted in previous step.

4. If you made changes anything in the theme files in wp-content/themes/cecile, you will need to update the changes again to the new theme files.

5. If the options you'd selected in Cecile Options are lost, you need to install Customizer Export/Import plugin then you can go to Appearance > Customize > Export/Import > Export the content and download Backup Theme Options. Click Import to import theme options.

7.2 Update Plugins

For some plugins like WPBakery Page Builder, Ultimate Addons, ArrowTheme Core, ArrowTheme Importer, you should update manually these plugins.

1. Please go Plugins.

2. Select and deactivate these plugins.

3. Select and delete these plugins.

4. Please go Appearance > Install Plugins.

5. Select and install these plugins.

6. Select and activate these plugins.

8. Translation

If you want to use only one language in the site, you can use Loco Translate plugin, otherwise, you can use WPML or Polylang plugin for multilingual website.

8.1 Use Loco Translate

Please read Loco translate installation

Translate theme

1. Install and activate the plugin Loco Translate

2. Go to Loco Translate > Theme. Select Cecile theme.

3. Click the “+ New language” button.

4. Select The language you want the texts to be translated and continue.

5. On next screen all the “English text strings” that are inside the theme will be listed. Select text string from the “Source Text” list and then Add your translated text in the textarea below.

6. Click the Save button.

Translate plugins

1. Install and activate the plugin Loco Translate

2. Go to Loco Translate > Plugins. Select plugin you want to translate such as ArrowTheme Shortcodes.

3. Click the “+ New language” button.

4. Select The language you want the texts to be translated and continue.

5. On next screen all the “English text strings” that are inside the theme will be listed. Select text string from the “Source Text” list and then Add your translated text in the textarea below.

6. Click the Save button.

NOTE: You need to set your language in Settings > General to display translated text in frontpage

8.2 Use WPML

WPML is the most popular plugin for multi language support. Below you will find documentation their team created for using WPML plugin. If you've purchased WPML and have any questions or issues, please check the links below.

• WPML Plugin - The highly recommended plugin to manage multi-lingual sites
• WPML Forum Support - If you bought WPML then you get free support from their amazing team
• Translating Widgets - Tutorial recommended by wpml team for translating widgets

9. Site Speed Up

We recommend some following plugins:

- WP Fastest Cache plugin to cache the site.

- Autoptimize plugin to minify HTML, CSS, JS the site.

Turn on option Image lazy-loading will delay the loading of non-visible images to allow the browser to optimally load all resources for the "above the fold"-page first.

Add class in option Lazy-load exclusions: no-lazyload, side-breadcrumb, wcvashopswatchlabel, attachment-yith-woocompare-image

- EWWW Image Optimizer plugin to reduce image sizes.

You can convert from jpg, png to WebP format to improve site loading speed

Then, You can go to Media -> Bulk Optimize -> Optimize image

10. Support