Header – Bimber Theme Documentation https://bimber.bringthepixel.com/docs Thu, 17 Sep 2020 07:21:23 +0000 en-US hourly 1 https://wordpress.org/?v=5.4.4 https://bimber.bringthepixel.com/docs/wp-content/uploads/sites/29/2020/07/cropped-site_icon_v01-32x32.png Header – Bimber Theme Documentation https://bimber.bringthepixel.com/docs 32 32 Header Overview https://bimber.bringthepixel.com/docs/header-overview/ https://bimber.bringthepixel.com/docs/header-overview/#respond Thu, 20 Feb 2020 08:38:09 +0000 https://bimber.bringthepixel.com/docs/2020/02/20/overview-2/ The header theme area consists of various elements like logo, menu, or social icons. The theme offers the Header Builder so you have full control over the header composition.

Frontend view

Builder view

The builder allows you to add, move, and delete every single element using an intuitive drag & drop interface. Please refer to the Header Builder page for more information.

Elements

All available builder elements are listed below. Some elements require setup. Please refer to their configuration pages before using it inside the builder.

1. Secondary Menu

Please refer to the Menu page to learn how to set it up.

2. Social Icons

Please refer to the Social Icons in Header page to learn how to set it up.

Please refer to the Logo page to learn how to set it up.

4. Quick Navigation

Please refer to the Quick Navigation page to learn how to set it up.

5. Primary Menu

Please refer to the Menu page to learn how to set it up.

6. Hamburger Menu (Off-Canvas)

Please refer to the Hamburger Menu page to learn how to set it up.

7. Dark/light Mode Switcher

Please refer to the Mode Switcher page to learn how to set it up.

The search icon is one of the header elements. Please use the Header Builder
to add the Search dropdown element to your header.

9. Cart

The cart is one of the header elements. Please use the Header Builder
to add the WooCommerce dropdown element to your header.

10. User Navigation

Please refer to the User Navigation page for more information.

11. Create Button

The create button is one of the header elements. Please use the Header Builder
to add the Create button element to your header.
Please refer to the Create Button page to learn how to customize the button.

Please refer to the Global Featured Entries page to learn how to set it up.

Other Elements

Ad Slot

The ad slot is one of the header elements. Please use the Header Builder
to add the Ad Slot element to your header.
Please refer to the Ads Manager page and learn how to assign an ad
to the Bimber Custom Slots > Inside header slot.

Please be aware that this element is only available if the AdAce plugin is active.

Newsletter Form

The newsletter form is one of the header elements. Please use the Header Builder
to add the Newsletter Dropdown element to your header.

Please be aware that this element is only available if the Mailchimp for WP plugin is active.

Language Selector

The language selector is one of the header elements. Please use the Header Builder
to add the Language Selector element to your header.

Please be aware that this element is only available if the WPML plugin is active.

Please refer to the Top 10 page to learn how to set it up.

Colors

Please refer to the Colors page for more information.

]]> https://bimber.bringthepixel.com/docs/header-overview/feed/ 0 Header Builder https://bimber.bringthepixel.com/docs/header-builder/ https://bimber.bringthepixel.com/docs/header-builder/#respond Thu, 20 Feb 2020 08:38:09 +0000 https://bimber.bringthepixel.com/docs/2020/02/20/header-builder/ The header builder allows you to compose any header layout using an easy and intuitive drag & drop interface.

Quick Start

To start building your header, please do as follows:

  1. Open the WP Dashboard › Appearance › Customize › Header › Builder panel
  2. Click the Open Header Builder button.
  3. Choose header type (e.g. Desktop)
  4. Use drag & drop interface to move header elements between rows
  5. Click on an element (e.g. Logo) to open its settings panel
  6. Publish changes

Header types

The builder allows you to compose separately 3 types of headers:

  1. for Desktop devices (see above).
  2. for Mobile devices.

  3. for Canvas.

