Call-to-Action Button on Dara Theme

fabiobezerra1807gmailcom · Member · Apr 12, 2017 at 9:45 am
Copy link

Add topic to favorites
Hello all, I want to put a call-to-action button over the main image of my home page. Is that possible?
Please note that I’m working on Dara Theme and that I already succeeded in creating the button, I just need to put it over the mentioned picture.
Thanks in advance

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Apr 13, 2017 at 3:11 am
Copy link
Hi, Dara doesn’t directly support a call to action button over the top of the custom header image, but we can do this. Upload that button image to your media library and then open you home page in the editor and insert that button into the content area and link it. Next switch to the HTML/Text tab in the page editor and add the CSS id just after the img (before any class=”…”) within the link code so it looks something like this.
<a href="LINK"><img id="my-button" src="URL_OF_IMAGE"></a>

Once that is done, let me know and I can work out the code to move it up and over your featured image. Also, let me know where you would want that button to be placed.
fabiobezerra1807gmailcom · Member · Apr 13, 2017 at 11:02 pm
Copy link
Hi, I just did what you asked. Now I need the button to be positioned in the left-bottom corner of the picture.
Thanks.
thesacredpath · Member · Apr 14, 2017 at 8:21 am
Copy link
Hi there, and thanks. Add the following to your custom CSS and you can adjust the -150px “top” value as desired.
```
.entry-content a[href="tel:+352661302123"] {
	position: relative;
	top: -150px;
}
```
fabiobezerra1807gmailcom · Member · Apr 14, 2017 at 12:58 pm
Copy link
Hello, the result on desktop version was not the expect esthetically… :-(
But I managed to create a nice impact on mobile version by fixing the button’s position… :-D
Now I don’t want this button to appear on desktop version. How can I hide it from there and keep it only on the mobile version?
Thanks
thesacredpath · Member · Apr 14, 2017 at 7:28 pm
Copy link
We can hide it on desktop view, but I guess the first thing then would be to determine what width breakpoint we are going to consider “desktop”. iPads are generally 1024px and 768px (depending on orientation), but some other tablets are about 900px.

If you are wanting this only on phones, we should probably hide at 600px and wider. Let’s start with this then. Replace the other rule I had given as well as I had to change a couple things in it.
```
.entry-content a[href="tel:+352661302123"] {
	position: relative;
	margin-top: -120px;
	display: block;
}
@media screen and (min-width: 600px) {
	.entry-content a[href="tel:+352661302123"] {
		display: none;
	}
}
```
fabiobezerra1807gmailcom · Member · Apr 15, 2017 at 9:27 am
Copy link
Now it’s working like I imagined. Thank you!
thesacredpath · Member · Apr 17, 2017 at 7:42 pm
Copy link
Hooray and you are welcome!

No items found.