Floral Documentation

Home / Floral Documentation

01.GET STARTED

File Include

  • The theme zip file floral.zip
  • Child theme for easier customize in floral-child.zip
  • Document in Documentation.zip

Back To Top

02.INSTALLATION

System Requires

To use Cortana, you must be running WordPress 3.9 or higher, PHP5.4 or higher, and MySQL 5 or higher. We have tested it with Mac, Windows and Linux. Below is a list of items you should ensure your host can comply with.

Recommended PHP Configuration Limits

Many issues that you may run into such as: white screen, demo content fails when importing, empty page content and other similar issues are all related to low PHP configuration limits. The solution is to increase the PHP limits. You can do this on your own, or contact your web host and ask them to increase those limits to a minimum as follows:

max_input_vars = 3000
memory_limit = 300M
max_execution_time = 300
max_input_time = 300
upload_max_filesize = 64M
post_max_size = 64M

Back To Top

Download Floral Theme

Get the Floral Theme installation package from your account (after login on Themeforest.net) at  downloads page  and save it to your computer.

theme-download

Back To Top

Theme Installation

Installation via WordPress

Step 1 – Login to your WordPress Dashboard

Step 2 – Go to Appearance > Themes. Click the Add New button or Add new theme link.

floral-theme-installation-01

floral-theme-installation-02

Step 3 – Click on the Upload Theme button. Locate “floral.zip” and click Install Now.

Step 4 – Click on the Activate button to activate Spring.

floral-theme-installation-03

Installation via FTP

Step 1 – Log into your Hosting server using an FTP client (like FileZilla or WinSCP).

Step 2 – Locate “floral.zip” that you found in your ThemeForest Package and unzip it somewhere on your hard drive. Once it is unzipped it will look like a folder named Floral with all theme files in it.

Step 3 – Locate your WordPress installation and upload the theme directory Spring (you unzipped in the previous step) into ../wp-content/themes/ in your WordPress installation.

Step 4 – Click on the Activate button to activate Floral. Congratulations, you have now activated Floral! You can now proceed with Floral’s Plugin Installation.

Back To Top

Required Plugin Installation

1) Install required plugin

You can follow the steps below:

floral-required-plugin-installation-01

floral-required-plugin-installation-02

The installing process status will be shown in your browser. It may takes a few minutes, so please be patient. After successful, your screen will be like this:

floral-required-plugin-installation-03

2) Activate required plugin

floral-required-plugin-installation-04

floral-required-plugin-installation-05

 

Back To Top

Install Demo Content

Note 1: Before importing demo content, please make sure you have already installed and enabled all required plugin mentioned above. In addition, if your PHP setting doesn’t met the requirement , the System Status will be red, so please configure your setting reasonably ( see System Requires above).

floral-install-demo-content-02

Note 2: If you plan to use child theme, please make sure to active the child theme before perform demo installation.

To install the demo, you can follow the steps below:

Step 1 – In section 9WPThemes, choose tab “Install Demos” or click Install Demo Data. After that, click the Install button

Step 2 – Choose options you want to install (please read the description carefully), then click I understand, just install it.

floral-install-demo-content-01

To check the process and the error log, you can click the button at bottom right of your screen.

floral-install-demo-content-04

After successful installation, this dialog will show up :

floral-install-demo-content-05

Note 3: If you encounter with the 404 error after installing the demo, you may try changing the permalink structure to http://{ your domain }/index.php/%postname%/

htaccess-error-1

floral-install-demo-content-06

 

 

Back To Top

03.CONFIGURATIONS

Theme Options Presets

Theme Options Preset is a feature that help you create various style for your site. In our demo , there are 3 preset: Default Preset, Style Red – Dark Green, Style Brown – Light Green.

+) Default Preset: use for whole site.

+) Style Red – Dark Green: use for Home Page 1, About Us 1.

+) Style Brown – Light Green: use for Home Page 3Home Page 4, About Us 3,  About Us 4.

How to use preset

All sections (General Settings, Colors, , …) you see in Theme Options are all sections of current preset. It means they are not related to other presets. After you configure those sections, If you click one of 4 buttons at the top of the panel (Save Changes, Save & Generate CSS, Reset Section, Reset All), this action will only affect to current preset, other presets are still intact.

Note:

+) Save Changes: Save all of the changes you have make to the current preset

