Hello Athemes support tem,
we want to add a button on an image, (on a specific area of the image) so following will be possible:
a) click on image will redirect to one destination (example: event description url);
b) clicking button over image will redirected to a different destination (example: buy ticket to the event).
Which Sydney Pro features can be used to achieve this requirement?
Site: https://demo.savemoz.com.
Regards
Timba
Hi Timba,
Check this documentation, that be what you’re looking for.
I hope that helps.
Regards,
Kharis
aThemes Support
Hello Kharis,
Thanks for quick answer, I checked the documentation.
Is not answering our concern, We want to add images and button on page body, not on slide area.
could be a feature like “aThemes portfolio” or any images on page body, where separate links could be applied to each image and to button over the images.
how can this be accomplished?
Regards
Timba
HI Timba,
I am sorry for suggesting incorrect resource.
Seems likely your request is out of the aThemes Portfolio widget’s features. But, can you share a mockup of the final result you want to accomplish? So I can get more clearer picture.
Regards,
Kharis
aThemes Support
Hi Kharis,
Attached is the sample, we can separately click on button “COMPRAR” or can click on other part of text (being redirected to different urls per each schedule).
This looks like images, or tables (with 3 columns) within page columns.
Regards
Timba
Hi Timba,
Thank you for the mockup and sorry for the delay. Because I was stuck in draft.
Here is the custom JavaScript solution your could try.
(function($){
$.fn.projectAddButton = function(buttonText, buttonURL){
var button = '<div class="proj-button-wrapper"><a class="roll-button" href="'+buttonURL+'" target="_blank">'+buttonText+'</a></div>';
if( this.length ) {
html = button;
this.find('.project-inner').prepend(html);
}
};
// Add button to Project 1
$('.elementor-widget-athemes-portfolio .project-item:nth-of-type(1)').projectAddButton('Visit aThemes', 'https://athemes.com');
})(jQuery);
In the example above, to add a new button on the first project/portfolio item, use this line:
// Add button to Project 1
$('.elementor-widget-athemes-portfolio .project-item:nth-of-type(1)').projectAddButton('Visit aThemes', 'https://athemes.com');
What you need to do is replace the button text on Visit aThemes to your own. And change the the button link on the second parameter, that is https://athemes.com.
To do this on second portfolio item, add this new line:
// Add button to Project 2
$('.elementor-widget-athemes-portfolio .project-item:nth-of-type(2)').projectAddButton('Visit aThemes', 'https://athemes.com');
The second item selector is identified by :nth-of-type(2) pseudo selector. And adjust the button text and the link target.
The final code will look like this:
(function($){
$.fn.projectAddButton = function(buttonText, buttonURL){
var button = '<div class="proj-button-wrapper"><a class="roll-button" href="'+buttonURL+'" target="_blank">'+buttonText+'</a></div>';
if( this.length ) {
html = button;
this.find('.project-inner').prepend(html);
}
};
// Add button to Project 1
$('.elementor-widget-athemes-portfolio .project-item:nth-of-type(1)').projectAddButton('Visit aThemes', 'https://athemes.com');
// Add button to Project 2
$('.elementor-widget-athemes-portfolio .project-item:nth-of-type(2)').projectAddButton('Visit aThemes', 'https://athemes.com');
})(jQuery);
I hope thi helps and let me know in case you get any trouble with the code.
Regards,
Kharis
aThemes Support
Hi Kharis,
I’ll try provided solution, and update you.
Regards
Timba
Hi Timba,
Great! Thank you for trying the code.
I’d also suggest you adding this CSS code to style the button position.
.elementor-widget-athemes-portfolio .project-item .proj-button-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 5px;
text-align: right;
z-index: 99;
}
Sorry for sending this late.
Regards,
Kharis
aThemes Support
Hello Kharis,
Provided instructions are aligned with functionalities requested, thank you. There are further question regarding to provided solution:
a) The reference to one portfolio image for instance “.project-item:nth-of-type(1)” is applied to 1st portfolio on every page, where portfolio feature is used, how to identify specific portfolio so that applies only to main page, or only to specific sub-page?
b) How to format added button, colors, size, location, font etc?
Regards
Timba
Hi Timba,
Thank you for trying the code.
a) The reference to one portfolio image for instance “.project-item:nth-of-type(1)” is applied to 1st portfolio on every page, where portfolio feature is used, how to identify specific portfolio so that applies only to main page, or only to specific sub-page?
You can use CSS selector specific to the page ID at the beginning of the project item selector. For example:
.page-id-2 .elementor-widget-athemes-portfolio .project-item:nth-of-type(1)
In the JavaScript code, it will look like this:
// Add button to Project 1
$('.page-id-2 .elementor-widget-athemes-portfolio .project-item:nth-of-type(1)').projectAddButton('Visit aThemes', 'https://athemes.com');
.page-id-2 means the page ID is 2. You can find it easily with this plugin.
You can use this CSS selector to write styles rules to the button.
.elementor-widget-athemes-portfolio .project-item .roll-button {
/* Your CSS rules */
}
Regards,
Kharis
aThemes Support
Hello Kharis,
a) was tested successfully.
b) Provided CSS is not affecting added portfolio button, I also tried included page ID, portfolio ID on provided CSS code is not affecting the buttons:
.elementor-widget-athemes-portfolio .project-item .roll-button {
background-color: #a8ff33;
color: #93ae6f;
width: 70%;
height: 70%;
}
Please, help with: How to format added button, colors, size, location, font etc?
regards
Timba
Hello Kharis,
I Added suggested CSS under, Appearance, Customize, Additional CSS:
.elementor-widget-athemes-portfolio .project-item .proj-button-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 5px;
text-align: right;
z-index: 99;
}
Is not impacting added button. (no change)
How to correctly reference added button to customize it?
Regards
Timba
Hi Timba,
As checked from your website’s source code, you are having this line, that is invalid and prevent the code next to it to be read on the web browser.
/ * Customize Portfolio button*/
Please replace it to
/* Customize Portfolio button */
Regards,
Kharis
aThemes Support
Hello Kharis,
Thank you for provided solution, it works.
Regards
Timba
You’re welcome Timba!
Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.
Regards,
Kharis
aThemes Support