CSSIgniter
Menu

Home » Documentation » GutenBee

Documentation for GutenBee

Get Support
  1. Documentation
    1. Theme installation
    2. Image Sizes
    3. Useful Plugins
    4. Sample Content
      1. Install One Click Import plugin
    5. Installing WooCommerce
    6. Adding a new blog post
    7. Creating a Blog Page
    8. Creating a Full Width Page (Narrow or Contained)
    9. Creating a Contact Page
    10. Creating a Blank Page
    11. Customizing your theme
    12. Global
    13. Header
    14. Blog
    15. Footer
    16. Utilities
    17. Menus
    18. WooCommerce
    19. Next Steps

Documentation

GutenBee is a blogging/business block oriented WordPress theme

Theme installation

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.

Image Sizes

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.

Useful Plugins

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

Sample Content

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.

Don’t forget will need to activate all recommended plugins before importing sample content, under Appearance > About GutenBee.  This will ensure you will get all sample content as intended.

Install One Click Import plugin

Visit  Plugins > Add New  then

  1. Search for  One Click Demo Import and install the plugin,
  2. 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:

  1. Add your content.xml from your sample content archive.
  2. Add your widgets.wie from your sample content archive.
  3. Add the customizer.dat from your sample content archive.
  4. Import the content

This might take a few minutes depending on your server configuration. If you encounter any errors have a look here or contact us directly here

Installing WooCommerce

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:

  1. Set your post status. Make it private or draft, and change its date to your preference
  2. Change your Permalink
  3. Add Categories to your post. You can add them on the fly or from Posts > Categories
  4. Add tags to your post
  5. Set the featured image. This is the main blog/archive page image your post will have
  6. 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
  7. Disable or enable comments for this particular post
  8. 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

Global section will allow you to control the layout, colors, and typography that will apply everywhere in the theme:

Global-Layout

Let’s have a look at each option this section provides:

  1. Apply a full width or boxed container for all content.
  2. Control the inner full content width.
  3. 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.
  4. 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.
  5. 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:

  1. You can switch layouts anytime you wish.
  2. Control the outer width of your main content.
  3. 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:

  1. Change the body background color.
  2. Add or remove background image.
  3. Control the background location and size.
  4. When using a boxed layout you can select the inner background color.
  5. Select the boxed layout background image.
  6. Also you can control the boxed background image location and size.

Global – Typography

Customizing your fonts is included natively in the theme:

  1. Enable the use of Google Fonts. Not checking this option will give you web safe font controls for your main body text.
  2. Change the main font family you need to use.
  3. Change your settings depending on the visitor viewport. This gives you the advantage of having different font sizes for Desktop, Tablet and mobile devices.
  4. Change the font size and line height.
  5. 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:

  1. 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)
  2. Make the header cover the full width of the screen.
  3. Change the Header top and bottom padding and lock these values to behave the same.
  4. Change the padding section in any device type.

Header -Content

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.

Header-Sticky Colors

Here you can control the colors for your sticky header.

Header-Mobile Nav colors

Here you can change mobile menu navigation colors

Header-Typography

Here you can control the Main Menu Font style.

Also in the same section, you can change (if you are using a text logo):

  1. The text Logo font family and style.
  2. The tagline font family and style.

Site Identity

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.

  1. Select an image Logo.
  2. 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.
  3. Limit the size logo in half (you will need to use a 2x image) for retina devices.
  4. Add your site title.
  5. Add your site tagline.
  6. Show/hide your site title.
  7. 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.

Blog

This tab allows you to customize your blog and post options.

Blog-Layout

Here you can change your single post and archive (category and tags) looks.

  1. Change the main blog page Layout.
  2. Change your archive layout type.
  3. Change the pagination method.
  4. Change the Related post columns.

Blog-Content

Here you can control which elements you want to show/hide in your Single Post pages and Archives:

For Archives:

  1. Change the excerpt length in words
  2. Show or hide the featured image
  3. Show or hide the post title
  4. Show or hide the post meta
  5. Show or hide the content
  6. Show or hide the Read more button

While in Single Posts you can:

  1. Show or hide featured images.
  2. Show or hide the title.
  3. Show or hide meta information.
  4. Show tags.
  5. show post pagination.
  6. Show the author box.
  7. Show related posts.
  8. Show comments.

Blog-Typography

Here you can change your Archive typography:

  1. Change the archive heading HTML tag.
  2. Change the post title font family
  3. Change the font size and other settings in different viewports
  4. Change the post meta font family and settings
  5. Change the font size and other settings in different viewports

Same applies in single post typography:

Here you can:

  1. Change the post heading HTML tag
  2. Change the Font family and settings of the post title
  3. Change the post meta font family and settings
  4. 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.

Utilities

This section provides control over the Lightbox (gallery popup) and the Back to top button.

Lightbox

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.

WooCommerce

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.

Next Steps

Still have questions or problems setting up your CSSIgniter Theme? We will be happy to help you out in our support forums

Get access to all WordPress themes & plugins for only $69

24/7 Support Included. Join 115,000+ satisfied customers.

Pricing & Sign Up

30-day money-back guarantee. Not satisfied? Your money back, no questions asked.
× Close Menu