Envato https://envato.com Design & creative inspiration Sat, 26 May 2018 01:29:54 +0000 en-US hourly 1 https://wordpress.org/?v=4.9.6 https://assets.wordpress.envato-static.com/uploads/2016/08/cropped-favicon-32x32.png Envato https://envato.com 32 32 The Art of Subtlety In Animating Media Content For Your Website https://envato.com/blog/art-subtlety-animating-media-content-website/ https://envato.com/blog/art-subtlety-animating-media-content-website/#respond Thu, 23 Feb 2017 21:42:05 +0000 https://envato.com/?p=52666 Images, video, sound - utilising quality media content on your website is a sure fire way to deliver a more engaging experience for site visitors.

The post The Art of Subtlety In Animating Media Content For Your Website appeared first on Envato.

]]>
Images, video, sound – utilising quality media content on your website is a sure fire way to deliver a more engaging experience for site visitors. Studies show that you’re far more likely to remember a piece of information in full detail when it’s been paired with a relevant image, and eye-tracking studies show readers are far more likely to spend time reading pages than those with text alone.

But what’s the best way to present, combine and balance media with great web design to produce quality websites? We’ve curated a list of aesthetically and functionally smart ways to incorporate media into your site.

Tony Romo’s Jersey Journey At ESPN

Pro American NFL player Tony Romo’s career is at a crossroads, with sports commentators all asking the question – what team will he be playing for in 2017?

However, a much more interesting question to ask is – what’s the best way to visually represent the multiple futures that stand before Romo. Well, ESPN has answered that question in a striking way.

Using a ‘base image’ of Romo posing with a football, the reader scrolls through this animated ESPN article as different team jerseys scroll over Romo himself. It’s the kind of clever animation perfectly fitting for the structure of this piece – when discussing how Romo would sit on the Denver Broncos, we see him in a Broncos jersey. It’s a perfect union of journalistic description and animated design – in our books, ESPN have scored a touchdown with this one.

Supple Shines A Light On Their Tools

Melbourne based Digital Marketing agency Supple does more than just provide marketing services – they’ve also developed a collection of helpful tools helping you navigate everything from schema markup to being adding Facebook messenger as a chat tool to your website.

But it’s the way they’ve presented this handy toolkit which we’re focusing on today. Rather than simply displaying screenshots of the tools in actions, they’ve added panels with minimalist icons which – when hovered over – reveal a window peering through to the screenshot. Much like a torch casting light into a darkened room, this hover effect is engaging and inviting, a smarter way to showcase screenshots.

Bring your products to life!

In the current competitive online market, websites need to find innovative ways to help their products stand out from the crowd. We’ve seen animated still photos being used in movie intro sequences you can use the same technique on your website! These techniques can help to not only showcase your product but also wow your visitors.

Animation can help bring your still products to life. You can design your product to seem like it’s suspending in air or highlight some of the key aspects of the product using hotspots. WordPress themes such as TheGem, from Codex Themes – [Get it from Theme Forest] will help you achieve these techniques and more.

Romain Bouchereau Balances Static With Dynamic

Freelance designer, art director and animator Romain Bouchereau brings smart media sensibility to his portfolio page. The background is an immediately engaging starting point – animated television static gives a grainy quality to the whole site, reminding you that you’re looking at a screen – which is, of course, the primary medium showcasing Bouchereau’s work.

However, it’s the clever pairing of a marker-pen/highlighter hover highlight effect, and a cycling image gallery, that brings his portfolio to life. In particular, the interactivity and colour-coding that comes with the hover effect helps distinguish each project from the next, establishing the breadth with which Bouchereau can work as a designer.

Paramount Artists’ Clearly Labelled Gallery

Paramount Artists’ use a similar approach to the classic hover effect, drawing attention to their media. Rather than cycling through images as you hover, the entire gallery of their team is shown in grayscale – only becoming saturated as as you move your cursor over it.

This also brings up a clear label of who is being shown, with the text sitting just to the left or right of the image depending on page space. It’s a clever use of hover interactivity that looks great no matter how big or small your browser window is.

W̶i̶n̶t̶e̶r̶ Website is Coming

Having a Coming Soon page is a great way to generate interest in your product and collect email addresses from interested users. However, most coming soon pages are disinteresting and, as a result, don’t generate good marketing leads. Animation can be a very impactful way to build greater engagement with visitors to your Coming Soon page.

If you want to build a Coming Soon page, you can use the template from UkieWeb on ThemeForest to set up a unique under construction page that’ll be sure to catch the eye of your visitors.

Blueair Offers A Breath Of Fresh Air For Their Online Air Pollution Browser

Want to measure the air quality in your neighborhood? Air View by Blueair is an air pollutant visualizer that uses data from pollutant measurers around the earth – and delivered in an innovative way. Rather than give you a random list of numbers and chemicals, Air View instead gathers images of your address from Google Maps and overlays animated pollutant data over it.

This means you can really navigate your own area, and really be aware that these particles are in the atmosphere. It’s a novel use of media taken from local Maps information, used for a good cause – does it make you want to sign their petition for a World Air Day? Or invest in a new gas mask/hazmat suit for whenever you’re next outside for some ‘fresh air’?

The Hideout Shows It All With Their Great Image Effects

The Hideout is a studio of ‘designers, developers and content makers’, and their homepage lives up to that with some stunning minimalist design and smart use of media and images. As you scroll down the page, you’ll see the largely empty white space is dotted with images of past projects and ideas – and these images expand slightly as you do so. It’s a small touch, hard to notice at first, but it adds a level of dynamic movement that draws the eye to each image as it grows.

Similarly a portfolio gallery lower down in the page uses a bright yellow hover effect to link through to more in-depth pages and case studies. It’s a great way to let images speak for themselves, inviting the user to hover – and they’re rewarded with the reveal of the link for their curiosity. Here is a snippet that lets you add a similar image reveal effect to your site.

Great Views Of Quechua’s Mountaineering Range

Quechua’s selection of clothing and shoes are built for the great outdoors, and the catalogue design perfectly evokes being out in a serene, uplifting nature.

The structure of Quechua’s catalogue lets you travel to a selection of mountain ranges and hiking locations across South Africa – clicking through an interactive menu takes you to Grabouw, Kalbaskraal, Beaverlac and many more natural landmarks.

A loading animation brings up a silhouette of the mountain range in question, before you’re smoothly transported there, with a collection of featured product stills that showcase Quechua apparel in all situations.

The scroll effect on each product image against the earth tone background uses a parallax effect, with image panel and background moving ever so slightly out of sync. The effect is depth – it’s design and presentation of product content that conjures the very outdoors it wants you to explore (while wearing one of their their mesh t-shirts, of course).

Envato Element’s Hovering Cards

Envato Elements provides a slew of templates and design assets for sites, apps, you name it. Highlighting just some of their content is a 3D template gallery, angled such that it gives a sense of depth – like business cards laid on a table.

