Radica Theme Documentation

Introduction

Thank you for purchasing our Theme, We are so happy that you choosed Radica for your website. Please do not forget to rate the Theme and We'll be waiting for your Feedback. It would be nice to see your comments on our product, this documentation consists of several parts and shows you how to set up and administrate your WordPress site. We did our best to make this documentation as clear as possible. However, if you have any difficulties with the our theme or any suggestions on improving the theme or the documentation, feel free to contact us via support.

What Is WordPress ?

WordPress is a free and open source blogging tool and a content management system (CMS) based on PHP and MySQL. It enables you to build Websites and powerful on-line applications and requires almost no technical skills or knowledge to manage. Many aspects, including its ease of use and extensibility, have made WordPress the most popular Web site software available.

What is a WordPress Theme ?

A WordPress Theme is a skin for a website built with the WordPress CMS platform. In other words, you can easily change your WordPress Web site appearance by installing a new Theme in a few easy steps. With all its simplicity, a WordPress Theme is provided with all the necessary source files and you are free to edit or extend it the way you need

More Links to make it easy with WordPress:

Radica Theme Requirements

Radica WordPress Theme requires some basic settings to work properly with no issues, and this is somehow different from many other minimal wordpress themes as it includes tons of features and options to make it easy for you to make your website as you dream with.

So below what is required for Radica to work:

  • WordPress Version 5.0.0 or Higher
  • PHP 5.6 or higher
  • MySQL 5.6 or higher
  • Recommended PHP Configuration Limits:
    • max_execution_time 180
    • memory_limit 128M
    • post_max_size 32M
    • upload_max_filesize 32M

The Full Package.zip file Contains:

  • Licensing Folder
  • Resources Folder: wp-plugins folder: that contains all premium plugins, demo-data folder that contains all demo content and also theme options, etc...
  • Theme Folder: radica.zip and the child theme (radica-child.zip)

Radica Theme Support

Radica comes with support and free lifetime updates for your theme. Once the support is up, you have the opportunity to extend support coverage up to 6 or 12 months further. If you choose to not extend your support, you will still be able to submit item comments and also still have access to our online documentation and theme updates.

Radica Theme Installation

1) Download & Organize Files

After downloading the ZIP file UNIZP that file, after unzipping you see various structure of theme.
  • Theme/radica.zip (Root file to install wordpress theme)
  • Licensing (File which include information about wordpress & theme under GPL liscense)
  • Resources (Directory which includes xml demo content file, theme options, widgets, etc...)

2) Installing Theme

A - Installing your theme via Wordpress
  1. Login to your wordpress dashboard, go to WordPress Appearance -> Themes section.
  2. Click on Install Themes tab.
  3. Click on Choose File button, and select .zip theme file and click Install Now button.
  4. If you uploading process fails due to theme broken issues, then you may refer here
Note : This method will only work if your server allows space greater than 5 MB. Usually hosting providers provides only 2 MB
B - Installing your theme via FTP
  1. Go to the downloaded package then select Theme/radica.zip and extract it.
  2. Copy extracted files in Radica folder to /wp-content/themes/Radica via FTP Clients
  3. For example theme should be in wp-content/themes/Radica
  4. Follow the instruction below for activating the theme.

3) Activating Theme

  1. Log in to the WordPress Administration Panels.
  2. Select the Appearance panel, then Themes.
  3. From the Available Themes section, click on the Radica title (or Radica screenshot) to activate.
  4. A preview of the Theme will be shown.
  5. To activate the Theme click the Activate Radica link in the top right.

Plugins Installation

In order for the theme to work properly we require some extra plugins to be installed and activated via the top info message in the image below:

Demo Content Installation

A - Import Demo Content via One-Click-Install Method

This will import EVERYTHING like our main demo content (Sliders, Portfolio Grids) Automatically.

  1. Go to your wodpress admin panel
  2. Under Appearance tab click on Radica, this will direct you to the theme options panel.
  3. Click on Extras, you will find an Import Demo Data button, click it (this will import posts, categories, menus, widgets, Sliders, Portfolio Grid and Theme Options.)

B - Import Demo Content via XML DUMP Manually

  1. Go to your wodpress admin panel
  2. Under the Tools tab select Import
  3. In the new page appeared select the last item "WordPress"
  4. Find the Resources folder inside the root folder of Downloaded Package File.
  5. Inside Resources folder open demo-data folder then choose content.xml

C - Import Plugins Data Individually

  1. To Import sliders, RAYS Grid Plugin content, just go to these plugins in the left side of the Administration Panel and select import/export link in each plugin then import the corresponding content for each plugin from demo-data folder.

Radica Theme Update

