© 2022 by Frenify

Arlo - Portfolio WordPress Theme

Introduction

First of all, Thank you so much for purchasing this template and for being our loyal customer. You are awesome!

This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly.

WordPress General

A working version of WordPress.org must be installed before you can install the Arlo. If you need help installing WordPress, follow the WordPress Codex

Before using any theme, it is important to understand how native WordPress functions work, and how to establish ownership of your new site.

WordPress links you will find useful:

Theme Installation

To use Arlo WordPress Theme, you must be running WordPress 5.0 or higher, PHP 5.6 or higher, Elementor Page Builder 3.6.0 or higher and mysql 5 or higher version. Below is a checklist of items your host needs to comply with to ensure proper Arlo operation:

  • Ensure your web host has the minimum requirements to run WordPress.
  • Make sure the latest version of WordPress is up and running.
  • If necessary, you can download the latest release of WordPress from the official WordPress website.

There are two methods to install the theme. If the normal installation method [a] is not supported by your web host, you will have to use the alternate option [b].

a) Normal Installation


  1. Login to WordPress Admin and browse to Appearance > Themes.
  2. Click on the Add New Theme (or "Install Themes" tab for older versions) and click Upload.
  3. Browse your computer to select "arlo.zip" (it's in the zip file you downloaded from ThemeForest). Click "Install Now" button.
  4. Once it's uploaded, click the Activate link.

b) FTP Installation (alternate method)


  1. Use your FTP software to browse to wp-content/themes folder.
  2. Upload the arlo folder.
  3. Once it's uploaded, go to your WordPress Admin, browse to Appearance > Themes.
  4. Click the Activate link.

Important:   After activation, you will be presented with arlo-core plugin that you should activate. Do not forget to activate it or not all of the theme features will be available.
Note:   If you are migration from a theme which used the native featured images functionality of WordPress. Please use the Regenerate Thumbnails plugin to resize all the thumbnails. Click the link above and download the free plugin, and read through the steps it contains, it has all the information you need. Run it from Tools > Regenerate Thumbnails.

Demo Content Import

Before we start to import a demo content we have do following instructions:

  1. Set up PHP Configuration limits

    Issues you may encounter, such as demo content fails when importing and similar issues, are generally related to excessively low PHP configuration limit settings. You can either increase these limits on your own, or contact your web host and ask to have the limits increased to the following minimums:

    • memory_limit - 96M
    • max_input_vars - 3000
    • max_execution_time - 600
    • post_max_size - 32M
    • upload_max_filesize - 32M
    • allow_url_fopen - ON

  2. Verify your PHP limits

    You can check them by installing the WordPress phpinfo() plugin and checking Settings. The first column refers to your installation value, and the second column refers to the limits of your host. The latter values are often lower if you have selected a cheaper hosting package.


Now we are ready to import a demo content

Important:   Please do not import content on a WordPress installation that already has a lot of content. Or the very least, make a backup first. A catastrophic mess can be created.
Note:  In some cases you would like to remove demo content. You can remove all posts, pages, etc using WordPress Reset plugin. Be aware that this plugin resets the WordPress database back to it's defaults. Deletes all customizations and content. It does not modify files only resets the database.

There are two methods to import a demo content. If you have SSL Certificate on your website you can use method [1] One Click Demo Importer (auto), but if you have not installed SSL Certificate or you couldn't import a demo content via method [1] you can use method [2] with XML File (manually).

Let's take a look at both methods.


1. One Click Demo Importer [auto / video tutorial]



2. With XML file [manually / video tutorial]




Method 2. [Instructions]


We highly recommend against using this method in production. Please only use on an extra copy for testing or experimenting. This method most likely will fail on shared web hosts. Uncheck "import attachments" option if it fails and try again.


  1. Install and Activate All Required Plugins



  2. Install Contact Form 7 (optional: if you want to import contact form)



  3. Install WooCommerce (optional: if you want to import products with their images)



  4. Go to Tools > Import > WordPress, install WordPress Importer and run it.



  5. Select necessary XML file for demo(located in the main zip file in "xml" folder) and upload XML file into the section where said: Choose a XML file for content import and click Import Demo Data.

    For example: For Personal - Bona Green Demo you must select "personal - Bona Green.xml" XML file.







  6. Please be patience as it will take quite some time. Do not interrupt it.

  7. Once it's done, go to Appearance > Menus > Manage Locations. Select "Main Menu" next to "Main Navigation".



  8. Go to Edit Menus on the same page, select "Main Menu (Main Navigation)" from menus to edit and click Select. Click to expand Features and select Mega Menu for Links under Mega Menu.



  9. Setup your homepage to "Main Homepage" in Settings > Reading > Your homepage displays and select A static page and choose Home Modern as homepage



  10. All Done.


