# Olympus

## BuddyPress Social Network

- by: Crumina
- email: info@crumina.net

### Theme design options

Theme design options let you control different design settings across the site. You can reach it via Appearance>Customize menu in the backend editor or by clicking on the 'Customize' link on the top black admin bar in the frontend. Options are divided by meaning and are represented by several tabs. Let's take a closer look at them.

###

- Site Identity
- Colors
- Background Image
- Menus
- Widgets
- Homepage Settings
- Typography
- Footer options
- Social Header options
- Header General options
- Additional JS
- WooCommerce
- Additional CSS

### Site Identity

Here you can upload the logo and add logo text and description, fill in Site title and Tagline fields and set the site icon by clicking on the 'Select Image' button.

### Colors

Here you can choose the background color for your site or change Primary/Secondary Accent Color

### Background image

- Click on the select image button to upload the image.
- Below the image, you will also be able to see the background image options. Under preset, you can select how you want the background image to be displayed: fill screen, fit screen, repeat, or custom.
- You can also select background image position by clicking on the arrows below. Clicking on center will align the image to the center of the screen.

Note: the changes will be applied to the whole site, but easily can be changed for the individual page in internal page settings.

### Menus

To create a menu follow the next steps:

- Click on the 'Create New Menu' button, type name, choose menu location (the place you want this menu to appear) and hit the 'Next' button.

- Begin adding menu items by clicking on the 'Add items' button.
- Choose items among available page types from the popped out right panel.

- Once the items are added, you can reorder them and create submenus with simple drag-and-drop function.

- When your menu is ready, hit the 'Publish' button.

### Widgets

Under Widgets tab you can organize footer area using given widgets.

- Here you can add new or customize already added widgets.
- Click Add a widget button, select needed widget from the appeared panel:

- Fill in required options inside a widget
- Hit Done&Publish button

### Homepage settings

If you need to set/change home page on your site, go to Customize > 'Homepage settings' tab. There are two options:

- Your latest posts - if you choose this option there will be displayed an automatically generated page with the list of your posts.
- A static page - this option lets you set any of the existing pages as a homepage. Simply activate 'A static page' option and select any page from the 'Front page' dropdown list.

Once you have activated 'A static page' option you can see another dropdown list called 'Posts page'. This option is required to enable posts page in default WordPress themes. In Olympus it is not required, so you can leave this field empty.

Once you are ready, hit the 'Publish' button.

### Typography

Under Customize>Typography you can set up the styles for

- Body font
- H1 - H6 headings
- Menu font

Select what type of content you want to customize and set up:

- Font face
- Style
- Weight
- Size
- Spacing
- Color

### Footer Options

Footer options provide a set of options to configure the footer design.

- Footer design - here you can adjust different options such as text color, widget titles/links color background color/image etc.

- Scroll Top button - here you can control the appearance of a Scroll Top button by changing background/icon color for it.

### Social Header Options

Here you can change the color for the social header bar and change the title/icon/background color.

### Header General Options

Header options control the look of your site header section. They allow controlling the following options:

- background color
- logo color
- menu color
- cart color

### Header Stunning Options

The stunning header is an area between page header and content, which contains page title, breadcrumb, and additional text. So these options allow you to control the appearance of the page title section - adjust the stunning header height, background color/image, animated background, bottom image, text color etc.

### Additional JS

Put additional JavaSript codes into the field.

NOTE: scripts are added without tag <script>

### WooCommerce

In Woocommerce options section you can configure settings for the main shop page. Before configuring these options you have to install Woocommerce plugin and set up all Woocommerce pages and settings according to official Woocommerce documentation. More detailed about Woocommerce options you can find in Woocommerce Shop documentation section.

### Additional CSS

This field is available for your styling customizations. Add your custom CSS codes below the field description

NOTE, if one of the codes is not correct, the other following codes will not apply. If you make a mistake in a code you will see the notice on the top, like this:

### Theme Settings Panel

Theme Options Panel is a set of options that allow you to configure the general options, header and footer sections, blog options, components visibility for the top panel, fixed left sidebar etc. Log in your site and find theme options panel at the bottom of the left admin panel.

All options are sorted by meaning and divided into tabs:

- Header
- General
- Requirements
- Blog
- Panels
- Footer

### Header

Header options control the look of your site header section.

GENERAL tab lets you to:

- choose header style - options to show user bar/menu/both
- show or hide a WooCommerce cart with a drop-down

