Thank you for purchasing Frames WordPress theme. If you are looking for Filmmaker WordPress theme or a theme for movies studio, filmmakers,… Frames is right choose for you! This theme is suitable for any creative agencies, corporations, teams, personal as Film Studio, Film Actor, Film Director,… to build their own work. With special functions you can choose source for video, film from Youtube, Vimeo, Twitch, Dailymotion, Facebook, Google Drive, Embed or from your Self Hosted to help you can easy manage your work. And with super clean, elegant and modern design your site will more attractive with customer and perfect to promote yourself, your own work.
Before getting started, please be sure to always check out documentation files. We outline all kinds of good information, and provide you with all the details you need know to use Frames theme.
If you are unable to find your answer in the documentation, please contact our Support section on HaruTheme Forum or directly to our ThemeForest account via message.
In this user guide you will find all required information to get your site up and running: starting from theme installation and setup, to usage of different post types, page templates and shortcodes.
Most JavaScript enabled Browsers will make them work with no issues. They are designed and optimized for desktops, tablets and smartphones.
Disclaimer
Please note that we do not give support or any questions related on how to install and maintain WordPress. For any faulty installation that may cause your website or our theme malfunction you should refer to WordPress support forum. Alternatively you can get help from your web hosting.
If you are satisfied with our Frames WordPress theme, please take a moment to rate 5 stars and leave some sentences for review, it means a lot to us.
Thank you!
HaruTheme
2. Getting Started
2.1. Welcome
Hi,
It’s awesome to know that you decided to purchase Frames. No doubts, you will join our happy customers community in seconds!
Won’t make any mistake here, because our detailed documentation will guide you. Please be sure to check it out before getting started. We have outlined all kinds of necessary information and keep them easy-to-read-and-follow. Our themes are dedicated to WordPress platform, so we assume that you have already WordPress installed and ready to go.
2.1.2. Wordpress Knowledge Base
To install Frames – your powerful Movie studios and Filmmakers WordPress theme, you must have a working version of WordPress already installed. If you need help installing WordPress, follow the instructions in WordPress Codex. Below are all the useful links for WordPress information:
- WordPress Codex – General info about WordPress and how to install on your server.
- First Steps With WordPress – General info about multiple topics about WordPress.
- FAQ New To WordPress – The most popular FAQ’s regarding WordPress.
2.1.3. Theme Requirements
To use Frames, you must be running WordPress 5.0 or higher, PHP 5.6 or higher, and MySQL 5.6 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.
- Check to ensure that your web host has the minimum requirements to run WordPress.
- Always make sure they are running the latest version of WordPress.
- You can download the latest release of WordPress from official WordPress website.
- Always create secure passwords for FTP and Database.
Hosting is more secure when PHP applications, like WordPress, are running using your account’s username instead of the server’s default shared username (www or www-data). The most common way for hosting companies to do this is using PHP. Just ask your potential host if they run PHP or something similar.
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_execution_time: 360
- max_input_time: 360
- max_input_vars: 4000
- memory_limit: 256M
- post_max_size: 128M
- upload_max_filesize: 128M
- output_buffering: 4096
Here is topic tutorial to help you change PHP Limits: http://harutheme.com/forums/topic/how-to-change-php-settings-of-wordpress/
3. Installation
After purchasing Frames, please download the package from ThemeForest. In the package, you can find things like documentation, license, zipped file with theme files and folder with theme files. Please unpack the whole package after downloading it from ThemeForest.
Here maybe is common error with package: Theme is missing the style.css stylesheet error
3.1. Install Theme via WordPress
- Step 1: Navigate to Appearance >> Themes
- Step 2: Click Add New, then click Upload Theme >> Choose File
- Step 3: Navigate the .zip file on your computer and click “Install Now”
- Step 4: Activate the newly installed theme by going to Appearance >> Themes and clicking the Activate button.
- Step 5: IMPORTANT! After theme installation, at the top, you have a box with information about required and optional plugins. To install them and activate, please navigate to Appearance >> Install Plugins section.
Note: If you have any problem when installing frames.zip file via WordPress upload please note our Theme Requirements section above.
3.2. Install Theme via FTP Upload
SKIP THIS STEP if you have already successfully uploaded Frames theme via WordPress
- Step 1: BACKUP YOUR FILES! Should do it before set up anything, this is always the safest.
- Step 2: Unzip the frames.zip file (usually is Extract Here if you use WinZip or 7Zip).
- Step 3: Login into your hosting server via an FTP client tool (We recommended to use FileZilla).
- Step 4: Upload Frames Theme folder into wp-content/themes folder on your server.
- Step 5: Go to Appearance >> Themes and choose new theme has just installed and clicking the Activate button to active.
- Step 6: Once your theme is installed and active you will get a prompt at the top of your Dashboard that will ask you to install Frames‘s plugins..
(More details you can see it in topic update theme manual: https://harutheme.com/forums/topic/manual-update-wordpress-theme-via-ftp/)
You also can use a File Manager plugin like this to manage your files on your WordPress install: https://wordpress.org/plugins/wp-file-manager/
3.3. Install Required Plugins
After install and active theme you need install some required plugins to make Frames working best:
- Contact Form 7: Frames is fully compatible with Contact Form 7, the free form plugin recommended to create a nice form for your site.
- Haru Filmmaker: Filmmaker WordPress plugin with many functions to help you create any filmmaker website as you want .
- WooCommerce: if you want to include shop to sell your products
- YITH WooCommerce Wishlist: wishlist plugin for WooCommerce
- YITH WooCommerce Compare: compare plugin for WooCommerce
- MC4WP: Mailchimp for WordPress: mail subscriber plugin
- Smash Balloon Instagram Feed: Instagram feed plugin
- Revolution Slider: the most Premium Slider for WordPress with many functions
- Elementor: The most popular free drag and drop page builder with an intuitive interface to build your content at ease.
- Haru Frames: The Haru Frame core plugin include widgets, custom post types,…
- Redux Framework: Redux is a simple, truly extensible options framework for WordPress themes and plugins.
3.4. One Click Install Demo Data
With Frames, you can build a functioning website just by clicking a button and install our demo data.
- Step 1: Go to Theme Options >> Demo Importer section
- Step 2: Choose what demo you want to import then click Import Demo button
If you can’t install Demo Data please read more about section Theme Requirement above.
Or you can follow one of these topics below:
https://harutheme.com/forums/
or
https://harutheme.com/forums/
In Special case if your site using HTTPS, it can cause some images missing when import, you can contact your hosting provider help you change it. You also can follow this to turn off HTTPS: https://harutheme.com/forums/topic/how-to-turn-off-https-in-wordpress/
Here is video tutorial to help you Demo data manual: https://www.youtube.com/watch?v=M08vHyzXMOM
After installed Demo Data if you have issue with style like background image,… on mobile you need to go: Elementor -> Tools -> General. Click on Regenerate Files & Data and Sync Library and Save Changes.
How to fix Elementor Section Background not showing on Mobile
3.5. Update using Envato Market
This is Automatic Update method
Some important notices before updating:
We recommend you have a current backup of your site including wp-content folder, wp-config.php file and .htaccess file and a copy of WordPress database. If you don’t know how to take action, you can use several plugins such as UpDraft Plus and WordPress Backup Buddy or Duplicator (recommended). Moreover, you should backup HaruTheme’s theme options in Theme Options >> Import/Export.
Please follow these steps to update automatically this theme:
- Step 1 – You need to generate an API key to link your WordPress site to your ThemeForest account. Login to ThemeForest, go to your dashboard and click on “Settings.” The API Keys screen allows you to generate a free API key.
- Step 2 – Download Envato Market, install and activate this plugin. A new menu item, “Envato Market”, will appear in the admin sidebar. Click on the sidebar link and enter your marketplace username and secret API key. Click “Save Settings.” All of your theme purchases will now appear on this page after it refreshes.
- Step 3 – The plugin will now alert you to theme updates – so long as you check the toolkit settings regularly. Click on “install automatically” beside each of your themes to automatically update them. The toolkit settings page also allows you to install themes that you haven’t already uploaded to your site, delete ones you don’t use and view version details. You can also set up theme backups.
- Important! Always Use a Child Theme Updating your themes shouldn’t affect any customization to your website as long as you’re using a child theme.
More detail you can see in this topic tutorial: https://harutheme.com/forums/topic/how-to-update-wordpress-theme/
If you want to customize template display of theme or plugin please follow this topic: https://harutheme.com/forums/topic/customize-wordpress-theme-using-child-theme/ to keep you custom works when update theme.
3.6. Manual Update
Following these steps to update your theme:
- Step 1 – Log into your ThemeForest account and navigate to your downloads tab. Find the “Frames” theme purchase.
- Step 2 – Click the Download button next to it and choose to download the Installable WordPress file only which is just the WordPress file, or choose the All files & documentation which is the entire package that contains everything.
- Step 3: Update theme via WordPress upload method above or via FTP Client tool.
Here is topic to help you update theme manual via FTP: https://harutheme.com/forums/topic/manual-update-wordpress-theme-via-ftp/
3.7. WordPress Configuration
You need to configure WordPress. You can adjust WordPress settings as follows:
Step 1 – You can set Site Title, Tagline in Settings >> General.
Step 2 – You can set Blog pages show at most and Front Page displays in Settings >> Reading.
Step 3 – You can set Discussion settings in Settings >> Discussion. You can set comment options from here.
Step 4 – You can change Image sizes in Settings >> Media. You can set image size for blog archive, single blog post and image for widget sidebar.
Step 5 – You should ensure that a non-default permalink setting is selected, e.g. Day and name in Settings >> Permalinks.
4. Theme Options
By clicking on the “Theme Options” menu, you’ll be able to change all template specific settings. To Understand how Options in our theme work please follow this topic tutorial: https://harutheme.com/forums/topic/why-theme-options-doesnt-apply-changes/
That means you need to Edit Homepage (or page have header, footer, layout,.. different settings in Theme Options) then go to Page Options at bottom of page to compare settings with Theme Options.
4.1. General Setting
“General Settings” tab is divided into a few sections which allows you to configure general settings for pages as Layout Style, Page Preloader…
General Setting
- Layout Style: Set layout style for your website with 3 options Boxed, Wide and Float.
- Page Preloader: Select Page Preloader from drop down list. Leave empty if you don’t want to use this feature.
- Back To Top: Turn On/Off back to top button.
- Custom CSS (From WordPress version 4.7+ you can add Custom CSS in Appearance » Customize » Additional CSS)
- Custom JS: insert script without <script>
4.2. Header
In our theme, we use Elementor to build Header, so you need go to Header Builders to create Header then set Header settings here.
- Header Builder Type: set Header display for all pages. This setting can be override by Page Meta Box -> Header setting in each page.
- Header Transparent: set Header Transparent. Example Header over Slideshow on Homepage, Page Title,…
- Header Sticky: set Header Sticky
- Header Sticky Element: set Element when Header Sticky, you can choose sticky Header or only Menu (section include Haru Nav Menu widget – or other widget Menu in Elementor).
Note: the common issue is layout of Header break because Elementor doesn’t auto generate CSS file for it.
4.3. Footer
In our theme, we use Elementor to build Footer, so you need go to Footer Builders to create Footer then set Footer settings here.
- Footer Builder Type: set Footer display for all pages. This setting can be override by Page Meta Box -> Footer setting in each page.
Note: the common issue is layout of Footer break because Elementor doesn’t auto generate CSS file for it.
4.4. Logo & Favicon
In our theme we use Elementor to build Header & Footer. So you need to go Header Builder & Footer Builder to change Logo. Please change in Header that you set in Theme Options or in Page Metabox -> Header
- Logo: please go to Header & Footer Builder
- Custom favicon: set favicon of site
4.5. Appearance
Please note to make this option working fine, may be you need change some settings in php.ini of your hosting server (read section Theme Requirement above).
If you want to change Color Scheme or Typography you must turn ON SCSS Compiler.
4.5.1. Color Scheme
Color Scheme Tab allows you to configure Primary color, Secondary color, Text color, Heading color and Link color for your website or set Dark Mode.
Light Mode:
- Primary Color: set Primary color.
- Text Color: set Text color.
- Text Color Secondary: set text color Secondary.
- Text Color Tertiary: set text color Tertiary.
- Heading Color: Set color for Heading (h1, h2, h3, h4, h5, h6 tag).
- Link Color: set Link color in Paragraph.
Dark Mode:
Currently we don’t allow change Color for Dark Mode to keep the structure of our design.
- Dark Mode: set theme to Dark Mode
- Dark Mode Button: show/hide Dark Mode button at Frontend
Please note if you changed Color Scheme but it still doesn’t change you need to turn On SCSS Compiler option above or clear cache of your site.
4.5.2. Typography
Typography tab allows you set Fonts for body, menu, page title, page sub title and Heading from Google Fonts. Have about 600 fonts. If you want to use Custom Fonts upload please follow this topic: https://harutheme.com/forums/topic/how-to-use-custom-fonts-in-harutheme/
Please note if you changed Typography but at some section it still doesn’t change you need to turn On SCSS Compiler option above or clear cache of your site.
4.6. WordPress Setting
This tab includes Page, Blog, Single Blog settings.
4.6.1. Page Setting
This tab allow you to configure settings for your Pages.
- Layout: Set page layout with 3 options: Full Width, Container or Large Container.
- Sidebar: Set sidebar style with 4 options Left sidebar, Right sidebar, 2 Sidebars or No Sidebar.
Pages Title Setting
- Show Page Title: set page title On/Off.
- Page Title Layout: set page title layout with 3 options: Full Width, Container or Large Container.
- Page Title Content Layout: set page title content layout with 3 options: Full Width, Container or Large Container.
- Page Title Background: Select a background image for page title.
- Heading: set page title Heading On/Off.
- Breadcrumbs: set breadcrumbs of Page On/Off .
4.6.2. Archive Setting
This tab allow you configure archive blog page which display all your posts.
Archive Blog
- Layout: Set page layout for archive blog page with 3 options Full Width, Container or Large Container.
- Sidebar: Set sidebar style for archive page with 4 options Left Sidebar, Right Sidebar, 2 Sidebar or No sidebar.
- Right Sidebar or Left Sidebar: Set sidebar for Right sidebar or Left sidebar.
- Archive Blog Style: set Archive Blog style with 3 options Large Image, Medium Image or Grid.
- Paging Style: set Archive Blog paging style with 2 options Default or Load More.
- Length Of Excerpt: Set length of the Excerpt.
Archive Title Setting
- Archive Page Title: set On/Off archive blog title.
- Archive Title Layout: set page title layout for archive page with 3 options: Full Width, Container or Large Container.
- Archive Title Content Layout: set page title content layout for archive page with 3 options: Full Width, Container or Large Container.
- Archive Title Background: set a background image for archive blog title.
- Heading: set Heading On/Off
- Breadcrumbs: set breadcrumbs On/Off.
4.6.3. Single Blog Setting
This tab allows you to configure single blog page (single post).
Single Blog
- Layout: Set page layout for single blog with 3 options Full Width, Container or Large Container.
- Sidebar: Set sidebar style with 4 options No Sidebar, Left or Right sidebar or 2 Sidebars.
- Left or Right Sidebar: Set sidebar for Right sidebar or Left sidebar.
- Post Navigation: set post navigation On/Off (Go to next or preview post).
- Author Info: set author information On/Off.
- Post Related: set Related posts On/Off.
Single Blog Title Setting
- Single Blog Title: set On/Off single blog title.
- Single Blog Title Layout: set page title layout for single post with 3 options: Full Width, Container or Large Container.
- Single Blog Title Content Layout: set page title layout for single post with 3 options: Full Width, Container or Large Container.
- Single Blog Title Background: set a background image for single blog title.
- Heading: set On/Off page Heading for single blog.
- Breadcrumbs: set breadcrumbs On/Off.
4.7. WooCommerce
WooCommerce tab have some sub sections allows you to set Product display, archive product page (Shop page) and single product page.
- Sale Badge Mode: you can choose display as SALE text or percent label for Sale Product.
- Product Attribute: show Product Attribute (Apply for Color, Image & Label attribute type in Products -> Attributes)
- Quick View Button: set Enable/Disable Quick View button
- Add To Wishlist Button: set Enable/Disable Wishlist button
- Add To Compare Button: set Enable/Disable Add To Compare button
4.7.1. Archive Product (Shop)
Archive Product
- Product Per Page: set products per page for Shop page.
- Products per row ( Columns ): you can set Products per row in Appearance -> Customize -> WooCommerce ( Closest Additional CSS ) -> Product Catalog.
Layout Options
- Archive Product layout: set Shop page layout with 3 options Full Width, Container or Large Container.
- Archive Product Sidebar: set Shop sidebar None, Left or Right or 2 Sidebars.
- Archive Product Left or Right Sidebar: set left or right sidebar for Shop page.
Page Title Options
- Archive Title: set page title for Shop page On/Off.
- Archive Product Title Layout: set layout style for Shop page title with 3 options Full Width, Container or Large Container.
- Archive Product Title Content Layout: set layout style for Shop page title content with 3 options Full Width, Container or Large Container.
- Archive Product Title Background: set background image for Shop page title.
- Heading: set breadcrumbs in Shop page On/Off.
- Breadcrumbs: set breadcrumbs in Shop page On/Off.
4.7.2. Single Product
This tab allow you change settings for Single product page.
Layout Options
- Single Product Layout: set Single Product page layout with 3 options Full Width, Container or Large Container.
- Single Product Style: set single product style layout
- Product Thumbnail Columns: set single Product thumbnail columns (number)
- Single Product Sidebar: set Single Product sidebar None, Left or Right or 2 Sidebars.
Page Title Options
- Single Title: set title for single product page On/Off.
- Single Product Title Layout: set single product title layout with 3 options Full Width, Container or Large Container.
- Single Product Title Content Layout: set single product title content layout with 3 options Full Width, Container or Large Container.
- Single Product Title Background: set background image for single product title.
- Heading: set breadcrumbs in single product On/Off.
- Breadcrumbs: set breadcrumbs in single product On/Off.
Related Product Options
- Related Product Number: set number of related product you want to show on single product page.
- Related Product Display Columns: set number of columns to display related product.
4.8. Social Settings
Social Settings tab allows you to set Social Sharing settings
4.9. Newsletter Popup
Newsletter Popup tab allows you create a Newsletter promo Popup if you want to show something special to customer as Sale Off,…
- Show Popup: set popup On/Off.
- Popup Width: set the width of popup.
- Popup Height: set the height of popup.
- Popup Effect: set popup display effect.
- Popup Delay: set delay time of the popup (calculate by mili seconds).
- Popup Content: set the content for popup. You can insert shortcode here. Please not you should change Editor mode to Text before Save.
- Popup Background: set background image for popup.
4.10. Demo Importer
As describe above. You can get our demo by one-click demo install. Please read more on our forum to make any working fine.
4.11. Maintenance Mode
Maintenance Mode tab allows you close website for maintenance,…
- Maintenance Mode: set Maintenance mode On/Off.
- Maintenance title: set title of maintenance page.
- Maintenance Background: set background of maintenance page.
- Online Time: our site will auto open after this time. (set time to Open site)
- Timezone: set timezone of your site.
- Maintenance social profiles: set social profiles of maintenance page.
4.12. Import /Export
In this tab, you can import or export Theme Options data to backup or use on other website.
5. Menu
WordPress menu is very clean and easy to use. However you need to know some basic settings.
Assign Menu
- Go to Appearance >> Menus then select menu you want to Edit or you can create new menu.
- Find Menu Settings at the bottom of page the select location for menu.
Frames supports 2+ menu location:
- Primary Menu: the main menu use in the Header.
- Mobile Menu: the menu use to display on mobile device.
5.1. How to create Menu
Our theme has support mega menu system. The first you need to know about create a new menu.
- Step 1: Go to Appearance >> Menus.
- Step 2: Click Create A New Menu link. Enter menu name then click Create Menu.
- Step 3: To add menu item, select what you want to add to menu on left-side then click Add to Menu.
- Step 4: To create a simple dropdown menu you can drag and drop menu item. With sub menu you can read more description below to know about menu item level.
- Step 5: After setting menu, you go bottom of the page and assign menu Location then Save Menu.
5.2. Mega Menu Settings
Our theme supports Mega Menu build with Elementor. If you can’t edit MegaMenu Builder with Elementor please follow this topic: https://harutheme.com/forums/topic/how-to-edit-footer-header-megamenu-builders-with-elementor/
5.2.1. Create MegaMenu Builders
Go to MegaMenu Builder to create new Mega Menu content:
Search Elements with keyword menu to find what Elements can use here:
Please note some Elements doesn’t display fine in Preview Mode but they are working fine in Frontend Mode.
5.2.2. Setup Mega Menu
To setup Mega Menu, you click on menu item to open Menu Item level 0
Select Megamenu Builder to setup Mega Menu (default is Disabled). You also can set icon, width, label,… of menu item.
Here is the result
6. Page
6.1. How to create New Page
- Step 1: Navigate to Pages in your admin sidebar and click Add New option.
- Step 2: Input a new name for your page.
- Step 3: setup page settings in the right Sidebar.
- Step 4: scroll down to Page Metabox to setup other settings for this page then click Publish.
6.2. Page Metabox
Our theme have many Page Metabox settings to help you display almost what you want. Please note if you don’t set anything (Default option) in Page Metabox it will inherit from Theme Options.
6.2.1. Layout
- Layout Style: set layout style for page with 4 options Default, Boxed, Wide or Float.
- Page Layout: set page layout (with header you can set in header tab settings) with 4 options Default, Full Width, Container or Large Container.
- Page Sidebar: set sidebar style for page.
- Left Sidebar: set left sidebar for page if sidebar style is Left Sidebar.
- Right Sidebar: set right sidebar for page if sidebar style is Right Sidebar.
- Class Extra: set page class with special page.
6.2.2. Header
- Header Layout: set Header layout style for page or use Default.
- Header Transparent: set Header Transparent. Example Header over Slideshow on Homepage, Page Title,…
- Header Sticky: set Header Sticky
- Header Sticky Element: set Element when Header Sticky, you can choose sticky Header or only Menu (section include Haru Nav Menu widget – or other widget Menu in Elementor).
6.2.3. Footer
- Footer Layout: set Footer display for this page
6.2.4. Title
- Page Title: set page title On/Off.
- Page Title Layout: set page title layout with 4 options: Default, Full Width, Container or Large Container.
- Page Title Content Layout: set page title content layout with 4 options: Default, Full Width, Container or Large Container.
- Page Title Background: Select a background image for page title.
- Title Heading custom: set page title Heading custom
- Sub Title custom: set page sub title custom
- Breadcrumbs: set breadcrumbs of Page On/Off .
7. Blog Post
7.1. How to create New Post
No matter which method you using to display your blog posts, the first thing you need to do is create the blog posts.
See below for information on how to create blog posts.:
- Step 1: Navigate to Posts -> Add New in your WordPress admin sidebar.
- Step 2: Create a title, and insert your post content in the editing field.
- 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 first Featured Image Box, select an image and click the Set Featured Image button.
- Step 6: Once you are finished, click Publish to save the post.
Here is the screenshot that shows the various areas of the blog post page.
7.2. Post Format
Our theme supports 7 post formats that allows you to choose the specific format for your blog. You can choose different types of post to make your blog be more interesting. Follow below steps to see the description of Post Formats and Global setting of Post.
7.3. Page Options
Same as Page Metabox box of Page, Post have similar Page Metabox. You can read Page Metabox section above.
8. Elementor Widgets
Our theme uses the most powerful’s page builder to help users create sites with ease.
Add content using Elementor (Create new or edit page).
We made tons of Elementor Widgets to use in our theme to help you make your page. You can search with prefix Haru
Each widget will have settings to help you get layout and display the content you want.
Below is the list of available widgets in our theme:
8.1. Header Widgets
These widgets style display the best in the Header. However they are still display fine on other Position.
8.1.1. Haru Header Logo
This widget to display Header Logo
8.1.2. Haru Nav Menu
This widget to display Primary Menu of site
8.1.3. Haru Header Contact
This widget display Contact in the Header
8.1.4. Haru Woo Cart
This widget display WooCommerce cart in the Header
8.2. Footer Widgets
These widgets style display the best in Footer. However they are still display fine on other Position.
8.2.1. Haru Footer Logo
This widget to display Footer Logo
8.2.2. Haru Footer Link
This widget to display Link list at Footer
8.2.3. Haru Footer Text
This widget to display some special Text at Footer
8.2.4. Haru Contact
This widget to display Contact at Footer
8.2.5. Haru Social
This widget to display Social at Footer
8.2.6.
8.3. Haru Widgets
These widgets style display the best at every Position of site.
8.3.1. Haru Heading
This widget to display Heading with Pre Style
8.3.2. Haru Video
This widget to display video with Pre Style
8.3.3. Haru Counter
This widget to display Counter with Pre Style
8.3.4. Haru Button
This widget to display Button with Pre Style
8.3.5. Haru Post Featured
This widget to display Posts with Pre Style
8.3.6. Haru Tabs
This widget to display Tab with Pre Style
8.3.7. Haru Image Gallery
This widget to display Gallery with Pre Style
8.3.8. Haru Logo Showcase
This widget to display Logo Showcase with Pre Style
8.3.9. Haru Testimonial
This widget to display Testimonial with Pre Style
8.3.10. Haru Icon Box
This widget to display Icon Box with Pre Style
8.3.11. Haru Accordion
This widget to display Accordion with Pre Style
8.3.12. Haru Google Maps
This widget to display Google Maps with Pre Style
8.3.13. Haru Search Form
This widget to display Search Form with Pre Style
8.3.14. Haru Search Form
This widget to display Search Form with Pre Style
8.3.15. Haru Menu Post
This widget to display Mega Menu Posts with Pre Style
8.3.16. Haru Text Scroll
This widget to display Text Scroll with Pre Style
8.3.17. Haru Timeline
This widget to display Timeline with Pre Style
8.3.18.
8.4. Filmmaker Widgets
These widgets style display content of Filmmaker WordPress plugin.
8.4.1. Haru Video Isotope
This widget to display Video with Isotope layout
8.4.2. Haru Video Category
This widget to display Video Category Filter layout
8.4.3. Haru Video Featured
This widget to display Video Featured layout
8.4.4. Haru Video Creative
This widget to display Video Creative layout
8.4.5. Haru Video Creative
This widget to display Video Creative layout
8.4.6. Haru Video Slideshow
This widget to display Video Slideshow layout
8.4.7. Haru Video Single
This widget to display Video Single layout
8.4.8. Haru Person Category
This widget to display Person Category layout
8.4.9. Haru Person Featured
This widget to display Person Featured layout
8.4.10. Haru Menu Video
This widget to display Video at MegaMenu
8.4.11. Haru Menu Person
This widget to display Person at MegaMenu
8.4.12.
9. Header Builders
Our theme use Elementor to build Header, you need go to Header Builders to create new Header. Please make sure you follow this topic to edit Header by Elementor: https://harutheme.com/forums/topic/how-to-edit-footer-header-megamenu-builders-with-elementor/
Please note when build Header please don’t use margin top for Section because it can cause Spacing issue when Sticky Menu or Sticky Header.
Then go to Theme Options -> Header to set Header for site:
9.1. Popup Menu Template
Go to Mega Menu Builder and create new Mega Menu Popup:
Set section class for each Section with class: section-popup-menu at Tab Advanced
then use this template with widget Haru Nav Menu Popup
9.1. Sidebar Menu Template
Go to Mega Menu Builder and create new Mega Menu Canvas:
Set section class for each Section with class: section-sidebar-menu at Tab Advanced
then use this template with widget Haru Nav Menu Popup
9.3. Create Header Siderbar
Create and set Header is Header Sidebar layout
Create a Section for Header on Desktop and a Section for Header on Mobile (or Tablet depend on settings when you create)
Create a Section for Header on Mobile:
Create a Section for Header on Desktop
and setup as screenshots below
Rotate Elements of Header:
Rotate Header Top (Logo) with class header-rotate–top
Rotate Header Bottom with class header-rotate–bottom
10. Footer Builders
Our theme use Elementor to build Footer, you need go to Footer Builders to create new Footer. Please make sure you follow this topic to edit Footer by Elementor: https://harutheme.com/forums/topic/how-to-edit-footer-header-megamenu-builders-with-elementor/
Then go to Theme Options -> Footer to set Footer for site:
11. Filmmaker
You can change Custom Post types slug in Settings -> Permalink -> Filmmaker Permalink Slug section
11.1. Videos
11.1.1. Video List
Here are video list after created:
11.1.1. Single Video
Single Video Meta
Visible Meta
- Title
- Content
- Category
- Featured Image
- Genres
- Tags
- Labels
- Years
- Video Metaboxes
Hidden Meta
11.2. Persons
11.2.1. Person List
Here are person list after created:
11.1.1. Single Person
Single Person Meta
Visible Meta
- Title
- Content
- Category
- Featured Image
- Person Metaboxes
Hidden Meta
11.3. Filmmaker Settings
From here you can manage functions of Filmmaker – Filmmaker WordPress plugin. We divided functions in tab, so you can easy control and understand about it.
11.1. General Settings
11.1.1. Special Pages Settings
- Watch Later Page
- My Videos Page (Future functions – currently doesn’t work)
- Submit Video Page (Future functions – currently doesn’t work)
11.1.2. Other Settings
- Social Sharing
11.2. Player Settings
- Video Player Popup: In this version doesn’t support play video on Popup. We’ll research and update it asap. From version 1.0.6 we updated and it’s working now.
- Video Autoplay: Allow Video Autoplay in single video page. Please note on Safari Autoplay video must be muted and video source from Facebook is not allowed Autoplay on mobile. Video Sefthost and Google muted when Enable Autoplay…
- Video Player JS Library
- …
11.3. Videos Settings
11.3.1. Archive Videos Settings
- Breadcrumbs
- Breadcrumbs Width
- Breadcrumbs Background Image
- Layout Width
- Archive Layout
- Sidebar Left or Sidebar Right
- Archive Columns
- Number of videos per page
- Paging Style
11.3.2. Single Video Settings
- Single Style
11.4. Persons Settings
11.4.1. Archive Persons Settings
- Breadcrumbs
- Breadcrumbs Width
- Breadcrumbs Background Image
- Layout Width
- Archive Layout
- Sidebar Left or Sidebar Right
- Archive Columns
- Number of persons per page
- Paging Style
11.4.2. Single Video Settings
- Single Style
11.5. Thumbnail Settings
We use Thumbnail Settings to help customer set thumbnail size of Video. Other posttype thumbnail we’ll update in future version.
11.5.1. Video Thumbnail
- Video Thumbnail Type: Image, Slideshow
- Video Thumbnail Size: Default (user upload size), Ratio 16:9, Ratio 4:3
- Single Video Thumbnail Size (Single Video Player size): Ratio 16:9
- …
12. 3rd plugins
12.1. Revolution Slider
- Product main page: https://1.envato.market/YArzK
- Document: https://www.sliderrevolution.com/manual/how-to-use-this-manual/
12.2. Elementor
- Product main page (Free version): https://wordpress.org/plugins/elementor/
- Document: https://elementor.com/help/how-to-use-elementor/
13. WordPress Translation
Our theme is a WPML – compatible and multi language ready theme. We suggest 2 ways to translate our theme.
- Use Loco Translate plugin
- Manual translate using POEdit
Use Loco Translate you can follow this topic tutorial: https://harutheme.com/forums/topic/how-to-translate-wordpress-theme-or-plugin/
Step and step to translate we will have a post on forum asap.
14. Automatic Import Videos
Now we supported automatic import videos from Youtube and Vimeo server.
You can download Haru Filmmaker Importer plugin then import videos follow this topic: How to import Videos automatically in Haru Filmmaker
Resource Links:
https://github.com/harutheme/haru-filmmaker-importer
https://harutheme.com/forums/topic/how-to-import-videos-automatically-in-haru-filmmaker-wordpress-plugin/
15. Theme Support
Thank you for purchasing our theme. If you have any questions that are beyond the scope of this documentation, please feel free to us via email harutheme@gmail.com or admin@harutheme.com. Or create topic here: https://harutheme.com. Thanks so much.
16. FAQs
16.1. Why layout of my Header or Footer break on mobile?
Because Elementor doesn’t auto generate CSS file for it.
You can fix it by go to Elementor -> Tools then Regenerate CSS & Data & Sync Library
16.2. How to increase website page speed?
Please follow this topic: https://harutheme.com/forums/topic/how-to-increase-speed-of-you-website-using-cms-wordpress/
16.3. How to make your SVG images standard and can change color?
Please follow this topic: https://harutheme.com/forums/topic/how-to-make-svg-images-standard-and-can-change-color/