This page explains how to install and use the B2 WordPress theme.
Installation
After the purchase, download the B2 theme zip file. From your WordPress admin, go to the “Appearance” section and locate the “Add New Theme” button. Now, you’ll be able to click on the “Upload New Theme” button and another button, “Choose File,” to pick the downloaded zip file.
Alternatively, for advanced users, you can upload the theme using the FTP client. Add the theme to the themes section of the WordPress installation, i.e., “wp-content” → “themes.”
Activate B2 theme
When the theme is installed, it will always be available from the “Appearance” section, inside the WordPress admin area.
If you missed activating the theme during the UI installation prompt, simply navigate to Appearance and activate the B2 theme there.
Activate additional plugins
After activating the theme, you can navigate to Plugins → B2 Plugins and activate the plugins packed with the theme.
Editing the Front Page
After installation, you should visit the front side of the site, i.e. Front page/Home page. From the admin toolbar click on the “Edit site” link. This will lead you inside the Site Editor, and you can edit the Front Page template immediately.
- Here you can start editing the template’s placeholder text and images
- If you aren’t entirely satisfied with a predefined design, you can add or replace additional blocks or patterns
- From the right sidebar, you’re able to replace the entire template content with an alternative design
Blog page settings
There are two options for setting a blog page, depending on the Reading settings (Admin’s Dashboard → Settings → Reading):
- If you keep the WordPress default Reading settings, the best way to set up a Blog page is to create a page, e.g. Blog or Latest News. Now, from the Patterns inserter select the “B2 – Posts” and choose one of the post display designs. This will insert the predesigned query block as the page’s content. Just be sure to select the inserted Query block and check that it’s looping the posts (that’s by default). There are other options from the Query block to adjust if you wish.
- If you tamper with the Reading settings and select a particular page as the Posts page, the selected page will automatically inherit the Index page layout and design. To make changes to this template, visit Site Editor → Templates and select the Index template.
Note: It’s recommended to stick with the 1st option from the Reading settings, i.e. default. This is because, with the 2nd option, you need to set the particular page for the Homepage along the Posts page. Since the B2 theme comes with a Front Page template, that option from the Reading settings won’t take effect. That can lead to confusion → In that case, the selected page won’t be displayed as the Front Page, because B2’s Front Page template will act as the Front Page.
This is how WordPress works, often things can be done in different ways. Hopefully, Reading settings (e.g. Front Page/Home/Blog options) will be simplified in the future.
Logo
You can set the Logo from the Site Editor → Patterns → Template Parts. Select the Header template part and there you can edit the logo settings. Either edit the text or upload an image.
Also, if you’re using a specific template, e.g. Front Page which has its particular header, you should set the logo there as well.
Inherited features from the IceCubo theme
B2 is a stand-alone theme based on the IceCubo theme. This means that all the features available with IceCubo are also available with B2. It’s recommended that you check the IceCubo documentation since you can also apply all the options you see there with B2.
Additional features
Further, we’ll explore additional features available with the B2 theme.
Menu
- You can add styling to the top menu by adding the following classes*:
- b2-modal-nav-blur – blurring effect for the mobile navigation modal
- b2-modal-nav-blur-grad – blurring effect for the mobile navigation modal (gradual)
- b2-modal-nav-blur-grad-dark – blurring effect for the mobile navigation modal (gradual and dark)
- b2-modal-button-blur – blurring effect for the mobile’s modal opener button
- b2-modal-button-blur-grad – blurring effect for the mobile’s modal opener button (gradual)
- b2-modal-button-blur-grad-dark – blurring effect for the mobile’s modal opener button (gradual and dark)
- b2-sub-shade – shade applied to the sub-menu container
* The class should be added to the navigation block.
You can also see most of these classes as applied on the theme demo site.
2. Glowing bar as an additional menu item hover style.
This is available, along with other options, from the navigation block’s styling settings.
This option is also utilized in the B2 theme demo.
Search bar in a full-screen
You can set the search bar to full screen by selecting the option from the search block settings.
The B2 theme demo utilizes this option from its header navigation.
Patterns
Additional patterns designed for the:
- 404 page
- Header-Hero section
- Footer section
- Full page patterns (Front-page, About Us, and Services patterns)
While editing a page or template, all these patterns are reached from the Inserter button → Patterns.
SVG icons
From a performance point of view, SVGs are better for usage than images. SVGs are utilized in some patterns (e.g. Front Page 1, Front Page 2, Front Page 3). You can keep them, replace them, or remove them, as you wish.
Glowing elements
Add a class b2-glow to the cover block to get the glowing effect over the elements, as seen on the Front page 7 demo.
Animations
B2 theme has a few animations packed, just enough to emphasize important sections and make it attractive, without compromising page loading performance.
Just add the class to the block settings from its Advanced tab.
Animations are set by applying one of the following classes:
- b2-anim – Global theme’s animation class, mandatory before adding any following class
- anim-bgmatch – The background will be animated with the transition of the palette’s matching colors
- anim-chmatch – Characters will be animated with the transition of the palette’s matching colors
- anim-mark-bgmatch – The background of highlighted characters will be animated with the transition of the palette’s matching colors
- anim-mark-chmatch – highlighted characters will be animated with the transition of the palette’s matching colors
- anim-flipX – flip the selected block
- anim-lineUp – push up the selected block
- anim-lineDown – push down the selected block
- anim-bounce – bounce the selected block
- anim-fadoIn – fade in the selected block
- anim-fadoInUp – fade in and up the selected block
- delh – delay the animation 0.5s
- del1 – delay the animation 1s
- del2 – delay the animation 2s
- del3 – delay the animation 3s
- slow – animation will be slower than the default
- slowest – more slower than ‘slow’
- fast – faster animation than the default
- fastest – more faster than ‘fast’
- animrep – repeat the animation when the block appears in the viewport again
The following animation classes do not require the global b2-anim class and will perform on mouse movement:
- b2-anim-mouse-bubble – for the decorative bubbles, as seen in the Header of the Front page 1 demo, moves it depending on the mouse direction. The class should be added to the wrapper cover or group block that contains the decorative bubble
- b2-anim-mouse-bgop – applies to cover or group block. As seen in the Header of the Front page 2 demo, change the background’s opacity depending on the mouse direction
- b2-anim-mouse-bgmove – applies to cover or group block. As seen in the Header of the Front page 12 demo, it will sway the background depending on the mouse direction. Actually, all three aforementioned animations can be seen there at the same time
- b2-hover-remove-space – this one applies to images only. As seen through the content of the service 3 demo, an image that has some styling applied will lose that style once the mouse hovers over it
MaxBoxy plugin
The theme includes the Pro version of the MaxBoxy plugin, which allows you to create popups, slide-ins, and similar panels. You can follow its documentation from here. With the B2 theme, you do not have to activate the license, it’s automatically active.