The STUNNING tab allows to configure the next settings:

- stunning header visibility
- title
- Breadcrumbs
- add additional information

### General

Under General tab are gathered all the general options of the theme.

- Tracking scripts - option for adding tracking scripts to your website.

- API Keys - here you can enter your API Keys for Google Map and Twitter

Requirements

Here is a list with different requirements for WordPress and Server environment

### Blog

Blog options allow controlling default settings of the single post item and blog page.

General tab

- Blog style - there are 4 available blog styles: Classic, Grid, List, and Masonry. You can select the default style for display posts. Alternatively can be changed in the page with a blog template.
- Pagination style - there are 2 pagination styles for the blog page. Select default style for pagination: numeric or "load more" button. Note: "Load more" work with Ajax sort panels only.
- Order - designates the ascending or descending order of items
- Order by - select the default sorting parameter.
- Categories - choose the post categories you want to be displayed on your blog page. Click on the field and choose the needed categories from the drop-down list.
- Items per page - a number of posts that will be shown per page.

Sort panel tab

- Blog posts sorting panel - choose the desired type of sorting panel that will be displayed by default on the blog page or just hide it.

* Panel with Ajax Filter options allows controlling additional options: show or hide reactions, categories, sorting options and search box on this panel.

- Ajax preloader - add an image for preloader (works only with ajax panels)

Post elements tab - allows you to control the look of your blog page, namely enabling/disabling such as elements: categories labels, meta info, reactions, excerpts.

Single Post Elements tab

- Post style - you have the opportunity to choose the default style for your post. There are 3 available post styles
- Reactions - enable/disable reactions on the single post. If the option is enabled - choose the desired reaction type and design.
- Featured media - enable/disable featured image or other media of the single post
- Post meta - show/hide post time, post author, etc
- Share post buttons - show/hide social icons for sharing posts.
- Related posts section - allows you to enable or disable related posts that displayed under a single post.

### Panels

Top panel tab

Olympus comes with top bar options. You can control the elements of your top bar like title, search, friends requests, messages, notifications, user menu. These settings will be applied to the entire site.

Fixed left panel tab

Enable Left Menu Panel - this option allows adding side menu to your site. In order to display it, you need to add the desired menu in Menu settings for "Fixed left panel" menu location.

### Footer

Footer options provide a set of options to configure the look of the footer section. There are 3 tabs with options

- Widgets section - you will find options to configure the footer layout with text, social icons, here you can also upload a footer logo.

- Copyright section - you can configure copyright information.

"Scroll to top" tab

- Scroll to top button - show/hide button that scrolls the page to top on click.

### Theme Settings Panel location

Theme Options Panel is a set of options that allow you to configure the general options, header and footer sections, blog options, components visibility for the top panel, fixed left sidebar etc. Log in your site and find theme options panel at the bottom of the left admin panel.

All options are sorted by meaning and divided into tabs:

- Header
- General
- Requirements
- Blog
- Panels
- Footer

### General

Under General tab are gathered all the general options of the theme.

- Tracking scripts - option for adding tracking scripts to your website.

- API Keys - here you can enter your API Keys for Google Map and Twitter

### Header

Header options control the look of your site header section.

GENERAL tab lets you to:

- choose header style - options to show user bar/menu/both
- show or hide a WooCommerce cart with a drop-down

The STUNNING tab allows to configure the next settings:

- stunning header visibility
- title
- Breadcrumbs
- add additional information

### Requirements

Requirements tab include information with different requirements for WordPress and Server environment

### Blog options