Pre-made compositions

The builder offers a few pre-made header compositions for a quick start. Please do as follows to start working from a pre-defined layout:

  1. Open the WP Dashboard › Appearance › Customize › Header › Builder panel
  2. Click one of the available Compositions.
  3. Adjust your header.
  4. Publish changes

Rows

The header layout is divided into 3 rows (labeled as a, b, c). Every row has 3 cells (left, middle, right).

To reposition rows, use the icon next to it.
To change row/cell properties, click the icon next to it.
To move an element between rows/cell, just drag & drop it.

To make the header sticky, please click the cog icon next to a row you want to make sticky (screen, point 1)
and set the Sticky option to On (screen, point 2).

]]> https://bimber.bringthepixel.com/docs/header-builder/feed/ 0 Colors https://bimber.bringthepixel.com/docs/colors/ https://bimber.bringthepixel.com/docs/colors/#respond Thu, 20 Feb 2020 08:38:09 +0000 https://bimber.bringthepixel.com/docs/2020/02/20/colors/ All color options are located under the WP Dashboard › Appearance › Customize › Header panel. Colors are divided into sections:

  • Row A – for the row with label a (screen)
  • Row B – for the row with label b
  • Row C – for the row with label c
  • Canvas – for the canvas menu
  • Submenus – for submenu items
]]> https://bimber.bringthepixel.com/docs/colors/feed/ 0 Create Button https://bimber.bringthepixel.com/docs/create-button/ https://bimber.bringthepixel.com/docs/create-button/#respond Thu, 20 Feb 2020 08:38:09 +0000 https://bimber.bringthepixel.com/docs/2020/02/20/create-button/ Hide the Create button

In order to hide the Create button or show it only to the logged in users, please:

  1. Go to the WP Dashboard › Appearance › Customize panel
  2. Go to the Header › Elements section
  3. Change the Show “Create” button option to disable the button or show it only for the logged in users.

Choose create button type

In order to hide the Create button or show it only to the logged in users, please:

  1. Go to the WP Dashboard › Appearance › Customize panel
  2. Go to the Header › Elements section
  3. Change the “Create” button type option to “Create (button)” in order to make it a button linking to Frontend Submission page
  4. Change the “Create” button type option to “Create (dropdown)” in order to make it a dropdown with links to different formats
  5. Change the “Create” button type option to a “Create -format name-” in order to make it a button linking to a specific format

Change the Create button label

In order to change the Create button label, please:

  1. Go to the WP Dashboard › Appearance › Customize panel
  2. Go to the Header › Elements section
  3. Change the “Create” button label option to your desired text.
]]> https://bimber.bringthepixel.com/docs/create-button/feed/ 0 Global Featured Entries https://bimber.bringthepixel.com/docs/global-featured-entries/ https://bimber.bringthepixel.com/docs/global-featured-entries/#comments Thu, 19 Mar 2020 13:47:11 +0000 https://bimber.bringthepixel.com/docs/2020/03/19/global-featured-entries/ The featured entries are a list of posts under the primary navigation or above the header. These might be the most shared posts from the last week or posts tagged by you (let’s say “WOW” posts).

Setup

All configuration options can be found under the WP Dashboard › Appearance › Customize › Header › Featured Entries.
You can customize:

  • Visibility – Home or/and Single post
  • Template – grid or list
  • Mode – boxed or stretched
  • Image size and ratio
  • Space between posts (gutter)
  • Number of posts
  • Location – below menu or above header
  • Title position – below or on the featured image (grid image title)
  • Type – recent, most viewed or most shared
  • Whether to include or exclude posts from the main collection to prevent duplication

You can also filter posts by:

  • Categories
  • Tags
  • Time range

Boxed vs Stretched

The featured posts can be limited to the content width (boxed mode, the screen on top) or stretched (full width, the screen below).

