Text overlaying photo

BB Theme
1

Hi BB team and forumers,

Is there an easy way to overlay text over a photo ? I guess there isn’t, I tried to insert a background image on column but no way and there is no solution to force caption to be always visible and even if it would be possible, caption is not clickable…

I d’like to do a simple layout similar to this one : http://my.studiopress.com/themes/ambiance/#demo-full
or http://www.fastlinemedia.com/ (but this one is not responsive)

Any idea or tips ?
Best regards,
Marc

2

Auto answer : I guess the best solution is :

  1. Create the desired layout, e.g. a 2 columns row
  2. Use the BB Photo module into the layout
  3. Inspect the corresponding html generated code and copy it
  4. Remove the photo module
  5. Add a BB Html module (in place of the removed photo module)
  6. Copy the html code (from point 3) and modify it to make the caption clickable: surround the fl-photo-caption by < a >< /a >
  7. modify CSS to force the caption to be always visible (opacity: 100) and to put it over the image : position: absolute; top: 50%;

What do you think ?
Brs

3

Hey Mark,

Thanks for getting in touch! The best way to achieve what you want is to put a background image on your column. It is not supported by BB but it can be done via CSS. You can place an ID/Class to your column and you can target that with your background image CSS. I wouldn’t really recommend the absolute positioning as it may generate more problems on the responsiveness of your site.

Hope this helps!

Ben

4

Thanks for your support Ben.

Marc

5

Anytime, Marc! Let us know if you need anything further. Enjoy The Beaver! :slight_smile:

Ben

6

Hi Ben,

I’d also like to add an image background to a column. Would you be able to let me have specimen css that would go into the ID and CSS Class fields in the column settings?
Thanks, Gerry

7

Note: Version 1.5.8.just came out and column images are now supported.
Check out the most recent post…
Regards, Dave

8

Thanks Dave, great timing!

Gerry

9

Dave can you direct me to the post you are referring to above. I have spent the last few hours trying to put text on top of a photo as seen in some of your homepage templates. Were these template pages created on photoshop and then uploaded. Maybe that is just not one of the features here I was hoping for. I am a novice user. Know nothing about code. I just wanted a simple drag and drop builder.

Also, can you please explain to me what the right and sidebar is and why I would want to use it.

Do you have any webinars or videos for using the templates step by step. I watched the Dynamik Beaver videos 1 and 2 and they are great. I did get really confused however- I finally realized that you all had updated and the design features had moved and looked nothing like what he was doing on the video. Can’t wait for him to make another updated version. Any new and helpful tools would be appreciated. Thank you.

10

Hi Alexandra,
That discussion is not about putting text on top of a photo, but allowing an image to be the background for a row - but of course there can be many things on top of the row.
You can add text on top of an image using the Content Slider - each one can have a header and text and there are settings for positioning the text.

Here is a link to the logs to follow changed in the theme and builder (sorry I can’t find that post, it is going back a fair way!)
But it is essentially:
“Photo backgrounds can now be added to columns.”
http://forum.wpbeaverbuilder.com/change-logs/

A right sidebar is a common design pattern for websites, WordPress or otherwise.
Just look at this very page - the right sidebar had quick links to other areas of this site.

HTH, Dave

11

Hi David:

I dragged the Content Slider into a row.

Doing this the text continues to appear under the picture.

For Slide 1 - I selected Photo - Full Size

For Slide 2 - Under Content Layout I selected Text - Should this be Text and Photo and do I need to use by Slide 1 and 2.

I used the Style Layout Tab and selected left. I want the text to be at the top left side of photo.

What could I be doing wrong.

12

Hey Dave,

Thanks for jumping in! :slight_smile:

Alexandra,

You can check the link below for more info on our Layout Templates. Feel free to snoop around that part of the site for more help articles as well.
http://forum.wpbeaverbuilder.com/knowledge-base/layout-templates/

Hope it helps!

Ben

13

Hi Ben: Yes I have watched that several times but it still does not address the issue I am having with the text appearing at the bottom instead of on top of the photo.

Also, are there other lesson videos. This is the only one I see and don’t see a link to other videos on this page you sent.

14

Hey Alexandra,

What did you want to do? Did you want texts on top of the image? If you go to the Row/Column settings, there should be an option for background. Change that to Photo and set a photo for your background. You can then add a Text Editor module on top of that.

I was actually referring to our Knowledge Base page. I’ll post the link here.
http://forum.wpbeaverbuilder.com/knowledge-base/layout-templates/

Hope this helps!

Ben

15

Yes Ben that is exactly what I want to do. So I just now did what you said. We are making progress. I edited the Row/Column settings and inserted photo and selected full because I wanted the image to be big but the image only fills up the row and only showing about 1 inches of the picture. When I hit save- the image disappears completely.

Any other suggestions about why the image is not filling the screen. Once I get this down I think I can add the text module on top of it and a call to action button.

16

Hey Alexandra,

That’s because it’s a background image. It depends on the size of the content that you put in. Try placing a Text Editor module on that row and add a few lines. You could also play around with the padding of the row.

Ben

17

Well Ben I give up for now. I have only been using Beaver Builder 2 days. Never did get the text on image. I did take the “Something Awesome is coming” template thinking I could just work with it but when I brought it in to my template the image you had in place on it went away. I tried various images of own and I would see it for a second but when I save it and publish the page and view it, the image is not there. Do you think it is a bug issue.

Another odd thing that has happened. Some times when I click to look at images using some of these modules, of course it takes me to the gallery but I tried to exit several times without out adding an image and it would not let me. The X in the top right corner did not work. Only way to exit was by adding image and then deleting it once I got out of there.

Maybe I will have better luck tomorrow or this evening after I stepped away from it.

18

Hey Alexandra,

The Core templates resources don’t get loaded when you use them. They’re a bit different from regular templates. If you would like, I can show you how it’s done. I can create a page for you then you can play around with it. Do you mind sharing temp admin access to the site so I can do so? You can use the private reply option below.

I am getting the same thing on the Media Library. I will have to report this to the guys. Thanks for the heads up! You can always click out of it though. Or just hit Escape. :slight_smile:

Ben

19

[Content Hidden]

20

Hey Alexandra,

You can just use your email address or a dummy one to create the account and post the credentials here. Also, I don’t design websites, I only develop them. I suck at designing so I might not be able to help you there. :slight_smile:

The blog grid simply outputs your Posts so you will have to create those, put title and content in it as well as a featured image.

Ben