Hands up if you're a designer with a slight phobia of code ✋
Oh good, I'm not alone 😅
On my website design adventure, I've picked up a few snazzy little tricks to help enhance website design without going too far down the scary coding rabbit hole!
What I've learnt is a little bit of code can do some awesome things for your website, AND you don't even really need to understand it - Just Copy and Paste!
I'll be adding to this list as I learn more - so be sure to check back!
These are some basic codes I find helpful
These codes can be posted in Heading sections as well as the <html> section in text paragraphs.
| <b> </b> | Make text bold | |
| <i> </i> | Makes text italicized | |
| <font color=# > </font> | Changes font colour | |
| <hr> | Inserts a horizontal line | |
| <br> | Inserts a line break | |
| For a Button: Mailto: *add email address* | Insert a link to email address | |
| For a Button: Tel: *add phone number* | Insert a link to a phone number |
Example:
Adding Emojis and Symbols!
Yes you can do this pretty easily too!
Visit this website and search through the library of different emojis and symbols. All you need to do is find the HTML code for that emoji and slap it into your text 😍 📩 📞 🔞 🔆 ✅
Example:
Buttons
To get side by side buttons in the same stack use this code in the heading section (note your will need to reformat buttons, but it works a treat!):
<a class="button-content custombutt_link align-center" href="/insert your page name/" ><span class="custombutt">Insert your button name</span></a> <a class="button-content custombutt_link align-center" href="/Insert your page name/" ><span class="custombutt">Insert your button name</span></a>
Example:
Lottie Animations
Lottie animations are awesome - and can help you add a little bit of movement to your website! To make them work - you need to grab the '.json' file code. Rocketspark already have a fantastic blog on how to add these to your websites Check it out
You can make something like this:
Anchor Links
Zip visitors around your website with tactically placed anchor links. This simple bit of code can be added to buttons or intext links and can direct visitors to specific parts of your website that is relevant!
For instance - you might want to add a 'contact me' button but just zip people down to your footer!
Add this HTML code where you want to go:
<a name="insert button name"></a>
And add this to the button URL that will take visitors:
/insert page name/#insert button name
I'll be adding to this list as I learn more - so be sure to check back!
