A Few Questions

Beaver Builder
1

Hi, I’ve really enjoyed using Beaver Builder, it’s allowed me to develop the kind of site I wanted to create, here is what I am working on: www.danieltoma.ca

A few questions:

  1. How can I eliminate the additional row above the footer? (on each of my pages)
  2. Is there a way I can add the CPA logo (currently near the bottom of the homepage) to the footer? (right side of footer)
  3. Is there a way to incorporate an icon into a heading? On the home page- I want to put a heart icon into the title “I Love Technology” replacing the word Love with the icon
  4. Is there a way you can suggest to adjust spacing between menu items?
  5. Mobile version- when loading the website on my phone the homepage main image is zoomed in a lot, I read reply #24277 from Ben, can he also let me know the appropriate CSS code to fix this?
2

Hey Daniel,

Great to hear! Ok, in response to your questions/requests:

  1. How can I eliminate the additional row above the footer? (on each of my pages) It would appear the widgets area is showing throughout the site. In the customizer > footer > footer layout, disable the footer widgets in that pull down. That should get that fixed up!

  2. Is there a way I can add the CPA logo (currently near the bottom of the homepage) to the footer? (right side of footer) Yes, you can use HTML. The HTML can then be put into the customizer footer layout text field via footer column 1 layout. If you need assistance on how to whip up that HTML, this should help and you can grab the image URL from the media library.

  3. Is there a way to incorporate an icon into a heading? On the home page- I want to put a heart icon into the title “I Love Technology” replacing the word Love with the icon Yes, you can use font awesome. Just find a heart and copy the code they give you and insert in place of that word.

  4. Is there a way you can suggest to adjust spacing between menu items? Here is one thread and another that should help here!

  5. Mobile version- when loading the website on my phone the homepage main image is zoomed in a lot, I read reply #24277 from Ben, can he also let me know the appropriate CSS code to fix this? This is natural actually, but can you link me to the thread you mention here?

Best,
Billy

3

Thanks Billy, your responses were very helpful!

Here is the link to the thread I was referring to in #5
http://forum.wpbeaverbuilder.com/support/q/responsive-background-photo-full-width/#post-24277

4

Hey Daniel,

Glad you read that thread, I spent a lot of time composing that. :slight_smile: Anyway, the only acceptable solution I had there was to change the background for mobile. First, you’ll need to add a class(Advanced > Class) to that row where you have the background image implemented. Then you can add this CSS snippet. Just change special-class to whatever classname you’ve added and place the URL of the BG image in between the parentheses.

@media (max-width: 767px) {
  .fl-content .special-class .fl-row-content-wrap {
    background-image:url();
  }
}

Hope this helps!

Ben

5

Thanks Ben, sorry I am a newbie so just trying to understand what I need to do- I add a class name to the row, then where do I enter the CSS?

6

Hey Daniel,

I can see that your site is using the BB Theme. You can place it under Appearance > Customize > Code > CSS Code. Or if you have a child theme, you can place it to your style.css file which can be found under Appearance > Editor. Either works just fine. :slight_smile:

Ben

7

Thanks Ben, I’m not sure what I’m doing wrong, I entered “mobile-1” in the Class field in the row settings and then entered the following in the CSS code section:

@media (max-width: 767px) {
.fl-content .mobile-1 .fl-row-content-wrap {
background-image:url(http://danieltoma.ca/wp-content/uploads/2015/07/blue-handshake.jpg);
}
}

I’m getting the same result as before with the image zoomed in… I know it’s identifying the right image because if I enter an error for the url name (in the brackets) the mobile version loads no image at all.

8

Hey Daniel,

You actually have to use a different image. Preferably, one that is taller, to accommodate the portrait mode of mobile phones. No matter what we do, that image you are currently using will have to be either cropped or stretched out when used as a background on mobile. If you’d like to see what I mean, try using this CSS snippet.

@media (max-width: 767px) {
  .fl-content .special-class .fl-row-content-wrap {
    background-size: 100% 100%;
  }
}

Ben

9

Ahhhhh, now I understand! I’ll fiddle around with an alternate image, thanks for your help!

10

Hey Daniel,

No worries! :slight_smile: Have fun with The Beaver! :slight_smile:

Ben