+) Save & Generate CSS: Save the current preset and re-generate CSS. You only need to use this button if:

  • the CSS codes of the current preset are break
  • you create a new preset
  • you modify any *.scss files of our theme

+) Reset Section: Restore all options of the current section to default.

+) Reset All: Restore whole options of current preset to default.

To apply a preset to a specific page, you can open the editor of the page, then set the preset to field Use Preset.

Note 1: By default, ‘global’ preset affects to your whole site (every pages), unless your pages are assigned to other presets. Any ‘none-global’ preset only can take effect if it is assigned to a page.

Note 2: After create a new preset, you have to click Save & Generate CSS to generate CSS file for the preset. Otherwise, if you assign the preset to a page, the page layout will be broken due to miss CSS codes.

Some Options you only can do in Default Preset 

You don’t need to set Default Preset back to  ‘global’ preset (assume you have another preset as ‘global’ preset). You only need to switch Theme Option to Default  and do the options mentioned below.

+) Custom sidebar

If you want to add more sidebar (Appearance -> Widgets), make sure you are in Default Preset, then choose General Settings > Custom Sidebar :

+) Enable Maintenance Mode

Switch Theme Options to Default Preset, then choose General Settings > Maintenance Mode

+) Add more feature colors

If you want to use more colors other than main colors (Primary color, Secondary color, Text color, Meta text color, Border color), you still can define them: choose Default Preset > Colors > Define Most Used Colors. After that, make sure to click  Save & Generate CSS in all of presets.

After being defined, these color will be added to shortcode color selector:

+) Add custom font

To add custom font, you can switch Theme Options to Default Preset, then choose Typography > Custom Font:

After that, the font will be available in every preset

Back To Top

Content Template

Content Template is a content block is created beforehand and you can set it to some specific areas of your page. There are five areas you can set Content Template:  Header Area – Before, Header Area – After, Page Title – After, Footer Area – Before, Footer Area – After.

content-template

In addition, you can use Content Template as the Page Title or the Footer. For example, our  demo page footer is a Content Temple:

floral-content-template-01

floral-content-template-02

How to create a Content Template:

Step 1: In the Admin sidebar, select Content Template > Add New Content Template.

floral-content-template-03

Step 2: Use Visual Composer shortcode to create your own Content Template.

floral-content-template-04

Note: you can not use grids Shortdcodes in Content Template because it will cause error to your site pages.

floral-content-template-05

How to use Content Template:

1) To set Content Template to five areas mentioned above:

floral-content-template-06

2) You can any Content Template to the Page Content Area by using shortcode Floral Content Template:

floral-content-template-07

floral-content-template-08

 

 

Back To Top

Header

In Theme Options, there are 4 sections to configure the header: HeaderHeader StyleHeader ModulesHeader Menu Settings.

+) Section Header: you can manage header modules and determined the way to shown them in your page header

+) Section Header Style: configure your page header style (when its state is static or sticky).

+)  Section Header Modules: configure details of header modules.

+) Header Menu Settings: configure  style for menu item, sub menu, mega menu.

Back To Top

Page Title

floral-page-title-01

You can create Page Title by configuring Page Title options or using a Content Template.

1) Configure Page Title options

floral-page-title-02

 

2) Use Content Template

The Page Title can be created easily by using Floral Heading and Floral Breadcrumb shortcode.

floral-page-title-03

 

You may use the code below (switch your Content Template editor to CLASSIC MODE, paste the code then switch back to BACKEND EDITOR).

[vc_row text_color="__" heading_color="__" link_color="__" link_hover_color="__" css=".vc_custom_1496292967950{background-color: rgba(0,0,0,0.1) !important;*background-color: rgb(0,0,0) !important;}"][vc_column][vc_row_inner css=".vc_custom_1496292880321{padding-top: 95px !important;padding-bottom: 80px !important;}"][vc_column_inner][floral_shortcode_heading heading_title_data_source="page-title" heading_el_tag="h1" heading_title_size="48" heading_title_line_height="1.2" heading_title_ff="p-font" heading_title_text_transform="text-uppercase" heading_text_fw="fw-semibold" heading_subtitle_enable="0" heading_separator_enable="0" heading_title_responsive_title_size="0" css=".vc_custom_1496303719885{margin-bottom: 0px !important;}"][/vc_column_inner][/vc_row_inner][floral_shortcode_breadcrumb background_color="rgba(0,0,0,0.4)" position="right"][/vc_column][/vc_row]

 

Finally, chose the Content Template you have created:

floral-page-title-04

Back To Top

Footer

floral-footer-01

You can create Footer by configuring Footer options or using a Content Template.

Configure Footer options

floral-footer-02

Those options only help you create a simple footer is liked the image below. Thus, for more complex footer, I suggest you use Content Template and set it as the footer.

floral-footer-03

Use Content Template.

floral-footer-04

Here are the footer code blocks in our demo, you can use them to make your page footer  (Note: switch your Content Template editor to CLASSIC MODE, select Text view mode, paste the code then switch back to BACKEND EDITOR).

floral-footer-04-5

1) Footer 01 (bottom only – dark)

floral-footer-05

[vc_row text_color="__" heading_color="__" link_color="__" link_hover_color="__" css=".vc_custom_1489547608602{padding-top: 15px !important;padding-bottom: 15px !important;background-color: #444444 !important;}"][vc_column][vc_column_text css=".vc_custom_1489547568007{margin-bottom: 0px !important;}"]
<p class="mb-0 s-font fs-italic" style="text-align: center; line-height: 26px;"><span style="color: #999999;">Floral Spa © 2016 All Rights Reserved Terms of Use and Privacy Policy</span></p>
[/vc_column_text][/vc_column][/vc_row]

2) Footer 01 (bottom only – light)

floral-footer-06

[vc_row text_color="__" heading_color="__" link_color="__" link_hover_color="__" css=".vc_custom_1489547746670{border-bottom-width: 1px !important;padding-top: 15px !important;padding-bottom: 14px !important;background-color: #ffffff !important;border-bottom-color: #eeeeee !important;border-bottom-style: solid !important;}"][vc_column][vc_column_text css=".vc_custom_1489547775277{margin-bottom: 0px !important;}"]
<p class="mb-0 s-font fs-italic" style="text-align: center; line-height: 26px;">Floral Spa © 2016 All Rights Reserved Terms of Use and Privacy Policy</p>
[/vc_column_text][/vc_column][/vc_row]

3) Footer 02

floral-footer-07