To switch to the stretched mode, please follow these steps:

  1. Go to the WP Dashboard › Appearance › Customize › Header › Featured Entries panel
  2. Check the Full-width option
  3. Publish

Types

Posts can be based on publication date (recent), shares, or views. To choose your type, please follow these steps:

  1. Go to the WP Dashboard › Appearance › Customize › Header › Featured Entries panel
  2. Choose from the Type options
  3. Publish

The Most Shared type

To use this option you need a plugin that counts social shares on your site. We recommend the Mashshare Share Buttons plugin. After theme activation you should be asked to install it or you can do that later, manually via the WP Dashboard › Appearance › Install Plugins page.

Read more about the plugin integration.

The Most Viewed type

To use this option you need to a plugin that counts post views on your site. We recommend the WordPress Popular Posts plugin. After theme activation you should be asked to install it or you can do that later, manually via the WordPress Admin › Appearance › Install Plugins page.

Read more about the plugin integration.

Exclude from main collection

This is a really important option. It prevents posts from being duplicated on your homepage. If you selected the Recent type in the step above,
all new posts will first show up as the global featured posts. And won’t be visible in the Latest Posts (main posts feed) section.
To change that and load posts in both sections, please follow these steps:

  1. Go to the WP Dashboard › Appearance › Customize › Header › Featured Entries panel
  2. Uncheck the Exclude from the main collection? option
  3. Publish
]]> https://bimber.bringthepixel.com/docs/global-featured-entries/feed/ 1 Hamburger Menu (Off-Canvas) https://bimber.bringthepixel.com/docs/hamburger-menu-off-canvas/ https://bimber.bringthepixel.com/docs/hamburger-menu-off-canvas/#respond Thu, 20 Feb 2020 08:38:09 +0000 https://bimber.bringthepixel.com/docs/2020/02/20/hamburger-menu-off-canvas/ The hamburger menu is a side menu, sliding in when you click the burger icon. You can easily change the order of elements inside, customise colors and upload background image.

Setup

To enable the menu, please do as follows:

  1. Open the WP Dashboard › Appearance › Customize › Header › Builder panel
  2. Click the Open Header Builder button.
  3. Choose the Desktop tab
  4. Use drag & drop interface to move the Hamburger menu element between rows (a, b, c)
  1. Now, choose the Canvas tab
  2. Adjust canvas colors and upload background (point 1)
  3. Preview changes (point 2)
  4. Use drag & drop interface to add/remove elements (point 3)
  5. Publish changes

Stick off-canvas

To make the off-canvas menu sticky (like you can see e.g. on our Video demo), please do as follows:

  1. Open the WP Dashboard › Appearance › Customize › Header › Builder panel
  2. Click the Off-canvas panel
  3. In the Sticky section, select where you want to keep the menu sticky
  4. Publish changes
]]> https://bimber.bringthepixel.com/docs/hamburger-menu-off-canvas/feed/ 0 Logo https://bimber.bringthepixel.com/docs/logo/ https://bimber.bringthepixel.com/docs/logo/#respond Thu, 20 Feb 2020 08:38:09 +0000 https://bimber.bringthepixel.com/docs/2020/02/20/logo/ By default the theme displays the site title in the Header Theme Area. You can easily change it and display the logo image.

To set up a logo for desktop devices, please follow these simple steps:

  1. Open the WP Dashboard › Appearance › Customize panel
  2. Switch to the Site Identity section
  3. Upload the Logo
  4. Set the Logo Width and Logo Height
  5. Optionally, upload the Logo HDPI (read below what it is for)

Retina version

To make your logo look sharp on high-resolution screens, please upload double-sized Logo HDPI in the same section as the standard logo.
The theme detects which version to use to make the best viewing experience.

To set up a logo for mobile devices, please follow these simple steps:

  1. Open the WP Dashboard › Appearance › Customize panel
  2. Switch to the Site Identity section
  3. Upload the Mobile Logo
  4. Set the Mobile Logo Width and Mobile Logo Height
  5. Optionally, upload the Mobile Logo HDPI (check the Retina section to know what it is for)

