RUYA is a creative wordPress theme , creative and professional, readily responsive WordPress multipurpose website theme. Whoever you are, whatever business you are doing, RUYA is the right one for you!
Thank you for purchasing our theme. If you have any questions that are beyond the scope of this documentation, please feel free to contact us via email. Thanks so much!
RUYA includes other folders. Please see explanation below for more details:
Get the RUYA Theme installation package from your account(after login on Themeforest.net) at downloads page and save it to your computer.
Step 1 - Login to your WordPress Dasrdoard.
Step 2 - Go to Appearance > Themes. Click Add new button, located at the top of the screen or Add New theme ( see screenshots below ).
Step 3 - Click on Upload button at the top of the screen.
Step 4 - Choose ruya.zip.
Step 5 - Wait while the theme is uploaded and installed then activate the theme.
Step 1 - Log into your Hosting server using an FTP client (like FileZilla ).
Step 2 - Locate ruya.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 ruya with all theme files in it.
Step 3 - Locate your Wordpress installation and upload the theme directory RUYA (you unzipped in the previous step) into ../wp-content/themes/ in your Wordpress installation.
Step 4 - Click on the Activate button to activate RUYA. Congratulations, you have now activated ruya successfully! You can now proceed with ruya Plugin Installation.
You can watch the video about installation via FTP following this tutorial.
Step 1 - After activating the theme a notice should appear on the top of the screen, click on begin installing plugins ( see screenshots below ).
Step 2 - Select all the plugin,change Bulk Actions drop to Install then click apply ( see screenshots below ).
Step 3 - Congratulation you are ready to use RUYA, check the First Steps part of our documentation to see what you may want to do before starting to edit your WordPress Site.
Step 1 - Log into your WordPress Dasrdoard.
Step 2 - Go to Tools > Import. Then click on WordPress ( bottom of the list ).
Step 3 - A window should appear click the Install now button which is on bottom right.
Step 4 - Click Activate plugin & Run Importer. Then choose the content.xml file and click upload file and import Do not interrupt/cancel the import process!
Step 5 - Done! But you still need to set the Menu, Homepage.
Step 1 - Log into your WordPress Dasrdoard.
Step 2 - Go to Appearance > Theme Options > Import/Export and import theme options.
Step 1 - Log into your WordPress Dasrdoard.
Step 2 - Install plugin Widget Importer & Exporter.
Step 3 - Go to Tools > Widget Importer/Exporter and import widget.
Step 1 - Go to "Revolution Slider"
Step 2 - Click "Import Slider" button
Step 3 - When a popup appear, click "Browse" and select one of zip sliders(these files include in main file downloaded) file.
Step 4 - Click "Import Slider" button to start import the selected slider
Repeat the steps to import all
Go to "dummy-data" folder then RTL Demo folder and upload demo content with arabic language.
Step 1 - Log into your WordPress Dasrdoard.
Step 2 - Go to Appearance > Theme Options > Demo Importer
Please note that RUYA theme does include updates for our Premium Plugins (Revolution Slider and Visual Composer), however, this does not mean that you will receive an individual license for these Premium Plugins. Due to Envato’s licensing rules, we can only issue updates for these plugins when we issue a theme update. Please continue reading below for further information on the process of how these updates are given.
When you purchase a theme that bundles Revolution Slider and Visual Composer, you get to use these Premium Sliders with the theme. However, your purchase of RUYA theme does not give you an individual license for the Revolution Slider and Visual Composer to use or download as you wish.
Due to license rules, we can only issue new plugin updates when we issue new theme updates. So anytime RUYA theme are updated, the latest plugin for the Revolution Slider and Visual Composer will be included. This is according to the licensing rules enforced by Envato, and is something out of our control and must abide by.
To update the plugins:
Step 1: - Deactivate WP Bakery Page Builder & Revolution Slider and remove it:.
Step 2: - Re-install WP Bakery Page Builder & Revolution Slider :
You can download the latest version of the Ruya.zip at your downloads page, after downloading there are 2 ways of updating the theme manually:
Updating via WordPress
Step 1: Navigate to Appearance > Themes
Step 2: Deactivate Ave by activating a default WordPress theme, such as; Twenty Fifteen, Twenty Seventeen. The reason for this action is to enable the deleting functionality - WordPress does not allow to delete the active theme.
Step 3: Now you will be able to delete the Ruya theme, by selecting the Theme Details and then clicking on Delete (Right Bottom Corner). This won't remove the previous theme options, so the information will not alter once you install the newest version.
Step 4: Press Add New on this same page, then select Upload Theme, find the Ruya.zip file on your computer and click Install Now button.
Updating via FTP
Step 1: Connect to your hosting via an FTP software
Step 2: Unzip the Ruya.zip file on your computer
Step 3: Upload the extracted Ave theme folder to wp-content/themes/ruya, the theme will be updated by overwriting all the files of the previous version.
Step 1 - Log in to your WordPress Administration Panel.
Step 2 - Click on Pages > Add New.
Step 3 - Click on Backend Editor.
Step 1 - Go to your page / post, first activate the backend editor and click Add Element
Step 2 - Select the Row Module
Step 3 - Click on the Edit This Row (pencil icon) to Edit the Row element ( in our example we use row with 3 columns filled with text block )
Step 4 - To change the Row layout ( number of columns ) you need to click the second Icon from the left then select a layout or custom to make your own
Pages Icon - To Duplicate Row or Module you need to click the Pages icon.
Trash Box Icon - To Remove Row, Column or Module you need to click the Trash Box icon.
Design Options - When you edit row / column / custom heading / text block module, you can edit the design options.
Row / Custom Heading / Text Block element have a default Bottom Margin of 35 pixel, you may want to set it to 0 if you don't want to have bottom space.
Left and Right Margin should NEVER be modified, please left blank
Content management is a breeze with Fortuna and it requires absolutely no coding skills. Using a highly customized version of the Visual Composer plugin the theme offers a user friendly Drag'n'Drop interface for easy page creation and editing. Follow these simple steps to create a Page with RUYA:
Step 1 - Go to Pages > Add new in your Dashboard. Add a Title to your Page (top field).
Step 2 - Switch to Backend Editor if you are currently under Classic Mode (button below Title field).
Step 3 - Start adding page content by clicking on the Plus button or Add Element.
Step 4The Add Element Popup appears, click on the first element in order to add a new Row to your page. A Row is a main building block of a page, you can split your Rows into Columns, place various elements into your rows, set Row Backgrounds, effects etc.
Step 5 - Once you have the new Row added to your page you can split that Row into Columns in order to organize elements nicely in it. Once you split your Row into column you can start adding different Page Elements into your columns. If you want to edit your Row/Column Settings click on the small Pen icon (top right corner of the Row/Column). You can also Duplicate your Row with the Icon (duplicate icon) next to it or Remove the Row/Column with the icon to the right (trash bin icon).
You can add row content animation for row. Simply open the row settings and go to animation tab. You can adjust the settings as you like:
You can hide the columns on specific devices. Simply open the column settings and go to Responsive Options tab. You can adjust the settings as you like:
You can add Parallax animation for columns. Simply open the column settings and go to Columns Parallax tab. You can adjust the settings as you like:
Step 1 - Click on one of the Plus Icons within the column you want to add a new element to.
Step 2 - The Page Elements dialog will appear, click on the element you want to add to your Column/Row.
Step 3- The Element Settings Dialog of the Element you are adding appears. Customize your element anyway you want, then click Save.
Step 4 - Your element is now in the Column you added it to. Once you hover your newly added element you will see a small popup that let's you manage it. You can do the following with your elements:
Move - Drag your element via the Direction Icon to move it around within the Column,Row or Page.
Edit - Click on the Pen Icon to edit your Element's properties.
Clone - Click on the Copy Icon to duplicate your Element.
Delete - Click on the Trash Bin Icon to remove your Element.
Step 1 - Go to your page / post, first activate the backend editor and click Add Element
Step 2 - Select the Row Module
Step 3 -Click on the Edit This Row (pencil icon)
Step 4 - Change the Type setting to Full width content then click Save changes
Step 1 - Go to your page, Click on the Edit This Row (pencil icon)
Step 2 - Select Custom options tap
Step 3 - Select row style of this row, position separator (top - bottom - top and bottom), color separator then click Save changes
Step 1 - Go to your page / post, first activate the backend editor and click Add Element
Step 2 - Select the Row Module
Step 3 - Click on the Edit This Row (pencil icon)
Step 4 - Click on Design Options , select Background color and content text color
Step 4 - Click on Design Options ADD padding and REMOVE margin for better result, add a Background Image change to Cover and then Saves changes
Step 5 - Update or Publish your page and you should now have a section with background fixed
Step 1 - Go to your page / post, first activate the backend editor and click Add Element
Step 2 - Select the Row Module
Step 3 - Click on the Edit This Row (pencil icon)
Step 4 - Add parallax type background for row (Note: If no image is specified, parallax will use background image from Design Options).
Step 5 - Click on Design Options ADD padding and REMOVE margin for better result, add a Background Image change to Cover and then Saves changes
Step 6 - Update or Publish your page and you should now have a section with parallax background
Step 1 - Go to your page / post, first activate the backend editor and click Add Element
Step 2 - Select the Row Module
Step 3 - Click on the Edit This Row (pencil icon)
Step 4 - If checked, video will be used as row background.
Step 5 - You can edit the Design options ( remove margin and add padding "optional" ) and then Saves Changes and Update / Publish your page. You should now have a Full width Section with Video
If you installed RUYA Demo Data, you don’t need to create a new Home Page, you just need to choose from the list Home Pages that were automatically created from the demo content, following these steps:
Save all your changes!
Step 1 - Login to the WordPress Dasrdoard.
Step 2 - From the 'Appearance' menu on the left-hand side of the Dasrdoard, 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).
The Screen Options allow you to choose which items you can use to add to a menu. Certain items, like Posts are hidden by default. The Screen Options are located in the top right corner of your WordPress Dasrdoard.
Step 1 - Locate the pane entitled Pages.
Step 2 - Within this pane, select the View All link to bring up a list of all the currently published Pages on your site.
Step 3 - Select the Pages that you want to add by clicking the checkbox next to each Page's title.
Step 4 - 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 5 - Click the Save Menu button once you've added all the menu items you want.
Your custom menu has now been saved.
Once you've created a menu and filled it with items, it's time to assign it to one of the theme pre-defined locations.
Step 1 - Go to Appearance > Menus and click Manage Locations.
Step 2 - Assign each Theme Location with a menu. You can assign menus to multiple Theme Locations.
Step 3 - Click the Save Changes button.
RUYA features Mega Menus. The mega menus are available only for top level navigations items only in "Main Menu" area.
Follow the steps below to create a mega menu:
Step 1 - Add a an item to the menu editor. This has to be a top level item!
Step 2 - Click on arrow icon in the top right-hand and exapnd.
Step 3 - Seclect the columns number you want to use (from 2 to 4) in Submenu Type.
Step 4 - Now, you need to add child menu items, which will represent columns in the mega menu.
First level of child items will represent Titles in each of 3 columns.
Add 3 sub child menu items, like on the image below.
Step 5 - Now, add child items to each of those columns. This will represent your actual sub-menu pages. Take a look at the image below.
Step 6 - If you want to Remove the Titles (First Column, Second Column Third Column) Go back to the Mega menu setting and check Hide Mega Menu heading.
Home OnePage aims to focus the user's attention to the content that they want. When you choose an item on Main Menu of OnePage, it immediately navigates to the section that you've chosen
If you want to build your Home OnePage please consult our guide below:
Step 1 - You just have to create a Menu with Links as items.
Step 2 - Go to your homepage, anywhere you want the menu item to navigate to section, please edit row by Visual Composer and type id on field: Row ID
theme comes with Custom widget created specially for the theme.
To set the Widget go to Appearance > Widgets.
Now you can start fiddling with Visual Composer to build your home page with any design that you like.
In case you don't have time for experience with it, you can switch to Classic Mode and use one of the shortcode sets provided below to build your frontshop based on one of the pre-made home page we offer.
To create a page similar to Homepage in our the demo, choose the Classic Mode and switch to the Text tab, then paste this code into the content of your page:
Step 1 - Log in to your WordPress Administration Panel (Dasrdoard).
Step 2 - Click the 'Portfolio' tab.
Step 3 - Click the 'Add New Portfolio Item' sub-tab.
Step 4 - Start filling in the blanks: enter your portfolio title in the upper field, and enter your portfolio body content in the main post editing box below it.
Step 5 - Add categories to your item, the tags will be used as a filter on Portfolio Template pages.
Step 6 - Upload a featured image for your portfolio item then publish it.
Step 7 - Scroll down until you see the Portfolio Settings to Select thumbnail Link Type .
Step 1 - Log in to your WordPress Administration Panel (Dasrdoard).
Step 2 - Click on Pages > Add New.
Step 3 - Give your page a name then Change the Editor to Backend Editor ( you need to have the Visual Composer plugin activated ).
Step 4 - Click on the Add Element button
Step 5 - Select the Portfolio module.
Step 6 - The Portfolio Settings should appear. You can customize the Portfolio by modifying the settings
Step 7 - After finishing, Publish the page.
Step 1 - Log in to your WordPress Administration Panel (Dasrdoard).
Step 2 - Click on Pages > Add New.
Step 3 - Give your page a name then Change the Editor to Backend Editor ( you need to have the Visual Composer plugin activated ).
Step 4 - Click on the Add Element button.
Step 5 - Select the Blog module.
Step 6 - The Blog Settings should appear. You can customize the Blog by modifying the settings.
Step 7 - After finishing, Publish the page.
For each page you can change the title style, title background color, select to use a slider and much more! Check the screenshot and read the documentation to see how it works
Body Layout - Select body layout for page ( Boxed - Wide - Lines - Shapes ).
Container Width - Select container width layout for page ( 1170px - 1240px - 1440px).
Mouse Cursor - Select mouse cursor for page ( Style1 - Style2 - Style3).
Theme Color - Select theme color for page (Blue - Dark Blue - Purple - Rose - Red - Orange - Gold ).
Theme Primary Font - Select theme primary font for page (Poppins - Nunito - Muli - Hind - Cookie - Lato - Oswald... ).
Body Background - Select body background for page.
Select Header - Select header layout for page.
Logo - Select an image logo for page.
Select Menu - Select menu for page.
Select Position - Select position menu for page.
Disable Stick Menu - Disable Stick Menu for page.
Background - Select Background title bar for page.
Select title bar style - Select style title bar for page ( Snow - Particles - Animator ).
Select Footer - Select footer layout for page ( Footer V1 - Footer V2 - Footer V3 ).
The theme comes with an extensive Theme Options Panel. From the Theme options panel you will be able to set or change the color of the theme, layout, header style, social icons and a lot more. You should take the time to go through all of these options to ensure that you are getting the most out of the theme.
Click Appearance > Theme Options to access the Theme Options Panel.
Layout - Body layout with wide or boxed.
Page Loader - Enable/Disable page loader.
- For each page you can change ( Body Layout - Container Width - Mouse Cursor ) from page > page option.
Theme Stylesheet - Set stylesheet to change colors.
Body Background - Body background with image, color, etc.
Primary Color - Set primary color.
Secondary Color - Set secondary color.
- For each page you can change theme color from page > page option.
Body Font Options - Set value of Font Family, Font Subsets, etc.
H1/H2/H3/H4/H5/H6 Font Options - Set value of Font Family, Font Subsets, etc.
- For each page you can change theme primary font type from page > page option.
Logo - Select an image file for your logo.
favicon - Select an image file for your favicon.
- For each page you can change logo from page > page option.
Header Layout - Select header layout in your site.
- For each page you can change header from page > page option.
Fixed - Enable/Disable fixed menu.
Stick - Enable/Disable stick menu.
First Level Font Options - Set value of Font Family, Font Subsets, etc.
Sub Level Font Options - Set value of Font Family, Font Subsets, etc.
Background - Seclect background for menu.
Background Sub Level - Seclect background for dropdown menu.
Footer Layout - Select footer layout in your site.
Footer Top Margin - Enter the value of margin for Footer Top.
Footer Top Padding - Enter the value of padding for Footer Top.
Footer Background - Seclect background for Footer .
Font Options title - Set value of Font Family, Font Subsets, etc. for Footer Title.
Font Options - Set value of Font Family, Font Subsets, etc. for Footer Font.
- For each page you can change Footer from page > page option.
Dimensions (Height) Option - Enter the value of Height for Title Bar.
Padding - Enter the value of padding for Title Bar.
Background - Seclect background for Title Bar.
Canvas Style - Seclect canvas style for Title Bar ( Snow - Particles - Animator ).
Title Bar Heading - Set value of Font Family, Font Subsets, etc.
Title Bar Path - Set value of Font Family, Font Subsets, etc.
Sub Text - Enter sub text of Title Bar.
Sub Text Format - Set value of Font Family, Font Subsets, etc.
Delimiter - Enter Delimiter of page breadcrumb in Title Bar.
Select Layout - Select layout of blog.
Content Column - Enter class bootstrap content column.
Sidebar Right Column - Enter class bootstrap content column.
Read More Text - Enter text of label button read more in blog.
Show share - Show or not share on your single blog.
Show Navigation - Show or not post navigation on your single blog.
Show Author - Show or not post author on your single blog.
Show Comment - Show or not post comment on your single blog.
Show Page Comment - Show or not page comment on your page.
You can do step by step as image below to build contact form
You can visit Contact Form 7 Plugin to further details.
Or copy and paste content to Form field like this:
Example: Value Content for Contact form
Step 1 Go to MailChimp for WP > MailChimp Settings
Step 2
Step 3
Step 4
Step 5
Step 6
RUYA themes is 100% compatible with the WooCommerce plugin for WordPress. It includes full design integration of the WooCommerce pages, shortcodes and widgets.
If you want to use Woocommerce you will have to install the plugin, to do so go to Plugins > Add New , search for Woocommerce. The Plugin you need to install is WooCommerce - excelling eCommerce by WooThemes
For full documentation visit the following websites:
Updating the theme via WordPress is very similar to the install process via WordPress.
Follow the steps below to update your theme via WordPress:
Step 1 - Log into your WordPress Dasrdoard.
Step 2 - Go to Appearance > Themes.
Step 3 - Deactivate the Ruya Theme by simply activating a different theme. Once you activate a different theme, you can delete the Ruya theme.
Step 4 - Delete the Ruya Theme. Do not worry, your content will not be lost!
Step 5 - Then simply upload the new ruya.zip” file in the Appearance > Themes section. Click on the Install Themes tab at the top and choose to upload the zip file. You have this step explained in section: Theme Installation via WordPress.
Updating the theme via FTP is very similar to the install process via FTP.
Follow the steps below to update your theme via FTP:
Step 1 - Go to .../wp-content > themes location on your server using a FTP client and backup your "Ruya" theme folder by saving it to your computer, or you can choose to simply delete it. Your content will not be lost.
Step 2 - Download the new version of Ruya theme from your Themeforest and retrieve Ruya folder by unpacking the zip that you download from Themeforest and Ruya_(version.number).zip.
Step 3 - Then simply drag and drop the new "Ruya" theme folder into .../wp-content > themes location. Choose to “Replace” the current one if you did not delete it.
Step 4 - Log into your WordPress Dasrdoard, go to Appearance > Themes and activate the new Ruya theme.
If you have any questions that are beyond the scope of this documentation or have any troubles configuring your website applications with the above settings you can contact the MotivoWeb Support Team by signing up and submit a new topic. MotivoWeb Support Team will be glad to assist you.
Please Send Email: suport@motivoweb.comThanks so much for purchasing Ruya!