There are two ways to update Radica theme, via wordpress dhashboard or via FTP.

A - Update Radica Via WordPress Dashboard:

There are many ways to update via dashboard:

  1. An easy way to update Radica theme is to download and install Easy Theme and Plugin Upgrades and follow the steps that are also very easy to perform the theme and also plugins upgrade.

B - Update Radica Via FTP:

Important Note : It is Very Important to make a backup of your theme folder and plugins folder. Also It’s very important to delete (not to replace) the old Radica theme folder and Radica Core plugin folders. They need deleted because if you only replace the folders, then the old files can be left on the server and the update may not work.

Let's Proceed in updating the theme:

  1. Download the theme as descibed above.
  2. Log into your server using FTP and go to wp-content > themes > then you will see Radica folder.
  3. Backup the ‘Radica’ theme folder by downloading it to your computer, then delete it. please note that any customizations to the theme's core files, such as PHP files will be lost unless you're using a child theme.
  4. Now we need the theme files you’ve just downloaded. If you’ve downloaded the installable WordPress file, then you only need to extract it, but If you’ve downloaded the Full Package you must extract it then open Theme > extract the Radica.zip file to get to the Radica folder.
  5. Now you can drag and drop the new Radica theme folder into wp-content > themes folder location. Make sure the folder is named Radica.

Plugins Update

There are two ways to update Plugins, via wordpress dhashboard or via FTP.