Another great touch is the hover effect – each ‘card’ lifts slightly, revealing a bright pink shadow effect beneath. Even simply tilting the angle and presentation of an otherwise simple image gallery can really draw the eye to your on-page media – why not try it sometime on your site!

Milwaukee Ballet Company’s Scroll-Effect is On Pointe

Milwaukee Ballet Company showcases their performers, directors and team using a combination of stunning image content and a simple scroll technique.

As you make your way down the page, a scrolling effect transforms stunning, high-quality grayscale images into colour – a gentle transition to colour transition with the effect of breathing life into an otherwise minimalist page. It’s chic, it’s refined, and in many ways, just like ballet itself.

Rebecca Lloyd-Evans’ Clever Use Of Cursor Images

Rebecca Lloyd-Evans is a director and storyteller, whose work has spanned online content, television and film. Her homepage comes with a list of previous works – but it’s the presentation of this portfolio which really caught our eye. As you track your cursor over each link, a small image follows the movement of your mouse.

It’s a small window into the content in the outgoing link – a way to tempt you into exploring further. It’s a persuasive use of images, inviting and engaging further interaction from site visitors. If you’re looking to achieve something similar, why not check out this snippet on CodeMyUI?

Carv Wearables Offer Quality Parallax Mountain Scroll & Block Reveal Features

Carv produces a range of high-tech, wireless wearables for skiing, collecting data on your progress and providing a ‘digital ski coach’ for your own improvement.

It’s no surprise such innovative technology is paired with a similarly innovative site design – something modern and minimalist. Technical cross-sections of the technology float along a snow-white backdrop, with a parallax effect created against their respective labels and added info.

However, these images and text appear on the screen in a novel way. As you scroll down the page, blocks of text reveal in an animation simulating a loading bar – a fantastic way to subtly reference the technological advancement of their own products.

If you like these web design animation examples you might also enjoy adding animation to your images directly using Photoshop Actions. Here are a few Photoshop Image Actions to add Sparkler, Ink and Rain effect to your images.

These have been a collection of sites and brands that have incorporated media and images into their site in subtle, stylish and engaging ways. Have you been inspired? I am sure you all would have seen various animation on the websites you frequent, let us know what are some of your favourites in the comments below – we’d love to see your take on the subtlety of animating media content.

 

Read next: 

 

The post The Art of Subtlety In Animating Media Content For Your Website appeared first on Envato.

]]>
https://envato.com/blog/art-subtlety-animating-media-content-website/feed/ 0
25 PowerPoint Templates With Animation to Captivate Your Audience https://envato.com/blog/powerpoint-templates-with-animation-to-captivate-your-audience/ https://envato.com/blog/powerpoint-templates-with-animation-to-captivate-your-audience/#comments Thu, 19 Jan 2017 23:00:14 +0000 http://envato.com/?p=28043 Get your message across with these animated and eye-catching designs.

The post 25 PowerPoint Templates With Animation to Captivate Your Audience appeared first on Envato.

]]>

Have you navigated to the world’s end searching for quality Powerpoint templates with animation that you can use for an upcoming presentation, and come up empty-handed? We are about to change that today by highlighting some top-quality PowerPoint templates.

A well-designed Powerpoint template has to get a lot of things right—from the fonts used in the slides to the colors and images in the presentation—and it’s by no means an easy feat. Thankfully, we have some talented designers on GraphicRiver who understand that there is a demand for professional Powerpoint templates and deliver some amazing designs to choose from.

So, if you’re looking for a new PowerPoint template to help you deliver a riveting presentation, have a look at these handpicked templates. You won’t be disappointed! Each one features animated slides.

1. Spectacular Animated Presentation

A bright, animated two-minute presentation – it’s set up for things like product launches and presentations, so it’s perfect for your elevator pitch on your startup idea or business plan.

2. Sketch Powerpoint Template

Designed to offer a fun and fresh platform for presenting your project, this template comes with animated objects and offers over 32 slides and 30 hand-drawn graphics.

3. Financial Report PowerPoint Template

This is a professional business PowerPoint template that comes with three colour themes. This template would be an ideal choice for you financial report presentations.

4. ZOIZ Animated PowerPoint Template

Want a PowerPoint that looks more like a website? This presentation is available with and without animation, and the modern font choices – like Miso and Open Sans – make it an eye-catching choice.

5. The Data Deck II PPT Template

A handcrafted theme with custom infographic elements. Make this Powerpoint template your own by choosing one of the 20 retro/vintage colour palettes, and one of the six included texture PNG files to customise easily the look and feel of your presentation. Whether you want to use bright and vibrant or a more subdued colours, there’s a palette and texture to suit your presentation.

data-deck-ii-retro-powerpoint

6. Motagua – Multipurpose PowerPoint Template

Motagua is one of the best-selling PowerPoint templates on our marketplace of all time, and it’s easy to see why – with handmade infographics on everything from world maps to funnel diagrams, it’s a one-stop shop for presenting.

7. SocialDecks Powerpoint Template

An infographic social media Powerpoint template, appropriate for a social media agency, social media marketer or researcher, or any type of business related on social networking, including web marketing, SEO services, and infographic social media surveys. The template includes 30 unique slides, presented in three different versions. PSD source files are also included for each slide and each version. It’s carefully created and easy to customize: Each element is separated, so you can manage it the way you want.

8. Powerpoint BookDesign

This clean, simple and elegant template comes with custom graphic elements and animations. Its simple design makes the user to focus on important information. The presentation is easily customizable and is perfect for business. Create your presentation in no time with 35 customizable slides. Check out the video for the Keynote template, which you can get here. The PowerPoint version has slight differences.

9. Success Powerpoint Presentation Template

If you’re a manager wanting to present the potential of your company, a lecturer eager to attract attention, or a student who wants to present a report, this is the template for you. It will enable you to work faster and easier than ever before.

10. Social Media Powerpoint Template

An ideal choice for a presentation about social media, this template comes with 35 high-quality slides. Every slide uses fully editable objects, to make it easy to change the color or size of text or objects.

Social Media PPT

11. Van Color Powerpoint Presentation

Creative and minimalist, this template is perfect for personal or corporate use, and is ideal for company projects. It’s easy to edit, 100% customizable, and is iPhone and iPad compatible.

van-color-powerpoint-presentation

12. Premium International Template System

Sleek, modern templates in a cutting-edge, international style. These are ideal for social media, non-profit, tech, advertising, new media, web, mobile, venture capital, creative, or general business. Created with full vector objects to allow for easy recoloring and rebranding, the set includes seven templates with 14 color schemes.

13. Six Template

Make your case with Six Reasons – plus animated explainers, flow charts, dynamic text, and more.

14. i9 Template System

i9 has hundreds of animated designs, with surprising motion and movement in each infographic, chart, and table. Each slide is designed with real presentations and content in mind, and it features custom gradient folders, so it’s forward-thinking and on-trend.

15. Grid PowerPoint

Looking to cut down on the clutter, but still present with subtle animation and custom designs? Grid PowerPoint is simple but effective, and the 7 color options means it’s easy to match to your brand.