<p>Blog options allow controlling default settings of the single post item and blog page.</p>
<p><span style="color: #43484d;">General tab</span></p>
<ul style="font-size: 14px; font-weight: 400;">
<li>Blog style - there are 4 available blog styles: Classic, Grid, List, and Masonry.&nbsp;You can select the default style for display posts. Alternatively can be changed in the page with a blog template.</li>
<li>Pagination style - there are 2 pagination styles for the blog page. Select default style for pagination: numeric or "load more" button. Note: "Load more" work with Ajax sort panels only.</li>
<li>Order - designates the ascending or descending order of items</li>
<li>Order by -&nbsp; select the default sorting parameter.</li>
<li>Categories - choose the post categories you want to be displayed on your blog page. Click on the field and choose the needed categories from the drop-down list.</li>
<li>Items per page - a number of posts that will be shown per page.</li>
</ul>
<p><img src="assets/images/image_136.png"></p>
<p><span style="color: #43484d;">Sort panel tab</span></p>
<ul style="font-size: 14px; font-weight: 400;">
<li>Blog posts sorting panel - choose the desired type of sorting panel that will be displayed by default on the blog page or just hide it.</li>
</ul>
<p><img src="assets/images/image_61.png"></p>
<p>* Panel with Ajax Filter options allows controlling additional options: show or hide reactions, categories, sorting options and search box on this panel.</p>
<p><img src="assets/images/image_108.png"></p>
<ul style="font-size: 14px; font-weight: 400;">
<li>Ajax preloader - add an image for preloader (works only with ajax panels)</li>
</ul>
<p><span style="color: #43484d;">Post elements tab</span>&nbsp;- allows you&nbsp;to control the look of your blog page, namely enabling/disabling such as elements:&nbsp;categories labels, meta info, reactions, excerpts.</p>
<p><img src="assets/images/image_117.png"></p>
<p>Single Post Elements tab&nbsp;</p>
<ul style="font-size: 14px; font-weight: 400;">
<li>Post style - you have the opportunity to choose the default style for your post. There are 3 available post styles</li>
<li>Reactions -&nbsp;enable/disable reactions on the single post. If the option is enabled - choose the desired reaction type and design.</li>
<li>Featured&nbsp;media - enable/disable featured image or other media&nbsp; of the single post</li>
<li>Post meta&nbsp;-&nbsp;show/hide post time, post author, etc</li>
<li>Share post buttons -&nbsp;show/hide social icons for sharing posts.</li>
<li>Related posts section -&nbsp; allows you to enable or disable related posts that displayed under a single post.</li>
</ul>
<p><img src="assets/images/image_172.png"></p>

### Panels

Top panel tab

Olympus comes with top bar options. You can control the elements of your top bar like title, search, friends requests, messages, notifications, user menu. These settings will be applied to the entire site.

Fixed left panel tab

Enable Left Menu Panel - this option allows adding side menu to your site. In order to display it, you need to add the desired menu in Menu settings for "Fixed left panel" menu location.

### Footer

Footer options provide a set of options to configure the look of the footer section. There are 3 tabs with options

- Widgets section - you will find options to configure the footer layout with text, social icons, here you can also upload a footer logo.

- Copyright section - you can configure copyright information.

"Scroll to top" tab

- Scroll to top button - show/hide button that scrolls the page to top on click.

### WPBakery Page Bilder - Backend Editor

The main page builder in the theme is integrated WP Bakery Page Builder. You can edit imported pages with your own content and create new ones using available modules of the editor.

It provides backend and frontend editors. You can use one that is more convenient for you.

To start editing with Backend Editor you need to:

- create a page under Pages->Add new tab
- fill in Title field
- click on the "Backend Editor" button to activate editor mode.

### Table of contents:

- Adding elements
- Rows settings and management
- Column settings

### Adding Elements

Start adding elements to your page. You can do it in two ways:

- Click on the "Plus" icon
- Click on the "Add Element" button

All elements are divided into tabs by functionality and have small thumbnails above titles to demonstrate their role in the theme.

Apart from the standard shortcodes available in the page builder, there are other exclusive modules integrated into the plugin. You can find all of them under Crumina modules tab.

Each element has a lot of customization option that is also divided into 2 tabs:

- 'General' tab - you can add content and configure main settings of the element.

- Design options - allows you to customize the design of your element: paddings, margins, borders, background color/images etc.

- Use a one column row or split the row in columns using predefined columns settings or create a custom columns variant.

- Reorder elements within the row/column or move to another row/column using flexible drag and drop function.

- Adding row inside another row

You can also put a row inside another row. It is a good solution if your row will include several columns and you want to put a background color/image to the entire row. For this simply add a new row by clicking on a PLUS icon

select Row element from the elements list

click on the PLUS icon of the added row

and select Row element once again

You will get row inside another row.

Now you can split the inner row into columns, if needed, and add elements to them.

### Rows Settings and management

Each section has a number of options that you can customize the way you want. Click on the 'PENCIL' icon on the top right corner of the section box to open row settings.

The row settings are:

- General - here you can adjust: dimensions of the row and columns; set Youtube video or Parallax image background, choose CSS animation; add row ID and extra class names for the row and container or simply temporary disable the row.

