MADE IN AUSTRALIA

Contact

Pixel Together are constantly looking to grow and evolve. If you have any feedback or suggestions of ways we can improve our service, please let us know.

FAQs

4 tips for adding Custom Code to your website

DEVELOPMENT

Published: 

So maybe you were feeling pretty stoked about building and designing a professional website without the need for code…  until you realised there are still some scenarios that are not covered by a visual website builder like Pixel Together.


Pixel Together SEO

With new javascript libraries constantly being introduced on the web, new 3rd party analytics tools to plug into, new marketing tools to integrate with, new CSS interactions and so on, sometimes you need a little code injection to lift your site to another level.


So, here are some examples of the most useful custom codes and how to use them in Pixel Together; from simple embedding through to more complex examples.



'We love seeing what the Pixel Together community is creating with custom code and it’s often the case that what’s custom-code today, is a core feature of our editor tomorrow.' 

AUTHOR

Simon Moore

Co-founder @ Pixel Together


Tuesday 29th October 2019

SHARE

1. Embedding the web on your site


Websites are no longer individual silos, the web is now vastly connected and most websites make use of some connected services, whether it be embedding a social media feed, a YouTube video or capturing email addresses via a Mailchimp subscription. Using the Pixel Together 'HTML Code' widget makes embedding 3rd parties easy. Simply drag on the widget, paste in the code from the 3rd party and the code is automatically validated and enabled on your website.


Here's a short video of how to quickly embed YouTube and Vimeo videos:


'This might sound super techy if you’re not a coder but it’s simply a case of reading the instructions from the analytics or marketing tool and pasting the code straight into the right section under Site Settings => Advanced.'

2. Analytics and marketing/advertising tools


watch this video

Analytics and marketing tools on the web are now vast and varied. We provide simple integrations for                               as well as our own out of the box                                    . You also have the option to embed other analytics tools via the Advanced tab under site settings. Depending on the requirements on the Analytics tool you are embedding, you'll need to embed the javascript either within the <head> code, inside the opening <body> tag or before the closing </body> tag. This might sound super techy if you’re not a coder but it’s simply a case of reading the instructions from the analytics or marketing tool and pasting the code straight into the right section under Site Settings => Advanced.


We all know how important the analytics that we can get from Facebook are, so here’s how to embed a Facebook pixel into your site.

Voila! My gradient is now applied. Using custom classes you can target any layer and add custom styles as needed.


I can then add CSS for the my-gradient class under Site Settings => Advanced. I’m going to use the                                       site to generate the code for my gradient and target the class I just added. Note: as the class needs to override the default layer styles, a “!important” tag is needed.


3. Advanced styling through custom classes


Okay so here’s the level where you would need to know some basic CSS in order to add more advanced styling.  Even though you can get all of the basic styling out of the box in the Pixel Together editor, there is the option to also add some custom CSS to a layer. You just add some custom CSS to a layer and then target it with CSS. Let’s take an example where I want to add a linear gradient background to a layer. I can add a “my-gradient” class to the layer where I want to add the gradient:


'Sometimes, you may want to create an entirely custom interaction.'

That’s it for now! If you have any requests on coding tips feel free to email me at 


4. Advanced interactions


There are some really cool interactions already available on Pixel, like animations on scroll, hide/show sections and more... but there is still the option to create an entirely custom interaction. Here is an example from our own home page at 


We wanted our floating “Get Started” button to only appear fixed to the right once the user scrolls past the 5th section. To do this, we wrote the following code, which sets the opacity of the button to 0 or 1 once the user has scrolled past that section. As it’s based on the section position and not a fixed number of pixels, this code works beautifully on all devices.


Full credit to            on                           for providing the starting point for this code. So here it is, our own code direct from our home page - unlike most website builders, our own website is made 100% in Pixel Together!


Like what you see? Share the story

AUTHOR

Published: 

Thursday 30th October 2019

Co-founder @ Pixel Together

Simon Moore

ENTERPRISE SOLUTIONS

Intelligent digital solutions for your organisation

PRICING PLANS

Flexible pricing plans that scale with your business

Social

Contact

Company

FAQs

Product

MADE IN AUSTRALIA

Create your way - design and build custom websites without the need for code or restrictive templates. Get full creative control and confidence with securely hosted and auto SEO optimised sites, made by you.

Copyright © 

Pixel Together

2014-2019


ACN 603 213 010 20 


Little Gore St

Fitzroy VIC 3065