And a few more we like…

16. Awesome Slides
17. Marketofy – Ultimate PowerPoint Template
18. Business Proposal PowerPoint Template
19. The Zero Business Infographic Presentation
20. Akuntansi Powerpoint
21. Summit 1 PowerPoint Template
22. Stampede – Multipurpose Powerpoint Template
23. Startup Pitch PowerPoint
24. Professional Animated Power Point Template
25. Utopia PowerPoint Template

Note: this article was originally written in 2016 and has been updated for 2017. 

What to read next

The post 25 PowerPoint Templates With Animation to Captivate Your Audience appeared first on Envato.

]]>
https://envato.com/blog/powerpoint-templates-with-animation-to-captivate-your-audience/feed/ 1
Gift Ideas For Creative & Designer Friends https://envato.com/blog/gift-ideas-creative-designer/ https://envato.com/blog/gift-ideas-creative-designer/#comments Fri, 09 Dec 2016 06:33:58 +0000 http://envato.com/?p=35780 In an attempt to find the perfect gift for a designer friend, I reached out to many of the creative folks here at Envato and asked them for gift ideas.

The post Gift Ideas For Creative & Designer Friends appeared first on Envato.

]]>
Let’s be honest with each other, designers can be a fussy bunch. I am sorry, but it has to be said. Although, I am not actually saying that being fussy is an altogether bad thing, I mean when it comes to creativity that very fussiness is what makes their work great. We all know that. But it also makes them very hard to please, especially when it comes to buying them gifts.

In my attempt to find the perfect gift for a designer friend, I reached out to many of the creative folks here at Envato and asked them for some gift ideas. Their recommendations were fantastic.

So, I have taken all of their ideas and suggestions and created this post for you lot that have to regularly buy gifts for designers and have no idea what to get them.

Ferrolic

These prototype clocks should be seen as a limited edition art piece than a consumer-grade alarm clock. Ferrolic uses ferrofluid – a liquid that becomes strongly magnetized in the presence of a magnetic field, to display the time in digital format.

Paper Trophy

Paper Trophy

I was in love with these paper trophy idea the very first time I saw them. I do believe they are a bit pricey, but if money is not a factor this might be a gift they will remember for years to come.

DC Super Heroes Pop Up Book

DC-Super-Heroes-pop-up-book

If your friend is a big fan of DC Super Heroes, you can stop reading now and get this DC Super Heroes Pop Up Book by Matthew Reinhart. Trust me, you really don’t need to look at the rest.

CMYK Playing Cards

CMYK Playing Cards

Now who wouldn’t like a bit of healthy gambling with friends once in a while, these CMYK Playing Cards are perfect for that. The idea behind this project is very simple they swapped out the suits for colours of ink used in printed media (cyan, magenta, yellow and black) and the numbers on each card for a percentage of ink on the surface.

Popup Lighting

popuplighting

Popup Lighting these brilliantly simple, yet elegant, light fixtures will enhance the ambience of any room with an air of mystery. According to the designer, the inspiration for this comes from popup books. Please be warned, they are quite an expensive gift.

SwatchMate

SwatchMate

SwatchMate is a small, portable cube device that captures the colour of any surface. Using Bluetooth, it then sends the colour data to a smartphone or even to Photoshop. With this little gadget, designers can use colour inspiration from everyday objects and transfer it to their projects.

Leap Motion

With the Leap Motion Controller, you’re the instrument! Working a little bit like the Kinect (but for Macs and Windows PCs), it senses the natural movement of your hands, allowing you to control your computer screen in a highly original and creative way.

Perhaps not that great for real productive stuff, but it does look a lot of fun.

Moleskine Notebooks

Livescribe Moleskine
Livescribe Moleskine

Designers simply love their Evernote Notebooks by Moleskine. It apparently uses specially patterned lines that allows the Evernote software to recognize and capture your writing or drawings from the page. It would make a great gift for those designers that like to sketch on the go. Our CEO loves em and that is good enough for me.

Moleskine partnered with Livescribe to offer a new notebook that can transfer your pen-and-ink scribbles to your digital device in real time via the Livescribe+ companion app. This could be a great gift for anyone who likes to have a digital copy of their notes.

 

Field Notes

Just like the Evernote Notebooks above, creatives are also obsessed with Field Notes. Mind you, any notebook with the tagline of, “big enough to accommodate ideas from both sides of your brain”, certainly warrants attention.

Personalized M&M’s

Personalized M&Ms

This one is pretty straightforward. You can order M&M’s with a custom and personalized message, or even a photo for that matter. And the thing is, and trust me about this, ALL designers love M&Ms!

United Pixelworkers Home Town Tees

United Pixelworkers Melbourne

I can guarantee that your designer friends will already have a huge collection of custom t-shirts. They all do.

What’s better than their already awesome custom tees? An even awesomer t-shirt from United Pixelworkers that features their home town.

UI Stencils

If your designer friends incorporate wireframe sketching into their design process, then they will love the Stencil Kit series from UI Stencils, which includes stencils for both web and mobile app design (iPhone and Android).

Leaf Ties

Leaf Tie

Does you designer friend use cable-ties to make sure their cables don’t run all over the place. Probably not. It’s about time they did though. Say hello to Leaf Tie, an elegant spaghetti-cable solution.

Stress Buster Desktop Punching Ball

Stress Buster Desktop Punching Ball

After meeting with a client, the chances are your creative friends will be needing the Stress Buster Desktop Punching Ball. I am not going to say that all clients are from hell, just a few too many of them.

Pencils and Pens

PalominoCollectionPack

Designers can never have enough pens and pencils and this high quality set from Palomino has been highly recommended to me. If you are after a mechanical pencil set, then perhaps the Staedtler graphite 925 might be a good choice as well.

Muji Stationery

Muji

Muji products offers simplicity achieved through a complexity of thought and design’. Perfect. Designers are going to love this a gift.

Thanks to Catherine Hills for this tip.

Speedball Oblique Pen Nib Holder

calligraphy

Any calligrapher friends? If so then this combination of the Speedball Oblique Pen Nib Holder with the Brause 361 would be a great gift for them. In the hands of someone with enough skill these pens can create the same kind of magic you can seen in the above GIF.

Die Gestalten Books

Die Gestalten

Chances are your designer friend’s bookshelf is already stacked full of Die Gestalten’s books, if not you get to be the hip friend who does get them one.

MakerBot Replicator Desktop 3D Printer

The MakerBot Replicator is a full-featured consumer 3D printer. With this gizmo you can 3D print whatever you want all from the comfort of your own home. Every designer would want one of these. Heck, I wouldn’t mind one myself.

Cloud

The Cloud is an interactive lamp and speaker system that has been designed to mimic a thundercloud, and using motion sensors detects a user’s presence and creates a unique lightning and thunder show dictated by their movement.

This is quite possibly the coolest gift ever. Although the price is more than likely going to be in the “never going to happen” category – designers can dream though.

