.svg)
.svg)
.svg){kind=tracking}
.svg)
.svg)
.png)
WEBSITE HOSTING
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
FOLLOW US
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.
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
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.
.png)
.png)
.png)
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.'
.png)
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!
AUTHOR
Published:
Thursday 30th October 2019
Co-founder @ Pixel Together
Simon Moore
WEBSITE BUILDER
WEBSITE BUILDER
.jpg)
-v1.jpg)
LATEST ARTICLES
.svg)
.svg)
.svg)
Social
Company
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-2024
ACN 603 213 010 20
Little Gore St
Fitzroy VIC
Australia 3065