Call us now (08) 8354 2417 info@eighty8design.com.au
How to create a unique Moving Particles background effect in Divi

How to create a unique Moving Particles background effect in Divi

How to create a unique Moving Particles background effect in Divi

I like the moving particles effect because it takes something simple and gives it life. The simple thing is the moving particles. They follow perfectly straight paths, never deviating or colliding. The life is the connections, they perform a dance which give the particles a 3D quality; twisting and tumbling.

What makes the motion come to life is the simple rule for the connections. The connections are programmed to only remain bridged to other particles within a set distance. This creates the evolving mesh of triangles.

Below is a step-by-step guide for how to include an animated particles background to your Divi website. This method also explains how to quickly configure the setting to customise the look. Thanks to Vincent Garreau for the interface.

Resources

Resource 1.  WP Particles Plugin download
Resource 2. Moving particles custom configuration .json file
Resource 3. Particles.js source code deposit at Github

These resources are all thankfully shared on GitHub.

Step #1 – Download and install the WP plugin

If you just want the code, go to Resource 3. Otherwise, to do this the easy way, read on…

From Resource 1 download the WP ParticlesJs Plugin. Inside you will find the plugin file: particlesjs.php and also the support library particles.js. These two files must be uploaded to the websites.

Simply;
a) Upload particles.php to the directory /wp-content/plugins/
b) create a new folder in same directory called ‘includes’.
c) Upload particles.js to the directory /wp-content/plugins/includes/

Step #2 – Activate the Plugin

Once the files in Step #1 are uploaded, log in to your WordPress dashboard and activate the plugin from the standard WP plugin menu.

With the plugin activated, it will now appear in the WP menu. If you click on it, you will find it asks for your Json Code. This is the configuration file that allows you to customise the animation. We will get this code easily in the next step.

Step #3 – Create the JSON customisation file

Resource 2 directs you to the particle.js configuration webpage. This page allows you to customise the animated effects before saving the resulting Json file for the plugin.

When you have finished customising the pre-set effects, click on the “Download current config (json)” button circled in red and download the file.

Step #4 – Copy the JSON code into the Particle Plugin

Open the Json file downloaded from Step #3 with a text editor like Text Wrangler. Copy and paste the code into the field in the Particle Background Plugin from Step #2

The code is incomplete and needs to be pasted between the following code line, as per below, adding one line both above and below the downloaded code.

add line of code above –>

your custom config file –>

add line of code below –>

 

particlesJS (‘your_CSS_ ID_here’,

YOUR JSON CUSTOMISATION CODE GOES HERE

);

The above code all goes into the Particles Background Plugin from Step #2.

Step #5 – Set the Divi section to animate

The last step is to chose the row in Divi that you wish to apply the effect to.  To ‘call’ the effect, simply provide the custom CSS ID that you defined above in the Divi Advanced tab, as highlighted below. Save the changes and reload your page. The animated effect should now be working.

This is an update of a post originally found here (CakeWP.com) posted in 2016. It captures some recent changes in the process and additional steps. Please comment if you have questions.

2005 to 2017 – The Rise Social Media in Australia

2005 to 2017 – The Rise Social Media in Australia

Social Media Statistics
2005-2017

I love Social Media, it has become a valued way of sharing experiences with friends and family. Social media has made a substantial and pervasive changes to the way individuals and organisations communicate. Worldwide there is now over 2 billion active users of social media, and growth is strong, Here I have collected information from Australian data sources and organised it, enjoy.

Australian Social Media Overview

Almost 8 int 10 Australians now use social media.

%

Access the internet daily

%

Are on Social Media

%

Of 18-29 year olds use Social Media

%

Check their social networks daily

Rise of Social Media in Australia

2005 to 2017

Top Social Media in 2017:

79 % of Australian Population using at least one platform

  • Facebook 69.2% 69.2%
  • Youtube 61.8% 61.8%
  • WordPress 21.2% 21.2%
  • Instagram 20.3% 20.3%
  • LinkedIn 16.3% 16.3%
  • Snapchat 16.3% 16.3%
  • Tumblr 15.5% 15.5%
  • WhatsApp 12.6% 12.6%
  • Twitter 12.2% 12.2%
  • Tripadvisor 10.6% 10.6%
  • Tinder 9.8% 9.8%
  • Blogger 6.1% 6.1%
  • Yelp 6.1% 6.1%
  • Flickr 2.0% 2.0%
  • Pintrest 1.1% 1.1%

Number of Active Australian Users

as of March 2017

Users By State

% Australians using Social Media 2017

