Halloween Special: 7 Website Design Tricks and Treats [+Freebies]

Getting prepared to Elementor's Halloween 2018! Learn 7 thrilling Halloween web design ideas, and enjoy our FREE Halloween pack of icons, backgrounds, templates and other frightening freebies.

Welcome, Elementor witches and goblins, to our Halloween special. Halloween is the perfect time to dress up with scary costumes, not only for yourself but for your website as well.

For this seasonal special, we’ve created the most abominable and daunting Halloween kit for you to enjoy. It includes design ideas, templates, icons, images, backgrounds and more surprises. Together we will create the most hauntingly gruesome website the world has ever seen! Muhuhahaha…

Sorry, got carried away there.

🎃 Elementor's Halloween Gift Pack Made My Site BOO-tiful! 👻

Why Dress-up Your Website for Halloween

Seasonably changing the design of your site holds many advantages:

  • Celebrate Halloween with your customers in an amusing and surprising way
  • Ride the wave of festiveness, while drawing attention to your brand
  • Enrich your unique brand story using Halloween
  • Get more of those holiday sales by utilizing the holiday symbols and icons
  • Plus, it looks really cool…

Let’s go over the 7 ways to BOO-st your website and make it look scary beautiful.

#1: The 'Haunted Homepage' Hero Header

Halloween Header Template

If you implement one example from this tutorial, I recommend you make it this one. The ‘Haunted Homepage’ Hero header combines a silhouette section divider and a related raining background video. The result is a dark & fear-inspiring hero header that is impossible to ignore.

Trick n’ Treat: Download Halloween silhouette & set rain background video

#2: The 'Killer Feature' Services Section

Halloween Services Design

With this treat, you can implement the Halloween icon set provided in this post, you can easily transform your current services section and add the proper holiday spirit to it.

Trick n’ Treat: Download Halloween icons to replace your services icons

#3: The 'Bloody Dreadful' Call to Action Section

Halloween Sale CTA Example

This is a very simple yet effective call to action section that can show off your Halloween sale in the best possible way. It combines the right font, some minus margin and a rather bloody shape divider.

Trick n’ Treat: Set drop shape divider for extra-bloody Halloween section

#4: The 'Starving Zombie' Menu Page

By adding a skull divider to the restaurant menu page, you can give the whole page a Halloween look. This can also look fang-tastic on blog posts, dividing the different paragraphs with a Halloween-inspired divider.

Trick n’ Treat: Download Halloween icons dividers & replace regular dividers

#5: The 'Contact The Dead' Contact Form

Halloween Contact Form Template

Add a few small Halloween images to dress up your contact form and give it a new festive touch. This is perhaps the smallest touch you can make on your site, and can also work for other elements like slides or images. 

Trick n’ Treat: Download Halloween pumpkins & add to contact form

#6: The 'Price Slasher' Pricing Page

Halloween Pricing Page Example

Here is a trick that combines a transparent price table with a background of tombstones, to present the pricing page in an extra-gruesome manner. Don’t worry, no animal were harmed in the making of this page.

Trick n’ Treat: Set transparent price tables & set tombstone images as background

#7: The 'Straight from Hell' 404 Page

Halloween 404 Page Example

Here is a neat trick to create a 404 purgatory page that features a pumpkin mask with fire sizzling on the background. To create this trick, first set the fire video as the background. Then, set the pumpkin mask as the image overlay.

Trick n’ Treat: Set fire sizzling video background & add hollow mask as overlay

FREE Fearful Freebies & Special Halloween Sale

Want to get all the images, icons and resources used in this post? Here is our official Halloween pack available for FREE download. All the Halloween sections above are also available in our Template Library for all Elementor Pro users.

You can buy or upgrade Elementor Pro and enjoy a limited time offer of 20% off. If you’ve already upgraded, please share this special sale with your friends:

🎃 Elementor Halloween Special Sale [Limited Time 20% OFF] 🎃

Before we depart, I want to ask each and every one of you to ‘Halloween’ your own site and send us the results in the comments below.

Liked This Article?

We have a lot more where that came from! Join 650,936 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

About the Author

Ben Pines
Ben Pines
Ben Pines is Elementor's CMO. He has been in the online marketing industry for over 10 years, specializing in content marketing. WordPress has been Ben's platform of choice since the time it was used solely for blogging.

Share on

Share on facebook
Share on google
Share on twitter
Share on linkedin

Comments

33 Responses

  1. Thanks Ben, this is a great idea. I hope you’ll make some similar designs for a Christmas makeover, it would be great to get my website into the holiday spirit for December.
    Thanks for a great page builder which keeps getting better!

  2. Hi Ben, first of all – thank you for those awesome creative ideas how to use elementor, love #7 especially! I would really like to see a feature in elementor that i’m missing from the very beginning – something similar to css classes for elements. In ‘#6: The ‘Price Slasher’ Pricing Page’ you needed to style each element of the pricing table individually, imagine having 5 columns… It would be awesome to be able to set a class for entire pricing block (column), and just style one and see all of the others are being changed, without a need to style them one by one. I know, that there is an option to add CSS classes, but i was never able to get it work the way i would like (exacly as regular CSS is working). Keep up the great work, and i wish you more successes with Elementor!

  3. Amazing stuff! You guys are creative as hell! I mean, I can take so many ideas from this tutorial and push my designs out of the bloody box. Keep on bringing these tutorials and features!

  4. The post says to enter the seasonal monster makeover to get the pack of icons, templates, etc but it doesn’t tell me how to enter. Where can I find the images and icons?

  5. Hey, Ben!
    Awesome designs.
    I just tried creating a page but I’m not seeing any of these templates in the Library.
    Please, advice.

  6. Fantastic, already implemented some sections. https://www.cx3digital.com One issue that’s got me perplexed, the preview shows great for desktop, mobile and tablet, but on actual mobile (iPhone 7), there are no graphics. Assuming for now that tablets aren’t displaying either. Any ideas?

  7. These are all great add-ons for Halloween. At Muse, we did dress up our website for Halloween and added a hidden game to it. We have been receiving great feedback so far. 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to learn how to build better websites?

Join 650,936 Elementors, and get a weekly roundup of our best skill-enhancing content.

By entering your email, you agree to our Terms of Service and Privacy Policy.