A - Update Plugins Via WordPress Dashboard:

  • As described above you can download and install Easy Theme and Plugin Upgrades and follow the steps that are also very easy to perform the plugins upgrade.

    • B - Update plugins Via FTP:

    Important Note : It is Very Important to make a backup of your plugins folder. Also It’s very important to delete (not to replace) the old plugin folders. They need deleted because if you only replace the folders, then the old files can be left on the server and the update may not work.

    Let's Proceed in updating the Plugins:

    1. Download the Full Package that contains the latest plugins releases.
    2. Log into your server using FTP and go to wp-content > plugins > then you will see plugins folders.
    3. Backup the plugin folder you need to update by downloading it to your computer, then delete it.
    4. Now we need the full package you’ve just downloaded. you need to extract it then open Resources Folder > wp-plugins > extract the plugin zip file to get to it's folder.
    5. Now you can drag and drop the new plugin folder into wp-content > plugins folder location. Make sure the folder is named with the plugin name(Ex: Radica-core).

    Options Panel

    To Navigate to the theme options and begin customizing the look and feel or your website, you can:

    • Log in to the WordPress Administration Panels.
    • Select the Appearance panel, then Radica and you will find this:

    Now Let's discuss each element in our powerfull theme options panel individually to make use of all theme features.

    Top Right Buttons

    Save Changes & Restore Defaults Buttons on the top right of the page.

    • Save Changes: After selecting your options from the theme options panel click this button to save the changes.
    • Restore Defaults: When you click this button, a message will appear to you, choose OK and hit the save changes button to reset the theme options to their default values or cancel this action by clicking on cancel button.

    General Settings

    Property Description
    General Settings
    • Choose layout: Choose the Wide or Boxed Layout of your site.
    • Site Width: if not responsive layout type here the main container width in (%), and this will apply the fixed layout.
    • Sidebar Width: the page sidebar width in (%).
    • Content Padding: Top and Bottom main content padding in px.
    • Partcles With Lines: Ads vertical lines with dots across the pages with some animation.
    • Tags Limit: Control the Number of tags that will be displayed in tags widgets.
    • Back To Top Button: Show the back to top button at the bottom of the page when scrolling down.
    • Smooth Scrolling: Enable / Disable the mouse wheel smooth scrolling while navigating the site.
    • Image Placeholders: Show default image for posts that not having featured image.
    Page Loader
    • Page Pre-loader Enable / disable Page loader.
    • Body Background color: Body background color for page loader only.
    • Pre-loader Style: Select a preloading style from 3 available ones ( Or Upload a custom loading image ) that appears before page completely loaded.
    • Animated Bar color: Animated bar forecolor.
    • Bar Background color: Animated bar background color.
    • Loading Text: Enter text that shows below the loading bar.
    • Loading Text Color: color for the loading text below the loading bar.
    Styling Options
    • Main Site color: Select the main theme color that will be applied on all elements of your site.
    • Body Font color: Choose your new custom body font (text) color from the color picker.
    • Body Links color: Choose new custom color for all site links from the color picker.
    • Body Background color: Choose your new body custom background color from the color picker.
    • Body Background Image: Select an image to use for the body background image.
    • Background repeat: choose if the background will repeat horizontally or vertically or both or no repeat at all.
    • Background Position: This option lets you choose if the background position inside the body.
    • Background Size: This option lets you choose if the background will fit the container width and height or not.
    • Fixed Background: if enabled the body background image will be fixed with page scroll down.
    404 Page Settings
    • Background color: Body background color for 404 error page only.
    • Disable Default background image: disable the default background for 404 page that is set by the theme CSS.
    • Body Background Image: Select an image to use for the body background image.
    • Background repeat: choose if the background will repeat horizontally or vertically or both or no repeat at all.
    • Background Position: This option lets you choose if the background position inside the body.
    • Background Size: This option lets you choose if the background will fit the container width and height or not.
    • Header Links color: Custom color for header links.
    • Header Icons color: Custom color for header icons.
    • Header Hover color: Custom hover color for header links.
    • Header Background color: Choose new custom color for 404 page header.
    • Custom Logo: upload a custom logo for 404 error page only.

    Top Bar Settings

    Property Description
    Top Bar

    These settings let you Show / Hide top bar and also choose what to show on the left and right sides of the top bar on your site.

    • Show top bar: Show/Hide top bar above header.
    • Top bar left
      • Menu: Displays one of your menus on left side.
      • Text: Adds whatever text you want that will appear on left side.
      • Link: Adds Link with icon that will appear on left side.
      • Social Icons: Displays social icons with links to your social media pages on left side.
      • Search: Adds Search Box on left side.
      • WP Login: Displays a login / register links and welcome to guest on left side.
      • Shopping Cart: Adds shopping cart on left side.
      • Language Switcher (WPML): WPML language switcher menu enables user to choose his prefered language.
    • Top bar Right
      • Menu: Displays one of your menus on right side.
      • Text: Adds whatever text you want that will appear on right side.
      • Link: Adds Link with icon that will appear on right side.
      • Social Icons: Displays social icons with links to your social media pages on right side.
      • Search: Adds Search Box on right side.
      • WP Login: Displays a login / register links and welcome to guest on right side.
      • Shopping Cart: Adds shopping cart on right side.
      • Language Switcher (WPML): WPML language switcher menu enables user to choose his prefered language.
    Styling
    • Color: Choose your prefered top bar color.
    • Full Width: Make top bar in full width.
    • Bottom Border: Add bottom border for top bar.
    • Border color: Custom color for top bar bottom border.
    • Hide On Small Screens Hides the top bar only when the screen is larger than 768px and smaller than 1024px.

    Header Settings

    Property Description
    Header

    These settings let you choose the header options on your site.

    • Choose header layout: Choose header layout from the 3 available styles.
    • Full Width: Make the header full width not wrapped center in the page.
    • Fixed: Make the header with fixed position over the page content.
    • Show Search Box: Choose to show / hide the search box beside top menu.
    • Show Cart Box: Choose to show / hide the cart box beside top menu.
    • Show Social Icons ? This will show social icons in the left and right side headers.
    • Left & Right Side Copyrights ? This will only apply the copyrights in the left and right side headers.
    • Copyrights Text Text for the left, right side headers copyright.
    Styling

    These settings let you choose the header styling on your site.

    • Header Height: enter header height in pixels.
    • Header Padding: Left and Right header padding only.
    • Background color: Choose your new custom background color from the color picker.
    • Border Top color: Choose top header border color from the color picker.
    • Border Bottom color: Choose bottom header border color from the color picker.
    • Background Image: Select an image from the uploader or insert an image url to use for the header background image.
    • Background Size: This option lets you choose if the background will fit the container width and height or not.
    • Background repeat: This option lets you choose if the background will repeat horizontally or vertically or both or no repeat at all.
    Sticky Header settings
    • Enable Sticky Header: Lets you choose Enable / Disable Sticky header.
    • Background color: Choose your new custom background color from the color picker.
    • Font Color: Choose custom links color from the color picker.
    • Hover Color: Choose custom links hover color from the color picker.
    • Show on Small Screens: Enable / Disable the sticky header on Small Screens.

    Menu

    Property Description
    Menu Options
    • Hover Animation: Enable / Disable menu links hover animation.
    • Menu First Level Icons: Show / Hide main menu first level icons.
    • Show Submenu Icons: Show / Hide sub menu icons.
    • Show Menu Subtitles: Show / Hide menu Subtitles below the menu item link.
    • Links Color: Choose menu links color from the color picker.
    • Links Hover color: Choose menu links hover color from the color picker.
    • Menu Icons color: Choose menu icons color from the color picker.
    • Sub Menu Color: Background color for the sub menu.
    Menu Locations
    • Add unlimited nav menu locations.

    Page Title

    Property Description
    General Settings
    • Style: Choose from avaiable 5 pre-defined styles.
    • Position: Choose How the page titles will be Horizontally aligned (Left - Center - Right).
    • Height: type the custom page title height in px.
    • Icon: Select page title icon from the popup to be shown in the page title block.
    • Icon Font Size: Enter page title font size in pixels.
    • Icon color: Choose a solid Icon color.
    • Icon Background color: Choose a solid Icon Background color.
    • Hide All Page Titles: Show/Hide page title in all pages.
    Typography
    • Font Family: Choose Font Family for main page title.
    • Font Size: Choose Font size for main page title.
    • Subtitle Font Size: Choose Font size for page sub title.
    • Font Weight: Choose Font weight for main page title.
    Styling
    • Text Color: Choose a solid color for page title.
    • Subtitle Font Color: Choose a solid color for page sub title.
    • Text Background Color: Choose a color for the title text background.
    • Background Type: Can be solid color or gradient color.
    • Background Color: Choose a color for the main title background.
    • Gradient Color: Choose two or more colors for the main title background.
    • Background Image: Select an image from the uploader or insert an image url to use for the page title background image.
    • Background Size: This option lets you choose if the background will fit the container width and height or not.
    • Background repeat: This option lets you choose if the background will repeat horizontally or vertically or both or no repeat at all.
    • Background Position: This option lets you choose the background position.
    • Parallax Background: if enabled the body background image will be in parallax effect with page scroll down.
    • Overlay: This option lets you make Overlay over the background image.
    Breadcrumbs
    • Show BreadCrumbs: Show / hide breadcrumbs for all pages.
    • Style: Choose Breadcrumbs from all 4 available styles.
    • Alignment: Choose How the breadcrumbs will be Horizontally aligned (Left - Center - Right)
    • Prefix: The text before the breadcrumbs
    • Suffix: The text After the breadcrumbs
    • Show on Mobiles: Show / hide breadcrumbs in mobiles.
    • Text Color: Choose a solid color for breadcrumbs text.
    • Background Color: Choose a color for the breadcrumbs background.

    Typography

    Property Description
    Body

    Select the BODY font family from the font selector and also select font size, font weight and line height of all body elements EXCEPT:

    The Menu typography and The Headings typography are not affected by this option because they have their own settings.
    Menu

    Select the Menu font family from the font selector and also select font size, font weight and text style of menu items.
    Headings

    Select the Headings font family from the font selector and also select font size, font weight and line height of all Headings elements.
    Custom Fonts

    Upload new Fonts Family name, .ttf, .eot, svg, woff and custom css if needed.

    Sliding Bar

    Property Description
    Settings
    • Show Sliding Bar: Show / Hide the sliding bar.
    • Select Side Bar: Select the side bar for sliding bar content from all available widgets.
    • Coulmns Per Row: Number of horizontally aligned columns per one row.
    • Sliding Bar On Mobile: Turn on to display the sliding bar on mobiles.
    Styling
    • Icon Color: Choose the color of the button.
    • Hover Color: Choose the hover color of the button.
    • Icon Background color: Choose the background color of the button.
    • Icon Border color: Choose the border color of the button.
    • Background Top Color: Choose the top gradient color for sliding bar background.
    • Background Bottom Color: Choose the bottom gradient color for sliding bar background.
    • Headings Color: Choose solid color for the sliding bar heading font.
    • Heading Font Size: Choose the sliding bar heading font size.
    • Content Font Color: Choose solid color for the sliding bar content font color.
    • Content Font Size: Choose the sliding bar content font size.

    Blog options

    Property Description
    Blog listing
    • Blog Listing Style: Select your prefered blog posts listing style and they are:
      1. Large image.
      2. Small image.
      3. Masonry.
      4. Grid.
    • Featured Image Size: Select what size you prefere from the pre-defined sizes.
    • Blog Sidebar: Select how the layout will look (With right sidebar or left sidebar or witout sidebar).
    • Read More Text: Enter the text for read more button.
    • Pager Type: We have 3 pager types (Numeric + Navigation pager and Older Newer page or Load more pager).
    • Pager Position: control the pager position (Left, Right and Center position).
    • Show Media: Show / Hide post media (featured image or video or audio, etc...).
    • Show Post Icon: Show / Hide post icon above the post media.
    • Show Title: Show / Hide post title below the post media.
    • Show Category: Show / Hide post categories.
    • Show Date: Show / Hide post date before the post title.
    • Show By Author: Show / Hide post author.
    • Social Icons: Show / Hide social sharing icons.
    • Show Comments: Show / Hide post comments count.
    • Show Post Content: Show / Hide post summary.
    • Disable Post Content Format ? this option will disable the default wordpress summary content.
    • Max. number of words: The text length that appears in the posts list description.
    Single post
    • Single Post Sidebar: Select how the layout will look (With right sidebar or left sidebar or witout sidebar).
    • Show media: if enabled the post details page will show the post media.
    • Show Title: if enabled the post details page will show the title.
    • Show Post Icon: if enabled the post details page will show the Post Icon.
    • Show Date: if enabled the post details page will show the date.
    • Show By Author: if enabled the post details page will show the author.
    • Show Post Views: if enabled the post details page will show the post views.
    • Show Like Button: if enabled the post details page will show the like button.
    • Show Category: if enabled the post details page will show the post category.
    • Show Post Title: if enabled the post details page will show the post title.
    • Show Post Content: if enabled the post details page will show the post content.
    • Show Social Icons: Show / Hide social sharing icons.
    • Show Tags: if enabled the post details page will show the tags.
    • Show Post navigation: if enabled the post details page will show the next post, previous post links navigation.
    • Show Author Info Box: Show / Hide Author info box.
    • Show Comments: if enabled the post details page will show the post comments.
    • Show Related Posts: if enabled the post details page will show related posts at the end of the post.
    Share post
    • Show Social Sharing options: if enabled the post details page will show the share buttons.
    • Show Twitter: if enabled the post details page will show the Twitter button.
    • Show Facebook: if enabled the post details page will show the facebook button.
    • Show Google Plus: if enabled the post details page will show the Google Plus button.
    • Show LinkedIn: if enabled the post details page will show the LinkedIn button.
    • Show Pinterest: if enabled the post details page will show the Pinterest button.
    • There are other 8 social sharing links.
    Authors Page
    • This setting is for the Author's details page that can be found in this link: http://YOUR-DOMAIN/author/USER-NAME/, You can show hide author information, posts by author, and the way to display the author's posts (Large image, Small image, Grid, Masonry and Timeline) and even add text or HTML to be shown before and after All authors' pages.

      Notice: the text or HTML content before and after author's content will be applied on all authors pages not only one author's page.

    Sidebars

    Radica Comes with Unlimited SideBars Feature that enables you to add unlimited numbers of side bars in your wordpress site.

    to do this click on add sidebar, a new textbox will appear, then add your sidebar name and hit save changes button.

    Social icons

    Radica Comes with Unlimited SOCIAL ICONS Feature that enables you to add unlimited numbers of social icons in your wordpress site.

    to do this click on add Social Icon, a new icon select, textbox for title and link will appear, Also you can drag and drop social icons to re-order them as you wish, then hit save changes button.

    Import Demo

    Install Demo Data: By clicking this button a new message will appear to confirm if you want to import the demo data which will install some demo pages, posts, menus etc...

    Note: To Enable this feature you must install Radica Core Plugin first.

    Import / Export options

    Property Description
    Export Theme Options:
  • You will find a button to export all current theme options in an external file to be a backup in case you need to revert these settings back.
    		•
    Import Theme Options:
  • You will find a button to import theme options from another file.
    		•

    WooCommerce

    Property Description
    Products Listing
    • Show Side Bar: In the shop pages select to show / hide the shop sidebar.
    • Select Side Bar: Select the side bar for shop pages.
    • Sidebar Position: select sidebar position ( Right sidebar or left sidebar or witout sidebar) .
    • Products Columns: Number of products columns per row.
    Single Product
    • Show Side Bar ? In the product page select to show / hide the shop sidebar.
    • Sidebar Position: select sidebar position ( Right sidebar or left sidebar or witout sidebar) .
    Related Products
    • Related Products Per Page: How many related products will be shown in the single product page.
    • Related Products Columns: Number of Related Products columns per row.

    BBPress (Forums)

    • Show Welcome message: Show / Hide welcome message on the top of the forum index page.
    • Welcome Message: Type the text that appears in the welcome message on the top of the forum index page.

    Page Options

    Pages And Site Templates

    When you need to create a page just go to administration panel, and under Pages tab click Add New, then you will get this screen:



    1) Template

    As you see in the Page Template, you can see that there are 5 custom templates:

    • Default Template: For default page templates.
    • Full Page Template: For home pages.
    • Slider Revolution Blank Template: For Slider Revolution Page Template.

    2) Page Layout Mode

    As you see in the Page Layout Mode, you can see that there are 4 Layout Modes:

    1. Inherit From Theme: This is to take the layout style from the main theme options settings.
    2. Full Width: This is for pages that has no sidebar, and takes the full content container width.
    3. Full Page: This is for pages that takes the full page width not centered content.
    4. Left Bar: Content with left sidebar pages.
    5. Right Bar: Content with left sidebar pages.

    3) Page Menu

    As you see in the Select Menu, you can Choose a different menu for this page only.

    Page Editor:



    ----- When you select BACKEND EDITOR, this screen will appear:

    Custom Page Settings

    Notic: These options are applied individually on the page you are editing only, so this can give the page a custom options such as hiding header, footer, customizing the page title for this page only. As a result for that, you can build all your site pages and posts with different styles.

    Option Description
    General Settings Layout width, layout mode, custom menu etc...
    Top Bar Show / Hide Top Bar, choose custom colors, backgrounds, etc...
    Header Show / Hide header, set different header style and choose custom colors, backgrounds, etc...
    Page Title you can hide page title, add custom background image, custom icon, set different page title style, set custom height, custon colors and also set custom video background, and too many other options.
    Footer Show / Hide Footer, set different footer style.

    Create Or Modify One Page

    To Create a One Page you have two important tasks :

    1) Menu configuration

    • Go to Appearance -> Menus
    • select the one page menu and hit the button select as shown in the next image.


    • Create menu items as shown in the next image with Title and link that starts with # plus the name (any name you want but be careful to make it one word cause we'l use it as an ID in next steps)


    • After Adding the menu items click save menu.

    Important: All links you created in this menu we'll create a Rows in the page with number equals to these menu items number.




    2) Page configuration

    • Go to Pages -> Add New
    • From the Right tools go to page Attributes then open Template dropdown menu and select One-Page Template.
    • Go to the page content then switch to BACKEND EDITOR.
    • Add Element -> Select Row.
    • Edit Row and go to ID and enter the first menu item link without the # to be home only and change other Row Properties as you need.
    • Repeat this step according to the other menu items you have created.
    • Publish the Page.
    • Enjoy!

    Custom Shortcodes

    Radica comes with 30 Main custom shortcodes + the default shortcodes from Visual composer.

    to see how to use the default visual composer shortcodes just go to visual composer documentation and follow the steps.

    Now we'll see how to use the custom shortcodes

    Add New Row

    Row Shortcode is default visual composer shortcode but we made some modifications to suit our new design, let's see how to configure it:

    When you click add new element, Click on Row then a new element will be now seen in the content area.

    Let's Explain the Row Properties in visual composer: As you see the following image , the numbers on each item describes what it do.

    Edit the row properties.