- Design Options - margins, paddings, borders, background color/images etc for the row
- Background option - here you can enable animation effect for the background image (with appropriate animate direction and background overlay) or just choose "Half background color" option for the row.

Rows Management

Also, there are some options allowing to manage sections on the page according to your needs. They are:

- Rows reorder
- Columns number
- adding a new column
- clone the row

Rows reorder - allows you to reorder rows on the page: hold the 'CURSOR MOVE' icon with the left mouse and move the row to the target location on the page.

CColumns number - you can change a number of columns in the row whenever you want.

Custom layout - you can set custom layout for the row - change particular row layout manually by specifying the number of columns and their size value. The total fraction result must be 1.

Add a column - click on "plus" icon in order to add a new column

Clone the row - you can copy/clone created row and elements and paste them to any place in the editor.

### Column settings

In order to adjust column settings, click on "PENCIL" icon

- General - here you can adjust: set Youtube video or Parallax image background, choose CSS animation; add element ID and extra class names.

- Design Options - margins, paddings, borders, background color/images etc for the row
- Responsive options - select the appropriate column width from the list and adjust column for different screen sizes, namely width, offset and visibility settings.

### Simple page

- Creating a new page
- Content management
- Customize design
- Page styles
- Stunning header
- Header
- Sidebar management

### Creating a new page

The page is created under Pages->Add New tab. Create a new page, enter the title and begin adding content.

### Content management

Content can be added via:

- standard Wordpress editor
- WPBakery Page Builder. It comes as the main page builder in the theme and provides multiple elements for building pages. All elements have great many of customization options, allowing you to adjust them to your liking.

### Customize design

In the 'Customize elements' box you can customize the following options:

- Page styles - custom design for the appropriate page.
- Stunning header - page title section, displayed right below the header section.
- Header - top page section with logo user bar and menu in it.

Let's consider these tabs in more details:

### Page styles

- Customize design - if you toggle to 'Yes', the settings will be changed only for this page. If turned off, general settings will be applied.
- Custom Design - allows you to change the design for the current page, namely choosing a background color or set a background image

Background Color - Click the Select color button. You can either enter a hexadecimal number (e.g. d33131) representing the color to be displayed as the background of your theme or from the color picker.

Background image - select an image to use it as a background of your theme. If you add a background image you will get some more options:

- Background Position - allow the image to be positioned Left, Center, Right
- Background size - choose the desired size for the background image: initial, auto, cover, contain, inherit
- Background repeat - choose the needed parameter to determine if the image is repeated. Available options: repeat, repeat x/y, no repeat, round, inherit
- Background Attachment - to Scroll background, display as Fixed, local or inherit.

### Stunning header

- Show stunning header - default (you can adjust it in general Theme settings), Yes (show stunning header), No (hide the stunning header)
- Customize content - if you switch to 'Yes', the settings will be changed only for this page. If turned off, general settings will be applied.
- Custom content - set the elements you want to display in the stunning header: title, custom title, breadcrumbs, or additional information in "Text" field.

- Customize styles - adjust the stunning header height, background color/image, animated background, bottom image, text color etc.

NOTE: if you toggle to "No" - general settings will be applied, they are controlled from Customize -> Header Stunning options.

### Header

- Header style - Default (controlled from Appearance -> Theme settings -> Header)/Show user bar/Show menu/Show both (user bar+menu)
- Customize content - toggle to "Yes" that allows you to control a header content for the current page: show or hide the Woocomerce cart in the header

### Sidebar management

You can control display and position of the sidebar on the page in the 'Sidebar Picker' box.

The options are:

- Default - sidebar settings are applied from Appearance -> Widgets -> Manage Sidebars section.
- No sidebar
- Right sidebar
- Left sidebar

NOTE: If you choose Right sidebar or Left sidebar, you can also specify which if the existing sidebars to show.

After you have done with settings, press the "Publish" button in order to save the changes:

### Blog page

To create a blog page that will display all your blog posts go to admin panel Pages and click Add new.

Give a title to your page and after that choose Blog in Page Attributes>Template

If you want any content displaying before your posts you can put it into Visual/Text editor or add it with WPBakery Page Builder.

Now you can adjust your page design and blog settings.

Sidebar

- Sidebar - here you can set blog sidebar position or hide it, options available are Hide Sidebar, Show Sidebar on Left, or Show Sidebar on Right. You can choose the position of your sidebars using Sidebar Picker

Page styles

- Background color - allows choosing the background color for the blog page
- Background image - set background image as a background.

