genesis

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.

 

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

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.