To set up a logo for desktop devices with dark skin on, please follow these simple steps:

  1. Open the WP Dashboard › Appearance › Customize panel
  2. Switch to the Site Identity section
  3. Upload the Logo Inverted. This logo should be the same size as the Desktop Logo
  4. Optionally, upload the Logo Inverted HDPI (check the Retina section to know what it is for)

To set up a logo for mobile devices with dark skin on, please follow these simple steps:

  1. Open the WP Dashboard › Appearance › Customize panel
  2. Switch to the Site Identity section
  3. Upload the Mobile Logo Inverted. This logo should be the same size as the Mobile Logo
  4. Optionally, upload the Mobile Logo Inverted HDPI (check the Retina section to know what it is for)

]]> https://bimber.bringthepixel.com/docs/logo/feed/ 0 Menu https://bimber.bringthepixel.com/docs/menu/ https://bimber.bringthepixel.com/docs/menu/#respond Thu, 20 Feb 2020 08:38:09 +0000 https://bimber.bringthepixel.com/docs/2020/02/20/menu/ For beginners

If you are new to WordPress, please check out first the WordPress Menu system guide. It covers the basic usage tasks like creating a new menu, adding items to it, and assigning a menu to a theme location.

Mega Menu

The Mega menu is a special type of menu item, changing the way sub-items are rendered. Below you can check available compositions.

The Mega menu works for the Primary and Secondary menu location.

Category

The Category type is a type of Mega Menu that displays the newest category entries in a box appearing, while the mouse cursor hovers over the category menu entry.

To set up a category menu, please:

  1. Go to the WP Dashboard › Appearance › Menus panel
  2. Select a menu and make sure its location is set to Primary Navigation or Secondary Navigation (the Manage Locations tab)
  3. Use the Categories tab on the left to add a category entry to the menu
  4. Expand the entry in the Menu structure by clicking the arrow in its top right corner
  5. Turn on Turn into Mega Menu checkbox
  6. Make sure you remember to save the changes

Columns

The Columns type is a type of Mega Menu that displays the children of a menu entry in a Mega Menu box instead of standard hover dropdown.

To set up the Columns menu, please:

  1. Go to the WP Dashboard › Appearance › Menus panel
  2. Select a menu and make sure its location is set to Primary Navigation or Secondary Navigation (the Manage Locations tab)
  3. Find a menu entry that has nested child menu entries. You can make a menu entry a child of its preceding entry by dragging it to the right
  4. Expand the parent entry in the Menu structure by clicking the arrow in its top right corner
  5. Turn on Turn into Mega Menu checkbox
  6. Make sure you remember to save the changes

Categories

The Categories type is a type of Mega Menu that displays post categories in a Mega Menu box instead of standard hover dropdown.

To set up the Categories menu, please:

  1. Create a new page in WP Dashboard › Pages
  2. Name it Browse Categories
  3. Open it for edition using the WP Bakery Page Builder
  4. Add the Bimber Categories block
  1. If you don’t use the WP Bakery Page Builder, add this shortcode
    [ bimber_categories max="99" orderby="count" show_icon="none"]
  2. Save the page
  3. Now, go to the WP Dashboard › Appearance › Menus panel
  4. Select a menu and make sure its location is set to Primary Navigation or Secondary Navigation (the Manage Locations tab)
  5. From the Pages meta-box on the left, add the Browse Categories page to your menu (screen)
  6. This menu item (page) MUST NOT have any sub-items
  1. Expand the page in the menu structure by clicking the arrow in its top right corner
  2. Adjust the page’s label if you want
  3. Check the Turn into Mega Menu checkbox (screen)
  4. Save changes