Hopefully I have given you a few gift ideas for your designer friends.

I’m also sure you folks will have your own gift ideas as well, I would love to hear about them in the comments below.

 

This post was originally published in 2014.

The post Gift Ideas For Creative & Designer Friends appeared first on Envato.

]]>
https://envato.com/blog/gift-ideas-creative-designer/feed/ 2
Anatomy of a 404 Error Page https://envato.com/blog/anatomy-of-a-404-error-page-get-your-inspiration-from-the-best-404-pages/ https://envato.com/blog/anatomy-of-a-404-error-page-get-your-inspiration-from-the-best-404-pages/#comments Thu, 13 Oct 2016 17:30:41 +0000 http://envato.com/?p=29328 When creating a website, one of the pages that often gets neglected is the 404 page. If you think about it, each 404 page visit is like a lost opportunity. Someone is looking for something on your site, and you’re not able to serve it up. So you give them a 404 page telling them […]

The post Anatomy of a 404 Error Page appeared first on Envato.

]]>
When creating a website, one of the pages that often gets neglected is the 404 page. If you think about it, each 404 page visit is like a lost opportunity. Someone is looking for something on your site, and you’re not able to serve it up. So you give them a 404 page telling them the requested information was not found on your website.

As a brand, you can use custom 404 error page to make a memorable impression on your visitors, as mentioned by Renny Gleeson in his TED Talk “404, The Story of a Page Not Found.” You can use a cleverly crafted 404 page to keep the visitor on your site, and guide them to a resource that will help them find more information on what they were looking for.

Jump to : What is 404 Page | Why do we get 404 Error | What makes a good 404 Page | Interactive 404 Pages | Funny 404 Pages

 

What is a 404 Page?

Before we dive in, it is important to understand exactly what a 404 page is. 404 is one of the Client Error HTTP Status Codes returned by the server, to indicate that the requested page was not found.

What causes a 404 Error?

Some of the common causes are:

  • The visitor clicked on a broken link.
  • The visitor mistyped the URL.
  • The page has been deleted or was moved to a new location (without proper redirects).

You can refer to this Moz article on HTTP Status Codes or have a look through HTTP Status codes on Wikipedia for more information.

Anatomy of a Good 404 Page

Having a creative or humorous 404 can certainly grab the attention of your users, but from a functionality point of view it might not be a great 404 page design. There are some fundamental things you should consider having on every 404 page:

  • Why the 404 page is being shown.
  • What the user can do next. Here are some things to consider:
    • Provide an easy way to go to the homepage.
    • Show some popular/related items your visitors might be interested in.
    • Give them the ability to search for what they want.
    • Make it easy for them to report an issue.
  • Leave a lasting impression.
  • Stick to your overall brand and design guidelines.
  • Header response should be a 404.
  • Consider making the 404 page context-sensitive.

Here are some examples of context-sensitive 404s. On an e-commerce store, if someone tries to access a page for an item you no longer stock, the 404 page could show related products from the same category. Or if your visitor gets lost while browsing the categories, you could show trending categories and contact information.

Animated/Interactive 404 Pages

In this section, we’ll take a look at some interactive and animated 404 pages. The users can interact with some of them, and others have a subtle animation that makes them unique. Click on the “404” links below to visit the sites’ actual 404 pages.

Ledger Note → 404

Ledger Note used the awesome turndownforwhatjs plugin to create their 404 page.

404 ledger note

Slack → 404

The greyed out page fills up with colors and starts to animate when you interact with the page. It looks like they have really put some effort into the 404 page. HT: @ribenaberry

404-slack

Stampready → 404

A clever use of gif to tell users, what they are looking for does not exist and José Mourinho does not approve of their search query.

404-stampready

Open Bedrijvendag 2014 → 404

404 represent a broken page, what better way is there to tell your visitor about it than this. On the flip side less savvy visitors might think they might have been infected with a virus, so tread carefully with this one.

openbedrijvendag

Hugo Bonacci → 404

Want to see a vortex pull everything in on a page? Well, this 404 page by Hugo Bonacci does all that using CSS. All the important links are clickable, so users can navigate to the homepage or other areas easily.

hugoware

HotDot → 404

You can move the cursor around this page to view the 404 from different angles, giving it a cool 3D effect. Have you tried clicking on the 404 yet?

HotDot

FlippingBook → 404

This site gives the option to play a mini-game when you land on a 404. This entices their customers to visit some of the core pages—like the homepage, About Us and Features page—to unlock the treasure chest, which gives you 25% off their product.

flippingbook

Personally, I’m in love with this idea. Not only is it a cool landing page, but it serves the purpose of getting people to use the product. If I were to try to improve on this, I would probably have a landing page that serves the all important content on one page, and the treasure chest would be activated as the customer scrolls down.

Virgin Holidays Cruises → 404

When you hit a 404 on this cruise booking site, you are shown an animated image of someone on a beach (who might be stranded, or perhaps just relaxing), with the caption, “Uh Oh! Looks like you’re stranded…” Then you’re presented with the option to search for and book a cruise. A nice 404 design that offers good functionality to ‘stranded’ visitors.

virginholidayscruises

Daniel Karcher → 404

This Flash animation shows you a subway with some posters to indicate that you are lost. The ticker board also acts as the navigation menu.

bluedaniel 404

Hatched London → 404

This site will make you jump off a building once you hit their 404 page. Personally I felt that the animation could be a bit slower.

hatchedlondon 404

Dailymotion Cloud → 404

This 404 page shows you a roadworks sign on a dark rainy day, that suggests you’re on a 404 page, and then it automatically redirects to the homepage.

dmcloud 404

Bitly → 404

The 404 page for Bitly features their mascot, Chauncey McPufferson.

bitly

Imgur → 404

A simple 404 page with cats and a giraffe wearing a monocle staring at the cursor.

imgur 404

Romain Brasier → 404

If you stay on the page, you will sacrifice 404 lemmings. Try to save them if you can. Towards the end, the site will tell you how many you managed to save, and warns you to stay away from the 404 page to prevent a future massacre.

romainbrasier 404

Funny 404 Pages

The following 404 pages makes use of a funny image or animation to captivate the user’s attention. The best use of this technique is when the image directly relates to the product or brand.

LonelyPlanet → 404

LonelyPlanet has a cute 404 page, they use what looks like a gif of a baby sloth. Being a travel website the copy “Some places are great to lose yourself in, but not on this occasion.” will work well with their visitors. HT: @ribenaberry

lonelyplanet 404

NDP Canada → 404

NDP (New Democratic Party) Canada has an amusing 404 page. When a visitor lands on a page they are shown an image that says “Ottawa’s Broken. And so is this Link.”

ndp 404

This is funny because, from what I understand, they are not the ruling party, and are saying Ottawa (the capital of Canada) is broken because someone else is in power. Shifting blame might not be that classy, but I had a good laugh, so it’s going up here.

Specialized → 404