[vc_row equal_height="yes" text_color="__" heading_color="__" link_color="__" link_hover_color="__" css=".vc_custom_1492250806010{padding-top: 70px !important;padding-bottom: 45px !important;}"][vc_column vertical_align="block-align-middle" text_color="__" heading_color="__" link_color="__" link_hover_color="__" width="1/2" offset="vc_col-lg-4"][vc_widget_sidebar sidebar_id="footer-1"][/vc_column][vc_column text_color="__" heading_color="__" link_color="__" link_hover_color="__" width="1/2" offset="vc_col-lg-3"][floral_shortcode_heading heading_title="CONTACTS
" heading_el_tag="h3" heading_title_size="18" heading_title_ff="p-font" heading_title_text_transform="text-uppercase" heading_subtitle_enable="0" heading_separator_enable="0" heading_title_responsive_title_size="0"][vc_widget_sidebar sidebar_id="footer-3"][/vc_column][vc_column text_color="__" heading_color="__" link_color="__" link_hover_color="__" offset="vc_col-lg-5"][floral_shortcode_heading heading_title="NEWSLETTER" heading_el_tag="h3" heading_title_size="18" heading_title_ff="p-font" heading_title_text_transform="text-uppercase" heading_subtitle_enable="0" heading_separator_enable="0" heading_title_responsive_title_size="0"][vc_widget_sidebar sidebar_id="footer-4" el_class="input-gray-e" css=".vc_custom_1489567891841{margin-bottom: 15px !important;}"][vc_raw_html css=".vc_custom_1489567774770{margin-bottom: 0px !important;}"]JTNDZGl2JTIwY2xhc3MlM0QlMjdzLWZvbnQlMjBscy0wMDUlMjclM0UlMjBNb24tRnJpJTNBJTIwOSUyMEFNJTIwJUUyJTgwJTkzJTIwNiUyMFBNJTIwJTNDc3BhbiUyMGNsYXNzJTNEJTI3bWwtNSUyMG1yLTUlMjclM0UlN0MlM0MlMkZzcGFuJTNFJTIwU2F0dXJkYXklM0ElMjA5JTIwQU0lMjAlRTIlODAlOTMlMjA0JTIwUE0lM0NzcGFuJTIwY2xhc3MlM0QlMjdtbC01JTIwbXItNSUyNyUzRSU3QyUzQyUyRnNwYW4lM0VTdW5kYXklM0ElMjBDbG9zZWQlMjAlM0MlMkZkaXYlM0U=[/vc_raw_html][/vc_column][/vc_row][vc_row text_color="__" heading_color="__" link_color="__" link_hover_color="__" css=".vc_custom_1489552823882{border-bottom-width: 1px !important;padding-top: 15px !important;padding-bottom: 14px !important;background-color: #eeeeee !important;border-bottom-color: #eeeeee !important;border-bottom-style: solid !important;}"][vc_column][vc_column_text css=".vc_custom_1489547775277{margin-bottom: 0px !important;}"]
<p class="mb-0 s-font fs-italic" style="text-align: center; line-height: 26px;">Floral Spa © 2016 All Rights Reserved Terms of Use and Privacy Policy</p>
[/vc_column_text][/vc_column][/vc_row]

4) Footer 03 (gray-light)

floral-footer-09

[vc_row equal_height="yes" text_color="__" heading_color="__" link_color="__" link_hover_color="__" css=".vc_custom_1489564932246{padding-top: 70px !important;padding-bottom: 20px !important;background-color: #eeeeee !important;}"][vc_column text_color="__" heading_color="__" link_color="__" link_hover_color="__" width="1/2" offset="vc_col-md-3"][floral_shortcode_heading heading_title="OPEN HOURS
" heading_el_tag="h3" heading_title_size="18" heading_title_ff="p-font" heading_title_text_transform="text-uppercase" heading_subtitle_enable="0" heading_separator_enable="0" heading_title_responsive_title_size="0"][vc_widget_sidebar sidebar_id="footer-2"][/vc_column][vc_column text_color="__" heading_color="__" link_color="__" link_hover_color="__" width="1/2" offset="vc_col-md-4"][floral_shortcode_heading heading_title="CONTACTS
" heading_el_tag="h3" heading_title_size="18" heading_title_ff="p-font" heading_title_text_transform="text-uppercase" heading_subtitle_enable="0" heading_separator_enable="0" heading_title_responsive_title_size="0"][vc_widget_sidebar sidebar_id="footer-3"][/vc_column][vc_column text_color="__" heading_color="__" link_color="__" link_hover_color="__" offset="vc_col-md-5"][floral_shortcode_heading heading_title="NEWSLETTER" heading_el_tag="h3" heading_title_size="18" heading_title_ff="p-font" heading_title_text_transform="text-uppercase" heading_subtitle_enable="0" heading_separator_enable="0" heading_title_responsive_title_size="0"][vc_widget_sidebar sidebar_id="footer-4" el_class="input-light" css=".vc_custom_1489568017451{margin-bottom: 20px !important;}"][floral_shortcode_social_profiles profiles="social-facebook-url||social-instagram-url||social-twitter-url||social-googleplus-url" icon_size="15" icon_color="custom-style" colors="light" colors_hover="__" is_rounded_icon="1" rounded_size="24" background_colors="gray8" background_hover_colors="p" spacing_between_items="25" floral_remove_default_mb="0"][/vc_column][/vc_row][vc_row text_color="__" heading_color="__" link_color="__" link_hover_color="__" css=".vc_custom_1489561744644{border-top-width: 1px !important;border-bottom-width: 1px !important;padding-top: 14px !important;padding-bottom: 14px !important;background-color: #ffffff !important;border-top-color: #eeeeee !important;border-top-style: solid !important;border-bottom-color: #eeeeee !important;border-bottom-style: solid !important;}"][vc_column][vc_column_text css=".vc_custom_1489547775277{margin-bottom: 0px !important;}"]
<p class="mb-0 s-font fs-italic" style="text-align: center; line-height: 26px;">Floral Spa © 2016 All Rights Reserved Terms of Use and Privacy Policy</p>
[/vc_column_text][/vc_column][/vc_row]

5) Footer 03 (light-dark)

floral-footer-10

[vc_row equal_height="yes" text_color="__" heading_color="__" link_color="__" link_hover_color="__" css=".vc_custom_1489568299784{padding-top: 70px !important;padding-bottom: 20px !important;background-color: #ffffff !important;}"][vc_column text_color="__" heading_color="__" link_color="__" link_hover_color="__" width="1/2" offset="vc_col-md-3"][floral_shortcode_heading heading_title="OPEN HOURS
" heading_el_tag="h3" heading_title_size="18" heading_title_ff="p-font" heading_title_text_transform="text-uppercase" heading_subtitle_enable="0" heading_separator_enable="0" heading_title_responsive_title_size="0"][vc_widget_sidebar sidebar_id="footer-2"][/vc_column][vc_column text_color="__" heading_color="__" link_color="__" link_hover_color="__" width="1/2" offset="vc_col-md-4"][floral_shortcode_heading heading_title="CONTACTS
" heading_el_tag="h3" heading_title_size="18" heading_title_ff="p-font" heading_title_text_transform="text-uppercase" heading_subtitle_enable="0" heading_separator_enable="0" heading_title_responsive_title_size="0"][vc_widget_sidebar sidebar_id="footer-3"][/vc_column][vc_column text_color="__" heading_color="__" link_color="__" link_hover_color="__" offset="vc_col-md-5"][floral_shortcode_heading heading_title="NEWSLETTER" heading_el_tag="h3" heading_title_size="18" heading_title_ff="p-font" heading_title_text_transform="text-uppercase" heading_subtitle_enable="0" heading_separator_enable="0" heading_title_responsive_title_size="0"][vc_widget_sidebar sidebar_id="footer-4" el_class="input-gray-e" css=".vc_custom_1489568314522{margin-bottom: 20px !important;}"][floral_shortcode_social_profiles profiles="social-facebook-url||social-instagram-url||social-twitter-url||social-googleplus-url" icon_size="15" icon_color="custom-style" colors="light" colors_hover="__" is_rounded_icon="1" rounded_size="24" background_colors="gray8" background_hover_colors="p" spacing_between_items="25" floral_remove_default_mb="0"][/vc_column][/vc_row][vc_row text_color="__" heading_color="__" link_color="__" link_hover_color="__" css=".vc_custom_1489568279657{border-top-width: 1px !important;border-bottom-width: 1px !important;padding-top: 14px !important;padding-bottom: 14px !important;background-color: #444444 !important;border-top-color: #444444 !important;border-top-style: solid !important;border-bottom-color: #444444 !important;border-bottom-style: solid !important;}"][vc_column][vc_column_text css=".vc_custom_1489568252299{margin-bottom: 0px !important;}"]
<p class="mb-0 s-font fs-italic light-color" style="text-align: center; line-height: 26px;">Floral Spa © 2016 All Rights Reserved Terms of Use and Privacy Policy</p>
[/vc_column_text][/vc_column][/vc_row]

6) Footer 03 (light)

floral-footer-08

[vc_row equal_height="yes" text_color="__" heading_color="__" link_color="__" link_hover_color="__" css=".vc_custom_1489568393204{padding-top: 70px !important;padding-bottom: 20px !important;background-color: #ffffff !important;}"][vc_column text_color="__" heading_color="__" link_color="__" link_hover_color="__" width="1/2" offset="vc_col-md-3"][floral_shortcode_heading heading_title="OPEN HOURS
" heading_el_tag="h3" heading_title_size="18" heading_title_ff="p-font" heading_title_text_transform="text-uppercase" heading_subtitle_enable="0" heading_separator_enable="0" heading_title_responsive_title_size="0"][vc_widget_sidebar sidebar_id="footer-2"][/vc_column][vc_column text_color="__" heading_color="__" link_color="__" link_hover_color="__" width="1/2" offset="vc_col-md-4"][floral_shortcode_heading heading_title="CONTACTS
" heading_el_tag="h3" heading_title_size="18" heading_title_ff="p-font" heading_title_text_transform="text-uppercase" heading_subtitle_enable="0" heading_separator_enable="0" heading_title_responsive_title_size="0"][vc_widget_sidebar sidebar_id="footer-3"][/vc_column][vc_column text_color="__" heading_color="__" link_color="__" link_hover_color="__" offset="vc_col-md-5"][floral_shortcode_heading heading_title="NEWSLETTER" heading_el_tag="h3" heading_title_size="18" heading_title_ff="p-font" heading_title_text_transform="text-uppercase" heading_subtitle_enable="0" heading_separator_enable="0" heading_title_responsive_title_size="0"][vc_widget_sidebar sidebar_id="footer-4" el_class="input-gray-e" css=".vc_custom_1489568384713{margin-bottom: 20px !important;}"][floral_shortcode_social_profiles profiles="social-facebook-url||social-instagram-url||social-twitter-url||social-googleplus-url" icon_size="15" icon_color="custom-style" colors="light" colors_hover="__" is_rounded_icon="1" rounded_size="24" background_colors="gray8" background_hover_colors="p" spacing_between_items="25" floral_remove_default_mb="0"][/vc_column][/vc_row][vc_row text_color="__" heading_color="__" link_color="__" link_hover_color="__" css=".vc_custom_1489568368419{border-top-width: 1px !important;border-bottom-width: 1px !important;padding-top: 14px !important;padding-bottom: 14px !important;background-color: #ffffff !important;border-top-color: #eeeeee !important;border-top-style: solid !important;border-bottom-color: #eeeeee !important;border-bottom-style: solid !important;}"][vc_column][vc_column_text css=".vc_custom_1489547775277{margin-bottom: 0px !important;}"]
<p class="mb-0 s-font fs-italic" style="text-align: center; line-height: 26px;">Floral Spa © 2016 All Rights Reserved Terms of Use and Privacy Policy</p>
[/vc_column_text][/vc_column][/vc_row]

Note: For the Widgetised Sidebar shortcode, you have to add widgets to the sidebars on Admin Sidebar > Appearance > Widget

floral-footer-11

Back To Top

Metabox Options

If you scroll down to the bottom of your page editor, you will see an area named  Options. We call that area Metabox Options.

Most options of Metabox Options just like the ones in Theme Options, except they have default value. If you leave the fields in Metabox Options to blank or set them to Default,  the options will override the same ones in Theme Options preset that is assigned to your current page (or ‘global’ preset if no preset is assigned to your current page).

Note:

+) You can disable some specific areas of your current page (like Footer, Page Title, Header Area – Before …) by set the fields corresponding to them to OFF.

+) Metabox Options does not take effect in any archive types (for example, in our  demo is Blog: http://floral.9wpthemes.com/blog/ ) . In this case, you have to use feature Overriding Template of Theme Options.

+) If you configure a option of a preset but it does not apply to your page (assume the preset is assigned to the page), you have to check the same option in Metabox Options of the page. The field of the option must be blank or set to OFF.

 

Back To Top

Overriding Template

If you note in Theme Options, there are 4 sections have overriding default template field: Header, Content Template, Page Title, Footer.

You can use that field to overriding the default template for : 404 page, Search page, Archive types and Single types (Blog, Service, Event).

Example of using overriding default template:

In the following I will show you how to change the footer of 404 page.

1) Make sure you are in ‘global’ preset (in my case is Default Preset), then select section Footer:

2) Set filed Override default footer settings in to 404 error page , then click Save Change. After that, a section named 404 Error Page Footer will appearance below section Footer

3) In the new section, set Footer content template field to another preset.

 

