Is there anyone at Salient who can help make this happen? I can pay for their time. I really need this in order to keep using the theme for one of my clients. I think this is a big missing piece from what is otherwise the best theme on the market
Hey Judson, a developer on Envato studio will definitely be able to help you with this, unfortunately I am personally to busy to accept freelance gigs at the moment though.
Okay here we go a quick solution to get this working for the people who really want it (it's not integrated in the nectar shortcode list at all although I could probably make it possible but I don't like to mess with "original" code in case of updates)
1: If you have a child theme, then add this code to your "functions.php"
2: if no child theme is used, Try and add it to the "functions.php" of the theme (be aware that future updates might remove this code again)
How to use? Create a new row in visual builder and add a "Text Block" and use the shortcode there. (this way you can style the row by using salients extra class option and style the specific arrow by using the arrow class parameter)
It's rather simple the shortcode is [arrow] but it takes a couple of parameters to work properly (it was written rather quick) The parameters are as followed:
"direction" => this one takes the following variables: "up", "down", "left", "right" *REQUIRED "width" => this takes any number like '60' (px is added by the code) *REQUIRED "color" => any hex value like "#000000" *OPTIONAL "class" => for any custom class you want to add so you could style the arrow div completely (like margin: 0 auto;)
In the code there is a parameter specified called "height". For now this does nothing yet but given a couple of hours you could use the height attribute to create a equilateral triangle by calculating the correct value
This is one way of doing this. The other way could be by using svg or as your example (Avada theme) does is create a 90 degree rotated square and positioning that.
Wow, thank you so much for this. I'm looking forward to trying it out in the next couple of days. I will let you know how it goes. Again, Salient has the best support!
Having something like the attached would be infinitely helpful. Can you please tell me how this can be done, if it can be done?
Hey Judson!
Ill add it to the wishlist.
Cheers
ThemeNectar Support Team
Is there anyone at Salient who can help make this happen? I can pay for their time. I really need this in order to keep using the theme for one of my clients. I think this is a big missing piece from what is otherwise the best theme on the market
Hey Judson, a developer on Envato studio will definitely be able to help you with this, unfortunately I am personally to busy to accept freelance gigs at the moment though.
Cheers :)
Okay here we go a quick solution to get this working for the people who really want it (it's not integrated in the nectar shortcode list at all although I could probably make it possible but I don't like to mess with "original" code in case of updates)
https://gist.github.com/RPSource/f1303ddd3775ef6fb...
Anyway there is 2 ways:
1: If you have a child theme, then add this code to your "functions.php"
2: if no child theme is used, Try and add it to the "functions.php" of the theme (be aware that future updates might remove this code again)
How to use?
Create a new row in visual builder and add a "Text Block" and use the shortcode there. (this way you can style the row by using salients extra class option and style the specific arrow by using the arrow class parameter)
It's rather simple the shortcode is [arrow] but it takes a couple of parameters to work properly (it was written rather quick)
The parameters are as followed:
"direction" => this one takes the following variables: "up", "down", "left", "right" *REQUIRED
"width" => this takes any number like '60' (px is added by the code) *REQUIRED
"color" => any hex value like "#000000" *OPTIONAL
"class" => for any custom class you want to add so you could style the arrow div completely (like margin: 0 auto;)
so an example:
[arrow class="center-arrow" direction="down" width="60" color="#ffffff"]
In the code there is a parameter specified called "height".
For now this does nothing yet but given a couple of hours you could use the height attribute to create a equilateral triangle by calculating the correct value
Also to clarify.
This is one way of doing this.
The other way could be by using svg or as your example (Avada theme) does is create a 90 degree rotated square and positioning that.
My shortcode utilizes the border property of css.
Wow, thank you so much for this. I'm looking forward to trying it out in the next couple of days. I will let you know how it goes. Again, Salient has the best support!