An icon (visible in the drop menu) and the category image (visible on a page with [ bimber_categories ] shortcode) can be set per category via WP Dashboard > Posts > Categories > A CATEGORY > Edit > Media section.

Theme menu endpoints

The theme offers a few special menu items you can use inside any of your menus:

  • Random post
  • Top 10
  • Latest
  • Popular
  • Hot
  • Trending

To add a special menu endpoint to a menu, please:

  1. Go to the WordPress Admin › Appearance › Menus panel
  2. Select a menu
  3. Use the Bimber tab (screen below) on the left to add a menu item to the menu
  4. Make sure you remember to save the changes

Plugins menu endpoints

Other plugins offer similar special menu items.

BuddyPress

BuddyPress as a community plugin offers a lot of user-related menu items. Most important are:

  • Log in
  • Log out
  • Register
  • Profile
  • Posts (only if Snax plugin activated)
  • Submissions (only if Snax plugin activated)
  • Votes (only if Snax plugin activated)
  • Reactions (only if What’s Your Reaction plugin activated)
  • Badges (only if myCRED plugin activated)

Snax

Snax special menu endpoints are:

  • Log in
  • Log out
  • Waiting Room

as well as all its formats (Video, List, Story, Quiz) in the separate tab called Snax Formats.

What’s Your Reaction

If you want to add a reaction (Love, LOL, WTF etc.) to your menu, please use the Reactions tab.

]]> https://bimber.bringthepixel.com/docs/menu/feed/ 0 Quick Navigation https://bimber.bringthepixel.com/docs/quick-navigation/ https://bimber.bringthepixel.com/docs/quick-navigation/#respond Thu, 20 Feb 2020 08:38:09 +0000 https://bimber.bringthepixel.com/docs/2020/02/20/quick-navigation/ Quick Navigation is an element that displays links to the theme’s special lists.

Setup

To enable links in the Quick Navigation, please do as follows:

  • Go to the WP Dashboard › Appearance › Customize panel
  • Switch to the Posts › General section
  • Check the Enable “Popular” collection box to enable the Popular collection
  • Check the Enable “Hot” collection box to enable the Hot collection
  • Check the Enable “Trending” collection box to enable the Trending collection
  • The Top in menu option set to separate
  • Check the Latest posts page to show the Latest link
  • To show the Popular link, please select the corresponding page in the Popular posts page select
  • To show the Hot link, please select the corresponding page in the Hot posts page select
  • To show the Trending link, please select the corresponding page in the Trending posts page select

Missing pages

If you can’t find any of Popular, Hot, or Trending pages, you need to create them first.
All are regular WordPress pages, so you can create them via WP Dashboard › Pages › Add new interface.
You can add content to these pages but it’s not necessary, you can leave them empty.

Location

You can place the Quick Navigation inside the Header using our Header Builder.

]]> https://bimber.bringthepixel.com/docs/quick-navigation/feed/ 0 Search https://bimber.bringthepixel.com/docs/search/ https://bimber.bringthepixel.com/docs/search/#respond Thu, 20 Feb 2020 08:38:09 +0000 https://bimber.bringthepixel.com/docs/2020/02/20/search/ Using the Header Builder you can place the Search form wherever you like inside the header theme area. You can use a standard form or Ajax Instant Search.

AJAX search allows your visitors to preview the results of their searches in real-time instead of having to go to the search results page. This setting applies both to the search on the navbar and to the search widget.

To enable AJAX search, please:

  1. Go to the WP Dashboard › Appearance › Customize panel
  2. Switch to the Search section
  3. Turn on the Enable AJAX search results option

Input Placeholder

To provide feedback for users how many posts they can search through, please do as follows:

 

  1. Go to the WP Dashboard › Appearance › Customize panel
  2. Switch to the Search section
  3. Fill in the Input placeholder input, e.g. “Search %post_count% videos…” (screen)
]]> https://bimber.bringthepixel.com/docs/search/feed/ 0