The result is here:

 

Back To Top

Mailchimp

For information and how to use it, you can read here: https://mc4wp.com/kb/

Form code for Mailchimp:

floral-mailchimp-01

<div class="input-wrapper">
	<input type="email" name="EMAIL" placeholder="Enter your email address" required />
</div>

<div class="submit-button-wrapper">
	<input type="submit" value="SUBSCRIBE" />
</div>

 

 

Back To Top

Contact Form 7

We are not Contact Form 7 author so we may not find solutions for some problem of this plugin. Thus, if you encounter with any problem with the plugin, please consult stackoverflow or  ask Contact Form 7 author directly. The official documentation of Contact Form & is here: http://contactform7.com/docs/

Below are scripts to make contact form and reservation form in our demo.

1) Contact Form

floral-contact-form-01

<div class="floral-form floral-contact-form-1">
	<div class="__contact-form-inner clearfix">
		<div class="__input __name mb-20">
			[text* client-name placeholder "Name" ]
		</div>
		<div class="__input __email mb-20">
			[email* client-email placeholder "Email Address" ]
		</div>
		<div class="__input __subject mb-20">
			[text* client-subject placeholder "Subject" ]
		</div>
		<div class="__input __message">
			[textarea client-message x8 placeholder "Message" ]
		</div>
		<div class="__btn pt-20 pb-20">
			<button type="submit" class="wpcf7-form-control wpcf7-submit floral-btn fw-semibold p-font btn-style-solid btn-shape-square btn-size-md icon-effect-none hover-effect-default light-color p-bgc s-hover-button-bgc" title="SUBMIT" style="border: none; min-width: 170px"><span class='fz-14 ls-02'>SUBMIT</span></button>
		</div>
	</div>
