How to make download link

[dashmista]

Hi,

1. On uxdash.com in the “Resume” section at the bottom, how can I make the button download the resume, rather than open a new tab?
2. I tried using a button rather than a “promote” module – but the button color would not change? So I could not see the white text and box on the white background. I selected the color change in the “edit” settings, but it did not work.
3. How can I increase the top and bottom padding of the “Resume” section?

Thank you so much!

[SeaTheme]

1. add the pdf link to “Button Link”

2. deactivate “Shift Text Color for Dark Background” in resume fullwidth wrap

3. add divide modules(use blank divider type) like: https://www.dropbox.com/s/ec9c3walef4o6fe/QQ20150309-4.jpg?dl=0

[dashmista]

Thank you so much. Colors are working now for the button. However, can you please see again the resume section – is there any way to make it easier to see the button? The background is problematic for any button color – is it possible to add a mask for the button so the text is more easily visible? Or some other solution?

Thank you

[dashmista]

Also – for problem #1, when the user clicks “download resume”, it redirects the page to the resume pdf. Can it be downloaded as a file, not displayed in the browser automatically? Or at least opening in a new tab?

Thanks

[SeaTheme]

is there any way to make it easier to see the button? The background is problematic for any button color – is it possible to add a mask for the button so the text is more easily visible? Or some other solution?

Try to set a white background color and shadow
#Resume.fullwidth-wrap .moudle .ux-btn {border-color: #28282E; color: #28282E; background-color: #fff;box-shadow: 0 0 20px #111111;}

Also – for problem #1, when the user clicks “download resume”, it redirects the page to the resume pdf. Can it be downloaded as a file, not displayed in the browser automatically? Or at least opening in a new tab?

Try to use a text block (in Text mode: https://www.dropbox.com/s/tlz45q6jldgjfl0/QQ20150310-1.jpg?dl=0), paste the code :

<div class="btn-mod-wrap btn-center">
            <a target="_blank" class="ux-btn  button-large bg-theme-color-10 bg-theme-color-7-hover" data-animationend="fadeined" download="DashielNeimark_UX-Architect.pdf" href="http://uxdash.com/wp-content/uploads/2015/03/DashielNeimark_UX-Architect.pdf"><span class="ux-middle"><span class="ux-btn-text">Download Resume</span></span></a>
</div>

The 2 values ( target=”_blank” and download=”DashielNeimark_UX-Architect.pdf”) are key.

[SeaTheme]

There is a “Test button” page for download link in you admin, you could refer it.

[dashmista]

Perfect!!! Thank you so much. You guys are awesome.

[dashmista]

Whoops, I discovered a problem:

On mobile, the “download resume” button is invisible until you click it. How can I fix this?

Thanks

[SeaTheme]

Hi, I don’t clear your question.

[dashmista]

When I go to uxdash.com on my phone, and scroll to the resume section, I cannot see the button “Download resume”. It is invisible.

[SeaTheme]

I checked on ios and android, it is fine https://www.dropbox.com/s/mdsrhvdpxlejx23/QQ20150311-4.jpg?dl=0

[dashmista]

Hmm strange. Must be a problem with my iPhone then. Well I appreciate you testing it.

[dashmista]

This reply has been marked as private.

[dashmista]

Fixed it! My apologies.

[Author]

Posts