If you add a background image you will get some more options:

Background Position - allow the image to be positioned Left, Center, Right
Background size - choose the desired size for the background image: initial, auto, cover, contain, inherit
Background repeat - choose the needed parameter to determine if the image is repeated. Available options: repeat, repeat x/y, no repeat, round, inherit
Background Attachment - to Scroll background, display as Fixed, local or inherit.

Blog options- is a set of options that allow you to configure a blog page.

1. - Blog style - there are 4 available amazing blog styles: Classic, Grid, List, and Masonry. Each of them differs and offers some other options that allow you to make your blog page special.
   - Pagination style:
     Numeric - shows the page numeration
     Loadmore - shows load more button that works with Ajax sort panels only
   - Order - designates the ascending or descending order of items
   - Order by - select the sorting parameter
   - Categories - choose the post categories you want to be displayed on your blog page
   - Exclude selected - if checked the categories selected above will not be displayed on your blog page
   - Items per page - a number of posts that will be shown per page.

Sorting panel

- Blog posts sorting panel - choose the desired type of sorting panel that will be displayed on the blog page or just hide it.
- In addition, for Ajax Filter options you can customize the needed elements on sorting panel such as Reactions, order, Order by, Search box
- Ajax preloader - add an image for preloader (works only with ajax panels)

Stunning header

- Show stunning header - the variant of displaying the stunning header
- Customize content - set the elements you want to display in the stunning header: title, custom title, breadcrumbs, additional info.
- Customize styles - set the text and background color/image, background color, animated background, stunning header height
  Header
  - Header style - select one of the header styles, that will be applied only for this page.
  - Customize content - show or hide the Woocomerce cart in the header
    When you are done, click Publish and get your blog page.

Note: you can keep blog and page options by default as well and they will be applied from Theme settings panel. Make sure, internal page settings have priority over General Theme Settings

### Post styles

Olympus WordPress theme offers three beautiful styles for a single blog post. Each of them differs in design, placing post elements such as reactions, share post buttons, featured images or the existence of sidebar. Let us look at each of three variants of post style:

1. Blog Post V1(without stunning header, the featured image instead of it)
2. Blog Post V2 (with stunning header)
3. Blog Post V3 (With stunning header+sidebar)

### Post formats

You can control your post style with 'Post Format' option. Utouch theme supports most common WordPress post formats, you can read about them here: https://codex.wordpress.org/Post_Formats

To choose of what format will be your post, just select desired one from the radio-button list and start filling the content:

Let's overview all post formats represented in the theme:

##

## Standard Post Format

Use it to create a simple post with regular style. It is default post format and no ordinary options required.

##

## Video Post Format

Displays video player on your blog and post page.

Just add the link to YouTube or Vimeo video in appeared Video post options:

##

## Audio Post Format

Displays audio player on your blog /category/ post page.

Enter link for audio that will be embedded

##

## Quote Post Format

Displays a quote block on a blog archive page.

Add a quote in a visual/text editor and fill in the fields appeared after quote post activation

##

## Link Post Format

Allows showing post linked to another page/site.

To create link post, add the text you want to be displayed on the blog into the text editor and wrap it with the link

### Single post

### 1. Creating a blog post

To create a single post you have to:

1. Login to your Wordpress admin account
2. Go to Blog Posts tab
3. Click Add new tab
4. Give your post title
5. Start filling content using Visual or Text editor, add Media if needed:

6. If needed you may also fill in additional fields on the right:

- Post format - select needed post format from the given variants under Format tab (detailed info about each of them you can find here)
- Blog Categories - choose a category to which the post belongs to, or create a new one
- Tags - add needed tags to your post (posts with similar tags will be shown by click on the definite tag)
- Sidebar picker - choose needed sidebar and its position for your post page (detailed info here)
- Featured image - set featured image that will be shown on a blog page

7. If you need to use other standard WordPress post options you should check them under Screen Options tab that you can see on the top:

8. IMPORTANT: In order to display short post description on your blog, category, archive pages you need to activate Excerpt under Screen Options (see point 7). Fill in the excerpt field that appeared on the page below:

Or you can use tag Read More tag in your Visual or Text editor. The text was written before this tag will be shown on your blog, category, archive pages.

OTHERWISE, the entire post content will be displayed on your blog, category, archive page.

### 2. Customize design

Post design options you can find under the tab Customize design.

### Post style and elements