</div>

2) Reservation Form 1

floral-contact-form-02

<div class="floral-form floral-reservation-form-1">
	<div class="__reservation-form-inner clearfix">
		<div class="__input __name">
			[text* client-name placeholder "Name" ]
		</div>
		<div class="__input __email">
			[email* client-email placeholder "Email Address" ]
		</div>
		<div class="__input __phone">
			[text* client-phone placeholder "Phone" ]
		</div>
		<div class="__input __date">
			[text* client-date placeholder "mm/dd/yyyy" ]
		</div>
		<div class="__btn">
			<button type="submit" class="wpcf7-form-control wpcf7-submit floral-btn fw-semibold p-font btn-style-solid btn-shape-square btn-size-md icon-effect-none hover-effect-default light-color p-bgc s-hover-button-bgc " title="SUBMIT" style="border: none;"><span class='fz-14 ls-02'>SUBMIT</span></button>
		</div>
	</div>
</div>

3) Reservation Form 2

floral-contact-form-03

<div class="floral-form floral-reservation-form-2">
	<div class="__reservation-form-inner clearfix">
		<div class="__input __name mb-20">
			[text* client-name placeholder "Name" ]
		</div>
		<div class="__input __email mb-20">
			[email* client-email placeholder "Email Address" ]
		</div>
		<div class="__input __phone mb-20">
			[text* client-phone placeholder "Phone" ]
		</div>
		<div class="__input __date mb-20">
			[text* client-date placeholder "mm/dd/yyyy" ]
		</div>
		<div class="__input __message">
			[textarea client-message x8 placeholder "Message" ]
		</div>
		<div class="__btn pt-20 pb-20 text-right">
			<button type="submit" class="wpcf7-form-control wpcf7-submit floral-btn fw-semibold p-font btn-style-solid btn-shape-square btn-size-md icon-effect-none hover-effect-default light-color p-bgc s-hover-button-bgc" title="SUBMIT" style="border: none; min-width: 170px"><span class='fz-14 ls-02'>SUBMIT</span></button>
		</div>
	</div>
