This Week in Code: A Web Design Roundup
Every day new HTML, CSS, and JavaScript tutorials are posted to the growing Solodev Web Design Blog! Here is a list of what was added the week of March 6th!
Adding Feature Tiles to your Website with Font Awesome
Displaying the features of your product and/or services is important on your website. While some may use plain text with bullet points, others tend to lean more on the visual side of things to display their features. Using visuals to communicate your features to website visitors has become increasingly more popular to the point of being a best practice. Providing visual context to the features gives your website visitors a more immediate understanding of your overall offering. In this article, Solodev will teach you how to add feature tiles containing Font Awesome icons to your website.
Adding a Popup Video to your Hero Image
When it comes to content, video is king. It is the most consumed content on the web. If you had to choose from a range of media types to get a message across, a video should always be your first consideration. Visual communication is the top tier form of getting your messaging to stick. While graphics and copy can make the difference between a website visit and a sale, video can go even further. Why not have the best of both worlds?
Simply making your hero a video or designing your hero with a graphic overlayed with some copy is the typical approach to homepage hero sections. There is a way to have both and it involves Magnific Popup, a jQuery plugin that displays content when an HTML element is clicked. In our example, the hero image and overlaying copy is still prominent. Our Call-to-Action (CTA), however, is a button. This button does not simply take them to another page with more copy and graphics, it opens a popup video. In this scenario, you can maintain your hero image and overlaying text and provide the option for website visitors to view a video further describing your product or service.
Top Five Lead Generation Web Design Tutorials
This article contains the top five web design tutorials focused on lead generation on your website. Some could argue that generating leads and communicating with both prospective and existing customers is one of the most important goals of a website. In some cases, lead generation is the priority of major websites that are completely sales-driven. The following web design tutorials all provide some form of lead generation that can be used on your website to start converting website visitors into customers. All five tutorials have all of the HTML, CSS, and JavaScript required to add robust lead generation functionality to your website today!
Designing an Interactive Map using JavaScript
Maps are a great way to leverage your website to drive traffic to your doors. A majority of maps simply show the locations of a given entity as well as an address without any further context or interactivity. In our example, we’ve designed a map that displays locations you can learn more about by clicking on the location. Clicking on the location triggers a popup with further information related to that specific location. You can add any information you’d like to these popups that make the most sense for your business.
Originally posted on the Solodev Web Design Blog
Brought to you by the Solodev Team. Solodev is a cloud-based web content management system that empowers users with the freedom to bring amazing web designs to life.
