Community Forums › Forums › Archived Forums › Design Tips and Tricks › Code for adding link on button
Tagged: button html, HTML link
- This topic has 21 replies, 4 voices, and was last updated 4 years, 4 months ago by Anita.
-
AuthorPosts
-
May 3, 2017 at 2:43 pm #205832camscornerParticipant
I know this is an incredibly stupid question but I am no techie. I can follow instructions fine but this one seems to be missing from the instructions.
I have Smart Passive Income Pro. I am in the Front Page 2 Widget area where you add the text for the "Get started" button. The instructions shows the following.
We help creative entrepreneurs build their digital business by focusing on 3 key elements of a successful platform — design, content + strategy.
My questions is - how do I alter the code so when someone clicks on the "Get Started" button, it leads to the page I want? In the demo, it just goes back to the Home page/
https://my.studiopress.com/documentation/smart-passive-income-pro-theme/front-page-setup/front-page-2-widget-area/May 3, 2017 at 2:53 pm #205837Victor FontModeratorYou use an HTML link: https://www.w3schools.com/html/html_links.asp
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?May 3, 2017 at 3:29 pm #205845camscornerParticipantSorry, but this does not help me. The code in the instructions is Get Started That gives me the button and the text on the button I need but I don't know where to add the url to the page I want without screwing up button form.
May 3, 2017 at 3:33 pm #205846camscornerParticipantDang it - the code keeps converting it to the Get Started. I don't see where I can add an attachment to this so you would have to look at the instructions to see the code they used.
May 3, 2017 at 4:05 pm #205853Brad DaltonParticipantMay 4, 2017 at 6:10 am #205879camscornerParticipantThanks, Brad! See link below.
https://gist.github.com/anonymous/fdfd51052f016f5a9b715772f7dd339fSo, to reiterate my problem. The above code creates the button and adds the "Get Started" text on the button. What I need is how to adjust the code so when someone clicks on the button it links them to the page I specify. Right now the instructions for Smart Passive Income just keeps you on the Home page when you click on the button.
Sorry I am such a novice. I do appreciate the help.
May 4, 2017 at 6:55 am #205887Brad DaltonParticipantReplace the # with the link to your page like this
href="http://example.com"
May 4, 2017 at 7:20 am #205888camscornerParticipantThank you!!! 🙂 Even I can handle that.
December 8, 2019 at 6:42 pm #495336camscornerParticipantNew issues - all these years later. 😉 I redesigned my site. I used a staging site and the button work just fine. I had this in Front Page 2 widget of Smart Passive Income child theme in a text with the html.
Text part
Discover the help you need to keep your business communication simple, clear & uniquely yours
HTML part
Click here for a quick site tourWhen I try to duplicate it in the live site, it writes the above HTML on the home page under the text. If I add the Custom HTML and put the code there, it shifts the text to the left, decreases the size of the font and puts the button to the right.
If there's a way to submit images, I can send you an image of what I am talking about.
December 8, 2019 at 6:43 pm #495337camscornerParticipantOops code was
<a href="https://simplystatedbusiness.com/" class="button">Click here for a quick site tour</a>
December 8, 2019 at 9:16 pm #495340AnitaKeymasterYou redesigned your site using what theme? The CSS for Smart Passive Income would probably be different than your new theme.
Love coffee, chocolate and my Bella!
December 9, 2019 at 7:31 am #495351camscornerParticipantit"s the Genesis theme (Version: 3.2.1) with its child theme, Smart Passive Income (Version: 1.1.3). I'm a bit confused by the question.
December 9, 2019 at 7:40 am #495352AnitaKeymasterI am asking the theme name because your original post was from 2017 and in your lastest question you said,
I redesigned my site. I used a staging site and the button work just fine. I had this in Front Page 2 widget of Smart Passive Income child theme in a text with the html.
From that I gathered you switched themes and the button no longer works as expected with a new theme.
Please provide a link to the site and location where the button appears and I can take a look.
Love coffee, chocolate and my Bella!
December 9, 2019 at 8:25 am #495355camscornerParticipantSorry for the confusion. The site is https://simplystatedbusiness.com.The button and text are small and shifted to the left.
Click on this link to view an image of how I want it to look (taken from my staging site).
December 9, 2019 at 8:25 am #495356camscornerParticipanthttps://gist.github.com/anonymous/fdfd51052f016f5a9b715772f7dd339f
December 9, 2019 at 8:12 pm #495369AnitaKeymasterCan you put your button in place so I can see how it looks? I can then use the dev tools to provide the code.
Love coffee, chocolate and my Bella!
December 10, 2019 at 8:27 am #495384camscornerParticipantOkay, if you go to https://simplystatedbusiness.com, you will see the text and button that is not aligned like I want (and how it showed in the development site) `https://gist.github.com/anonymous/fdfd51052f016f5a9b715772f7dd339f'
I set this up by using a text widget for the "Discover the help..." text and used Custom HTML for the button. Thank you! I appreciate your help.
December 10, 2019 at 9:35 am #495388AnitaKeymasterYou want to try something like this:
.front-page-2 #custom_html-7, .front-page-2 #text-30 { float: right; clear: both; }
Then remove the extra space from the top widget to close up that space.
Love coffee, chocolate and my Bella!
December 10, 2019 at 10:09 am #495390camscornerParticipantThank you. Pardon my non-techie ignorance, but do I put this in the Custom HTML widget or under the text in the Text widget?
December 10, 2019 at 10:12 am #495391AnitaKeymasterOh, sorry! I thought you knew. Add that to Appearance > Customize > Additional CSS.
Keep in mind that the code works for the two widgets there. If you remove them and add them back, their class may change, i.e., #text-30 may change to #text-45.
Love coffee, chocolate and my Bella!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.