This bike equipment store uses an image with a lone cyclist who fell off his bike in what looks like a professional tour, and is captioned “Oops! Looks Like We Lost One.” While I can sympathise with the guy that tumbled over, this image fits perfectly with the brand, and will relate well with their audience.

specialized

Titleist → 404

This golf website uses an image of golfers looking for a lost ball, and also points their users to other interesting sections on the site.

titleist 404

Distilled → 404

Here’s a web development plus SEO agency based in London. They use sophisticated British humor with monocles, pipes and Monopoly mustaches to tell visitors they have landed on a 404 page.

distilled

Magnt → 404

A simple Venn diagram that tells you why you landed on the 404 page.

magnt 404

National Public Radio → 404

These guys have a very good 404 page. It informs users that they couldn’t locate what they were trying to find, and gives them the option to search for it or go to other relevant areas.

npr 404

They they link to interesting stories about lost people and places – there are stories on Amelia Earhart, 18 1/2 minutes of Watergate tapes, etc.

IGN → 404

IGN is a popular site for gamers, and they have made use of the classic Mario phrase, “Thank you Mario, but our princess is in another castle!” to inform their visitors they have landed on a 404 page.

ign 404

4D Data Centres → 404

This page uses HTTP status codes to convey the message to their visitors. While this may not be considered to be a very helpful 404 page for the average user, I can certainly appreciate the extra effort they put into making it highly unique.

If you replace the HTTP status codes, the page would read:

This page is Gone! You’ve officially made an Unauthorized Bad Request and you are Forbidden to view this page.

To Continue you may have to Reset Content, or settle for Partial Content by clicking the link above.

P.S. I know this is Not Acceptable but I’m a teapot.

4D

Creation Museum → 404

An image to challenge the theory of evolution is just want you would expect from the Creation Museum.

creationmuseum 404

IMDB → 404

This site shows you a somewhat random movie quote when you land on a 404 page.

imdb 404

Conclusion

So there you have it — a collection of inspiring 404 pages. I’m sure there are many more examples out there, and if you’ve come across some cool, unique or funny 404 pages, please let us know via the comments below.

Next Steps

Themeforest has a great collection of pre-designed 404 page templates, as does GraphicRiver, with it’s huge selection of beautiful web elements. Or, and only if you’re really looking for something different, you could try some of the weird images on PhotoDune, they would look great as a web-page background.

The post Anatomy of a 404 Error Page appeared first on Envato.

]]>
https://envato.com/blog/anatomy-of-a-404-error-page-get-your-inspiration-from-the-best-404-pages/feed/ 1
Inspiring Examples of Subtly Animated Forms https://envato.com/blog/subtly-animated-forms/ https://envato.com/blog/subtly-animated-forms/#comments Sat, 15 Aug 2015 22:47:47 +0000 http://envato.com/?p=32461 Forms don't have to be flat and uninteresting - check out these examples of animated, engaged forms to hook your users or customers.

The post Inspiring Examples of Subtly Animated Forms appeared first on Envato.

]]>
When you think about it, the most common method for website interaction is either via a contact form to get in touch with you, a login form to access your site, or, and perhaps most importantly, especially for many services and ecommerce stores, the simple signup form.

Because it’s highly likely that your users will end up using some sort of form at some point or the other on your site, in this post I demonstrate that with just some small and subtle UI ideas and tweaks, you can greatly improve the usability of your form and ultimately take the first steps to improving sign-up conversions. Plus, GIFs!!!

You can jump to any of the sections of this post by using the links below:

Innovative Form Ideas Email Subscription Form Design
Login Forms Ideas Credit Card Forms Ideas

Innovative Form Ideas


Single-Field Form Interface

Instead of showing the entire six fields that this form idea requires, this minimal form interface only shows one text input at a time, thus minimizing any distractions. One drawback with using this idea is that there is no way to go back to the previous entry.

Single-Field Form Interface
Single-Field Form Interface Example

Natural Language Form Interface

The innovative idea of this form is to turn a typical form into one that makes use of natural language to gently request the required information from the user.

Natural Language Form
Natural Language Form Interface Example

Fullscreen Form Interface

This experimental full-screen form gives visitors a distraction-free form filling experience.

fullscreen form
Fullscreen Form Interface Example

Email Subscription Form Ideas

Here are some sweet examples of email subscription forms that use nifty animations. Your users will love these. You might also like to check out José Pérez’s post on using subtle animations to improve user experience.


Studio Kit

Studio Kit SignUp Form
Studio Kit’s Sign Up Form

Bart Nederveen’s Design

Bart Nederveen Sign Up Form
Bart Nederveen’s Sign Up Form

Daniil Vnoutchkov’s Design

Daniil Vnoutchkov Sign Up Form
Daniil Vnoutchkov’s Sign Up Form

Envelope Email Form Animation

Envelope Email Form Animation
Envelope Email Form Animation on Codepen

Patrick Rogan’s Email Sign Up Design

Patrick Rogan Email Sign Up Design
Patrick Rogan’s Email Sign Up Design on Dribbble

Julia Khusainova’s Email Sign Up Design

Julia Khusainova Sign Up Form
Julia Khusainova’s Sign Up Form on Dribbble

Morphing Button to Subscribe Form Idea

Subscribe Button Form Animation
Morphing Button to Subscribe Form on Codrops

Login & Signup Forms Ideas


Snapwire Signup Form Design

Snapwire Signup Form Design
Snapwire’s Signup Form Design

Farruh Tillaev’s Login Form Design

Farruh Tillaev Login Form Design
Farruh Tillaev’s Login Form Design

Morphing Button to Login/Signup Form

Login SignUp Morphing Buttons
Login/Signup Morphing Buttons

Glenn Hitchcock’s Login Form Design

Glenn Hitchcock Login Form Design
Glenn Hitchcock’s Login Form Design

Colin Garven’s Login Form Design

Colin Garven Login Form Design
Colin Garven’s Login Form Design

Logoswish’s Login Form Design

Logoswish Login Form Design
Logoswish’s Login Form Design

Credit Card Sign Up Form Design


Alexey Golovanov’s Credit Card Form Design

This credit card form uses a visual representation of the card to obtain the users input from the 16 digit code, expiry date and CVV code.

Alexey Golovanov Credit Card Form Design
Alexey Golovanov’s Credit Card Form Design

Single-Field Credit Card Form Design

this is a simple form that will allow your visitor to add the credit card number and other important card related data all from the single field.

Single-Field Credit Card Form Design
Single-Field Credit Card Form Design

Payment Form Design

Payment Form Design
Payment Form Design

Payment Form Design

Skeuocard CC Form Design
Skeuocard CC Form Design

Card by Jesse Pollak

Card by Jesse Pollak
Card by Jesse Pollak

Concluding

I hope you guys like these examples. If you have come across other cool ideas in which we can design innovative forms please do let me know about it in the comments below.

Also, if you’re looking for some innovative form solutions, you might like to check out some of the awesome CSS Forms currently available on CodeCanyon.