Copy row.
Delete row.
Row columns.
Add new element in the row
Edit existing column in this row.
Delete existing column in this row.
Add new element in the row

    1) Gereral Row Properties




    Select the padding values Top and Bottom for this row.
If Checked the row will take full width of the container.
If Checked the row content will be stretched to full width not centered in the page container.
if Checked the row columns will have the same height.
If Checked the row will take the full page height.
Add Extra class name to style this row individually.
Choose Row Horizontal alignment.
Row layer order (z-index) Ex: set this row z-index "2" and the below row "1", so this row will be above the below one.
Set the row shadow.
Add new css class to easily customize this row with css code.
Assign ID to this Row, This will be required in ONE-PAGE Creation.


    2) Background

    There are 4 Values for the Row Background:

    • None -> Disable the row background
    • Color -> Only Add background color for the row.
    • Image -> Add background image with options
    • Video -> Add video background with options

    If you choosed Image, this option will appear: 

    Row Background Type : Image.
Row Background Color.
Row Background Image.
Row Background repeat options (No repeat, Repeat vertically or horizontally).
Choose if you need the background will be fixed or scroll with mousewheel.
Choose the background position.
Choose the background size (Cover - Contain - 100%).
Animate the background horizontally or vertically.
Enable Row Background Image Parallax Effect.
Create Layer over the background image.
If Overlay is Yes, The background color of the overlay layer and transparency level, Value from 0 to 1. 
Skew the background with custom styles.


    If you choosed Video, this option will appear: 

    Row Background Type : Video.
