Add Text and Button to Featured Image

shannonrey · Member · Sep 30, 2016 at 6:31 pm
Copy link

Add topic to favorites
How can I add text and a button (to link to a contact form) on top of a Featured Image? I have the Purpose template.

Thank you!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Oct 3, 2016 at 9:51 pm
Copy link
Due to the way that the header image scrolls up behind the top of the window on windows/screens 1025px and wider, this may be difficult. What you would have to do would be to add button/code to a text widget and place it in the footer widget area. Once you do that, I can see if I can move that up and over your top featured image and get it to work on all screen sizes.
shannonrey · Member · Oct 3, 2016 at 10:17 pm
Copy link
Ok thank you. Can I use HTML? I’ve added the text widget to the footer, the button has both HTML and CSS, I wasn’t sure which to use.

If this doesn’t work well, let me know if there another similar template you’d recommend I use instead.

Thanks!
thesacredpath · Member · Oct 4, 2016 at 1:46 am
Copy link
With the CSS you have inserted, it would be best to add that directly to the custom CSS. I would suggest instead of .button for the selector that you use something a little less likely to clash with other CSS, such as .my-button and change the CSS class in the link HTML to match.

Here would be the CSS to move it up. I hid the widget title and took the text color to black as the lighter grey was not readable. See what you think with this and make sure and view it on a phone and tablet as well.
```
.content {
	position: initial;
}
#text-5 {
	position: absolute;
	top:130px;
	max-width: 200px;
	width: 100%;
	color: #000;
}
@media screen and (max-width: 1024px) {
	#text-5 {
		top: 100px;
	}
}
@media screen and (max-width: 767px) {
	#text-5 {
		top: 100px;
		max-width: 180px;
	}
}
#text-5 h6 {
	display: none;
}
```
shannonrey · Member · Oct 4, 2016 at 11:58 pm
Copy link
Hmm it doesn’t seem to be working for me, any ideas? I’ve added the code to the CSS editor
thesacredpath · Member · Oct 5, 2016 at 10:13 pm
Copy link
Hmmm, that worked for me when i originally did it, but I see that the widget that the text widget left in the footer is the the other one instead of the one I originally moved.

I also found another issue, so let’s move that widget into the sidebar widget area instead and then you can add the following and we can then make adjustments to position and styling, etc.
```
#text-7 {
	position: absolute;
	top: 150px;
	right: 100px;
}
```
shannonrey · Member · Oct 6, 2016 at 6:11 pm
Copy link
Thank you. I have now switched themes to Business Identity and this has a built in button on the homepage, so that should do the trick.

I still need a little help though, the button is transparent, how can I change the color of the button and font to make it stand out?

Also, I’m having trouble working with the homepage image – I want to have an image with my portrait, but once I add any text to the homepage it covers my face on mobile. I’m wondering if I need to keep the text on the homepage but make it transparent and just add the text in the image itself instead.

If so, how can I make the homepage text transparent (to keep the proper spacing for the full image to display, the text seems to control this)?

Thanks!
thesacredpath · Member · Oct 6, 2016 at 8:49 pm
Copy link
I see you got the button color changed, and I’m not seeing any overlaying of the text on your face (of course you mostly disappear off the right side of my screen). I do notice transformation overlaying a bit. You can add the following to your custom CSS and see what you think. I’ve done a Media Query to limit this to 600px and narrower screens.
```
@media screen and (max-width: 600px) {
.post-2 .hero-wrapper .column {
	padding-right: 60px;
}
}
```
To keep your face on-screen on phones, also add the following, which sets the background position for the y direction to right and it also hides the text over the image.
```
@media screen and (max-width: 480px) {
	#hero.post-2 {
		background-position: right center;
		}
	#hero.post-2 .hero-wrapper {
		visibility: hidden;
	}
}
```
shannonrey · Member · Oct 6, 2016 at 9:50 pm
Copy link
The media screen coding worked, thanks! Though I don’t want to hide the text on mobile, so I didn’t use the 2nd piece of code.

Looks like I’ll need to adjust the image better. If I decide to add the text to the image file instead so it’s more responsive, how can I keep the height of the image in tact (since having text on the homepage seems to determine the height of the image)?
shannonrey · Member · Oct 6, 2016 at 9:55 pm
Copy link
And yes! I was able to change the button colors, though I’m not sure how I did it since it seemed to take two different types of code :) How can I make the white font on the Banner buttons bold?

Also, I didn’t want to change the color of the View Blog button, I’d like to keep it as the default colors. How can I do this? Thanks!
thesacredpath · Member · Oct 7, 2016 at 8:27 pm
Copy link
On the button font weight, the following will make it bold.
```
#hero a.call-to-action {
    font-weight: bold;
}
```
Since search engines can’t read text in images, what I might suggest would be to keep the normal text and make it invisible. That way it is still there for the search engines to find. The following hides the text above the button.
```
#hero h3, #hero h2 {
    visibility: hidden;
}
```
shannonrey · Member · Oct 7, 2016 at 11:25 pm
Copy link
Perfect, exactly what I needed.

Do you know why the color of the text (white) for the Special Offer Banner toward the bottom of the homepage isn’t changing to white based upon the code I entered?

I’m not sure which of these is controlling it:

.special-offer .call-to-action {
color: #ffffff;
background-color: #660033;
}

#hero .call-to-action {
color: #ffffff;
background-color: #660033;
}

Thanks!
thesacredpath · Member · Oct 8, 2016 at 6:28 pm
Copy link
Hi, it looks like you got this taken care of. Let me know if you still need help with this.

No items found.