If you loved these animated GIFs, you’ll love the animated examples of Material Design we have recently published as well.

The post Inspiring Examples of Subtly Animated Forms appeared first on Envato.

]]>
https://envato.com/blog/subtly-animated-forms/feed/ 3
Small Change to Portfolio Meta Title https://envato.com/blog/small-change-to-portfolio-meta-title/ Wed, 15 Jul 2015 12:33:11 +0000 http://envato.com/?p=44050 We have just made a small change to how we generate the meta titles for Portfolio pages. We used to generate the same meta title for your profile page and your portfolio page. So this is how it might have shown up on Google’s search result page when someone Googled you. With this update we […]

The post Small Change to Portfolio Meta Title appeared first on Envato.

]]>
We have just made a small change to how we generate the meta titles for Portfolio pages. We used to generate the same meta title for your profile page and your portfolio page.

So this is how it might have shown up on Google’s search result page when someone Googled you.

old meta title

With this update we will add the term - Portfolio to the meta title. When Google re-crawls the page the portfolio pages will start to show up like

new meta title

Why are we making this change?
This aims to address the issue of duplicate titles in Google search results.

This change is live on all 8 Envato Market sites and requires no changes from your part.

The post Small Change to Portfolio Meta Title appeared first on Envato.

]]>
SEO Best Practices for Authors on Envato Market https://envato.com/blog/seo-best-practices-authors-envato-market/ Thu, 16 Apr 2015 02:33:00 +0000 https://envato.com/?p=54854 The subtle art of becoming more easily found in a Search Engines Results Page (SERPs) — commonly known as Search Engine Optimization (SEO) — is the cornerstone of your success that will help drive a lot of targeted traffic towards your item pages. How do you do that, you might ask? Well, I’m going to […]

The post SEO Best Practices for Authors on Envato Market appeared first on Envato.

]]>
The subtle art of becoming more easily found in a Search Engines Results Page (SERPs) — commonly known as Search Engine Optimization (SEO) — is the cornerstone of your success that will help drive a lot of targeted traffic towards your item pages.

How do you do that, you might ask? Well, I’m going to share with you some tips that you can painlessly and very quickly implement. Let’s get started!

Find Keywords That Buyers Are Actually Searching For

The idea behind getting the right keyword is to choose one that:

  1. has decent search volume,
  2. is not too competitive,
  3. and is relevant to your item.

I’m sure you’ve been given this advice before, but today I’ll show you how to go about doing this with some of my favorite tools. Most of these tools are fairly easy to use, and you can easily find lots of tutorials and how-to guides on using them.

Gather Keyword Ideas

You might have noticed that when you type something into Google search, you’re given some suggestions. These are the currently trending and popular searches.

Here are some tools that can help you to use these suggestions to get keyword ideas:

  • Übersuggest will help you export the suggestions to an Excel file, where you can use Adwords to pull up the search volume for those keywords.
  • Soovle will help you get some keyword ideas by pulling suggestions from various services.
  • Google Trends will let you see keywords that are becoming popular, and try and capitalize on them before everyone tries to rank on them.
  • Keyword Tool helps you generate over 750 keywords from Google autocomplete.google trends over time
  • You can also look at the related search suggestions from Google for inspiration.
    related

Gather Keyword Data

Once you have a list of keywords, you need to gather some data on how many people actually search for them. Google Keyword Planner is my go to tool to gather this data. You will need an AdWords account to use it. Alternatives include WordStream and Wordtracker.

Identify Keyword Difficulty

Use something like the Moz Keyword Difficulty Tool to identity the level of difficultly for your chosen keywords. One advantage you authors have, is that your item pages are on Envato-owned sites, with high domain authority. This means you’ll be able to rank relatively easily for highly competitive keywords.

Optimize Your Item’s Title and Content

Optimize Your Title

Your item’s title is one of the most important factors fwhen it comes to SEO. It appears as the h1 title on your item page, and is also used in the title tag in thehead of the page.

Google cuts off the title after a certain width, so don’t make it too long. Roughly 50-55 characters should be fine. If a title is too long, Google will generate a titlefor the page based on other signals.

That being said, don’t be afraid to go over the limit if you need to in order to have a meaningful title. For example, if you were to create an Unbounce Template to be used as a medical/pharmaceutical landing page, and decide to use a technical medical term likePneumonoultramicroscopicsilicovolcanoconiosis in the title, then by all means feel free to name it “Pneumonoultramicroscopicsilicovolcanoconiosis Unbounce Pharmaceutical Template”.

Some key pointers to remember when you choosing a title:

  • Use a title that gives buyers a clear idea of what to expect when they visit your item page
  • Try to use your main keywords in the title.
  • Keep your title within the 100 character limit we have on the Market.

For example, for a WordPress theme that uses Parallax scrolling and is targeted towards musicians, you could use the title “ABCD Parallax WordPress Theme for Musicians”.

Optimize Your Content

Include generous amounts of text on your item page, instead of using images for the entire description. Google focuses on text to understand what a page is about and match it to a search query. To get a rough idea of what Google sees, try plugging your item’s URL into browseo.

Note: I’m not asking you not to add images. When I browse through the Market for an item, I usually look at the images to get an idea of what it offers. Just make sure you optimize them (see below), and add relevant text as well.

The first 150-160 characters will likely be used in the meta description in search results. This is a great place to highlight some key features of your item. Keywords here will not affect your ranking, but could improve your click through rate (CTR) because your description will be more relevant and appealing. Mention things like free support and free lifetime updates.

meta description

Use h2 and h2 subtitles to highlight secondary keywords and key selling points for your item. I often use these to target long tail keyphrases and keyword variations. A good example is the Parallax WordPress Themescollection, where I target long tail key phrases like “Multi Directional Parallax Effect“.

Make it a habit to cross link your related items. Having internal links to relevant items will allow the SEO juice to flow between your inter-connected pages. This also helps buyers to check out some of your other interesting items.

links

Google loves unique content, so use unique item descriptions for your pages. This will give you a better chance at ranking above pages that tend to reuse content on all their item pages.

Optimize Your Images

Page speed has been a ranking factor for some time now. You can use Google PageSpeed or Pingdom to see how fast your item pages load.

Images on your item pages play a significant role in your page speed, so it’s in your best interest to make sure you don’t bloat the page with unoptimized images. I tend to use Kraken to optimize images.

Tip: One of our front-end developers, Ben Smithett, has put together anexcellent post on image optimization, which should give you more info and tools to work with.

Always add an alt tag, so that Google can understand what the image is about.

Obtain Quality Backlinks to Your Items

Showcase Your Work

Designers often add their creations on sites like Dribbble or Behance for critique from fellow designers. Some of our authors use these sites to drive targeted visitors to their item pages.

If you have created an exceptional design, sites like Awwwards might feature you work, if you get in touch with them. A good example for this would be the special mention they gave Time Travel.

Bonus: I’ve written another post which lists some more useful resourcesthat wil help promote your items.

Perform Competitor Analysis