Row Background Color.
Video Type: from youtue or upload a video.
Row Background video Poster.
Row Background MP4 video.
Row Background WEBM video.
Row Background OGV video.
Loop YouTube video.
Create Layer over the video.
The background color of the overlay layer.

    Heading

    When you click add new Heading, a popup window will appear (like the next screenshot), check the next image: 



    Choose Heading Style from 3 predefined styles.
Heading Alignment (Left - Center - Right).
Heading Margin Top and Bottom in pixels.
Heading Title Text.
Heading Tag (h1,h2,h3,h4,h5,h6).
Heading Font Size in pixels.
Heading Line height in pixels.
Heading letter spacing in pixels.
Heading Font weight.
Heading Font Family from Google Fonts.
Heading Animation.
Add Extra class name to style this Heading individually.

    Testimonials

    When you click add new Testimonials a new window with Testimonials Settings will appear to choose the style, carousel and other options, then save changes.

    Inside the testimonials block you will see a "+" button, click to Add element and a new popup will appear with only one child element in it ( Testimonial BlockQuote ), click it and the properties will appear to choose the Author name, posttion,image,etc...

    Icon Box

    When you click add new icon box, a popup window will appear and have some properties that can be:

    1) Box
    1. Box Style: Select box style from available 4 box styles.
    2. Shape: Select box shape from available 3 box shapes.
    3. Box Align: Text align inside the icon box.
    4. Use Icon ?: If checked a new tab with icons select will be shown and this will Show an icon with your Icon box element.
    5. Background Color: Choose Box background color from colorpicker.
    6. Border Color: Choose Box Border color from colorpicker.
    7. Hover - BG Color: Choose Box Hover background color from colorpicker.
    8. Hover - Border Color: Choose Box Hover Border color from colorpicker.
    2) Title
    1. Title: Enter text for box title.
    2. Link: Enter link for box title.
    3. Title Tag: Select title tag.
    4. Color: Choose a color for box title from color picker.
    5. Border Bottom Color: Choose a color for box title bottom border from color picker.
    6. Hover - Color: Choose a color for box title when hover on the main box from color picker.
    7. Hover - Border Bottom Color: Choose a color for box title bottom border when hover on the main box from color picker.
    3) Sub Title
    1. Sub Title: Enter text for box title.
    2. Title Tag: Select Sub title tag.
    3. Color: Choose a color for box Sub title from color picker.
    4. Border Bottom Color: Choose a color for box Sub title bottom border from color picker.
    5. Hover - Color: Choose a color for box Sub title when hover on the main box from color picker.
    6. Hover - Border Bottom Color: Choose a color for box Sub title bottom border when hover on the main box from color picker.
    4) Content
    1. Content: Enter text for box Content.
    2. Hover - Color: Choose a color for box Sub Content when hover on the main box from color picker.
    5) Icon
    • Icon Type: Select your icon type from 3 types.
    • Icon Library: Select your icon from icon Library.
    • Icon: Select your icon from icons chooser.
    • Color: Choose a color for the icon from color picker.
    • Background Color: Choose a Background color for the icon from color picker.
    • Border Color: Choose a Border color for the icon from color picker.
    • Border Width: Enter border width in PX.
    • Hover - Color: Choose a color for the icon when hover on the main box from color picker.
    • Hover - Background Color: Choose a Background color for the icon when hover on the main box from color picker.
    • Hover - Border Color: Choose a Border color for the icon when hover on the main box from color picker.
    • Hover Style: Choose hover style from 3 available styles or you can disable hover.
    6) More Link
    1. Show Read More Link ? Show / Hide Read More Link in the icon box element.
    2. Read More Text Enter text for read more box content.
    3. Style: Select read more button style from available 3 styles.
    4. Alignment: Horizontally align the read more button inside the icon box.
    5. Color: Choose a color for read more font color.
    6. Background Color: Choose a Background color for read more link.
    7. Border Color: Choose a Border color for read more link.
    8. Hover - Color: Choose a color for read more font color when hover on the main box.
    9. Hover - Background Color: Choose a Background color for read more link when hover on the main box.
    10. Hover - Border Color: Choose a Border color for read more link when hover on the main box.
    7) General
    1. CSS Animation: Select animation type, delay and duration.
    2. Extra class name: Style particular content element differently - add a class name and refer to it in custom CSS.

    Content Box

    1. Title: Enter feature title.
    2. Sub Title: Enter feature sub title.
    3. Link: Enter feature link.
    4. Image: Upload or select an existing Feature image.
    5. Content: Enter feature content.
    6. Feature Style: Select the feature style from 3 predefined styles available.
    7. Align: Horizontally Align feature title, Image,content,etc...
    8. Image Shape: Select Feature image shape from 3 available shapes.
    9. Background Color: Choose a Background color for feature box.
    10. Title Color: Choose a solid color for title.
    11. Sub Title Color: Choose a solid color for feature sub title.
    12. Padding: Enter Padding Top, Right, Bottom and left values in PX.
    13. Margin: Enter Margin Top, Right, Bottom and left values in PX.
    14. Show Read More Link ? Show / Hide Read more link

    Google Map

    1. Map Type: Select the map type from 4 available types.
    2. Zoom: Select the zoom value for google map.
    3. Height: Select the height of the map.
    4. Disable Mouse Wheel: If selected This will disable mouse scroll zoom in on the google map.
    5. API Key: Enter yor google map API Key.
    6. Extra class name: Style particular content element differently - add a class name and refer to it in custom CSS.
    7. Latitude: The Latitude value.
    8. Longitude: The Longitude value.
    9. Address: Type here more details about the location on google map.
    10. Icon: Upload or type Image URL for the map marker on google map.

    Counter

    When you click add new Counter, a popup window will appear and have some properties that can be:

    1) General
    1. Box Shape: Select box shape from available 3 box shapes.
    2. Alignment: Text align inside the Counter box.
    3. Use Icon ?: If checked a new tab with icons select will be shown and this will Show an icon with your Icon box element.
    4. Background Color: Choose Counter Box background color from colorpicker.
    5. Border Width: Enter Counter Box Border widht in PX.
    6. Border Color: Choose Counter Box Border color from colorpicker.
    7. Border Style: Choose Counter Box Border style.
    8. Hover - BG Color: Choose Counter Box Hover background color from colorpicker.
    9. Hover - Border Color: Choose Counter Box Hover Border color from colorpicker.
    10. CSS Animation: Select animation type, delay and duration.
    11. Extra class name: Style particular content element differently - add a class name and refer to it in custom CSS.
    2) Content
    1. Title: Enter text for item title.
    2. Title Color: select title color from color chooser.
    3. Title Background Color: select title background color from color chooser.
    4. Font Size: Type title font size in px.
    5. Font Weight: Select title font weight.
    6. Hover - Color: Choose title color When Hover on Counter Box from color picker.
    7. Hover - Background Color: Choose title background color When Hover on Counter Box from color picker.
    8. Content: Enter item description text.
    9. Hover - Color: Choose content color When Hover on Counter Box from color picker.
    3) Number
    1. Theme: Select Counter Numbers Theme from 6 available themes.
    2. From: start number.
    3. To: end number.
    4. Start After: Enter the delay time that the numbers begin counting after it ( in milliseconds ).
    5. Text Before Number: Enter text that will be shown before the number.
    6. Text After Number: Enter text that will be shown after the number.
    7. Color: select numbers color from color chooser.
    8. Hover - Color: select numbers color When Hover on Counter Box from color chooser.
    9. Font Size: Type numbers font size in px.
    10. Font Weight: Select Numbers font weight.
    4) Icon
    1. Icon Library: Select your icon from 6 icons Libraries.
    2. Icon: Select your icon from icons chooser.
    3. Icon Color: Select your icon color from color chooser.
    4. Hover - Color: Select icon hover color When Hover on Counter Box from color chooser.
    5. Font Size: Type icon size in px.
    4) More Link
    1. Show Read More Link ?: Show / Hide Read more link.

    Dividers

    When you click add new Divider, a popup window will appear and have some properties that can be:

    • Divider Style: Select the divider style from 10 available styles.
    • Color: Choose a solid color for the divider line.
    • Use Icon ? If checked a new tab with icons select will be shown and this will Show an icon with your counter element.
    • CSS Animation: Select animation type, delay and duration.
    • Extra class name: Style particular content element differently - add a class name and refer to it in custom CSS.

    Breaking News

    1. Title: Enter the title for this widget.
    2. Category: Select the posts category that will be shown.
    3. Extra class name: Style particular content element differently - add a class name and refer to it in custom CSS.

    Blog Shortcode

    1. Category: Select the posts category that will be shown.
    2. Blog Style: Select how the blog listing style would be : (Large Image, Small Image, Grid, Masonry and TimeLine).
    3. Max. Number of words: Enter the maximum number of words to be shown in the blog shortcode listing item.
    4. Image Size: Select the featured image size.
    5. Posts Per Page: Enter the posts per page to be shown in the blog shortcode listing.
    6. Pager Type: Select the pager type (Numeric, Older-Newer and Load More).
    7. Pager Style: Select the pager style from the 5 predefined styles.
    8. Pager Position: Select the pager position Horizontally.
    9. Extra class name: Style particular content element differently - add a class name and refer to it in custom CSS.

    Recent Posts

    1. Style: Select how the Recent Posts style would be from available 5 styles.
    2. Category: Select the posts category that will be shown.
    3. Carousel ?: Show the recent posts in carousel.
    4. Image Size: Select the featured image size.
    5. Number Of Posts: Enter the posts per page to be shown in the Recent Posts listing.
    6. Max. Number of words: Enter the maximum number of words to be shown in the Recent Posts listing.
    7. Non Carousel Columns: Number of Coulmns in case not Carousel view.
    8. Extra class name: Style particular content element differently - add a class name and refer to it in custom CSS.

    codecanyon Plugins Documentations

    Plugin Name Documentation URL
    WP Backery Page Builder for WordPress LINK
    Slider Revolution Responsive WordPress Plugin LINK
    RAYS Grid WordPress Plugin LINK