Users By Age

Almost 100% of takeup of social media into the most youthful Australian age group.

%

18-29 years

%

30-39 years

%

40-49 years

%

50-64 years

%

65+ years

Gender Balance

  • Instagram 68% 68%
  • Facebook 58% 58%
  • Youtube 46% 46%
  • LinkedIn 46% 46%

Australian Businesses using Social Media

%

of consumers are more likely to trust a brand if it interacts positvely on social media – fact.

%

Small Businesses

%

Medium Businesses

%

Large Businesses

The benefits for businesses who engage social media successfully is unlimited. Todays businesses must learn to allow and encourage customers to post user generated content, also know as “earned media”, to compliment marketed advertising. For todays growing businesses social media is increasingly likely to be a part of that growth.

Sources

A special thanks to Social Media News as well as ABS | Sensis | Wikipedia | Google Trends
design cues from Dashinsky

Best Free Webpage Design Tools 2017

Best Free Webpage Design Tools 2017

Best Free Webpage Design Tools 2017

Free tools for webpage design

Free stock photos and images

Searching for images in Google is okay but it’s not very targeted and there are a lot of paid images (Shutterstock and the like) that Google won’t let you filter out. For beautiful free high-resolution stock photos it’s often easier to try one of these free websites. The range of images is astounding, and even so many of the site are quite selective in the images they retain to keep up the quality. I find they often turn up very good results and quite quickly.

KabooPics.com – http://kaboompics.com
Negative Space – https://negativespace.co
Pexels – https://www.pexels.com
Pixabay – https://pixabay.com
Unsplash – https://unsplash.com
ISO Republic – http://isorepublic.com
StockPic – http://stokpic.com
Gratisography – http://www.gratisography.com
Place It – https://placeit.net for screen mockups
Lost and Taken – https://lostandtaken.com for textures

image Optimisation

TinyPGN – https://tinypng.com fulfils an important task that Photoshop neglects to offer; compression for PNG files (also now offering compression for animated PNG files, like the Panda above). Image compression is important because large image files slow page load times, and Google ranks slow sites lower in search results. PNG files are important because they allow for transparencies, or partially transparent images.

PNG image transparencies allow for visually stunning results, and TinyPNG allow you to achieve this without blowing the MB budget. Expect 60-90% compression without noticing reduced image quality.

WHere to get a logo designed?

Getting a logo designed for your business can be expensive, but online there are lots of designer who offer their services affordably. At Fiverr https://www.fiverr.com you can get logo designed for as little as $6.58 ($5 USD), which is awesome. Fiverr is definitely not the only place online you can find a designer, but I like it because it is one of the few that does not force you to become a member in order to browse the system.

Help choosing a colour palette

It’s good to have some basic tools that make it easy to explore new colours. If you are looking for a starting point for ideas these two sites are ideal.

Hailpixel – https://color.hailpixel.com
Colourco- http://www.colourco.de

Design Seeds –  https://www.design-seeds.com As far as I know DesignSeeds are unique in offering colour palettes and images to go with them. It’s important for images and colour palettes to work together in web design. Design Seed helps designers chose colours based on their emotional presentation, and reminds them of where colours are observed in nature.

Colorhunt – http://www.colorhunt.co  and Colourlovers – http://www.colourlovers.com/palettes are also great tools for selecting ready made colour palettes.

Canva – https://www.canva.com/color-palette/  takes a different approach and allowing you to upload an image and then it will create a colour palette to suit the image.

0 to 255 – http://www.0to255.com  is another purposeful colour tool, able to quickly finding lighter and darker tones of any colour.

https://color.adobe.com/create/color-wheel/ adobe colour wheel alows you to select colour combinations based on known geometric colour rules. This is a good starting place for any new designs.

http://paletton.com is similar but also give some shades also.

Website typography

Typography is a very important design element which too often gets overlooked or selected without much consideration. Typography is a perfect way to add some uniqueness and style to your webpage without drawing excessive attention to what you are doing. Typography in many cases is a subtle design attribute, providing visually pleasing pages without saying ‘look at me’. At other times the fonts can be very central to the design.

There are quite few good websites where you can search for high-quality free fonts. These are my favourites listed below. All with extensive and easy to access collections of free content. Google Fonts is my normal go to starting place, because their fonts are all web compatible and easy to work with.

I like looking at typography blogs when i’m looking for inspiration. Below are some examples of small, selective font collections with every font matched to a theme, colour, image etc. to provide a visual setting. It’s very easy to tap into some high-quality design ideas when looking through content like this.

social icons

