gbeaver

How do you create site header using Beaver Builder on Genesis Framework?

These days Beaver Page Builder plugin is very popular tools for web development work. This plugin is also compatible with Genesis Framework and you can quickly develop a site. So I’m replacing the default Genesis child theme header with custom one using Beaver Builder plugin.

Step 1: Creating a template

  • Login to Dashboard
  • Navigate to Settings->Page Builder and enable the “Template” feature
  • Navigate to Builder -> Templates and create a new template
  • Publish the template

Step 2: Add a simple snippet

Open the functions.php file of your child theme and add this small snippet at end of the file.

 

How do you call the style.css file from outside of your child theme?

We knew that child themes are updating periodically. So you are fetching the lot of troubles when you are updating the theme. You can easily overcome this hassle using the latest version (2.0+) of GBeaver Theme.

Here is the full procedure:

Step 1: Create a folder “customize-gbeaver” and put into wp-content folder. Now copy the style.css file from themes/gbeaver folder and put into “customize-gbeaver” folder.

Step 2: Create a new PHP file “custom-functions.php” and put into “customize-gbeaver” folder. Open this file and add the following snippets:

Step 3: Open the style.css file from customize-gbeaver folder and feel free add new css or edit/delete the existing CSS code. You can also optimize this CSS file by removing the unwanted CSS codes.

Therefore you will not loss any custom codes when new version will release.

Notes: Follow this guideline who is already creating the site(s) with very old version.

How do you add shrink effect on your site header?

One of my GBeaver theme’s customer asked this effect. I am sharing the tips here. So it will help my other customers also.

Step 1: Login to Dashboard and go to GBeaver Theme options page. Expand the General Settings section and enable the “Sticky Header” effect.

Step 2: Open the style.css file and add this new CSS

Step 3: Create a new JS file “shrink-header.js” and put into assets/js folder. Here is the full code of this JS file:

Step 4: Open the functions.php file and add this PHP code

Make the menu sticky on mobile devices

Original request was

Sticky Menu Query

Please follow the steps at below:

Step 1: Open the style.css file on Notepad+ or any other editor, go to media queries section (my end line no 2890-2893) and remove the following CSS:

Step 2: Go to gbeaver/assets/js folder and open the gbeaver-scripts.js file. Now replace this existing code

WITH

Adding Toggle Search Icon at Header Right Widget Area

toggle-search-form

Step : 1

Login to Dashboard, navigate to Appearance -> Widgets page, drag&drop the Text widget in Header Right widget area. Enter this HTML code into textarea and save the widget. Note: FontAwesome icon is using here. Make sure you enabled the FontAwesome from GBeaver -> General Settings section.

 

Step 2:

Open the gbeaver/lib/structure/search.php file and add this PHP codes at end of the file:

 

Step 3:

Open the gbeaver/assets/js/gbeaver-scripts.js file and add the following JS code at line no 79:

 

Step 4:

Lastly open the style.css file and drop the following CSS at end of the file:

Transparent Header with Hero Banner

Transparent Header with Hero Image

Transparent header effect is available on GBeaver 1.0.4. You can add this transparent header effect on any post type (posts, pages or CPTs). See the procedure below to add this header effect:

Step 1: Login to Dashboard and navigate to add/edit WP Editor screen. You may, first, need to enable the WordPress custom fields option for post types like page, post or custom post type page, if it is disabled.

Enable Meta Box

Step 2: Scroll down the page and go to “Custom Fields” section. Click on “Enter new” link, enter “transparent_header” in Name input box and “yes” into Value input box. Click on “Add Custom Field” button and save the meta data. (See the attached image)

Add Meta Data

Click on “Publish” or “Update” button and live the page. Checkout the page on the browser and see the transparent effect.

See the live demo here.

Note: If you are using ACF or any other plugin for custom meta fields on your site, you can also do it using that plugin. Just remember that meta key name would be “transparent_header” and meta value would be “yes”.

How do you change the default colors

GBeaver theme provides you with inbuilt color assets option at Customizer. So users can easily overwrite the default color with a new color without editing the style.css file.

Just login to Dashboard, navigate to GBeaver theme options page, expand the General Settings section and enable the Color Assets. Have a look at the screenshot below:

enable-color-assets

customizerNow click on Appearance -> Customize link and you will be redirected to another page. Click on “Colors & Padding” panel, expand the “Global Colors” section and setup the link color, link hover color, body text color, heading color, buttons color, etc. Lastly, click on “Save & Publish” button and save the settings. Let us know what you think about this amazing feature in our comments section!

How to replace default google fonts with new one

GBEAVER Theme uses “Poppins” font for heading and “Alegreya Sans” font for body text. Users can easily replace these two fonts with their custom fonts.

Example:

For instance, If you use “Montserrat” font for heading & “Sorts Mill Goudy” for body text. Navigate to google fonts site (https://fonts.google.com/) and search the “Montserrat”. Now click on “red plus” icon and select the font. Similarly, apply the same procedure for “Sorts Mill Goudy” font.

Now expand the “Fonts Selected” panel and click on “customize” link. Setup the font’s weight like attached image.

fonts-weight

Click on “Embed” link and copy the blue part only at standard section (see the image below).

select-font-family

Subsequently, you will open the functions.php file from gbeaver folder and go to “gbeaver_enqueue_scripts_styles” function. Find the text “Alegreya+Sans:300,400,700|Poppins:700” and replace it with “Montserrat:700|Sorts+Mill+Goudy:400,400i”. Save the file.

Next open the style.css file and replace the ‘Poppins’ with ‘Montserrat’ (apply search & replace method). Similarly, replace ‘Alegreya Sans’, sans-serif with ‘Sorts Mill Goudy’, serif. Save the CSS file. Now refresh your site and see the changes.