How to Style Announcements and Events Sections

Regardless of if you're a non-profit organization or a business looking to grow, your website should offer the most recent information possible about your organization. There are few things more frustrating for a website visitor looking to learn more about an organization only to discover that the information was last updated in 2014, 2008 or worse yet -- never! 

While some aspects of your content can stay "evergreen," your announcements and events sections should constantly be refreshed with the latest information. Here are just a few reasons why you need updated Announcements and Events Sections: 

- Keeps people informed about your organization. 

Want people to show up to an event you're hosting? They have to know the details! Knowing that your website is the most reliable place to get information boosts traffic by encouraging returning visits while also proving that you 1) are knowledgable enough to update your website and 2) care enough about your organization's success to update people. 

- Builds up brand trust by offering up-to-date information. 

If you don't want to take care of your website's important events, your website visitors could easily wonder if you'd take care of them.

- Added visual elements help dates, times, and places stick in people's brains. 

Styling your calendar updates in a unique way will draw attention to the information and also be more memorable than standard copy about it. 

- Often validates what information is available on social media. 

This is particularly important for nonprofit organizations -- groups that often thrive off of in-person interactions and events. In an age of social media, it's tempting for organizations to isolate the most recent information about events to their Facebook pages or Instagram Stories. But what happens when you've updated one element and not the other? You could easily send conflicting messages to your potential clients. 

Now that you're (hopefully) convinced that updating your announcements and events is a smart idea, here's a tutorial on how to make that information look great on your website.

HTML

The HTML combines the necessary Bootstrap and Slick Slider classes so that the slides initialize on load:

CSS

A considerable amount of CSS is needed for all of the features such as the overlayed prev/next arrows:

JavaScript

Finally, you just need initalize slick slider upon document ready:

$('.announcement-slider').slick({ dots: false, arrows: true, infinite: true, slidesToShow: 1, slidesToScroll: 1, fade: true, prevArrow: $('.prev-arrow-announcement'), nextArrow: $('.next-arrow-announcement') }); $('.events').slick({ dots: false, arrows: true, infinite: true, slidesToShow: 1, slidesToScroll: 1, fade: true, prevArrow: $('.prev-arrow-events'), nextArrow: $('.next-arrow-events') });

And there you have it: a quick and stylish way to display your announcements and events to keep your website visitors in the know with your organization. Be sure to scale your browser windows to various sizes to see how these sections would look on mobile display.