One of the my favorite ways to get backlinks is to look at where the competition get theirs from. I usually use Open Site Explorer, add the competitor’s link, and look at the incoming external links to that page which pass link equity. Since these folk have linked to my competitor, chances are I can get a link from them to my page as well.

link data

Make Use of Social Signals

While Google claims that social signals are not a ranking factor, multiple independent studies have shown correlation between social signals and ranking, while others claim they have no impact. Even if there is no impact on ranking, social media sites can certainly send a healthy amount of traffic to your item pages.

Here are some great articles that will help you share more effectively on social media:

Conclusion

I hope you’ve found this guide useful. If you do, you might also like my other post on making your items more SEO friendly. I have also collected a list of SEO tools that you might enjoy. Feel free to reach out to me via Twitter or in the comments below if you have any questions.

The post SEO Best Practices for Authors on Envato Market appeared first on Envato.

]]>
Exploring Interactive Multi-Screen & Device Experiences https://envato.com/blog/exploring-interactive-multi-screen-device-experiences/ https://envato.com/blog/exploring-interactive-multi-screen-device-experiences/#comments Thu, 13 Nov 2014 11:05:10 +0000 http://marketblog.envato.com/?p=34450 Lately I have seen a few of these so called multi-screen experiences, sites where users are able to interact with the desktop version of website using their mobile device.

The post Exploring Interactive Multi-Screen & Device Experiences appeared first on Envato.

]]>
Lately I have seen a few of these so called multi-screen experiences, sites where users are able to interact with the desktop version of website using their mobile device.

With the rising popularity of mobile devices like smartphones and tablets, we will be seeing a lot more of these multi-screen experiences. I don’t think it will be something that will become popular in mainstream web development any time soon, but it’s a cool concept as far as experimental web design goes and certainly something worth exploring.

The core technology that makes this possible is the WebSocket protocol. With WebSockets you can pass messages back and forth between a desktop website and the mobile version.

The majority of multi-screen experience websites seem to be mostly games, but I have come across a few for products and services as well. Today we will be taking a quick look at some of these multi-screen experience websites. If I have missed any please do let me know about it in the comments below.

Mobile Browser Multi-screen Experiences

Super Sync Sports

Super Sync Sports allows you and 3 friends to compete in running, swimming and cycling games on a shared computer screen, using a mobile device as the game controller.

Diplomatic-Cover

The Diplomatic-Cover website connects your smartphone with the desktop browser, allowing you to navigate and consume the content they offer using your phone.

El Monstruo

ING Direct and UNICEF have partnered up to create The Monster. You are shown a video where a monster is destroying school property and frightening off children from a local school, and you are encouraged to send a text message (it will cost €1.20, all of which goes to UNICEF) so that the teacher and students can defeat the monster and return to school.

Racer

Racer is a slot car game that works across multiple mobile/tablet browser screens. Start a race, sync up the devices and tap your screens to accelerate and release to slow down. But, don’t accelerate too much or you might go off track. It can also support up to five screens/users.

Roll It

With Roll It you can roll a ball from your phone to your desktop browser. This game also makes use of the phone’s accelerometer to perform some special moves.

Just a Reflektor

Just a Reflektor is an interactive short film that makes use of the desktop and mobile device to tell a story. Once you sync your phone with the browser, you will have to align the screen and the webcam and then the story will begin.

Omnisense Experience

Omnisense is an interactive experience that aims to make you think about the different uses of social data.

Omnisense Experience

Digital Trip

Digital Trip is a 3D game that can be played using one of three optional controllers – the keyboard, your mobile device, or your webcam.

Digital Trip

Native App Multi-screen Experiences

Llévalos a la escuela

Just as they did above with The Monster (above), ING Direct and UNICEF also partnered up to create Llévalos a la Escuela. The story begins on a website and ends on your mobile device.

Brass Monkey

Brass Monkey is a video game console that uses your smartphone as a controller and web browser as the main display. You can download a mobile app from their website that allows you to sync your browser with your phone. Then you can then use it to select the various games they offer.

Brass Monkey

Concluding

So, after all that, no doubt you will be wanting to learn more about WebSockets! As expected, Tuts+ offer a few comprehensive tutorials:

You should also check out some of the tutorials on html5rocks and MDN to get you started, and there is also a great tutorial from James Morrish.

There are a few more examples over at Chrome Experiments as well. I would love to feature other sites that offer similar features, so if you come across any other cool multi-screen experiences, or if you develop one, please do let me know and I will showcase them here.

Explore Mobile Controller Games on Chrome Experiments →

The post Exploring Interactive Multi-Screen & Device Experiences appeared first on Envato.

]]>
https://envato.com/blog/exploring-interactive-multi-screen-device-experiences/feed/ 3
Learn Something New: Photoshop Actions https://envato.com/blog/photoshop-actions/ https://envato.com/blog/photoshop-actions/#comments Thu, 04 Sep 2014 09:09:45 +0000 http://envato.com/?p=31246 You really don't have to be a Photoshop expert to use Photoshop Actions. You really don't.

The post Learn Something New: Photoshop Actions appeared first on Envato.

]]>
Learn Something New: Photoshop Actions

You really don’t have to be a Photoshop expert to use Photoshop Actions. You really don’t.

Put simply, Photoshop allows you to record the events you action, and can replay those steps for you. This is called an action. You are also not limited to just using the actions you have created yourself, you can download actions others have created, and apply them to your own files as well.

They are a great time saver, especially if you have to redo the same set of steps over and over again.

So, lets take a quick look at how to download, install and use a Photoshop Action:

What is a Photoshop Action?

Photoshop Actions are a series of predefined steps that can be applied to the files you work with. It can usually be applied with just a few simple clicks without needing to manually apply each event.

This allows you to easily apply stunning effects to your photos without wasting a lot of time. So, it’s basically a shortcut for adding effects to your images. They are available for download in the form of .ATN files.

How to Install Photoshop Actions?

First of all, you have to find some good Photoshop Actions to install. I used the Realistic Hand Draw Generator Action Set from GraphicRiver for this tutorial.

Download the ZIP file and extract the contents. You will find the Photoshop Action .ATN file(s) there.

Extract ATN file from Zip
Extracting the .ATN file from the Zip file

There are multiple ways to go about installing Photoshop Actions:

Method 1:
Browse to your Photoshop folder, enter the Presets folder and then the Actions folder. Once you are in the Actions folder, copy paste the .ATN file there (or you can drag and drop the .ATN file).

Copy Paste ATN file to Actions Folder
Copying & Pasting the ATN file to the Actions Folder

Method 2:
In Photoshop, go to the Window menu and open the Actions panel. Click the flyout menu on the upper right corner of the Actions panel and select Load Actions … Now navigate to the Action(s) file you want to load, select it and click Load.

Load Action from Photoshop
Loading the .ATN file from within Photoshop

Now that we have downloaded and installed them, we can now move on to actually using them…

How to Use Photoshop Actions?

