GutenBee is a blogging/business block oriented WordPress theme
The easiest way to install the theme, is by accessing your WordPress admin panel, then go to Appearance > Themes. Click the Add New button on the top of the page. In the next screen type the theme’s name in the search box When the search results appear, hover over the theme and click Install. Once the installation finishes click activate and the theme is ready to use.
The minimum recommended image sizes for GutenBee are:
- Post thumbnail: 960x540px
- Main Item: 615x346px
- Main Item tall : 615px in width and unlimited in height
- Large Item:1260x709px
- Article Media: 510x510px
These are the minimum recommended so all larger images will be cropped to the above dimensions.
These plugins provide functionality and features used directly (or not) by the Theme. So, it is recommended to install and activate them before importing your sample content.
- GutenBee plugin: GutenBee is a collection of elegant WordPress blocks enhancing your editing experience in the Gutenberg editor and vastly extending the potential of the new editor experience.
- WPForms Lite: WPForms allows you to create beautiful contact forms
- MaxSlider: MaxSlider is probably the easiest way to add a custom responsive slider to any page of your website
- AudioIgniter: AudioIgniter lets you create music playlists and embed them in your WordPress posts, pages or custom post types.
- WooCommerce: WooCommerce is a flexible, open-source eCommerce solution built on WordPress
First you will need to download the Sample Content archive file for GutenBee by clicking here. Extract the file like described here for MacOS and here for Windows PC. We are going to import these files using the One Click Demo Import free plugin.
Install One Click Import plugin
Visit Plugins > Add New then
- Search for One Click Demo Import and install the plugin,
- Install and Activate One Click Demo Import from your Plugins page.
After activating the plugin navigate to Appearance > Import Demo Data. In this section add:
- Add your content.xml from your sample content archive.
- Add your widgets.wie from your sample content archive.
- Add the customizer.dat from your sample content archive.
- Import the content
To enable eCommerce functionality for your website you need to install and activate the WooCommerce plugin by Automattic. You can download the plugin free of charge from the WordPress Plugin Repository.
Go to Plugins > Add New and search for WooCommerce. Once the results come back, click the Install Now button.
Once the installation is finished, click the Activate button to activate the plugin.
For detailed installation and usage instructions please refer to the plugin’s documentation.
Once you have installed and activated the WooCommerce plugin please install its pages by clicking on the button that WooCommerce provides on its banner. This will likely create a duplicate of some pages along with the pages install by the sample content but its a needed step. You can delete the old pages that came with the sample content or use them instead by going to WooCommerce > Settings > Pages and assign them anew.
Adding a new blog post
To add new posts to your blog, go to Posts > Add New and proceed to:
- Set your post status. Make it private or draft, and change its date to your preference
- Change your Permalink
- Add Categories to your post. You can add them on the fly or from Posts > Categories
- Add tags to your post
- Set the featured image. This is the main blog/archive page image your post will have
- Add a custom excerpt. If you don’t have any content there, it will be automatically generated. You can change its length from Customize > Blog > Content under
- Disable or enable comments for this particular post
- Change the Post layout. You can select to have your post full width, contained or narrow, as well as to have this post with blank template so no other theme parts will be rendered
Once you are done click the Publish/Update button to publish your post.
Creating a Blog Page
This will be your posts page. Just create and publish a blank default page named “Blog” (or whatever you wish to name it) without adding any content, no further action needed for now. You can control the looks of your Blog page from Appearance > Customize > Blog Settings > Layout Options
Creating a Full Width Page (Narrow or Contained)
This page will have no sidebar, and it comes in three flavors.
- Full Width: This will cover the total of your page
- Full Width Contained: This will have the width you have selected from Appearance > Customize > Global Options
- Full Width Narrow: This template will have a smaller width than the container but still centered in the middle and with no sidebar.
Create a new page from Pages > Add New, then under Page Attributes select the template you want
Creating a Contact Page
We are using WPForms lite but, you can use any popular plugin you want to create your Contact Form. Have a look at WPForms Lite documentation https://wpforms.com/docs/creating-first-form/ on creating a new form. Then create a new Page from Pages > Add New select any template you want from Page Attributes and add a block shortcode, with the form shortcode you have just created.
Creating a Blank Page
Blank page will have no header, footer, sidebar but only the main content. This is great for creating Landing pages using the Block editor. Create a new page from Pages > Add New and select the Blank template from the Page Attributes section.
Customizing your theme
All theme customization is done via WordPress’s built in Customizer. If you haven’t used it or want to learn more about it, please read this article.
Go to Appearance > Customize and you will see this:
Global section will allow you to control the layout, colors, and typography that will apply everywhere in the theme:
Let’s have a look at each option this section provides:
- Apply a full width or boxed container for all content.
- Control the inner full content width.
- Control the content width from (1 to 12). For example, 8 means that your content width will have the 8/12 of your Inner Site Width while the other will be reserved for the sidebar.
- Change the sidebar width. 5 means that your content width will have the 5/12 of your Inner Site Width while the other will be reserved for the main content.
- Select the default layout for your pages, control the position of the sidebar relative to the content or hide it entirely.
When selecting a Boxed layout you will get this screen:
- You can switch layouts anytime you wish.
- Control the outer width of your main content.
- Control the inner width of your main content.
Global – Colors
This section will allow you to change the background color / image as well as all your basic theme elements, like your links, forms, headings, buttons colors:
- Change the body background color.
- Add or remove background image.
- Control the background location and size.
- When using a boxed layout you can select the inner background color.
- Select the boxed layout background image.
- Also you can control the boxed background image location and size.
Global – Typography
Customizing your fonts is included natively in the theme:
- Enable the use of Google Fonts. Not checking this option will give you web safe font controls for your main body text.
- Change the main font family you need to use.
- Change your settings depending on the visitor viewport. This gives you the advantage of having different font sizes for Desktop, Tablet and mobile devices.
- Change the font size and line height.
- Change the text type and your letter spacing.
Here you can control the basic Layout, Content, Colors and Typography of your header. You can also control if you need your header to stick to the top when scrolling.
Header – Layout
Here you can control the basic structure of your header area.
In detail you can:
- Control the header type. Normal means the header will not cover the hero, while being transparent will do! (Even if you don’t have transparency setup from your Header Colors section)
- Make the header cover the full width of the screen.
- Change the Header top and bottom padding and lock these values to behave the same.
- Change the padding section in any device type.
While your header actually has the main menu attached you can show the search button and minicart ( WooCommerce is present )
Beat by default has two shortcodes in this area
Header – Colors
Here you can control all header colors. Pay special attention to transparency control when using the Transparent header type.
Here you can control the colors for your sticky header.
Header-Mobile Nav colors
Here you can change mobile menu navigation colors
Here you can control the Main Menu Font style.
Also in the same section, you can change (if you are using a text logo):
- The text Logo font family and style.
- The tagline font family and style.
Here you can change the logo and favicon as well as the title and description. Use the appropriate fields to add your information, show or hide your site title and subtitle and upload your logo and site icon images.
- Select an image Logo.
- Select an alternate logo that will appear either when your header is sticky with different background color, or when your header has the transparent type selected. This extra field will ensure maximum contrast in any case.
- Limit the size logo in half (you will need to use a 2x image) for retina devices.
- Add your site title.
- Add your site tagline.
- Show/hide your site title.
- Show/hide your tagline.
For your main site icon, you can select any image you want as long as it’s 512x512px in width and height and it’s square.
This tab allows you to customize your blog and post options.
Here you can change your single post and archive (category and tags) looks.
- Change the main blog page Layout.
- Change your archive layout type.
- Change the pagination method.
- Change the Related post columns.
Here you can control which elements you want to show/hide in your Single Post pages and Archives:
- Change the excerpt length in words
- Show or hide the featured image
- Show or hide the post title
- Show or hide the post meta
- Show or hide the content
- Show or hide the Read more button
While in Single Posts you can:
- Show or hide featured images.
- Show or hide the title.
- Show or hide meta information.
- Show tags.
- show post pagination.
- Show the author box.
- Show related posts.
- Show comments.
Here you can change your Archive typography:
- Change the archive heading HTML tag.
- Change the post title font family
- Change the font size and other settings in different viewports
- Change the post meta font family and settings
- Change the font size and other settings in different viewports
Same applies in single post typography:
Here you can:
- Change the post heading HTML tag
- Change the Font family and settings of the post title
- Change the post meta font family and settings
- Change the font size in various viewports
Footer section also has a fully customizable layout, color, and typography section:
Footer – Layout
Here you can select if you want to show or hide the footer as well its size(full width). Also you select how many columns you need to have for your Footer. You can add widgets in your Footer area from Appearance > Widgets or Appearance > Customize > Widgets > Footer
Footer – Colors
Here you can change most of the footer and footer contents colors.
Footer – Typography
Here you can change your Footer Typography using Google Fonts repository.
This section provides control over the Lightbox (gallery popup) and the Back to top button.
Here you can switch the theme Lightbox off if you need to use a third-party one, or simply nothing.
Back to top button
Select the back to top button to appear, and customize it.
Here you can create and assign menus to the theme. To learn more about menu creation check out the Codex’s menu user guide here.
In this tab, you can change the number of products on the shop listing page and control your WooCommerce Settings under Appearance > Customize > Product Catalog and you can also select if you want to show or not related items after each product from Appearance > Customize > Single Product.
Still have questions or problems setting up your CSSIgniter Theme? We will be happy to help you out in our support forums