Adding Portfolio Posts

  1. Portfolio Posts -> Add New
  2. Insert Title
  3. Insert Some Description (optional)
  4. Page Options:
    • Footer Options - You could enable/disable footer for a single post page.
    • Page Spacing - Set top and bottom space options.
  5. Attach your post to any category (Add some categories first, if you don't have any)
  6. Set Featured Image (Required) - This is used as Coverage of Post everywhere in the theme. (Suggested Minimal Image Size: 2000x2000)
  7. Publish :
    • Visibility (optional) - Change that option to Password protected if you want to hide your post from public
    • Click the "Publish" button

Portfolio Page Setup

Before setup portfolio page, we suggest you to add some portfolio posts.

To add portfolio page follow below instructions:

  1. Pages > Add New
  2. Insert Title
  3. (required) Choose "Portfolio Page" from Template, inside "Page Attributes" box.
  4. Page Options - Change these options as you wish
  5. Add Featured Image (optional)
  6. Click the "Publish" button

See below screenshot:

Setup Homepage

Creating home page is a simple process. Homepage is made with the help of our "FREL ELEMENTS" and "Elementor Page Builder" elements. Add any element to the page as you wish.

  1. Pages -> Add New
  2. Insert Title
  3. Switch to Elementor Page Builder
  4. Drag and Drop any Elements from FREL ELEMENTS or Elementor Elements
  5. Page Options - make changes as you wish
  6. Click the "Publish" button

After you create homepage:

  1. Settings -> Reading -> Front page displays
  2. Choose a "Static Page"
  3. set newly created "Home" page.
  4. Click "Save Changes" button

Blog Page and Adding Posts


>> Set Blog Page


  1. Pages > Add New
  2. Insert Title
  3. (Required) Choose "Blog Page" from Template inside "Page Attributes" box.
  4. Page Options - Change these options as you wish
  5. Advanced Options - Change these options as you wish
  6. Add Featured Image (optional)
  7. Click the "Publish" button

>> Adding Posts


Adding a new post is the same way as default WordPress installations, however, there are extra options that might need explaining.


>> Featured Image


While the theme can function without featured images, it's highly recommended that you add a featured image to each post. This not only makes your site/blog more lively but also improves user experience.

To set the featured image, use the WordPress normal method.



>> Recommended Image Size (for Blog Posts)


Image size (dimensions) will depend on what type of layout you're using throughout your WordPress installation or per individual post basis. This image will not only be used on the post, but also on the category listing pages.

Compatible with all layouts and default slider: 2000x2000 (width x height)


Author Avatar

The theme uses Gravatar to display users avatars . to craete or change your Gravatar :

If you have never setup a Gravatar account:


  1. Register / login to Gravatar. Upon registering, use the same email address that is associated with your WordPress User Profile.
  2. Upload your photo and associate it with that specific email address.

If you already registered at gravatar.com, follow these steps:


  1. Click on "My Gravatars" .
  2. Click on "Add a New Email" .
  3. Then, you'll need to click on "Add a New Image" .
  4. Upload an image.
  5. Then select the email address, and then select your image from bottom. Now it's associated with that email address. Click Save.
  6. It will take about 5-10 minutes to propagate on the internet, and then will appear on site.

Setup Menu

If you have imported demo content follow [a]. Otherwise, follow [b] to create a new menu.

a. Existing Menu


  1. Go to to Appearance > Menus.
  2. In the "Manage Locations" area, under Main Navigation, select Main Menu. Click Save.

b. Creating a New Menu


  1. Go to to Appearance > Menus.
  2. Click on the + button or the create a new menu link. Enter a menu name and click Create Menu.
  3. Using the Custom Links and Pages boxes at the left, add items to the menu and drag/drop to arrange them.
  4. (optional) If you would like to use this menu in navigation, in the "Manage Locations" area, under Main Navigation, select your newly created menu. Click Save.
  5. Click Save Menu and that is all.

Mobile Menu either setup in above way. You just need to choose proper location.  There are two locations "Main Menu" and "Mobile Menu". That's it.

Widgets

You can use any shortcodes in widgets. Just use text widget and put shortcode into it. Besides theme custom widget which may helpful for you. Listed below:

  • Frenify Brochure
  • Frenify Business Hours
  • Frenify Estimate
  • Frenify Subscribers

Theme Options

Theme Options will help you to manage all functionalities of the theme. Here you can see that each tab has own options to change something.

Let's discover them in details.

Just open your dashbord, click on Arlo, click on Theme Options (see below screenshot)



General



Dark Mode


Now Dark mode is disabled. It means your text color is dark, background color is light. Background color can be changed by the option what goes next after the dark mode (Light Mode Background Color). It means that color will be used for background color when dark mode is disabled.



As you can see when dark mode is enabled background color option for light mode was removed and appeared Dark Mode Background Color instead it. Now you can set background color by changing its value.

Background Lines


Now Background Lines is disabled. It means now background lines are not setted on front-end.



Let's try to enable these lines.



As you can see now appeared new option named Background Lines Color. With it you can change these lines color.

Let's see the result on front-end after enabling the lines. (see below screenshot). Background Lines Color value is now rgba(0, 0, 0, 0.05)

Preloader


You can enable or disable preloader from your front-end and change its skin with Preloader Skin



Let's see it on front-end (see below gif)

Pagination Text


With it you can manage pagination text on front-end.



Let's see how it will look on the front-end. (see below screenshot)



Let's try to disable this option and see on the front-end

All Box Shadows


You can disable all box shadows from all elements on your website by one click with this option.



Blog Title


This title will appear as title for blog page when you setted Your latest posts as homepage in Settings > Reading > Your homepage displays.



How it appears on the front-end. (see below screenshot)

Search Result Page Layout


With this option you can choose layout for result page.



How it will look on the front-end.

Boxed (default)



Full (with image)



Masonry (with image

Developer Mode


With this option you can setup right demo button.



Let's try to enable this option and see how it will look on the front-end (see below screenshot)



After enabling this option will appear some options (below this option) to manage with it (see below screenshot)



  • Demos URL - you can enter here your URL
  • Demos Tooltip - you can enter here text that will look on hover on this button (see below screenshot)
  • Price - second button's text (see previous screenshot)
  • Purchase URL - second button's URL
  • Purchase Tooltip - you can enter here text that will look on hover on this button (see below screenshot)
  • Tooltip Background Color - change tooltip background color (box on hover)
  • Tooltip Text Color - change tooltip text color (box on hover)

Main Colors



Heading Color


All headings' color can be changed with this option (except Elementor Headings)

Primary Color


This color was used for some regular and hover colors

Secondary Color


This color was used for some links and other items' colors

Closer Color


This color was used for header closer background when Sidebar navigation layout was used as navigation.



Let's see how it will look on the front-end (see below screenshot)





Desktop Navigation



Navigation Variations


Perhaps the most remarkable and useful thing in the theme.



Let's see all of these variations

1. Sidebar

Sidebar navigation variation has a lot of options, like 'Global Navigation Skin', 'Search field' and more...



  • Global Navigation Skin - navigation skin (only when sidebar is activated) for all pages, except 404, search and archive pages;

    Why it named global?

    Because it can change navigation skin globally everywhere. The theme has also local global navigation.

  • Navigation Skin For 404/Search/Archive Pages - navigation skin for 404, search and archive pages.
  • Search Field - you can enable or disable search field from sidebar navigation
  • Navigation Lines - you can enable or disable menu items' lines from sidebar navigation

    (see below screenshot)



  • Navigation Open Default - you can enable or disable navigation open by default.

    If disable this option, the front-end will look like this:



  • Content Alignment - you can manage content alignment for sidebar navigation. Content is: logo, menu items, search bar.
  • Custom Skin Options - here you can change background color of sidebar, menu links regular and hover color for Custom Skin Navigation.




2. One Line

One Line navigation variation has a lot of options, like 'Structure of the Navigation', 'Middle Logo' and more...







As you can see there are more options than the sidebar navigation.

Let's see these options in details

  • Structure of the Navigation - you can organize the navigation how you want to appear on your website. You can drag and drop the elements from these columns, reorder them and drop into disable section to disable them.
  • Middle Logo in Navigation Menu - if you have logo and menu in enabled columns, this option can set logo into middle of the menu as menu item.

    See below screenshot



    Please, make sure that menu and logo are not in "disabled" column to work this option.

  • Global Navigation Skin - navigation skin for all pages globally.

    It has 7 variations (skins):

    1. Dark - dark Background, light text
    2. Light - light Background, dark text
    3. Custom - this option include many options to manage all colors like:
      • Navigation Background
      • Bottom Line Color
      • Background Color
      • Menu Links Regular Color
      • Menu Links Hover Color
      • Helper Color
    4. NoneDark - no background, dark text
    5. NoneLight - no background, light text
    6. TransDark - transparency dark background, light text
    7. TransLight - transparency light background, dark text
  • Navigation Width - you can set it as full width or contained width.

    Full option has one more option named Padding Left & Right to manage padding from left and right for this navigation in order to avoid stick to borders.
    Contained has also one more option named Container max width. The theme has default container with max width equals 1170px and wide screen with max width equals 1400px. With this option you can change its value for this navigation (not for all containers).

  • Padding Left & Right - see Navigation Width option
  • Container max width - see Navigation Width option
  • Navigation Position - this option have two values

    Relative - when this option is selected, it will mean that the navigation has a certain height and the subsequent elements (that immediately follow the navigation) will follow it by sensing the height of the navigation.
    Note: relative doesn't work when for navigation skin is selected TransDark, TransLight, NoneDark or NoneLight.

    Absolute - when this option is selected, it will mean that the nav has a certain height and subsequent elements (that immediately follow the nav) following it will not feel the nav's height and will start building from the navigation's start border leaving their some height behind the nav.

  • Navigation Bottom Line - with this option you can enable or disable the bottom line of the navigation
  • Custom Skin Options - these options have many options to manage colors when selected Custom skin navigation.

    See Global Navigation Skin option 3rd variation


Let's see One Line Navigation's Options in actions





3. Two Lines

Two Lines navigation variation has a lot of options, like 'Extra Information', 'Structure of the Navigation', 'Middle Logo' and more...









Let's see these options in details

  • Extra Information - you can add extra information, like tel number, email and etc.

    This information can be added into structure of the Navigation

  • Structure of the Navigation - you can organize the navigation how you want to appear on your website. You can drag and drop the elements from these columns, reorder them and drop into disable section to disable them.

    There are available 2 columns and 3 rows: top_left, top_center, top_right, bottom_left, bottom_center and bottom_right
    And also has disabled row. Disabled row is for disabled items and not visible on the front-end.

  • Middle Logo in Navigation Menu - if you have logo in enabled columns, this option can set logo into middle of the menu as menu item.

    See below screenshot



    Please, make sure that logo is not in "disabled" column to work this option.

  • Global Navigation Skin - navigation skin for all pages globally

    It has 7 variations (skins):

    1. Dark - dark Background, light text
    2. Light - light Background, dark text
    3. Custom - this option include many options to manage all colors like:
      • Top Bar Background Color
      • Menu Background Color
      • Bottom Line Color
      • Menu Links Regular Color
      • Menu Links Hover Color
      • Helper Color
    4. NoneDark - no background, dark text
    5. NoneLight - no background, light text
    6. TransDark - transparency dark background, light text
    7. TransLight - transparency light background, dark text
  • Menu Position - you can manage menu position in second line
    • Left
    • Center
    • Right
  • Navigation Width - you can set it as full width or contained width.

    Full option has one more option named Padding Left & Right to manage padding from left and right for this navigation in order to avoid stick to borders.
    Contained has also one more option named Container max width. The theme has default container with max width equals 1170px and wide screen with max width equals 1400px. With this option you can change its value for this navigation (not for all containers).

  • Padding Left & Right - see Navigation Width option
  • Container max width - see Navigation Width option
  • Navigation Position - this option have two values

    Relative - when this option is selected, it will mean that the navigation has a certain height and the subsequent elements (that immediately follow the navigation) will follow it by sensing the height of the navigation.
    Note: relative doesn't work when for navigation skin is selected TransDark, TransLight, NoneDark or NoneLight.

    Absolute - when this option is selected, it will mean that the nav has a certain height and subsequent elements (that immediately follow the nav) following it will not feel the nav's height and will start building from the navigation's start border leaving their some height behind the nav.

  • Navigation Bottom Line - with this option you can enable or disable the bottom line of the navigation
  • Custom Skin Options - these options have many options to manage colors when selected Custom skin navigation.

    See Global Navigation Skin option 3rd variation


Let's see Two Lines Navigation's Options in actions




4. Three Lines

Three Lines navigation variation has a lot of options, like 'Extra Information', 'Structure of the Navigation', 'Middle Logo' and more...







Let's see these options in details

  • Extra Information - you can add extra information, like tel number, email and etc.

    This information can be added into structure of the Navigation

  • Structure of the Navigation - you can organize the navigation how you want to appear on your website. You can drag and drop the elements from these columns, reorder them and drop into disable section to disable them.

    There are available 3 columns and 3 rows: top_left, top_center, top_right, middle_left, middle_center, middle_right, bottom_left, bottom_center and bottom_right
    And also has disabled row. Disabled row is for disabled items and not visible on the front-end.

  • Middle Logo in Navigation Menu - if you have logo in enabled columns, this option can set logo into middle of the menu as menu item.

    See below screenshot



    Please, make sure that logo is not in "disabled" column to work this option.

  • Global Navigation Skin - navigation skin for all pages globally

    It has 7 variations (skins):

    1. Dark - dark Background, light text
    2. Light - light Background, dark text
    3. Custom - this option include many options to manage all colors like:
      • Top Section Background Color
      • Middle Section Background Color
      • Bottom Section Background Color
      • Bottom Line Color
      • Menu Links Regular Color
      • Menu Links Hover Color
      • Helper Color
    4. NoneDark - no background, dark text
    5. NoneLight - no background, light text
    6. TransDark - transparency dark background, light text
    7. TransLight - transparency light background, dark text
  • Menu Position - you can manage menu position in third line
    • Left
    • Center
    • Right
  • Navigation Width - you can set it as full width or contained width.

    Full option has one more option named Padding Left & Right to manage padding from left and right for this navigation in order to avoid stick to borders.
    Contained has also one more option named Container max width. The theme has default container with max width equals 1170px and wide screen with max width equals 1400px. With this option you can change its value for this navigation (not for all containers).

  • Padding Left & Right - see Navigation Width option
  • Container max width - see Navigation Width option
  • Navigation Position - this option have two values

    Relative - when this option is selected, it will mean that the navigation has a certain height and the subsequent elements (that immediately follow the navigation) will follow it by sensing the height of the navigation.
    Note: relative doesn't work when for navigation skin is selected TransDark, TransLight, NoneDark or NoneLight.

    Absolute - when this option is selected, it will mean that the nav has a certain height and subsequent elements (that immediately follow the nav) following it will not feel the nav's height and will start building from the navigation's start border leaving their some height behind the nav.

  • Navigation Bottom Line - with this option you can enable or disable the bottom line of the navigation
  • Custom Skin Options - these options have many options to manage colors when selected Custom skin navigation.

    See Global Navigation Skin option 3rd variation


Let's see Three Lines Navigation's Options in actions





Megamenu & Sticky



Megamenu


Megamenu is available with only One Line, Two Lines and Three Lines Navigations


  • MegaMenu Columns Number - you can change here columns number of mega menu
  • Submenu Skin - you can change megamenu skin


Sticky Menu




  • Sticky Navigation - you can enable or disable sticky navigation
  • Sticky Navigation opens after scrolling the page to this px - with this option you can set appearance of sticky navigation after scrolling the page to this point.
  • Background Color - background color of the sticky navigation
  • Bottom Line Color - bottom line color of the sticky navigation
  • Menu Links Regular Color - menu items regular color of the sticky navigation
  • Menu Links Hover Color - menu items hover color of the sticky navigation



Mobile Navigation



Autocollapse Menu on Click


With this option you can enable autocollapse after clicking on menu item in mobile menu. It is comfortable, when your links are anchors and located in one page.

Menu Open Default


It is a handy feature, if you don't want to open mobile menu by default.

Colors


It includes some options:

  • Background Color - mobile menu's background color
  • Hamburger Color - hamburger menu line's color
  • Dropdown Background Color - dropdown background color (it will appear after clicking on hamburger menu)
  • Dropdown Link Regular Color - menu item regular color
  • Dropdown Link Hover & Active Color - menu item hover and active color

Trigger Menu



Desktop Trigger Switcher




It is a trigger menu switcher. If it is disabled, it will means that the trigger menu will not be visible on the front-end.

It is available only with One Line, Two Lines and Three Lines Navigations



Add Trigger into your enabled column in the structure of the navigation.



When you click on this trigger on the front-end, popup menu will appear with smooth animation.

You have to create and attach the menu for this popup in Appearance > Menus.

Step 1: Create a menu or select available menu



Step 2: Attach this menu to trigger menu in Display location

Trigger Icon


Whit below options you can change the trigger icon as you wish



  • Line Height - you can change trigger icon line's height
  • Layout - you can choose any layout for your trigger icon
  • Animation - you can choose any animation for your trigger icon (on click animation)
  • Background Type - it can change trigger background. It has two 2 options for choose:
    • None - no background
    • Color - color background. After choosing this option you can change its round type and color
  • Line Color - you can change trigger line color

Trigger Popup


With below options (20+ options) you can customize popup menu as you wish. You can create an almost infinite number of combinations with them.







Let's see these options in details

  • Menu Horizontal Alignment - horizontal alignment of the menu in its container. In this case alignment of the menu will set in its container's max width.
    Container width and Menu width can be changed in below options
  • Menu Vertical Alignment - vertical alignment of the menu in the screen of your desktop.
  • Menu Text Alignment - text alignment of the menu items in its width (menu width)
  • Description Position - position of description in menu items.
    Wow, it is amazing but how can I change/add this description into menu items? - Here
  • Menu Animation - menu item animation. There are Simple and directional (top/bottom, bottom/bottom and etc.) animations.
    Simple (animation) is just change menu item on hover without animation. From color to stroke or etc. depending on Menu Stroke option's value
    Directional (animations) are changing items on hover with transform animation. First value - disappearing animation of the item, second value - appearing animation of the item.
    For example, if you chose Top / Bottom it will looks like that:


  • Menu Stroke Width (px) - you can change stroke width here
  • Container width (px) - you can set container width for menu. It will means that the menu will be inside this container, but there has also menu width.
  • Menu Link Typography - menu item typography
  • Menu Link Transform - menu item's text transform
    • Capitalize - e.g.: Home Slider (capitalized text)
    • Lowercase - e.g.: home slider (lowercased text)
    • Uppercase - e.g.: HOME SLIDER (uppercased text)
    • None - e.g.: Home Slider (without any changes - original text)
  • Menu Background Color - popup background color
  • Menu Link Regular Color - menu item regular color
  • Menu Link Hover Color - menu item hover color
  • Menu Description Regular Color - menu description regular color
  • Menu Description Hover Color - menu description hover color
  • Menu Count Color - menu count color
  • Submenu width (px) - submenu width for all menu items' submenus
  • Submenu Link Typography - submenu item typography
  • Submenu Background Color - submenu background color
  • Submenu Link Regular Color - submenu item color

Extra Buttons



Extra Button #1


Extra Buttons will use in One Line, Two Lines or Three Lines Navigations



It has a several options to manage it.

  • Extra Button #1 - enable or disable extra button #1 from the front-end
  • Text - button text
  • URL - button URL
  • Target - button target
  • Background color - button background color
  • Text color - button text color
  • Border - button border (top width, right width, bottom width, left width, style and color)
  • Border Radisu - button border radius

If you want to use Extra Button #1, please make sure that:
  • your button is enabled - Here
  • your button is added into enabled row of the navigation structure
  • your button has text your button has URL

Extra Button #2


Extra Buttons will use in One Line, Two Lines or Three Lines Navigations



It has a several options to manage it.

  • Extra Button #2 - enable or disable extra button #2 from the front-end
  • Text - button text
  • URL - button URL
  • Target - button target
  • Background color - button background color
  • Text color - button text color
  • Border - button border (top width, right width, bottom width, left width, style and color)
  • Border Radisu - button border radius

If you want to use Extra Button #2, please make sure that:
  • your button is enabled - Here
  • your button is added into enabled row of the navigation structure
  • your button has text your button has URL

Social List



List Switcher


With this option you can enable or disable social list

List Size


With this option you can change social icon size

List Type


With this option you can change social icon type (icon/abbreviation)

Background Type


With this option you can change background type for social icons

It has three option to choose

  1. Border - bordered icon
  2. Background - icons with background. After selecting this option, it will appear two more options: Background Regular Color and Background Hover Color
  3. None - no background

Round Type


With this option you can change social icon round type (square/rounded/circle)

Icon Regular Color


With this option you can change social icon regular color

Icon Regular Color


With this option you can change social icon hover color

List positions / switcher


With this option you can organize social list positions, disable and reorder them

Social List URL and abbreviations


With these options you can change social list URLs and its abbreviations if you selected Abbr for List Type

Social list was created as item for One Line, Two Lines and Three Lines Navigations.
If you want to add social list and set it up you have to:
  • Add Social List into the navigation structure in Arlo > Theme Options > Desktop Navigation > Navigation Structure
  • Enable Social list in Arlo > Theme Options > Social List > List Switcher (switch to on) and set up it here
  • Enable Social platforms you need in Arlo > Theme Options > Social List > List positions / switcher (and reorder however you want)
  • Add Social URL fields for each social platforms you have selected early

Typography



Body Font


You can organize body typography here

Desktop Navigation Font


You can organize desktop navigation typography here

Mobile Navigation Font


You can organize mobile navigation typography here

Input Font


You can organize input typography here

Blockquote Font


You can organize blockquote typography here

Heading Font


You can organize heading (except elementor headings) typography here

Extra Font


You can organize extra text typography here


Portfolio



Portfolio Posts Per Page


You can change portfolio posts per page here

Portfolio Slug


You can change portfolio slug here. After changing its value, go to Settings > Permalinks and click on Save Changes

Portfolio Category Slug


You can change portfolio category slug here. After changing its value, go to Settings > Permalinks and click on Save Changes

Title for Portfolio Archive


Change title for portfolio archive pages

Title for Portfolio Breadcrumbs


Change title for portfolio breadcrumbs

Portfolio Page URL Switcher


If this option is disabled, it will means that all portfolio URL in Prev & Next shortcode will extract URL from its shortcode, enabled value will means that all portfolio URL in Prev & Next shortcode will be changed into below URL.

Previous Next Button Switcher


You can disable default previous & next button from portfolio single in order to use custom previous & next switcher shortcode

Portfolio Layout


You can change portfolio layout here



There have some variations for portfolio layout:

  • Laptop with Filter
  • Grid List - this option has extra option named Image Ratio
  • Masonry List
  • Block with Filter

Portfolio Content Max Width


Change portfolio content max width here

Portfolio List Max Width


Change portfolio list max width here


Translation



Languagebox


You can enable or disable languagebox from One Line, Two Lines or Three Lines Navigations

For that you have to add Helper into enabled row of the navigation structure


Footer



Footer consists of three components:

  1. Top Subscribe Section
  2. Middle Widgets Section
  3. Bottom Copyright Section




To Top



Fixed Totop


Fixed totop is fixed to bottom-right of the window and will appear after scolling the page to some px. All things you can customize here



Let's see these options in details:

  • Switcher - you can enable or disable fixed totop button
  • Button appears after scrolling the page to this px - you can customize its value to change button appearing
  • Button Positioning - you can change the button positioning from right and bottom
  • Background Color - you can change the button background color
  • Icon Color - you can change the button icon color

Woo Options



All WooCommece Options




Let's see all woocommerce options in details:

  • Products Grid Type - you can choose any grid style
  • Products Per Page - products per page on woocommerce shop pages
  • Product Category Sidebar - enable or disable product category sidebar

Subscribers



Subscribers List


There are your subscribers added via Frenify Subscribers widget.

Please add Frenify Subscribers widget into your sidebar for that.

Now there is no any subscribers.



See below video guide




Custom CSS



Custom CSS area


You can add custom CSS for your theme.


Import / Export



Import/Export


You can import or export all theme options

Translation & Internalization

Theme comes with .po file included under the languages folder. To translate:

  1. Download and install Poedit.
  2. Open arlo.po file located here \wp-content\themes\arlo\languages\ using poedit tool and translate the existing text to your own
  3. Save the file with the locale (for example: ru_RU.po).
    If you have already setup WordPress in your language, you can get it from your wp-config.php file under, for example: define('WPLANG', 'ru_RU');In this case, you would save your file as ru_RU.po.
  4. Step above should have generated a .po and a .mo file. Copy both these files and put them into the languages folder of the theme.

Your Language & Localization


After translating, you may wish to use the correct locale to translate and localize your WordPress installation completely. Refer to Installing WordPress In Your Language at WordPress Codex to learn how to.

FAQ

1 How to update the theme?
  1. Backup and Remove the old version of the theme from your dashboard.
  2. Download new version of the theme from https://themeforest.net/downloads and upload it to your dashboard. Make sure that you are using latest version.
  3. Remove “Arlo Core” plugin. Then, it appears as required plugin at the top of your dashboard. Re-install it.

Don't worry, all Theme Options will be saved.

2 How to set elementor container width?

Go to Elementor - Settings. Open Style tab and set Content Width 1280. Set padding left and padding right of child section 15px.

3 How to rewrite portfolio url?

In WP admin, Theme Options - Portfolio Page. Change portfolio slug.

4 I'm having SSL (https://) problem on my website.

If you are having problem with SSL (https://), you haven’t configured your wordpress properly. Please, check below plugin to configure SSL (https://)

https://wordpress.org/plugins/really-simple-ssl/

5 How to set up footer widget?
  1. In WP admin, Theme Options - Footer - Enable/Disable Widget. Set Enable.
  2. Go to the “Appearance – Widgets” on your dashboard.
  3. Add “Text” to "Footer Widget 1".
  4. Add “Frenify Business Hours” to "Footer Widget 2".
  5. "Navigation Menu" to "Footer Widget 3".

    For Navigation Menu you must have one more menu. In demo (http://frenify.com/envato/frenify/wp/arlo/1/) added two menus:

    • Main Menu - for desktop and mobile menus.
    • Helpful Menu - for Footer Widget 3
6 I created pages but I’ve got 404 pages everywhere.

Go “Settings - Permalinks”, choose “Post Name” from Common Settings and push “Save Changes” button.

7 How I can edit Portfolio Post with Elementor Page Builder?

Go “Dashboard - Elementor - Settings - General”, enable Portfolio Posts and push "Save Changes" button.

8 Menu doesn't work in blog, portfolio posts and other pages.
  1. Go to Appearance > Menus
  2. Select main menu
  3. Add your website URL to ALL menu items as prefix

For example: your website URL ( http:://your-website.domain ). Your menu items should be as http:://your-website.domain/#arlo-about
9 Social list is no more displaying after updating the theme to 2.0

It's because we have added unlimited Theme Options. Now you have unlimited options for social list too (eg.: size, icon or abbr, background type, round type, social list SORTING and so many social list).

To fix this issue go to Theme Options → Social List → List positions/switcher and enable your social media .

10 What it means: "Warning! Update "Arlo Core" plugin." and how can I remove this message?

It's because we have added unlimited Theme Options. Now you have unlimited options for social list too (eg.: size, icon or abbr, background type, round type, social list SORTING and so many social list).

To fix this issue go to Theme Options → Social List → List positions/switcher and enable your social media .

11 How can I change/add a description into the menu items?

It's because we have added unlimited Theme Options. Now you have unlimited options for social list too (eg.: size, icon or abbr, background type, round type, social list SORTING and so many social list).

To fix this issue go to Theme Options → Social List → List positions/switcher and enable your social media .

Changelog

v5.1.4November 21, 2023
  1. Fixed Redux issue
  2. Fixed links issue related wordpress v6.4
  3. Fixed Megamenu issue
  4. Fixed comment issue related wordpress v6.4 and PHP8
v5.0February 17, 2023
  1. Fixed small issues for all demos
  2. Replaced demo import location
v4.9January 18, 2023
  1. Fixed Elementor Deprecated issues
  2. Fixed Previous & Next Shortcode image issue
v4.8November 28, 2022
  1. Fixed some issues
v4.7June 21, 2022
  1. Fixed some issues
v4.6May 26, 2022
  1. Fixed some issues
v4.5April 21, 2022
  1. Fixed some issues
v4.4January 22, 2022
  1. Fixed issue with overall content
v4.3January 06, 2022
  1. Fixed navigation options issue in portfolio post page
v4.2October 30, 2021
  1. Added Arlo Menu to dashboard
  2. Fixed sidebar menu color issue
  3. Fixed some widget issues
  4. Improved comment design
  5. Theme Options were moved into Arlo Menu
  6. Import Demo Data also were moved into Arlo Menu
v4.1September 03, 2021
  1. Fixed: Some issues
v4.0August 05, 2021
  1. BIG CHANGES: Added One Click Demo Import functionality. See here
  2. Fixed: Albert Walkers Demo
  3. Fixed: Elementor issues
  4. Fixed: Demo link issues
  5. Added: Frenify Subscribers widget
v3.9June 14, 2021
  1. Fixed Elementor permalinks
v3.8May 25, 2021
  1. Fixed small bugs
v3.7April 21, 2021
  1. Fixed Some Widgets issues
v3.6April 06, 2021
  1. Fixed Minor issues
v3.5December 15, 2020
  1. Added: New Demo - Creative Portfolio #1 here
  2. Added: Video Integration for portfolio and blog posts to Split Screen Shortcode
  3. Added: Video Integration for portfolio and blog posts to Half Slider Shortcode
  4. Added: Video Integration for portfolio and blog posts to Interactive All Shortcode
  5. Fixed Some issues
v3.4December 10, 2020
  1. Fixed Some issues
v3.3December 02, 2020
  1. Added: New Demo - Travel 1
  2. Added new shortcodes
  3. Added new options to sidebar navigation
  4. Fixed Service Shortcode Responsive issue
  5. Fixed Some issues
v3.2November 20, 2020
  1. Added: New Demo - Business 1
  2. Added new features
  3. Fixed some issues
v3.1October 20, 2020
  1. Added: New Demo - Digital Agency 2
  2. Added new features
  3. Fixed some issues
v3.0October 01, 2020
  1. Added: New Demo - Digital Agency
  2. Added: now you can use special characters for portfolio categories in Portfolio Category Filter Shortcode
  3. Added: new layout for portfolio page
  4. Improved: overall php codes
  5. Fixed some issues
v2.9July 22, 2020
  1. Added About Page
  2. Added Contact Page
  3. Added new shortcode: About Service
  4. Added new shortcode: Portfolio Slider
  5. Added new shortcode: About Intro
  6. Added new layout (beta) to Team Member Shortcode
  7. Added new layout (gamma) to Personal Partners Shortcode
  8. Added new option to Video Button Shortcode
  9. Added some colors to Features Icon List shortcode
  10. Added some colors to Timeline Shortcode
  11. Added some colors to Useful Information Shortcode
  12. Fixed responsive issue in Service Numbered Shortcode
  13. Fixed some issues
v2.8July 09, 2020
  1. Added new Portfolio #2 (Grid) Layout
  2. Added new Portfolio #3 (Masonry) Layout
  3. Fixed console issue with preloader
  4. Fixed issue with Portfolio #1
  5. Now our online documentation, FAQ and changelog are available in your plugins page
v2.7July 07, 2020
  1. Added video integration into Split Screen shortcode
  2. Added video integration into Half Slider shortcode
  3. Fixed mobile dragging issue with Testimonial Carousel shortcode and some issue with its design
  4. Fixed mobile border issue with Intro Main Title shortcode
  5. Fixed arrow issue with Portfolio Single: Prev & Next shortcode
  6. Fixed vk share issue ( https://vk.com/ )
  7. Improved Project Team List shortcode: added hover image
  8. Fixed contact form 7 issue with our theme
  9. Improved Triple Blog Shadow and Triple Blog Shadow 2 shortcodes
v2.6July 06, 2020
  1. Added video integration into Interactive All → Interactive #1 layout
  2. Added video integration into Interactive All → Interactive #2 layout
  3. Added video integration into Interactive All → Interactive #3 layout
  4. Added video integration into Interactive All → Interactive #4 layout
  5. Added video integration into Interactive All → Interactive #5 layout
  6. Now Interactive All → Interactive #1 layout video starts at 0 after each hover
  7. Now Interactive All → Interactive #6 layout video starts at 0 after each hover
  8. Added a notification in case you forget to update the plugin for the stable operation of the theme.
v2.5July 03, 2020
  1. Added: new homepage - personal #5
  2. Added: new shortcodes
  3. Added: Korean/Chinese/Arabic and etc. languages support to Split Screen
  4. Added: new features
v2.4.1June 24, 2020
  1. Fixed: minor issues
v2.4June 23, 2020
  1. Added: new homepage
v2.3June 9, 2020
  1. Added: new homepage
v2.2.1May 21, 2020
  1. Added: new features
  2. Fixed: minor issues
v2.2May 20, 2020
  1. Added: new features
v2.1April 30, 2020
  1. Fixed: minor issues
v2.0April 23, 2020
  1. Added: new features
v1.9.1April 01, 2020
  1. Fixed: fixed issues
v1.9February 18, 2020
  1. Fixed: main color issues
  2. Fixed: firefox animation issue
  3. Fixed: logo issue
  4. Small bug fixes and stability improvements
v1.8January 27, 2020
  1. Added: background color for closer button to Theme Options
  2. Fixed: color options
  3. Fixed: text on portfolio posts on mobile phones
v1.7January 21, 2020
  1. Fixed: apple products logo issue
  2. Updated: Elementor version
v1.6January 17, 2020
  1. Fixed: preg_match issue
v1.5January 14, 2020
  1. Added new feature: Now you can change mobile menu all colors in Theme Options → Navigation → Mobile Navigation Colors
  2. Added new option to Hero Header Elegant Shortcode: Now you can change animation shape colors
  3. Fixed: Service Numbered Elegant Shortcode resize issue
  4. Small bug fixes and stability improvements
v1.4January 08, 2020
  1. Upgraded: Faster Performance and latest php(7) compability
v1.3December 26, 2019
  1. Updated: Documentation
  2. Fixed bug with the theme
v1.2December 24, 2019
  1. Added Homepage Glitch
  2. Added Homepage Water Effect
  3. Added Homepage Youtube Video
  4. Added Preloader (light/dark/disabled in theme options)
  5. Updated XML file
v1.1December 20, 2019
  1. Added New Homepages
  2. Updated XML file
v1.0December 20, 2019
  1. INITIAL RELEASE