Step V. Options



In this section, we describe how to make the basic settings in the subject. With this section, you can change the theme color, share social networks, menu settings and so on.



In order to customize OKIWI theme in accordance to your desires, you need to make the next setting. On the left side of the control panel, select the "Appearance > Theme Options".



1. Theme Options

Back to top

Click on the "Theme Options" and you will be in the global settings of the theme. Here you can make setting of the appearance of your theme OKIWI.

General
  • Enable Preloader - this function enables or disables the preloader to the Home page (only).
  • Preloader Logo Image - recommended resolution: from 400 pixels in width. Recommended format: transparent .png
  • Theme Default Color - with the help of a palette choose the color for the main site. This color is used for backgrounds, header color, icons.
  • Theme Background Color - set website background color.
  • Theme Underline Color - set website underline color. For the menu in the "Top" only works if applied "Logo image dark".
  • Logo image light - add or change the site logo. If there is no logo yet, you will see the button "Add Image". Click on it and you move the window "Select Image". Here, using the standard "Media Library" you can select the image for the logo. We recommend files PNG with 400x150 size. White logos look beautiful on a colored background main navigation. If you want to change the logo, point to the picture and you will see in the upper right corner the functions "Delete" and "Edit" (point 2 in the picture above). To change the logo click on "Delete", and then "Add Image". With "Upload Files" or "Media Library" select a picture and click on "Select". So you apply a new picture.
  • Logo image dark - this logo use if the picture of slider is bright and the function is the "Transparent header menu for Home page" is activated.
  • Footer Logo Image - adjust the logo in footer. Recommended resolution: from 400 pixels in width. Recommended format: transparent .png
  • Sticky Header - select the type of main navigation, with fixing or not.
  • Header Background Color - set background color for the Main menu.
  • Main Navigation Height - the function that adjusts the height of the main navigation.
  • Main navigation Font size - the function that adjusts the font size for the main navigation.
  • Main navigation Font - choose the desired font for the main navigation.
  • General Theme Font - choose a global font for the theme of OKIWI (not including the main navigation and slider).
  • Custom 404 error page - text to show on your custom 404 Error page. By default, the page displays this text:
  • < h1 >Oops!< / h 1 >

    < h2 >Something goes wrong!< / h2 >

    < p >Error (404). The page is not found...< / p >

    • If you want to get a version of the text for the page 404, use the same template. Simply replace the text in the desired and submit the data to the box Custom 404 error page. For example:
    • < h1 >Sorry!< / h 1 >

      < h2 >This page does not exist!< / h2 >

      < p >Go to Home Page...< / p >

    • Attention! In these examples, there are space in the tags "h1", "h2" adn "p" - they must be removed, if you copy our example in the "Custom 404 error page"
  • Custom 404 error page Background - background image for 404 page (point 3 in the picture above). Optimum picture resolution of 1920x1080. Setting this image is identical to the process described for the replacement logo.
  • Footer copyrights - fill out the label for the lower block.
  • Google API Key - in this field enter Google API Key. Here you can find complete guide how to get personal Google API Key. Once you get an API key, you need to activate it. Go to "Library", then go to "Google Maps API". Here, click on "Enable".
  • IMPORTANT! After making changes to the settings, click "Save Options" in the right panel (point 4 in the picture above).



    ATTENTION! To make your site look nice, we give as an example of two options for "Theme Options".

    Everything depends on the slider on the Main page.



    Variant 1. Images of the slider are colored, medium or low brightness. In this case, the recommended settings are:
  • Theme Default Color - the color of a set you like.
  • Theme Background Color - we recommend white or light gray.
  • Theme Underline Color - we recommend bright accent color.
  • Logo image light - set your own logo. It can simply be colored or white. Highly recommended to use transparent *.png image.
  • Logo image dark - do not apply.
  • Sticky Header - select "ON".
  • Transparent header menu for Home page - select "ON".
  • Header Background Color - select main theme color and set alpha value 0,8-0,9. For example: "rgba(64, 109, 178, 0.8)".
  • Main navigation text shadow - apply the "OFF".
  • Main Navigation Height - 60-100.
  • Main navigation Font size - set 15-17.
  • As a result, the first screen of your main page will look like this:

    General-light-1

    When scrolling through the site header will look like this:

    General-light-2

    Variant 2. Images of the slider are colored in black and white, with high brightness or white background. In this case, the recommended settings are:
  • Theme Default Color - the color of a set you like.
  • Theme Background Color - we recommend white or light gray.
  • Theme Underline Color - we recommend bright accent color.
  • Logo image light - set your own logo. It can simply be colored or white. Highly recommended to use transparent *.png image.
  • Logo image dark - set your logo in a dark interpretation. Highly recommended to use transparent *.png image.
  • Sticky Header - select "ON".
  • Transparent header menu for Home page - select "ON".
  • Header Background Color - select main theme color and set alpha value 0,8-0,9. For example: "rgba(64, 109, 178, 0.8)".
  • Main navigation text shadow - apply the "ON".
  • Main Navigation Height - 60-100.
  • Main navigation Font size - set 15-17.
  • As a result, the first screen of your main page will look like this:

    General-dark-1

    When scrolling through the site header will look like this:

    General-dark-2

    2. Socials settings

    Back to top

    To set links to your social profiles, go to Dashboard and click on "Socials" (p.1 on the image below).

    Socials
  • Icons - select icons and appoint the url address of your social profile. An example of how to configure the "Socials" is shown in the picture above.
  • Order - to change the order of items in the "Socials", point to the ordinal number of the element on the left side of the table. When the mouse pointer will be transformed into a "Move-cursor" (point 3 in the picture above), hold the left mouse button and drag the item to where you want it.
  • Delete - to delete a "Socials" item, hover over it and on the right side you will see the buttons – "Plus" and "Minus" (point 2 in the picture above). Click on the "Minus" and you remove a "Socials" item. If you click on the "Plus", you will add new item to the "Socials". If you click on the "Minus", you will delete these item to the "Socials".
  • IMPORTANT! After making changes, don't forget to click "Save Options" in the right panel (point 4 in the picture above) or your changes will not be saved.



    3. Menu settings

    Back to top

    Click on the "Appearance" on dashboard and then click on "Menu". On this page you can set main navigation.

    First you need to create new menu.

  • Give your menu a name (for example, "Main menu"), then click "Create Menu" (point 3 and 4 in the picture below).
  • Menu
  • Now we create the elements for a menu. Click on the tab "Сustom links". Enter the link in the URL field: http://example.com/#home. In the "Link Text", enter the item name - "Home". Then click on the "Add menu." So we created the "Home" menu item. When you click on an item is will be a transition to the Top of Main page. Be sure to check the box "Primary Navigation", then Menu will be broadcast the top of the page. Do not forget to click on the "Save Menu". Now you have the menu for a site with a single element. Of course this is not enough. So we will make the menu easier to use.
  • Menu

    ATTENTION! To change the order of items in the "Menu", point to the element. When the mouse pointer will be transformed into a "move-cursor", hold down the left mouse button and drag the item to where you want it.



    Here is a list of all possible options for URL and Link Text for the menu settings.

    By analogy with the procedure of creating the element "Home", you can create new items to the menu.

  • http://example.com/#home
  • HOME

  • http://example.com/#slider
  • SLIDER

  • http://example.com/#services
  • SERVICES

  • http://example.com/#features
  • FEATURES

  • http://example.com/#our_presentation
  • OUR PRESENTATION

  • http://example.com/#portfolio
  • PORTFOLIO

  • http://example.com/#howWeWork
  • HOW WE WORK

  • http://example.com/#our_latest_post
  • OUR LATEST POSTS

  • http://example.com/#Fullvideo
  • FULL VIDEO

  • http://example.com/#meetOurHeroes
  • MEET OUR HEROES

  • http://example.com/#statistics
  • COUNTS

  • http://example.com/#skills_accordeon
  • SKILLS

  • http://example.com/#letscreate
  • LET’S CREATE

  • http://example.com/#awesome
  • AWESOME

  • http://example.com/#what_our
  • CLIENTS SAYS

  • http://example.com/#prices
  • PRICES

  • http://example.com/#call-to-action
  • CALL TO ACTION

  • http://example.com/#we_are_creative
  • WE ARE CREATIVE

  • http://example.com/#sharing
  • SHARING

  • http://example.com/#contact
  • CONTACT

    Create elements using the proposed URL and Link Text (point 1 in the picture below). If you want to create an element that redirects to another page on the site, simply enter the desired URL. For example http://example.com/okiwi-import/blog (point 2 in the picture below).

    Menu

    4. Footer settings

    Back to top

    Now we set up the site footer. Click on Appearance > Widgets and you can see here such a partition. Pay attention to the following sidebars: "Footer first column", "Footer second column" and "Footer third column".

    Footer

    Initially the area of these widgets is empty and we have to fill them. To do this, get in the left side section locate the appropriate widgets: "Text", "Recent Posts with thumbnails" and "Custom Menu". Click on needed widget (p.1 on the image below), select footer column to place it (p.2 on the image below) and click button "Add Widget" (p.3 on the image below).

    Footer

    To set up widgets, click on widget.

    You can set title and enter text for Text widget (p.1 on image below), set title and number of posts to show for Recent Posts widget (p.2 on image below), set widget title and select menu to display for Custom Menu widget (p.3 on image below).

    Footer
  • Footer first column - ABOUT US. The content of this field is broadcast in the footer below the logo in the left corner. Usually this field contains a brief description of your site or company. After making edits, click on "Save".
  • Footer second column - RECENT POSTS. This widget manages broadcast your posts in the footer. After making edits, click on "Save".
  • Footer third column - MENU. This widget allows you to activate the broadcast of the Main menu in the footer. After making edits, click on "Save".




  • Now we can now proceed to the immediate implementation of the texts, images, and setting the Home page.



    We can come to the next step to configure - Step VI. Modules.
    Go to Step VI >>
    OKIWI