IconMonstr now replaces everywhere else I used to look for icons and social icons. Keeping it simple, and providing consistant high-quality makes this resource dependable. If you choose the PNG option for your file type you gain access to customise your icons colour and size before downloading – saving time is always appreciated!

For more stylised  icons I like to look at WebToolHub – http://icons.webtoolhub.com/icon-p0-social.aspx

Infographics

Infographics are powerful communication tools and especially in marketing and presentations.  Landing pages and blog posts with infographics have proven to out-perform content less visually rich, and hence they are an essential element of most good websites. The  collections below offer thousands of free infographics ready to populate with your business messages.

What is Pay Per Click?

What is Pay Per Click?

What is Pay Per Click?

What is Pay Per Click (PPC)?

Pay Per Click (PPC) advertising is an online marketing tool that uses targeted information to direct traffic to your website. PPC advertisers bid in targeted user segments for for carefully selected keywords and phrases. Search engines like Google and Facebook allow businesses to buy search listings base on this type of targeted information.

In essence, PPCs a way to buy visitor to your site rather than earning organically.

When done correctly, and your targeted customers search for one of your selected keywords, you will list in the search engine. If they click on your advertisement you pay. When done correctly target customers are funnelled directly into the business at what ever rate is most economical.

Pay-per-click (PPC) is alternatively referred to as ‘keyword advertising’ due to the critical role played in it by keywords.

Who is PPC effective for?

PPC works effectively for direct response marketers who message customers directly with call-to-action responses. Online shopping portals, news portals, jobs site, vehicle hire, loans, software tools and information selling portals like travel & tourism, all utilise direct marketing strategy and need PPC.

Another important application of PPC is for new and establishing businesses trying to build their brand reputation. PPC is a direct method for getting on the front page of Google almost instantly without having to spend years of hard work getting google to recognise your businesses worth organically.

How does it work?

Search engines like Google set aside space for PPC advertisements and give that space to the highest bidder to target the search. Although the concept may sound simple the application takes quite a lot of know-how and time.

Search engines reward advertisers with more traffic (reduced cost per click) if they create relevant ads and chose their keywords selectively. Keyword selection is implemented as a feedback process using analytics tools to optimise the targeted information over time, as users and results feed into your website.

PPC Benefits

  • PPC directly attracts your target customers to your website
  • PPC gives fast result generating leads almost immediately
  • With PPC businesses can target customers segments, locations, and more to ensure they spend their advertising budget on only the righty audience.
  • With PPC you can control your advertising budget and set a maximum limit for bids / days / months etc.
  • Especially relevant for businesses looking to reach out to their local audience.

PPC Tips

For a higher return on investments for PPC advertising should include these solution strategies.

  1. Use separate keywords for search engine network placements and content ad placements
  2. Track your ROI by connecting with Google analytics to see how many leads are turning into sales.
  3. Bid on appropriate keyword phrases which are crucial for your business advertising. Set up your advertisement on PPC platforms which allow testing different keyword ads and notifies which get maximum leads.

Many business need smart advertising solutions, and discovering how to reach your ideal consumers is a powerful proposition. Effective PPC management requires an in-depth understanding of systems, users and businesses, but allow businesses to tap into precise information about their audience and how to convert them to customers

Design Seeds Colour Palettes

Design Seeds Colour Palettes

Design Seeds Colour Palettes

A colour palette is an important part of any website design. Colours have meaning and an ability to communicate emotion. A poor colour selection for your business can confuse your audience and detract from the written content. The proper use of a colour palette in a website will help bind the content together, providing a unified theme and assisting in communication of your vision.

Design Seeds is one of my favourite colour palette selection sites. Providing unlimited creative inspiration with stunning photos and endless colour schemes to choose from. Whether you’re designing a new brand for a business, or wanting to compliment some colours you are already using; If your not sure what colour combinations to use, Design Seeds can make your life just a little easier.

Have You Googled Your Business?

Have You Googled Your Business?

Have You Googled Your Business?

Are you trying to get your new online business to show up in Google…. have you registered with Google My Business?

Well if not, you’re potentially missing out on customers for your business. Google is the new Yellow Pages and the days of poor Jan getting shouted at – “Not happy Jan!!” are gone. You no longer have to wait for the new year to register your business. With Google My Business, you just register online and make updates whenever you want. To complete the process, Google will mail you a unique verifying code to confirm the listed address.

So, if you haven’t already registered your business with Google My Business, then now is the time! It only takes minutes, its free, and its a very effective way of getting your business to show up in local search results, especially searches on Google Maps!