- Post style
  You have the opportunity to choose the style for your post. There are 3 available post styles (more detailed information about it you can find here)

- Custom elements on the blog page - set of elements such as reactions, featured media, post meta, share post buttons that can be shown or hidden on the post page.

- Customize design - this option allows you to set a background color or background image for appropriate blog post page

  If you add a background image you will get some more options:

  Background Position - allow the image to be positioned Left, Center, Right
  Background size - choose the desired size for the background image: initial, auto, cover, contain, inherit
  Background repeat - choose the needed parameter to determine if the image is repeated. Available options: repeat, repeat x/y, no repeat, round, inherit
  Background Attachment - to Scroll background, display as Fixed, local or inherit.
  You can also keep default settings. They are controlled from Appearance->Theme Settings -> Blog -> Single Post Elements.

### Header

- header style - select one of the header styles, that will be applied only for this page.
- Customize content - show or hide the Woocomerce cart in the header

  ### Stunning header

  ###

- Show stunning header - the variant of displaying the stunning header
- Customize content - set the elements you want to display in the stunning header: title, custom title, breadcrumbs, additional info.
- Customize styles - set the stunning header height, background color/image, animated background, text color etc.
  You can also keep default settings. They are controlled from Appearance->Theme Settings->Header.
  Make sure, internal post/page settings have priority over General Theme Settings.
  When you are done with all settings, go to the top right and click the Publish button.

### Mega menu setup

The mega menu in Olympus is created in Appearance>Menus section. To create one you should follow the next steps:

- Edit an existing menu or create a new one as described in 'Extended menu editor' topic.
- Add a new menu item, that you want to be a parent item of the future mega menu. It can be any page type that you choose on the left hand column.
- Check Use as Mega Menu inside the added parent item settings

- Open Settings - here you can add a background image to your mega menu. Upload an image via the popped out window.

- Below the parent item add items that will serve as columns in the mega menu. The columns items must be shifted one level to the right side.

IMPORTANT NOTE: If you want columns items to be unclickable titles, add them via 'Custom Links' tab and enter http://# or https://# in 'URL' field. If you want them to be simple clickable links, add them via 'Pages' or any other tabs.

- Begin adding items that will be located under the mega menu columns. Place them under the appropriate column and shift on level to the right side.

- Hit the 'Save Menu' button.

* If you need to make the space between columns more narrow, use the megamenu--half-width class for the parent item, like shown on screenshot:

### Menu setup

- Menu creation
- Adding menu items
- Adding icons to the menu item
- Adding submenu items
- Adding button to the menu
- Menu location

### Menu creation

The menu can be created in two ways:

1. Via Customize> 'Menus' tab. This is a simplified menu editor. You can create menus, add menu and submenu items, reorder them, and assign the menu to the primary menu location.
2. Via Appearance>Menus section. This is an extended menu editor. Besides, the above-described possibilities, you can add icons to your menu items and create mega menus.

Simplified menu editor

- Click on the 'Create New Menu' button, type name, choose menu location (the place you want this menu to appear) and hit the 'Next' button.

- Begin adding menu items by clicking on the 'Add items' button.
- Choose items among available page types from the popped out right panel.

- Once the items are added, you can reorder them and create submenus with simple drag-and-drop function.

- When your menu is ready, hit the 'Publish' button.

Extended menu editor

In order to create a menu via the extended editor, follow the next steps:

- Go to Appearance>Menus section in your backend editor.
- Click the create a new menu link at the top of the page.

- Enter a name for your new menu in the Menu Name box.
- Click the Create Menu button.

### Adding menu items

Once a menu is created, you can add items into it. On the left column, you can find different custom links, pages or categories that can be used as menu items.

- Select the Pages (or another) tab.
- Press the View All link to bring up the pages published on your website.
- Select the pages you want to add by selecting the checkbox next to each page title.
- Click the Add to Menu button to add your selection(s) to the menu that you've just created.

- Click the Save Menu button on the right hand side once you have added all the menu items you want.

####

### Adding icons to the menu

If you want to add icons to your menu, click on the triangle symbol in front of the menu item name to open its settings and by clicking 'Add Icon' button select an icon from the list.

### Adding submenu items

If you need to add submenu items, move them under the parent menu item and shift a little to the right side with drag-and-drop function. Click the Save Menu button on the right-hand side.

### Adding button to the menu

You can add a button to your navigation menu, such as the one shown on this screenshot:

You need to follow the steps below to add the Callout Button in the main menu of your website:

- Add a Menu Item.

  Go to WordPress Admin Menu > Appearance > Menus and add a Custom Link menu item. Set the Link option to the website you want to access and the Text option to whatever text you want your Callout Button to have

- Activate CSS Classes.

  Scroll up to the top of the screen and click on the Screen Options. A drop-down menu will appear with different items. Enable the CSS Classes checkbox item and close the Screen Options drop-down menu.

- Add CSS Class.

  Scroll back to the menu item you created in step 1, and you will see a new option has appeared in the menu item called CSS Classes (Optional). Add 2 required extra classes: .btn and one of these: .btn-lg, .btn-md, .btn-md-2, .btn-sm

*lg, *md, *md-2, *sm indicates different button sizes

- Click on the Save button at the bottom of the screen to save all changes

### Menu location

Once your menu is ready, assign it to the main menu location by checking a checkbox under the 'Menu Settings' title.

There is 3 location for the menu:

- Top primary menu

- User menu

- Fixed left menu

- Once it's done, click the Save Menu button on the right hand side.

### Widgets

To add and style your content in sidebars and footer you can use widgets. Go to Appearance>Widgets.

- There are default WordPress widgets that take the theme style though. More about WP widgets you can read here: https://codex.wordpress.org/WordPress_Widgets

- BuddyPress (+bbPress)widgets: https://codex.buddypress.org/themes/buddypress-widgets/

- Besides that, there are also additional theme widgets. To add a widget to your sidebar/footer, just choose it and drag to the right side inside the needed area. Then start to configure settings filling in needed fields and selecting desired options.

For example, in order to add the widget - find the needed widget, click on it and choose the area you want to place this widget.

After that, adjust the widget settings.

### Sidebar Manager

Olympus gives you a possibility to control sidebar position on every page and post of your site. You can adjust sidebars settings inside the page/post settings via Sidebar Picker

Or you can set needed sidebar position for a group of pages or specific pages in Appearance>Widgets>Manage Sidebars

For Grouped pages:

1. Select a group of pages you want the sidebar to be displayed on
2. Set a sidebar position for the selected pages
3. Choose what sidebar will be used for the selected group of pages or add a new sidebar and fill it in with needed widgets

For Specific pages:

1. Select a type of the page: blog post, portfolio post, page or category
2. Type a title of the page in the search field and select needed pages
3. Set desired sidebar position for selected pages
4. Choose a sidebar with widger from a list or add a new one and fill it in with needed widgets

Don't forget to save changes after you are done!

### Contact form builder

Using Form Builder extension adds the possibility to create a form with unlimited fields and display them on every page.

To create a new form go to Forms>Add new and type in the title of your form. The title is displayed only on the backend and is needed only for easier navigation through your forms.

Begin adding fields by using elements represented under Form fields tab. Just use the drag & drop form builder to create any form you’ll ever want or need.

Once you have added a field, click on it one time to open the settings window. Each field type has its own settings. Configure each field and press "Save" button.

You can create almost any form layout you need. Control fields width with the arrows on the top left corner of the field.

On the top of the form, you can enter title and subtitle. They will be displayed on the frontend before the form.

As soon as the form is ready, switch to the Settings tab to set up email and form messages.

Under Settings>Mailer you can set up send method and test connection by sending a test message. You can also fill in the "From Name" and "From Address" fields, that will be displayed in all received emails.

### Adding a form on the page and its further customization

You can add contact forms on pages with Form module of WPBakery Page Builder editor.

Opening the module settings, you can choose the needed form from the drop-down list, adjust the text on submit and set the color for the button.

When you are done, save changes.

### Buddypress & bbPress guide

After activating the theme, a notice will appear letting you know that you need to install BuddyPress and bbPress.

### BuddyPress

After you have installed Buddypress, go to WP Admin -> Settings -> BuddyPress to make specific settings.

### Components

BuddyPress comes with several useful components, each of them has a unique purpose. You can selectively enable any of the components by using the "Component" tab.

Depending on how you want your community to operate, you can select from as many as you want from the following:

- Extended Profiles: customize user profiles and configure the available fields.
- Account Settings: let your users edit their account settings.
- Friend Connections: let users make connections with each other.
- Private Messaging: Let users send each other private messages.
- Activity Streams: display streams of activity on the site with direct posting to the front-end, threaded commenting, mentions and email notification.
- Notifications: select this and your members will receive notifications of recent activity in the way that they select.
- User Groups: allow the creation of user groups for people to create their own networks in your community.
- Site Tracking: track what’s happening on your site (posts and comments).
- BuddyPress Core: it‘s what makes BuddyPress possible!
- Community Members: everything in a BuddyPress community revolves around its members.

### Options

This tab gives you a number of options for features you can choose to enable or disable. These are:

- Main Settings: enable or disable the toolbar at the top of the screen for logged-in users, and specify whether users can delete their account themselves.
- Profile Settings: allow members to upload their own profile picture, and sync BuddyPress and WordPress profiles.
- Groups Settings: let users create groups, and choose whether to allow customization of group avatars.
- Activity Settings: enable activity stream commenting on blog and forum posts as well as BuddyPress updates, and auto-referees the activity stream in real time.

### Pages

BuddyPress requires setting up some pages to function properly. You need to map each of BuddyPress components to your site pages. If you haven't created the pages to assign to Buddypress components then go to Pages menu and add them and come back to assign it.

- Members page will show all of your site members.
- Activity Page shows wide activity from users. This includes messages, comments, friend requests, groups activity, etc
- User Groups is used to show the Groups Directory.
- Register - this is the page where users can register on your sites.
- Activate - activate page is used to confirm an account creation.

### rtMedia

Clicking the rtMedia tab will redirect you to plugin`s settings. This plugin adds missing media rich features like photos, videos and audio uploading to BuddyPress which are essential if you are building a social network.

I general, these settings help to fine tune the integration of rtMedia with BuddyPress.

### bbPress

bbPress is forum software from the creators of WordPress. Easily setup discussion forums inside your WordPress.org powered site.

For bbPress settings go to WP Admin -> Settings -> Forums.

### Event creation

Olympus theme is integrated with The Events Calendar plugin, that allows users to create an events calendar and manage it with ease.

Once the plugin is installed and activated you're going to want to create some events.

### Event creation

- The event is created under Events->Add New tab.

Just as with a page or post, you can add a title and description to your event. The expected controls for saving it as a draft or publishing it are present, too:

### Event Time

Of course, events have specific bits of information associated with them that most pages and posts don’t require – start and end dates, for instance, not to mention venues and organizers.

Fields to set all of these things can be found below the description editor, in an area called the events meta box:

- The Start/End – this is simply when the event starts and finishes. Clicking into either date field will pop up a date picker, where you may select your desired dates from a calendar. Event start and end times may be selected from a drop-down menu, or you may enter your dates and times manually if you prefer. If you already checked the All Day Event box you will not be able to specify a time for your event
- The All Day Event checkbox is useful when the event is taking place on a particular date (or dates) – but you don’t really know when, or else feel that it is good enough to say it takes place “all day” without being more specific

### Event location

- If this is your first time using The Events Calendar, you’ll see this list of fields for creating your first event venue.
- Create option from the menu options will display the new venue form fields below, allowing you to create a new venue for your event.

It’s also worth noting that you don’t need to create (or use) a venue. If you prefer not to specify a venue, simply move on to the next section.

Provide a name for the venue and any optional address details – if you like – a contact phone number and website.

### Organizers

Here you can provide organizer details and, if you do, you need only provide as much information as you want to.

### Event website

The next section in the New Event Admin lets you (again, optionally) provide an event website:

This is particularly useful if you are showcasing events organized by external organizations and they have a dedicated event website.

### Event Cost

Once again you can pass on by and leave these alone if you like. If you don’t provide a cost, then no cost details will be shown to visitors. If the event is actually free then simply provide a cost of 0 (zero).

### Event options

On the right side panel you can find some event options:

- Sometimes you want to be able to link to an event post (by email, or directly via a menu) but would prefer it isn’t included in the main event views – checking the Hide from Event Listings box accomplishes just that
- You might also happen to have a whole load of events taking place on the same day , that can cause some problems in month view – and so, at least by default, no more than 3 events per day are shown in that view – selecting Sticky in Month View helps you to ensure that this event is one of the ones that do show. The question mark’s help text reads, “When events are sticky in month view, they’ll display first in the list of events shown within a given day block.”
- The Feature Event option allows you to designate your most important events for extra emphasis on your pages. Featured events will be highlighted in event views, archives, and widgets, making it a great choice for special engagements that you’d like to have front and center.

When you have done with settings, hit the "Publish" button.