# How To

**URL:** https://community.wpbeaverbuilder.com/c/customization/how-to/14.md

[Latest](https://community.wpbeaverbuilder.com/latest.md) · [Categories](https://community.wpbeaverbuilder.com/categories.md) · [Tags](https://community.wpbeaverbuilder.com/tags.md)

---

## [About the How To category](https://community.wpbeaverbuilder.com/t/about-the-how-to-category/8449)

<div class="topic-metadata">

**Author:** [@Danny](https://community.wpbeaverbuilder.com/u/Danny)\
**Replies:** 0\
**Last updated:** [May 9, 2019, 11:22pm UTC](https://community.wpbeaverbuilder.com/t/about-the-how-to-category/8449 "2019-05-09T23:22:20Z")

</div>

Tutorial topics that describe how to customize Beaver Builder products for specific needs.

---

## [Focus keyphrase](https://community.wpbeaverbuilder.com/t/focus-keyphrase/19735)

<div class="topic-metadata">

**Author:** [@edwin.nieves](https://community.wpbeaverbuilder.com/u/edwin.nieves)\
**Replies:** 3\
**Last updated:** [June 29, 2025, 7:54pm UTC](https://community.wpbeaverbuilder.com/t/focus-keyphrase/19735 "2025-06-29T19:54:00Z")

</div>

I use Yoest for SEO scoring in the pages I built with BB. I am getting a red dot saying “focus keyphrase not set”. How do I enter the keyphrases using BB? I don’t want to go outside BB as not to mess up the pages.

---

## [Making a non transparent mobile menu when using a transparent navi on tablet/desktop](https://community.wpbeaverbuilder.com/t/making-a-non-transparent-mobile-menu-when-using-a-transparent-navi-on-tablet-desktop/19382)

<div class="topic-metadata">

**Author:** [@brandon.morgan](https://community.wpbeaverbuilder.com/u/brandon.morgan)\
**Replies:** 0\
**Last updated:** [February 14, 2025, 2:08am UTC](https://community.wpbeaverbuilder.com/t/making-a-non-transparent-mobile-menu-when-using-a-transparent-navi-on-tablet-desktop/19382 "2025-02-14T02:08:33Z")

</div>

Hi there! I’m using a transparent menu from Beaver Themer on desktop and tablet, but I’d like a non-transparent menu on mobile because it’s getting lost over my hero images. I’m new to this type of design, and I’m sure …

---

## [Is there a way I can change the scrolling header background to be different to the set header background?](https://community.wpbeaverbuilder.com/t/is-there-a-way-i-can-change-the-scrolling-header-background-to-be-different-to-the-set-header-background/18735)

<div class="topic-metadata">

**Author:** [@kategorgeous](https://community.wpbeaverbuilder.com/u/kategorgeous)\
**Replies:** 0\
**Last updated:** [July 8, 2024, 9:45am UTC](https://community.wpbeaverbuilder.com/t/is-there-a-way-i-can-change-the-scrolling-header-background-to-be-different-to-the-set-header-background/18735 "2024-07-08T09:45:51Z")

</div>

Hi, I have just started a new site and would like the header background to change colour when the user scrolls. Currently the header area has a turquoise background colour and I can see that I can change the logo in BB …

---

## [Subscribe form.. email from user and not wordpress](https://community.wpbeaverbuilder.com/t/subscribe-form-email-from-user-and-not-wordpress/18610)

<div class="topic-metadata">

**Author:** [@jimbob](https://community.wpbeaverbuilder.com/u/jimbob)\
**Replies:** 3\
**Last updated:** [June 3, 2024, 1:43pm UTC](https://community.wpbeaverbuilder.com/t/subscribe-form-email-from-user-and-not-wordpress/18610 "2024-06-03T13:43:34Z")

</div>

Hi, Ive setup a subscribe form which works great except… i would like the email which is sent to me, to be sent from the users email address (which they entered on the subscribe form) and not wordpress@mydomainname.com …

---

## [How Can I Create A Fixed Attachment Video Background. Help Please!](https://community.wpbeaverbuilder.com/t/how-can-i-create-a-fixed-attachment-video-background-help-please/12838)

<div class="topic-metadata">

**Author:** [@tgary719](https://community.wpbeaverbuilder.com/u/tgary719)\
**Replies:** 12\
**Last updated:** [February 20, 2024, 6:31pm UTC](https://community.wpbeaverbuilder.com/t/how-can-i-create-a-fixed-attachment-video-background-help-please/12838 "2024-02-20T18:31:53Z")

</div>

Hi there! I am trying to figure out how I can make the video background to stay fixed as you can do with images. I have tried tons of CSS and keep failing. The video I am looking to make a fixed background video attachm…

---

## [Essential Grids display dates out of order](https://community.wpbeaverbuilder.com/t/essential-grids-display-dates-out-of-order/17999)

<div class="topic-metadata">

**Author:** [@djkomic](https://community.wpbeaverbuilder.com/u/djkomic)\
**Replies:** 1\
**Last updated:** [November 28, 2023, 1:54pm UTC](https://community.wpbeaverbuilder.com/t/essential-grids-display-dates-out-of-order/17999 "2023-11-28T13:54:07Z")

</div>

Hello, I’m currently experiencing a weird issue with the Essential Grid on my events page on WordPress. When I input events, it will display the events on the page, in the correct order. However, I noticed lately now …

---

## [Add IMAGE to responsive MENU](https://community.wpbeaverbuilder.com/t/add-image-to-responsive-menu/17872)

<div class="topic-metadata">

**Author:** [@Lyika](https://community.wpbeaverbuilder.com/u/Lyika)\
**Replies:** 0\
**Last updated:** [October 18, 2023, 10:44pm UTC](https://community.wpbeaverbuilder.com/t/add-image-to-responsive-menu/17872 "2023-10-18T22:44:10Z")

</div>

Hi everyone, I’m trying to figure out how to replace the hamburger menu icon with an image. In BEAVER BUILDER / THEMER LAYOUT I created a HEADER with the menu to insert on all pages. When the menu is in Responsive mode…

---

## [Add custom element styles to Beaver Builder Text Editor module](https://community.wpbeaverbuilder.com/t/add-custom-element-styles-to-beaver-builder-text-editor-module/17453)

<div class="topic-metadata">

**Author:** [@reubenlara](https://community.wpbeaverbuilder.com/u/reubenlara)\
**Replies:** 1\
**Last updated:** [June 28, 2023, 11:25am UTC](https://community.wpbeaverbuilder.com/t/add-custom-element-styles-to-beaver-builder-text-editor-module/17453 "2023-06-28T11:25:45Z")

</div>

Hello! How can I add additional custom styles to the Visual text editor (In addition to the default Paragraph and Headings)? I tried the manual method discussed here, but it didn’t work: Any ideas why, or are there ot…

---

## [Updating Class for header logo and navigation (ex. col-md-12 col-lg-4)](https://community.wpbeaverbuilder.com/t/updating-class-for-header-logo-and-navigation-ex-col-md-12-col-lg-4/16554)

<div class="topic-metadata">

**Author:** [@Helloygoodbye123](https://community.wpbeaverbuilder.com/u/Helloygoodbye123)\
**Replies:** 4\
**Last updated:** [October 24, 2022, 6:51pm UTC](https://community.wpbeaverbuilder.com/t/updating-class-for-header-logo-and-navigation-ex-col-md-12-col-lg-4/16554 "2022-10-24T18:51:50Z")

</div>

Hi there, For my site, I have entered developer mode in Google Chrome. I am focusing on the header logo and navigation area. I can see that within the div class=“fl-page-header-row row”, there are two classes, one for t…

---

## [More Settings in Customizer to target other defaults not listed](https://community.wpbeaverbuilder.com/t/more-settings-in-customizer-to-target-other-defaults-not-listed/15987)

<div class="topic-metadata">

**Author:** [@pietpomp](https://community.wpbeaverbuilder.com/u/pietpomp)\
**Replies:** 0\
**Last updated:** [June 2, 2022, 4:27am UTC](https://community.wpbeaverbuilder.com/t/more-settings-in-customizer-to-target-other-defaults-not-listed/15987 "2022-06-02T04:27:57Z")

</div>

Hi All, How can I add or get more settings into the customizer in order to target some presets that would need css override rules. Specifically, for example, I would like to have something under the General tab. One f…

---

## [How do you create a navigation menu with 2 rows in 1 hamburger button?](https://community.wpbeaverbuilder.com/t/how-do-you-create-a-navigation-menu-with-2-rows-in-1-hamburger-button/15986)

<div class="topic-metadata">

**Author:** [@bbzmath](https://community.wpbeaverbuilder.com/u/bbzmath)\
**Replies:** 0\
**Last updated:** [June 1, 2022, 2:37pm UTC](https://community.wpbeaverbuilder.com/t/how-do-you-create-a-navigation-menu-with-2-rows-in-1-hamburger-button/15986 "2022-06-01T14:37:39Z")

</div>

I currently have a navigation menu to the right of a brand logo image with 4 menu event buttons and 6 main menu navigation items. The # of menu event buttons added to the menu will shift per event timeframes with the…

---

## [How to filter pages by multiple categories](https://community.wpbeaverbuilder.com/t/how-to-filter-pages-by-multiple-categories/15902)

<div class="topic-metadata">

**Author:** [@TeresaH](https://community.wpbeaverbuilder.com/u/TeresaH)\
**Replies:** 0\
**Last updated:** [May 8, 2022, 1:58am UTC](https://community.wpbeaverbuilder.com/t/how-to-filter-pages-by-multiple-categories/15902 "2022-05-08T01:58:13Z")

</div>

I am trying to create a single page where people can go and filter product pages. These pages will have at least 5 categories per page. I have set up the categories and have selected the correct categories for each pag…

---

## [Video as Featured image](https://community.wpbeaverbuilder.com/t/video-as-featured-image/15795)

<div class="topic-metadata">

**Author:** [@SueR](https://community.wpbeaverbuilder.com/u/SueR)\
**Replies:** 1\
**Last updated:** [April 13, 2022, 2:29pm UTC](https://community.wpbeaverbuilder.com/t/video-as-featured-image/15795 "2022-04-13T14:29:10Z")

</div>

Hi. I’m using Beaver Builder and Themer with Easy Digital Downloads. Videos will be available to download from Amazon S3. My question - has anyone managed to display the video instead of where the featured image normal…

---

## [Image Carousel on Advanced Posts Module](https://community.wpbeaverbuilder.com/t/image-carousel-on-advanced-posts-module/15263)

<div class="topic-metadata">

**Author:** [@creativellc](https://community.wpbeaverbuilder.com/u/creativellc)\
**Replies:** 0\
**Last updated:** [November 7, 2021, 5:07pm UTC](https://community.wpbeaverbuilder.com/t/image-carousel-on-advanced-posts-module/15263 "2021-11-07T17:07:28Z")

</div>

Anyone have any success adding an advanced custom field of a gallery image to the posts module? I’d like to make the Featured Post Image a gallery of photos with a carousel to cycle through them. When I try customizing t…

---

## [I need help can anyone help me](https://community.wpbeaverbuilder.com/t/i-need-help-can-anyone-help-me/14740)

<div class="topic-metadata">

**Author:** [@Holdulvlinksteam](https://community.wpbeaverbuilder.com/u/Holdulvlinksteam)\
**Replies:** 0\
**Last updated:** [July 12, 2021, 12:30am UTC](https://community.wpbeaverbuilder.com/t/i-need-help-can-anyone-help-me/14740 "2021-07-12T00:30:02Z")

</div>

Is it possible to change the mobile hamburger menu icon to an image of my own? I’m trying to do it in the custom tool css settings. I am using the trendy trendy theme

---

## [How to adapt my site to be full width](https://community.wpbeaverbuilder.com/t/how-to-adapt-my-site-to-be-full-width/14770)

<div class="topic-metadata">

**Author:** [@sujetameelpico](https://community.wpbeaverbuilder.com/u/sujetameelpico)\
**Replies:** 0\
**Last updated:** [July 16, 2021, 5:32pm UTC](https://community.wpbeaverbuilder.com/t/how-to-adapt-my-site-to-be-full-width/14770 "2021-07-16T17:32:13Z")

</div>

Hi there, I have tried changing in global settings and in the block specific the config of: “full width” but its impossible. My site is: sujetameelpico.com I cant put full width my theme in desktop version.

---

## [Remove JavaScript on anchor links/buttons](https://community.wpbeaverbuilder.com/t/remove-javascript-on-anchor-links-buttons/14567)

<div class="topic-metadata">

**Author:** [@CRojas](https://community.wpbeaverbuilder.com/u/CRojas)\
**Replies:** 0\
**Last updated:** [June 2, 2021, 1:42am UTC](https://community.wpbeaverbuilder.com/t/remove-javascript-on-anchor-links-buttons/14567 "2021-06-02T01:42:54Z")

</div>

Hello, I am building a website using Beaver Builder and the Icelander theme. I have checked this problem with Icelander Support and they sent me here. The website has blind people as target so accessibility is paramount…

---

## [Edit image on contact page in Garden Maintenance theme](https://community.wpbeaverbuilder.com/t/edit-image-on-contact-page-in-garden-maintenance-theme/14335)

<div class="topic-metadata">

**Author:** [@Dallas56](https://community.wpbeaverbuilder.com/u/Dallas56)\
**Replies:** 0\
**Last updated:** [April 16, 2021, 8:32pm UTC](https://community.wpbeaverbuilder.com/t/edit-image-on-contact-page-in-garden-maintenance-theme/14335 "2021-04-16T20:32:39Z")

</div>

I am unable to select or change an image on the contact page on the Garden Maintenance theme.

---

## [How to customise responsive columns](https://community.wpbeaverbuilder.com/t/how-to-customise-responsive-columns/14013)

<div class="topic-metadata">

**Author:** [@joshicmda](https://community.wpbeaverbuilder.com/u/joshicmda)\
**Replies:** 1\
**Last updated:** [February 23, 2021, 3:37pm UTC](https://community.wpbeaverbuilder.com/t/how-to-customise-responsive-columns/14013 "2021-02-23T15:37:18Z")

</div>

I’m working on this page here: https://icmda.net/resources/webinars-copy/ I’ve got the layout looking how I want it on a full screen, but when going to a smaller device, it doesn’t respond how I’d like it to. In the im…

---

## [Embed video on lightbox within accordion module](https://community.wpbeaverbuilder.com/t/embed-video-on-lightbox-within-accordion-module/14012)

<div class="topic-metadata">

**Author:** [@joshicmda](https://community.wpbeaverbuilder.com/u/joshicmda)\
**Replies:** 0\
**Last updated:** [February 23, 2021, 9:59am UTC](https://community.wpbeaverbuilder.com/t/embed-video-on-lightbox-within-accordion-module/14012 "2021-02-23T09:59:53Z")

</div>

I’d like to use the accordion module with a list of videos under various topics. I’d like each video title (just text) to open the embedded video within a lightbox. Is this possible? Can anyone help me with the steps …

---

## [Can not expand things to full width](https://community.wpbeaverbuilder.com/t/can-not-expand-things-to-full-width/13318)

<div class="topic-metadata">

**Author:** [@po99982](https://community.wpbeaverbuilder.com/u/po99982)\
**Replies:** 0\
**Last updated:** [November 6, 2020, 5:39am UTC](https://community.wpbeaverbuilder.com/t/can-not-expand-things-to-full-width/13318 "2020-11-06T05:39:16Z")

</div>

Whenever I try to expand anything it always has a limitation on how large it can be. I am able to shrink it but am never able to expand it. Any idea on how to solve this?

---

## [How do I create a stacked box look in beaver builder](https://community.wpbeaverbuilder.com/t/how-do-i-create-a-stacked-box-look-in-beaver-builder/12746)

<div class="topic-metadata">

**Author:** [@frangistar](https://community.wpbeaverbuilder.com/u/frangistar)\
**Replies:** 1\
**Last updated:** [August 24, 2020, 10:35pm UTC](https://community.wpbeaverbuilder.com/t/how-do-i-create-a-stacked-box-look-in-beaver-builder/12746 "2020-08-24T22:35:20Z")

</div>

Hi there! I am trying to figure out the best way to achieve a look similar to this hero section: http://gbdbella.showit.site/ I am just not sure where to start to create this in beaver builder. I have considered using …

---

## [How do I add a full screen landing/hero graphic?](https://community.wpbeaverbuilder.com/t/how-do-i-add-a-full-screen-landing-hero-graphic/11730)

<div class="topic-metadata">

**Author:** [@tblake6](https://community.wpbeaverbuilder.com/u/tblake6)\
**Replies:** 0\
**Last updated:** [April 16, 2020, 8:27pm UTC](https://community.wpbeaverbuilder.com/t/how-do-i-add-a-full-screen-landing-hero-graphic/11730 "2020-04-16T20:27:36Z")

</div>

Hi . New here. I’m looking to make a sort of landing /hero image that will take up the full display on my website. I would like it to cover everything including the header. So once you scroll the image slides up revealin…

---

## [Embed Video Thumbnail Size and Full (page) Header](https://community.wpbeaverbuilder.com/t/embed-video-thumbnail-size-and-full-page-header/10966)

<div class="topic-metadata">

**Author:** [@srnewtu7](https://community.wpbeaverbuilder.com/u/srnewtu7)\
**Replies:** 0\
**Last updated:** [January 30, 2020, 4:49pm UTC](https://community.wpbeaverbuilder.com/t/embed-video-thumbnail-size-and-full-page-header/10966 "2020-01-30T16:49:25Z")

</div>

Hi - I’m a new Beaver Builder user, so forgive me… Two questions- I’ve been adding pages, and making adjustments, and recently I seem to have done something to change how our videos appear on home page. Thumbnails ar…

---

## [Text underlining colors](https://community.wpbeaverbuilder.com/t/text-underlining-colors/10372)

<div class="topic-metadata">

**Author:** [@lyne.s](https://community.wpbeaverbuilder.com/u/lyne.s)\
**Replies:** 0\
**Last updated:** [November 18, 2019, 12:04pm UTC](https://community.wpbeaverbuilder.com/t/text-underlining-colors/10372 "2019-11-18T12:04:37Z")

</div>

Hello guys, Is there any way to change text underlining to another color than the text itself?

---

## [How to create floating button using Themer and a "Part"](https://community.wpbeaverbuilder.com/t/how-to-create-floating-button-using-themer-and-a-part/9789)

<div class="topic-metadata">

**Author:** [@spidercreations](https://community.wpbeaverbuilder.com/u/spidercreations)\
**Replies:** 3\
**Last updated:** [September 16, 2019, 12:36pm UTC](https://community.wpbeaverbuilder.com/t/how-to-create-floating-button-using-themer-and-a-part/9789 "2019-09-16T12:36:02Z")

</div>

I was looking for a tutorial on creating a floating button that would “stick” to the lower right of a browser window. When this button is selected, a popup (lightbox) would open to show a Contact form. I’m using Gravity …

---

## [Sticky/parallax](https://community.wpbeaverbuilder.com/t/sticky-parallax/9746)

<div class="topic-metadata">

**Author:** [@nicolas69](https://community.wpbeaverbuilder.com/u/nicolas69)\
**Replies:** 0\
**Last updated:** [September 10, 2019, 2:44pm UTC](https://community.wpbeaverbuilder.com/t/sticky-parallax/9746 "2019-09-10T14:44:48Z")

</div>

Dear fellow Beaver Builder Users, I need your help as I’m not able to figure out some design issue. I’d like to implement the same effect on the H1 on my site as on the following one : When you scroll down, the tex…

---

## [Install via composer](https://community.wpbeaverbuilder.com/t/install-via-composer/9722)

<div class="topic-metadata">

**Author:** [@pross](https://community.wpbeaverbuilder.com/u/pross)\
**Replies:** 0\
**Last updated:** [September 6, 2019, 5:53pm UTC](https://community.wpbeaverbuilder.com/t/install-via-composer/9722 "2019-09-06T17:53:30Z")

</div>

Did you know you can use composer to install all Beaver Builder products? https://kb.wpbeaverbuilder.com/article/220-installl-beaver-builder-via-composer

---

## [\[HOWTO\] Add layout data to Yoast analysis tools in page edit](https://community.wpbeaverbuilder.com/t/howto-add-layout-data-to-yoast-analysis-tools-in-page-edit/8868)

<div class="topic-metadata">

**Author:** [@pross](https://community.wpbeaverbuilder.com/u/pross)\
**Replies:** 1\
**Last updated:** [July 29, 2019, 7:14pm UTC](https://community.wpbeaverbuilder.com/t/howto-add-layout-data-to-yoast-analysis-tools-in-page-edit/8868 "2019-07-29T19:14:07Z")

</div>

Add the following as a plugin, and enjoy! Please note, Classic Editor is needed for this to work, it will NOT work with Gutenburg. \<?php /\*\* \* Plugin Name: Beaver Yoast Example \* Description: Adds the layout conte…

[Next page](https://community.wpbeaverbuilder.com/c/customization/how-to/14.md?page=1)