Once installed, you can open any image in Photoshop and run the selected action. All you have to do is select the action you want to use, and click the play selection icon to get the desired result.

In the below example I am not actually going to perform any customization, I am just going to keep hitting enter for the action to run its course.

Apply Action in Photoshop
Apply Action in Photoshop

Here are some samples from this particular action:

Samples from the Action
An example of the Action in action

Finished!

And that is it. And yes, it really is that easy!

Where do you go from here? Well, now that you have learned how to install and apply a Photoshop Action your next step could be to grab one of the many professional Photoshop Actions we have available on GraphicRiver, or you could head over to Tuts+, they have published a handy roundup of 100 Free Photoshop Actions.

Take Me to GraphicRiver’s Photoshop Actions

Big thanks to Cheryl Graham, Jeremy Sutherland and Ben Gribbin for their help in putting this post together.

The post Learn Something New: Photoshop Actions appeared first on Envato.

]]>
https://envato.com/blog/photoshop-actions/feed/ 1
How to Future Proof Your WordPress Site With Child Themes https://envato.com/blog/how-to-future-proof-your-wordpress-site-with-child-themes/ https://envato.com/blog/how-to-future-proof-your-wordpress-site-with-child-themes/#respond Fri, 25 Jul 2014 07:13:16 +0000 http://envato.com/?p=30592 Once when I was having a chat with a developer about WordPress Themes, he mentioned something about child themes. I am guessing by the confused look on my face, he figured out that I have no bloody clue as to what he was going on about. That was my “Have you met Ted?” moment. After […]

The post How to Future Proof Your WordPress Site With Child Themes appeared first on Envato.

]]>
WP Child Themes
Once when I was having a chat with a developer about WordPress Themes, he mentioned something about child themes. I am guessing by the confused look on my face, he figured out that I have no bloody clue as to what he was going on about. That was my “Have you met Ted?” moment.

After our chat, I went on to Google to find more about this new thing called child themes, that would go on to save me hours of hard work and frustration in the future. Today we are going to look at what child themes are and why you should be using them.

What Is a Child Theme?

So what exactly are child themes? When you download a new theme, it is usually the main theme or what one would call a Parent Theme. A child theme is a theme that inherits the look and functionality of the parent theme.

At this point a few of you might be thinking, “Great, so how does this help me exactly?” Good question. Any changes you make to the child theme overrides the defaults from the parent theme. So now you can easily made edits to the child theme, and those changes will be visible on your website without touching any of the files in your parent theme.

Now imagine a theme update rolls out, and you need to update your theme. You download the new file and overwrite the existing theme file (parent theme). Lo and behold, you have updated the theme, and all those edits you made in your child theme still exist. ( ͡° ͜ʖ ͡°)

No more looking through the theme to find all the edits you have made to the original theme, no more manually updating the theme files before uploading them to the site. In short, updating themes are now a piece of cake.

How to Make a Child Theme?

Now that you are a big fan of child themes like I am, let us learn how to create a child theme from your parent theme. There are many ways to go about it. There is a WordPress plugin called Child Theme Configurator that will help you set up a child theme for your existing parent theme in a few simple clicks.

no plugin
Now some of you might be, like, I rather not use a plugin unless there is no other way. Don’t worry, we got you covered. If you prefer to do it manually, just follow the steps outlined below.

Step I

Navigate to your themes folder in your WordPress installation using your favorite FTP client – it should be under wp-content/themes. Create a new directory and give it a unique name. Please note that the name should not contain any space.

Create Child Theme Folder

Step II

Navigate to the new child theme folder you just created and create a file in there called style.css. The child theme’s stylesheet is included after the parent theme’s, so the child theme’s CSS will override those in the parent theme’s stylesheet.

For Theme Name: you can pick any name you want. For Template: you should add the folder name of your parent theme (as they appear in wp-content/themes).

Now there are two ways to load the parent’s style.css file:

a) The traditional way
Use @import to load the parent’s style.css.

In the child theme’s style.css file add a new line

@import url(“../folder-name-of-parent-theme/style.css”);

so that the style.css will look like the code bloack below. Replace folder-name-of-parent-theme with the actual folder name of the parent theme as seen in wp-content/themes.

b) The recommended way
It’s generally preferred not to use @import to load CSS because it might slow down page rendering. If your theme supports wp_enqueue_style() to enqueue stylesheet, you can load the parent’s style.css using an action hook in function.php.

To do this, navigate to the new child theme folder and create a file in there called functions.php. Add this to that file and save it.

That is it, your child theme should be ready. Now all you have to do is activate it.

How to Install Child Themes

Now I am going to walk you through the process of installing a child theme. For the purpose of this exercise we are going to download Newspaper, a theme that I really like and use on my blog.

Step 1

  • Download the theme files from the download area. I usually choose “All Files & Documentation” because it’s always useful to go through the Author’s documentation of the item.
  • But for the purpose of this exercise I am just going to download the “Installable WordPress file only” option, to quickly show you how to install a child theme.

Download Theme File

Step 2

  • Once you have the .zip file, go to your WordPress dashboard >> Appearance >> Themes.
  • Click on the Add New button to install the new theme.
  • Now select the Upload option and click on the Choose File button and select the zip file you downloaded in Step 1.
  • Click on Install Now, sit back and wait for WordPress to install the new theme.

Install Theme Files

Step 3

  • Jump into your FTP application, I use FileZilla in this example.
  • Go to your root WordPress installation folder, once you are in your WordPress root installation folder go to wp-content >> themes.
  • You should find your theme folder in there (in this case “Newspaper”).
  • Now create a child theme folder. We are going to call it “newspaper-child”.

FTP Child Theme

Step 4

  • Create a file called “style.css”. You can use any text editor for this – I use Notepad++.
  • Follow Step II to add the required content.
  • Make sure you add the correct name for the Template: field. In this case it’s “Newspaper”. It’s case sensitive, so make sure you add the name as it appears in your themes folder.
  • Save it as style.css.

Style CSS

Step 5

  • Create a file called “functions.php”. You can use any text editor for this.
  • Follow Step II : b) The recommended way to add the required content.
  • Save it as functions.php.

Functions PHP

Step 6

  • Open up FTP client.
  • Go to the child theme folder we created in Step 3, in this case newspaper-child.
  • Copy style.css and functions.php in to this folder.

Copy Files to Child Theme Folder

Step 7

  • Go to your WordPress Dashboard >> Appearance >> Themes.
  • You will find your new child theme in there, in our case “Newspaper Child Theme”.
  • Click on the activate button.
  • Give yourself a pat on the back. You just created and installed a child theme!

Activate Child Theme

So now that you folks are experts at creating and installing WordPress child themes, go ahead and try it. Let us know what you think of this “How to” style of article. If you found it to be useful, we can do more.

Create Child Themes

The post How to Future Proof Your WordPress Site With Child Themes appeared first on Envato.

]]>
https://envato.com/blog/how-to-future-proof-your-wordpress-site-with-child-themes/feed/ 0