</div>

Back To Top

04.HOW TO

Add Custom CSS

There are 3 ways to add your custom CSS:

1) Use Visual Composer custom CSS feature

floral-add-custom-css-01

2) Add your custom CSS to Theme Option > Custom CSS & JS > Custom CSS

floral-add-custom-css-02

Note 1: The area allows you to use SCSS syntax. Below is a list of some SCSS variable you can use:

  • $floral-primary-color: get primary color value (in section Color of Theme Options).
  • $floral-secondary-color: get secondary color value.
  • $floral-text-color: get text color value.
  • $floral-meta-text-color: get meta text color value.
  • $floral-border-color: get border color value.
  • $floral-primary-font: get primary font value (in section Typography of Theme Options).
  • $floral-secondary-font: get secondary font value.
  • $floral-third-font: get third font value.

Note 2: your CSS code you have added to there only affect any pages that use the current preset. For example. if you add your CSS code to preset Default Preset and homepage 1 use preset Style Red – Dark Green, the code will not apply to homepage 1.

3) Use Floral child theme and add custom CSS to style.css of the child theme

Note: As I have mentioned in this post: http://docs.9wpthemes.com/document/install-demo-content-2/ , you have to active child theme before importing theme demo.  If you import the demo first, please don’t active child theme (this case you have to do either method 1 or method 2 above to add your CSS), or you have to: use plugin WordPress Database Reset to reset your database, active the child theme, then import the demo.

To add your CSS to the child theme, you can see below:

floral-add-custom-css-03

floral-add-custom-css-04

 

Back To Top

Speed up your site!

Here is some common step to make wordpress become faster:

  1. Optimize image with plugin EWWW Image Optimizer
  2. Enable cache , minify JS, CSS, HTML with plugin W3 Total Cache(powerful but need knowledge to use) or WP Super Cache(simple and normal effective).
  3. Enable client cache with this post
  4. Combine JS, CSS with W3 Total Cacheor Better WordPress Minify.
  5. Use CDN like https://www.cloudflare.com/(free with basic feature) or https://www.maxcdn.com/.

Note:

  • Should do optimize after configuring and build most basic content.
  • Be careful with optimize JS, It can cause problem
  • 4,5 really improve load time, GTmatrix result but not improve google page speed point.
  • Your page speed can not get exactly like our page because hosting another thing but you will see you page load really faster after optimize.

Back To Top