September 2022 projects: engaging animation photographs as design and multi-path navigation10/31/2022 For our September 2022 website roundup, we took a look at projects that engage and entertain. One uses interaction and animations to create a game for its team’s annual retreat. Others use background effects, interesting navigation, and photo-centric layouts to capture our interest. Engaging animationWebsites can use animation in ways that are enticing and visually mesmerizing. They can also use it to engage viewers in a deeper way, adding more meaning to a site than it could have with a static page. ThreeSixtyEight RetreatThreeSixtyEight is a design agency that specializes in deeply engaging interactive experiences. It’s no surprise that their 2022 team retreat invite took the form of a nostalgic Oregon Trail–style game. Beat the game and get the location of its top-secret retreat destination. The road-trip reveal the company built lets you gather a team, choose some supplies, and drive your van off into the landscape. Be sure you’re making the right decisions, though, or your coworkers might not make it. Clever use of scroll and mouseover interactions and a multi-choice play style join together to make the game engaging — without too much technical complexity. Sound effects and some very charming illustrations make it cute and entertaining to play. For a breakdown of the elements of its design, check out its page on Awwwards. Sabina met een ASabina met een A (which translates to Sabina with an A) is the website of photographer and copywriter Sabina van Gils. Her photography is unexpected and intriguing. Its clean and simple composition pulls all our attention to her interesting subjects. Her website is similarly minimal yet quirky. It has the carefree and creative feeling of a scrapbook. What brings it to the next level creatively is the way it uses animation. Loading animations, mouse interactions, and animations on scroll make perusing her site a delightful experience. Sabina’s photographs are shown off right in the middle of the page with a subtle brightening effect on mouseover and a slow, deliberate scroll. These animations draw our attention to her work rather than distract from it. Forward ObsessedOn the Forward Obsessed podcast, Pete Sena and David Salinas interview entrepreneurs and business leaders about their own experiences and their visions for the future of business. Their podcast’s website uses animated effects to create a minimal yet intriguing experience for visitors. The first thing you notice is the mesmerizing abstract background animations. With an extremely clean black-and-white design and few other elements to distract, the background animations bring our full interest to the page. They also use an animated effect to bring additional information to their podcast episodes list. When your mouse hovers over an episode title, a little animated icon pops up, giving a hint about that episode’s main focus. It’s just enough information to pique our interest and get us to click through to listen. Photographs as designSometimes anchoring your design in a photograph — or photographs — creates a truly beautiful website. The modern version isn’t a gallery or a slideshow. Instead, these designers used cleverly curated images throughout their designs to build meaning and connection. LIIV AtlantaLIIV Atlanta is “A church that is centered around the presence of God and thrives through authentic people.” Its focus is all on its community and the individuals within it. The church hosts services, provides childcare, and builds a support system for its congregation. The choice to anchor the design of its website in photographs of people communicates that mission perfectly. LIIV’s site opens with dramatic videos splashed across the entirety of its hero section. From the first moment you open the site, you know where the church is and what it represents. The rest of the site intersperses bright, cheerful photographs of its congregants. This layout works perfectly for a community-focused organization’s site. Dieter RamsDieter Rams’ website, in contrast, leans into the art of minimalism, which makes sense for a German industrial designer. His designs, like his site, boast a clean, vintage aesthetic that speaks to functionality and efficiency. The striking image of a keyboard that appears when you open his site sets the viewer’s expectations perfectly. Despite being a photograph, the purity of the white background and the perfect symmetry of the image create a graphic effect. There are images of Rams and his work throughout the site, and the minimal design brings all the viewer’s attention to his creations. Multi-path navigationSometimes you need to get a user to a specific outcome, no matter the path. These websites use multiple navigation options to let visitors explore while making sure they get to their final destination. Festival XFestival X will be bringing music and festivities to the Gold Coast of Australia this November. Its site is as colorful and exciting as its lineup. With music festival sites, three things are vital — the where and when, the lineup, and the tickets. Its navigation makes sure you get all this information, whatever path you take. The lineup is the first thing you see when you open the site. Visitors can click the performers’ names to pull up photos and details on the artists. They can also navigate to these pages through the hamburger menu in the top right corner, a “Lineup” button on the left, and another visible menu at the very bottom of the pages. “Buy tickets” stays obvious, hovering at the bottom left corner no matter where the user is on the site. That way, whenever they decide to attend the festival, the path is always clear. BottomlessBottomless is a coffee delivery service that provides replenishing orders of customized coffee-making supplies to users. The company partners with high-end roasteries to give customers access to coffee without having to travel to a store. The site is still a work in progress, but the company uses a “Choose Your Coffee” call to action throughout its design. Visitors can freely browse, and whenever they’re ready, they can begin shopping for their coffee beans of choice. The CTA button repeats throughout the site, giving users an easy path to purchase. Once they hit the shop button, visitors are led through a series of pages where they can customize their choices. Each page features descriptions and images with large, clear buttons where they can make their selection. Do they want dark roast, medium, or light? What grind do they need? How much coffee do they go through in a week? Based on that, the site recommends an order size and reorder schedule. By the time customers have put together a perfectly tailored coffee box, they know exactly what the value proposition is. Share your creations with Made in WebflowThe Webflow community loves to explore projects through Made in Webflow, and so do we! Share yours, and you might show up in our monthly roundup. via Pixel Lyft https://ift.tt/UXfHuFw
0 Comments
Admit it, you are always looking for quicker, more efficient ways to complete projects – even graphic design tasks. Lunacy is a piece of free design software from Icons8 that can help you do just that. It’s packed with AI-powered tools to speed up your work, giving you a new edge in your design work, plus a range of built-in graphics to help you “build design like a Lego”. Today, we’ll take a look at this tool, highlight its key features, and explain how you can make it work for you. What is Lunacy?Lunacy has cross-platform capability and is packed with built-in stock graphics to power your projects and help you work faster. Lunacy is a set of artificial intelligence-powered tools to help with graphic design projects. It’s made by Icons8, a leader in the graphic design space. (You may have used some of their icons or user interface kits.) What’s great about this tool is that it is free and works on your computer, so you don’t have to rely on something that works in-browser. It has cross-platform capability and is packed with built-in stock graphics to power your projects and help you work faster. Icons8 is a company that allows designers to express their ideas, providing the right design elements at the right time. Unlike some other marketplaces that just resell designs, all of the design elements you find from Icons8 are created by the team and shared with custom elements and tools. Graphic Design ToolSo why would a graphic designer need a tool like Lunacy? Who else can use it? What’s nice about Lunacy is that it is made with everyone from a beginner to an experienced designer in mind. Beginners will love all the graphic design elements and the ease of use. AI features help make tedious tasks more simple, from removing backgrounds to resizing images. Experienced designers can also benefit from that same AI with a tool that can help make tasks quick. Create an avatar in a jiffy or open files from other native tools such as Figma, Adobe XD, or Avocode. (You can move files back and forth, too.) For a free tool, it also has something else really unexpected – the ability to design and collaborate with your team. You can share documents and edit, comment, and see changes to the design in real-time. (That’s something you won’t find with a lot of other graphic design tools, and almost unheard of in free tools!) Key FeaturesThere are a few features in Lunacy that you’re absolutely going to love because of the zip they will add to your workflows. The background remover makes the background of any image transparent. You’ll save a ton of time that you’ve spent doing detailed work in the past. The built-in image upscaler allows you to enlarge images and even enhance their resolution. Use this to help out those photos that aren’t quite big enough to do the job. The background remover makes the background of any image transparent. You’ll save a ton of time that you spend doing detailed work in the past. The avatar generator allows you to create user images for almost any use, from contact lists to testimonials to team icons. Finally, the text generator can insert placeholder text into any of your designs or interfaces so that your team can better imagine a final product, even before the copy is complete. Other key features include:
Download it TodayLunacy works offline as a native app on your computer. It’s available for PC/Windows, Mac, and Linux. Download Lunacy for: ConclusionLunacy is an easy-to-use and quick-to-learn graphic design tool that’s perfect to help beginners create or facilitate quick projects for more experienced designers. The AI-powered tools are intuitive and valuable, work as expected, and really do help you save time. Built-in features – from stock photos to icon sets – are an added bonus that keeps you from looking elsewhere for additional assets. For a free tool, it would be tough to find anything else with the same powerful features and ease of use. via Pixel Lyft https://ift.tt/krOT1A2 Need to add high-quality icons to your WordPress website? Have you heard of Font Awesome, but don’t know how to use it? In this article, we’ll show you how to use Font Awesome to add icons to your WordPress website. Icons are an essential graphical element for any website, regardless of the industry. They add a visual element that adds interest to any web page they are on. Font Awesome is the internet’s most popular icon set. You get access to high-quality vector images that can be customized with CSS. Best of all, Font Awesome offers a free version that has over 1,600 free icons for you to use. Setting up and using Font Awesome in WordPress is easy. In this article, we’ll cover all of the steps needed to get up and running with Font Awesome in WordPress. First, let’s go over an attractive offer for WordPress website owners. Envato Elements: Unlimited DownloadsEnvato Elements is a service that provides an unlimited download subscription, meaning that you are free to download as many items as you like from millions of digital assets. This includes premium WordPress themes and plugins, icons, stock photography, royalty-free audio, and stock video. The subscription is covered by simple commercial licensing that gives you the rights to use the item in a broad variety of projects, including those of a commercial nature. The licensing is future-proof, meaning even if you unsubscribe and can’t download items from Envato Elements anymore, any existing registered uses are still covered. Subscribe today and start creating, or learn more about why Envato Elements is Great for WordPress Users. Now let’s cover how to use Font Awesome in five simple steps. 1. Install the Font Awesome WordPress PluginSetting up the Font Awesome WordPress plugin is like setting up any other WordPress plugin. In your dashboard, go to Plugins> Add New. In the Search plugins… field, search Font Awesome. Then click Install Now > Activate. That’s it! The WordPress Font Awesome plugin is installed and ready to go. Let’s now go over how to set up the plugin. 2. Set Up the Plugin and KitThe plugin setup is very straightforward. On your WP dashboard, go to Settings > Font Awesome. This will open the Font Awesome menu. Our first option is whether we want to use Font Awesome in WordPress as a kit or use a CDN. Font Awesome recommends using the Kit option as it offers the most icons and gives you access to the Icon Chooser. To set this up, you’ll first need to create an account on Font Awesome and create a kit. No other action is required once you create a kit on the Font Awesome site. Next, you need to get a Font Awesome API token. Go to the account page to generate and copy your API Token. Go back to the Font Awesome settings in your WP dashboard and paste the API token into the API field. Next, choose the kit you just created. Now you are ready to start adding icons to your WordPress website. 3. Adjust the Font Awesome SettingsThere are a few settings that you can adjust in the Kit settings on the Font Awesome website. The first setting is whether or not you want to use the free or paid version of Font Awesome. If you have the paid version, you’ll want to click the pro version. The last setting you can adjust is whether you want the icons to be SVG or web fonts. In general, SVG is more powerful, but they don’t work well with pseudo-elements. Our suggestion would be to use SVG. All right! Everything is set up and ready to go. Let’s look at where you can find the icons to add to your site. 4. Find the Icons That You Want to UseNow it’s time to find the icons you want to add to your WordPress website. Font Awesome has a library of icons you can choose from on their website. As mentioned, there is a free and paid version of Font Awesome. If you want to use the free version, be sure only to find icons that are under the free filter. Open up the icons you want to use and a separate tab on your browser. We’re now ready to add them to your website. 5. Add the Icons to Your Pages and PostsOpen up a page or a post from the WP dashboard. Once you are on the page or post editor, add a shortcode block to where you would like your icon to appear. Then, in the shortcode block, you will paste the HTML code for the icon you want to add. To get this HTML code, click on the icon you want to add from the Font Awesome library. A pop-up menu will appear. Click on the HTML code and it will automatically be copied to your clipboard. Then paste the code back into the shortcode block on the page or post editor. That’s it! Your icon is now on the page or post. Add as many icons as you would like to your pages and posts. Start Using Font Awesome Today!Icons are necessary for all websites. They add interest to your web pages and help those pages convert. Font Awesome for WordPress is a great tool for adding high-quality icons to your website. In this article, we covered two ways you can set up Font Awesome on your website. We then went over how to add the actual icons to your WordPress website. Within minutes, you can have icons up on your WordPress site. If you need even more premium icons for your WordPress site, be sure to check out Envato Elements! There are tons of icons and other assets that are valuable to any WordPress site owner. via Pixel Lyft https://ift.tt/oz5VXqM Looking to move your WordPress posts to another WordPress site or even a new platform? Not sure how to export specific posts on your WordPress site? WordPress’s export posts feature allows you to quickly export posts of your choice. If you need to export your WordPress posts, don’t panic. WordPress makes it easy to export not only all of your posts but also all your pages and media. The exported posts are condensed into an XML file. This XML file can be imported into another WordPress website or CMS platform. Even if you aren’t moving websites, it’s advised to export your WordPress posts as a backup. Of course, you should have a WordPress backup plugin running as well. Before we cover how to export your WordPress Posts, let’s discuss an incredible offer for WordPress site owners. Envato Elements: Unlimited DownloadsEnvato Elements is a service that provides an unlimited download subscription, meaning that you are free to download as many items as you like from millions of digital assets. This includes premium WordPress themes and plugins, icons, stock photography, royalty-free audio, and stock video. The subscription is covered by simple commercial licensing that gives you the rights to use the item in a broad variety of projects, including those of a commercial nature. The licensing is future-proof, meaning even if you unsubscribe and can’t download items from Envato Elements anymore, any existing registered uses are still covered. Subscribe today and start creating, or learn more about why Envato Elements is great for WordPress users. How to Export Your WordPress PostsTo export your WordPress posts, head to WordPress Dashboard > Tools > Export. The export menu will appear where you will have the following options for exporting: All content, Posts, Pages, and Media. An XML file will be available to save to your computer when exporting all your content. Your posts are formatted into WordPress extended RSS or WXR. This will contain all your pages, posts, comments, custom fields, categories, and tags. To export your posts, click the Posts bubble. A menu will appear where you can narrow down the posts you want to export. You can export your posts by categories, authors, start date, end date, and status. These various exporting filters make it easy to export the exact posts you want. Once you have adjusted the filters to include the posts you want to export, click the Download Export File button. An XML file will then be downloaded to your computer. If you have a lot of posts, it may take some time to generate the XML file, so please be patient. Also, if you add numerous posts each week, it can be best to generate an XML file for these posts every few months for backup. Need to import content into your WordPress site? Check out the article below on all of the options for importing content into your WordPress site. Discover Top WordPress PluginsWordPress plugins give your site the extra functionality that is needed to create a complete website. Take a look at the articles below for ideas on WordPress plugins that can work for your website. Export Your WordPress Posts Now!WordPress makes it easy to export your posts, pages, and media. If you need to switch WordPress sites or platforms, you can easily do so with the native WordPress export function. This export function allows you to filter the exact posts you want to export. You can then download a basic XML file with all of your posts and their content. Don’t miss out on a great opportunity for WordPress site owners. Envato Elements has a low monthly subscription that gives you access to not only WordPress plugins and themes but also tons of other creative assets. via Pixel Lyft https://ift.tt/K651crv Black Friday, Cyber Monday, and all the holiday sales that go on around the end of the year are approaching soon! Here’s what you can do now to get your website ready for the influx of traffic and activity during the holiday shopping season. The National Retail Federation noted a major increase year-over-year in holiday sales for 2021. Overall sales were up 14.1%, bringing the total revenue generated during this period to $886.7 billion. eCommerce and other non-store sales made up $218.9 billion of that total. The important question to ask yourself is if your store is prepared to get in front of shoppers looking to capitalize on these sales days? Preparing for Black Friday and Cyber Week requires more than just adding a pop-up or notification bar to announce your promotions. Below we’re going to take a look at what eCommerce brands should do to prepare their websites for the sales event and put shoppers in the holiday (and spending) spirit in the process. When is Black Friday? When is Cyber Monday? And When is Cyber Week?!Black Friday in 2022 is on November 25. It immediately follows Thanksgiving in the United States and has become an internationally recognized day of sales and discounts (and chaos!) for retail stores. Cyber Monday in 2022 falls on Monday, November 28. It always follows Black Friday, so takes place between November 26 and December 2, depending on the year. Cyber Monday was devised to encourage people to shop online—and nowadays eCommerce retailers have stretched it out further, giving shoppers a “Cyber Week” of discounts and sales. Preparing Your Website for Black Friday and Cyber Week Sales EventsFrom your ecommerce website to the channels you use to promote it, here are 8 things you can do to ensure your store is ready for the November and December sales: 1.Come Up With a StrategyHaving a strategy laid out ahead of time will be useful. This way, you’ll know what needs to get updated and when. For instance, you might decide to make different graphics for your site or marketing channels depending on when they’ll run and for what purpose. You could create a hero banner announcing your Black Friday sale and run that (and maybe a few different versions of it) up until a few days beforehand. Then, you’d need a different hero banner for the actual sales days. You might want another for post-sale reminders to ensure that shoppers get all their purchases before the holidays. In addition to updating your graphics, also consider if your home page needs to be reorganized or if other kinds of products need to be prioritized. For example, instead of “Top Sellers” getting its own section, “Best Gifts” would replace it throughout the month of November. The more you can plot out ahead of time, the easier it will be to implement all of it when the time comes. 2. Design Promotional Graphics for Your Marketing ChannelsEven if you’re running a huge Black Friday or Cyber Monday blowout sale, you don’t need to reskin your entire site with a new theme. Instead what you should do is customize the most critical areas (i.e. the ones with the highest traffic and engagement). For instance:
By the way, you don’t need to run a sale in order to participate in the Black Friday or Cyber Week festivities. Summersalt, for instance, ran this updated hero image on its website in 2021 in the lead-up to Thanksgiving: While there are no active promotions going on, the festive imagery (and the promise of a free tote in the notification bar) could be enough to inspire shoppers to buy something anyway. When creating your promotional graphics, don’t forget about your promotional channels like social media, email, as well as your blog. They’re going to need updated graphics, too. Better yet, if you can create matching graphics for all your channels and to run throughout the holidays, it’ll create a better experience for your shoppers. If you need some help coming up with promotional graphics or you’re running short on time, check out Envato Elements. You’ll find a whole host of templates for Black Friday, Cyber Monday, and other festive designs that can be used for your marketing channels. 3. Create a Landing Page for Your SaleThe search engines (especially Google) can help you with some of the promotional legwork during Black Friday and Cyber Week. You’ll still have to go out there and actively promote your sales. However, getting the search engines to organically direct shoppers to your store and products will be a huge help. You shouldn’t rely on your home page for this though. When you update the hero imagery and other promotional banners on your home page, this will help a little bit with SEO, but not much. As far as your home page’s metadata goes, it’s not a good idea to mess around with it. Web pages that send a consistent signal to search engines with regards to what they’re about will perform better in search results. Changing up your SEO data even temporarily could disrupt that signal. What you can do, however, is create a separate landing page. For example, Cabela’s has one that stays up all year long. Here’s what the page looks like while the sales are active: Here’s what the page looks like a couple months before Black Friday: There are no specific promotions or featured deals mentioned until the sale is active. However, this permanent landing page is useful for building up Cabela’s link juice when it comes to “Black Friday” searches. 4. Reconfigure the NavigationThe navigation is an important website component for shoppers. While its primary purpose is to help them move around the site with ease, it can also tell them about special events going on within the website. Take Soma, for example. This is what the website navigation currently looks like: The navigation includes top-level categories for:
Compare that to the navigation that appeared at the top of the site during last year’s Black Friday sale: There are two key differences. The first is that a “Gifts” link has replaced “Ultimate Bra Menu”. It also has a small animated GIF depicting two red gift boxes beside it. In addition, the “Sale” link is now in red. You don’t need to make major changes to your navigation structure in order for it to be effective. However, making sure that relevant categories are visible and have a way of standing out amongst the rest will help shoppers quickly find relevant Black Friday sales links. 5. Bulk Edit Your InventoryEven if you’re running a smaller store, updating product sale pricing can be tedious and time-consuming. Rather than set time aside to tackle them one-by-one, find a bulk update tool ahead of time that will enable you to quickly discount your inventory on the days of your sale. The WooCommerce Advanced Bulk Edit plugin, for instance, is my favorite way to do this in WordPress. This tool allows you to search through your entire inventory based on a wide range of factors. For instance:
You use the filters to pull up a narrower list of products. Then, the advanced bulk edit tool will allow you to instantly apply a discount to all of the selected products: This will be helpful if you plan on applying different discount percentages based on the product category. You can also program specific sales dates so that the discount will apply only when you want it to. This tool is also going to be useful in December and January if you find that you have an excess of stock for certain products. Just return to this tool to set deep discounts for the inventory that you want to offload and run a big end-of-year blowout sale. 6. Enhance Product SearchThe navigation is a helpful search component on ecommerce websites. However, the larger your inventory is, the more work your shoppers will have to do to navigate through relevant categories and apply filters to narrow down which products they see. For many shoppers, the search bar is the best way to locate exactly what they’re looking for and quickly. If your search bar isn’t currently set up to provide instant, relevant results, then it’s time to start looking for a search plugin that will give it that power. Ajax Search Pro is a great option as it gives you total control over how your search bar works and how it displays matching results. In addition, you can set up different search functions for different areas of your store — like one for the header and one for the product search page: What’s more, you’ll have access to search analytics. These insights can be useful for improving how your search feature works. You can also use them to adjust how you promote your sale and which products or categories you prioritize on the home page or in search results. 7. Add Relevant Notices to Your SiteShopping around the holidays can be stressful. The last thing you want is for your ecommerce site to add to that stress. One way to help shoppers is by providing inventory notices on your product pages (and even on the product search page). For instance, this is what customers see on one of J.Crew’s product pages: There are three color variants of this product. The red and green shorts are still available while the blue is not, as indicated by the cross-through mark over the variant swatch. In addition, when a customer selects the green shorts and hovers over or selects the large size, a notice appears that says “Only a Few Left”. This is a good way to encourage shoppers to buy what they need while it’s still available. If no warning is provided, they might think it’s safe to stow the product away in their favorites or in the cart and then return to it later. Another way to use notices during the November sales days — as well as after them — is to provide shipping-related information. With higher-than-normal purchases, that means that ecommerce companies and their supply chain partners have to deal with higher volumes of shipments, which can slow things down. To ensure that your shoppers’ experiences remain positive after the sale, provide them with recommendations on when to complete their orders. This banner, for instance, appeared on the Buckle website in November of last year: It lets customers know that their orders should be placed by Noon CST on December 14 if they want to receive them by the 25th. This same type of notice could also be placed in a sticky notification bar as well as on the shopping cart or checkout page. 8. Optimize the Checkout ExperienceIn order to maximize how many visitors end up becoming paying customers at the end of their shopping experience on Black Friday, don’t forget about the final step in their journey. Your checkout flow should feel fast, uncomplicated, and safe. Take a look at the one on the Bath & Body Works website for an example of what works. It all starts with a fully detailed shopping cart page: Not only do customers see a list of their items, but they’re provided with customization controls like:
With all of these controls here, there’s less of a chance they’ll have to back out of the checkout process to make changes. The checkout process is just as thoughtful and well put together. At the top of the checkout page, customers see three steps they need to complete. The progress bar is then followed by a sign-in accordion. Existing customers can use this tool to bypass a lot of the steps in the checkout flow: Below the shipping address form, Bath & Body Works provides another shortcut for customers. A checkbox that says “Use Address for Billing” makes it so that customers only have to fill out one form: The rest of the checkout process is just as streamlined. Transparency is maintained throughout as well. Customers know when they’ll receive their purchases and never lose sight of what they’re buying. ConclusionNRF is predicting another big bump in shopping around the holidays for 2022. They’re anticipating that retail sales will reach $4.86 trillion, with $1.17 to $1.19 trillion of it coming from eCommerce alone. The influx of traffic and sales activity can be a great opportunity for eCommerce companies during this time of year, but only if their website is ready for it. This applies to everyone — those of you planning to run big promotions over the Black Friday weekend as well as those who will dabble just a little bit in the festivities. via Pixel Lyft https://ift.tt/m2HgP1w Duration: 1 hour 7 mins | Lessons: 10 In this epic free Webflow tutorial, you’ll learn everything you need to know to get started with Webflow. Throughout these lessons, you’ll go from understanding the basics to launching your first website. In just over an hour’s time, you’ll learn the fundamentals of this tool, from its interface to working with classes to even creating responsive website designs. This course doesn’t waste any time so you’re looking for your “in” to Webflow, here’s your chance. Introduction to Webflow1. Welcome to this Webflow Tutorial!In this introductory lesson, you’ll learn all about what what Webflow is and a bit about how it generally works. Webflow is a content management system that has an amazing visual designer. And the best part? It’s code-free. So anyone can use it to create a wide-range of website types from blogs to online stores. The rest of the lessons in the course are designed take total beginners on a journey from their first introduction to Webflow through publishing their first website. However, the course isn’t all-encompassing and instead focuses on just the essentials to help you get started, as Webflow can be a tad complex. The course is split into three key areas:
2. How Websites are BuiltThe first order of business here is to learn how websites are built in general. You need this foundational information in order to understand how Webflow works. The focus here is on the “holy trinity” of frontend web development: 3. The Box ModelContinuing the ideas from Lesson 2, this lesson focuses on the “box model” which discusses how every element on a web page sits in a box and how understanding this concept can help you better conceptualize how web designer works in general — as well as prep you for using Webflow. Webflow’s Designer4. The User InterfaceWebflow is a CMS, which stands for content management system. So, it is very literally, a system for managing content. And while there are many CMSs out there, Webflow is one of the best because of the Designer. The Designer provides a way to visually manipulate the HTML and CSS of a webpage. But before you can jump right into designing your first web masterpiece, you need to get familiar with Webflow’s user interface. The discussion in this lesson revolves around four key sections:
5. Adding and Editing ElementsBuilding layouts with Webflow is super simple because there are tons of elements you can drag and drop into the Canvas. This the primary focus of this lesson will be adding and editing elements within Webflow. 6. Working with Classes and InheritanceIn CSS, a class represents an identifier. It’s like a name, and based on that name you can style multiple elements the exact same way. In this lesson, you’ll learn how to create a class, how to style elements based on their tag, and get an overview of inheritance. In Webflow, Classes are displayed directly beneath the Selector in the Inspector: 7. Reusing Elements With SymbolsIn Webflow, symbols allow you to reuse content. If you make a change to a symbol then all the other instances will be automatically updated. And you can even create an override for a specific instance where only that one is affected. Here, you’ll get a thorough rundown of the following:
8. Creating Responsive WebsitesCreating responsive websites nowadays is simply a must because they need to display properly on whatever devices people are using. Thankfully, this is really easy to do in Webflow. The focus of this lesson will be on how to switch between different breakpoints, how to add new breakpoints, and also how the changes you make cascade between different breakpoints. Getting Your Website Live9. Publishing with WebflowWatch video lesson [1:00:12] ↗ Every website you build with Webflow can be published with Webflow as well. And that’s precisely what this lesson covers: the different ways to publish your website, how to export code and assets to upload to a server manually, as well as what you can expect to pay for Webflow. You can get started with Webflow for free and even build your first website without paying a dime. However, you plan on building more than a website or two, a paid plan will be your best bet here. Paid plans start at $19 per month when paid annually. 10. ConclusionWatch video lesson [1:04:38] ↗ All in all, Webflow is pretty awesome. Even those who are adverse to visual builders will likely find this one to be great because it’s easy to use and actually generates legible, clean code. And since it embeds the principles of using a HTML and CSS within a visual tool, you get a better understanding of how everything goes together code-wise — even if you’re not manually coding the site yourself. Learn More About Webflow and Web Design with These Helpful TutorialsBelow you’ll find a bunch of tutorials to help you with Webflow and web design in general. You’ll also see another free course of ours on Squarespace—one of the other top players in the website builder space. via Pixel Lyft https://ift.tt/xGLT2w7 Thanks to corporate email templates, you can present content in attractive, eye-catching ways that speaks to them directly and lead them to action. Email Templates With Unlimited SubscriptionMake Envato Elements your first stop for corporate email templates. Having unlimited digital assets with premium features at your disposal lets you focus on great design. For a single monthly subscription, Envato Elements gives you access to millions of creative assets that you can download without any limitations. It offers one simple commercial license for all content. And if you just want to buy an individual corporate email template, ThemeForest offers a great choice. Best Corporate Email TemplatesNow let’s look at some of the top corporate email templates for businesses in 2022. Hopefully, these will make a great choice for your upcoming campaigns. 1. Koble | Mailchimp Business Email Template Sets
Koble is a popular email template with over 10,000 sales on ThemeForest. It has beautiful designs which are conversion focused and look good on all devices. It comes loaded with 8 notification layouts, over 200 modules, and templates including business templates that you can customize in a code editor. For even faster loading, the templates images use advanced lossy compression which reduces PNG and JPG files size by 70%. It is compatible with Mailster, StampReady. It supports common email like Gmail, Outlook, and Yahoo on both iOS and Android. Download includes well commented HTML files and Figma files. 2. Kinetic | Interactive Email TemplatesWhen it comes to engaging your subscribers, Kinetic interactive email template stands head and shoulders above other templates. This awesome template features liquid layout, interactive carousel, progressive disclosure expandable modules, video email, and a dynamic editor to customize templates for maximum user satisfaction. It works with both legacy and modern email clients including on Android or iOS. It even supports background images for all versions of Outlook. It supports iContact, Campaign monitor, Mailchimp, Mailster, Active campaign, and Freshmail.. 3. Market | Email Template for Mailster
If you use Mailster for your corporate email campaigns, then this industrial style email template with bold text has all the goods needed to deliver stunning outreach to inboxes. It features a great choice of layout options, 25 flexible and responsive ready-to-use modules, and it supports all major email clients. 4. Corporate | Responsive Email and Newsletter TemplatesThe Corporate email and newsletter template stands out for its simplicity. With 17 responsive templates, it works seamlessly on all major browsers and supports popular email clients. It is compatible with Campaign Monitor, StampReady, MailChimp, and MyMail for WordPress. 5. Webwall | Business Responsive Email Template
With this robust business email template you can create emails of up to four columns that can be read perfectly on any device. That’s not all, with over 40 templates to choose from and over 400 modules, you have to ability to build emails that grab the eye of subscribers. The template works on all major browsers, email clients, and webmail services. 6. Bright | Multipurpose Responsive Email Template
Bright comes with one multipurpose email template and fully layered PSD file. It also includes an online builder. All templates are StampReady, MailChimp and Campaign Monitor compatible. It supports all major browsers and email clients. 7. Hixel | Responsive Email TemplateHixel offers amazing, customizable templates, layouts, modules, and an online drag-and-drop builder so you can create beautiful email experiences for your subscribers. It offers notification emails, call to action styles, header styles, and inline CSS. It works with email marketing platforms like Mailster, MailChimp, and Campaign Monitor. Download will include layered PSD files, Vector files, HTML and without tags. 8. Business | Multipurpose Responsive Email Template
Business multipurpose templates make it a breeze to create emails that get conversions. Thanks to the drag-and-drop modules, unlimited colors, and dynamic text editor, inline CSS and optimized code. The modules offer options for header section, video section, service section, call-to-action section, blog, and footer. The template is supports all major email clients and is compatible with over 30 email service providers including StampReady, MailChimp, and Campaign Monitor. 9. Office | Multipurpose Responsive Email Template
This responsive template is suitable for all kinds of corporate, office, blog, creative or general purposes. It contains one email template and PSD file. It also comes with three demos to get you started right away. The zip file contains HTML files, image assets and Help documentation. All templates are compatible with StampReady, MailChimp and Campaign. They look good on all browsers and email clients. 10. Marquez | Multipurpose Responsive Email
Built on the Pine Email Frame work, Marquez multipurpose email template captivates your subscribers with a 12 column grid, mobile columns with careful widths and offsets. It also offers interactive components like a hamburger menu and mobile accordion. In addition to being fully responsive even in Gmail mobile app, it works on over 30 email clients. It is also compatible with Mailster, MailChimp, StampReady, and Campaign Monitor. You get 5 PSD files, HTML version, and ESP-integrate versions. 11. Udos | Multipurpose Responsive E-Newsletter and Email Templates
Udos offers professional templates take your content directly to subscribers. You have a choice of 7 different layout options and 4 Thank You email templates that can be used for order summary, view order status, Thank you mail, etc. The templates are ready to use for Campaign Monitor and Mailchimp. Your download will include HTML file, PSD file, and documentation. Tips for Designing Your EmailsHow you design your email matters. There are two things you want to achieve when customizing your template:
For this reason, keep it super simple. First, decide on a color scheme that best represents your brand. Think matching or complementary colors. Don’t overload your email template with too many colors, fonts, font sizes, images, and so on. They create clutter and overwhelm the customer. Remember colors evoke emotions and determine how customers will react toward to your email. Some colors make your them warm to your content and engage with it. Other colors can have the opposite effect. Also make sure your fonts and font colors are readable. Use reasonable font sizes and steer clear of pale text. Finally, your customers and subscribers have busy lives. Aim for precision. Make it easy for them to scan through your emails and still get the message. Include images and videos to break up the text. Don’t forget to make use of negative space. More Email Template Resources on Envato Tuts+On Envato Tuts+ you’ll find articles and tutorials that will help you find the right email templates for you. We selected a few to get you started: Over to You!You’ve just explored some of my favorite corporate email templates. If you still want to look some more and find the perfect one for you, head over to ThemeForest and choose from hundreds of examples! via Pixel Lyft https://ift.tt/Q6zxMgR If you’re not familiar with Envato Elements, it’s a subscription-based service that gives you access to thousands of creative assets, including graphics, fonts, templates, and more. And the best part is for one monthly fee, you can access unlimited downloads to use however you wish. Before diving into our list though, let’s talk briefly about why using Halloween-themed graphics can be a great option for your business. Why Use Spooky Graphics in Your Designs?Halloween is a great time to show off your playful side and have some fun with your branding. Using Halloween-themed graphics can help you create fun, spooky designs that will grab attention and stand out from the rest. In addition, using Halloween graphics can also help you tap into the spirit of the season and create a sense of excitement and anticipation for your products or services. So without further delay, let’s dive into our list. We’ve broken it up into a couple of different sections to make browsing for what you’re looking for easier. 14 Spooky Graphics for Adding Fun Design Touches to Your WebsiteIf you want to add some fun, spooky touches to your website or social media this Halloween — or even if you want to create a festive party invitation — consider using some of these great graphics. 1. Halloween Party – Elements and Textures
This fun graphic pack includes a variety of Halloween-themed elements and textures that you can use to create spooky designs. The pack includes bats, skulls, spiders, and more in a cutesy style. 2. Halloween Mood – Graphic Illustrations
This set of Halloween-themed graphic illustrations is perfect for adding a festive touch to your website or social media. The pack includes illustrations of a cat with pumpkins in an unusual and rather distinctive style. 3. Halloween Vector Illustration
This Halloween vector illustration is perfect for adding a touch of whimsy to your designs. The illustration features a vampire in front of a full moon. Other interesting touches include an eyeball with bat wings, torches, tombstones, and webs. 4. Halloween Flat Designed Banners
These Halloween flat designed banners can be used to let your site visitors know it is definitely spooky season. You can use these designs however you’d like and they feature iconic elements like a bubbling cauldron, pumpkins, and black cats. 5. Halloween Pumpkin Illustration Pack
This Halloween pumpkin illustration pack is perfect for adding a touch of fun and spookiness to your designs. The pack includes six different illustrations of jack o’ lanterns with a variety of facial expressions. 6. Funny Children Wearing Halloween Costumes
And here we have an illustration that features kids wearing Halloween costumes, illustrated in a funny style. It’s perfect for adding a touch of humor to your designs. 7. HaWe: Halloween Vector Toolkit
This fun Halloween vector toolkit includes everything you need to create Halloween designs or anything that’s a bit macabre yet cute. The pack includes a variety of elements like bats, spiders, and pumpkins, as well as a variety of unique monster designs. You’ll even find graphics of a severed foot and a zombie cactus! 8. Halloween Banners Set – Vector Illustration
These Halloween banners are perfect for adding a touch of spookiness to your websites or social media. The pack includes two different banner designs, each featuring the text, “Happy Halloween Party” on them. 9. Halloween Characters PNG Clipart
This fun Halloween clipart pack includes a variety of PNG images that you can use to add personality to your website. The pack includes characters like ghosts, vampires, and zombies, as well as skeletons, werewolves, and the grim reaper. 10. Halloween Cat Character Illustration
It’s hard to deny that this Halloween cat character illustration is perfect for adding a touch of festivity to your next project. And not to mention, it’s just super cute. The illustration features a black cat with large eyes and a toothy grin holding a candy bucket and wearing a witch costume — hat and all. 11. Halloween Silhouettes – Clipart
This clipart pack includes a variety of Halloween-themed silhouettes that you can use to create spooky designs. The pack includes bats, ghosts, pumpkins, and more, all ready to be used in your more understated designs. 12. 14+ Halloween Clipart Drawing Art Pack
This fun clipart pack includes a variety of Halloween-themed drawings that you can use to create a variety of design projects from website banners to icons to social media images. The pack includes witch hats, potions, ghosts, plants, cauldrons, and a variety of other witchy drawings you can use in your designs. 13. Halloween Illustration
This fun Halloween vector clipart is perfect for adding a touch of spookiness to your website. It would serve perfectly as a website background or header image The illustration features a haunted house in shades in purple with orange-lit windows as well as ghosts, bats, a looming moon, and tombstones. 14. Halloween Clipart Bundle
This clipart bundle includes a variety of Halloween-themed graphics that you can use to create spooky designs. The pack includes candelabras, candies, cauldrons, bats, potions, and many other designs for celebrating the season. 5 Halloween Icon Sets to Use This FallIf you’re looking for some great icons to use in your Halloween-themed designs, the following icon sets are sure to give your website a spooky touch. 1. 6 Flat-Style Halloween Icons
These fun, flat-style Halloween icons add a bit of festivity to your designs without going overboard. You’ll find icons for ghosts, witches, bats, pumpkins, and more, each featuring a flat cartoon-style drawing surrounding by a flat background color. 2. 12 Cute Halloween Icons Set
This cute Halloween icon set is a sure standout. You’ll find icons for ghosts, bats, pumpkins, Pennywise, The Joker, and even a skull with a worm popping out of it in this set of 12 icons. 3. 35 Witches and Halloween Icons
This fun icon set includes a variety of icons related to witches and Halloween. You’ll find icons for black cats, broomsticks, hats, cauldrons, and black cats, all ready to intrigue your site visitors as they browse your content. 4. 30 Vector Halloween Icons
This fun icon set includes 30 Halloween-themed vector icons that you can use to create Halloween-inspired designs. The pack includes icons for pumpkins, bats, ghosts, witch’s hats, and voodoo dolls. 5. Halloween Icon Pack – 140 Icons
Lastly, this icon pack includes a whopping 140 Halloween-themed icons you can put to work in your Halloween-related content immediately. You’ll find icons for ghosts, bats, and pumpkins alongside slightly less conventional options like a crystal ball, a spell book, and a coffin. And some websites might be able to use these year round, depending on the subject matter. Adding Spooky Graphics and Icons to Your Site Makes Halloween More FunSome resist adding seasonal touches to their websites but we say, why not? It’s a great way to show off your fun side, engage with customers, and get into the spirit of the holiday. We hope you’ve enjoyed browsing through our selection of spooky graphics and icons. If you need more Halloween-themed graphics and resources, be sure to check out Envato Elements. They have a great selection of Halloween-themed graphics and icons that you can use in your projects. From fonts and illustrations to templates and more, you can find everything you need to add some spookiness to your designs this year. So why not try using some Halloween graphics and icons in your next project? Your visitors are bound to love it. via Pixel Lyft https://ift.tt/dDCewqp In this article, we’ll cover some WordPress theme suggestions as well as ways to add temporary design flourishes and Halloween designs into your email marketing, banners, icons, fonts, and more. So whether you’re looking to create a completely new look or just want to add a few touches of Halloween flair, we’ve got you covered! 5 Halloween WordPress Themes to Consider for a Quick Spooky MakeoverLet’s start with some WordPress themes that are perfect for creating a spooky website makeover. 1. Fang – Halloween Party Elementor Template Kit
If you’re looking for a way to make a spooky statement without being too scary, Fang is a great option. This Halloween party Elementor template kit includes everything you need to create a festive website, including templates for an event page, RSVP form, and more. Plus, it comes with a range of Halloween-themed elements like pumpkins, witches, and all manner of kids in costumes. 2. Exit Game – WordPress Theme
Now if you are looking for something on the scary side, Exit Game is a WordPress theme that will give your website visitors chills. It’s perfect for creating a scare-themed website or blog. The overall aesthetic is dark and moody, perfect for setting the tone for spooky season. 3. Cvio – CV/Resume WordPress Theme
Cvio is technically a CV and resume WordPress theme, but it could easily be repurposed for a Halloween website. The overall design is atmospheric and creepy, with just the right amount of detail to set the scene. 4. Ozod – Dark Digital Agency Elementor Template Kit
Here’s another theme that is for general use but its overall color scheme and mood is perfectly suitable for a Halloween affair. The Ozod – Dark Digital Agency Elementor Template Kit comes with everything you need to create a professional looking website that still has some dark undertones. 5. Vibrant Digital Agency WordPress Theme
Lastly, there’s Vibrant, which is a digital agency WordPress theme that maintains a dark edge while using bright pops of color (namely orange) to make a statement. If you’re looking for something a bit understated that could be dressed up or down to suit your needs, this theme’s a good option. How to Make Temporary Design Changes to Your WordPress Site for HalloweenIn addition to finding a new WordPress theme, you can also make some temporary design changes to your existing site. This is a great option if you don’t want to commit to a completely new look or if you want to try out a few different ideas. To do this, simply create a child theme and then add in the Halloween-themed CSS. This way, when Halloween is over, you can simply delete the child theme and your site will go back to its original state. Here are a few tutorials to help you get started: Add Some Halloween Flair to Your Email MarketingHalloween is the perfect time to get creative with your email marketing. You can add Halloween-themed images, banner ads, and even change up the subject lines of your emails. For instance, you can:
Again, the sky’s the limit when it comes to getting creative with your email marketing for Halloween. So have fun and see what you can come up with! Here are a few Halloween-themed email templates you can start using right away: 1. Responsive Email Templates for eCommerce Websites
If you’re looking for a way to make your email marketing more Halloween-themed without going overboard, these responsive email templates are a great option. Just add some spooky imagery and you’ll be good to go. 2. Holiday – Multipurpose Responsive Email Template
This email template is perfect for creating Halloween-themed newsletters, sales emails, and more. It’s fully responsive and easy to customize with a Halloween-themed color scheme. 3. Olive – Fashion eCommerce Email Newsletter
This email template is designed for fashion retailers but could easily be repurposed for Halloween. It comes with a clean and modern design that features large color blocks between items. Just customize these blocks to spooky colors and you’ll set the mood with minimal effort. Add Halloween Icons to Your Website or BlogAnother easy way to add some Halloween flair to your site is to find and install a Halloween icon pack. This is a great option if you want to avoid adding any code to your site. Once you’ve found and installed a free Halloween icon pack, you can then use them on your website or blog by adding them to your sidebar, social media icons, post titles, and more. Here are a few Halloween icon packs to check out: 1. Halloween Icons – 64 Elements
This icon pack includes 64 different Halloween-themed icons that feature an incredibly bold and graphical design. They can be used on websites, blogs, and even in email marketing. The icons are available in PNG, SVG, EPS, and PSD format. 2. 21 Halloween Icons
This icon pack includes 21 different Halloween-themed icons in PNG and SVG formats and allow you to engage in the spooky fun without getting too creepy. 3. 20 Halloween Icons Set
And then we have this icon pack which includes 20 Halloween-themed icons in PNG, SVG, EPS, and AI formats. Choose from colorful icons or black outlines — whatever suits your spooky needs best. 4. 50 Round Halloween Icons
With this set of 50 icons, you can inject a bit of Halloween whimsy into your site’s design. Each round icon features a themed illustration some of which include a voodoo doll, ghosts, pumpkins, witches, and many more. 5. Halloween Party Icons
Bubbling cauldrons, runaway mummies, flying witches. What do these three things have in common? Well, you can find these designs and several more in this pack of Halloween party icons. Use Halloween Fonts on Your Website or BlogIf you want to get really creative with your website’s design, then consider using some Halloween-themed fonts. This is a great way to add an extra touch of spookiness to your site and draw site visitors in. A few places to consider using these fonts include:
Where you decide to use these fonts is up to you. Just be sure to not go overboard as too many different fonts can be overwhelming and make your site look cluttered. Here are a few Halloween fonts you can use on your website this year: 1. Gloomy Halloween
If you’re looking for something Halloween-y that’s not too scary, the Gloomy Halloween font is a good choice. It definitely features the shaky lines you’d expect from an eerie font but the overall design is on the cutesy side. 2. Pumpqeen- Halloween Hand-Lettered Quirky Font
This fun and quirky font is perfect for adding a touch of spookiness to your website’s design. The font includes upper and lowercase letters, numbers, and punctuation marks. 3. Pumpkin Web – Halloween Font
This font is perfect for creating website headers, logos, and other text that you want to really stand out. It features a handwritten look along with fun spider web accents adorning each letter. 4. Magic House – Haunted Halloween Typeface
Now here’s a great font option for those looking to add a bit of whimsy to their site’s design. It features elegant ligatures and delightful curves that capture attention and conjure thoughts of magical spells and haunted houses. 5. Angry Shadow – Halloween Display Font
If something bold and graphical is what you’re after, the Angry Shadow font is a surefire choice. This font is perfect for creating headlines, website headers, and other text that you want to really stand out and is highly reminiscent of 1950 horror film title graphics. Incorporate Halloween-Themed Images or Videos Into Your Website DesignAnother easy way to add some Halloween whimsy to your site is by incorporating Halloween images into the design. This can be as simple as adding a few images to your sidebar or header or going all out and adding them throughout your entire site. Here are a few images and videos you could start using immediately to ramp up the spooky vibes: 1. Halloween Cupcakes
This image of cute Halloween cupcakes is perfect for adding a touch of sweetness to your site’s design. 2. Pumpkin Harvest Background
If you’re looking for something a bit darker, this image of a pumpkin harvest is perfect. It would make an excellent background image for your website. 3. Surreal Dark Forest
Now if creepy is your thing, then this image of a dark forest is perfect. Use it as a background image, for headers, or even in your blog posts. 4. Jack o’ Lantern Mug
This image just screams cozy autumn mornings, doesn’t it? Add it to your site’s design to give visitors a warm and inviting feeling. 5. Pumpkins and Candles
And finally, if you want something classic, this image of pumpkins and candles is a great choice. It would make an excellent background image or could be used in your site’s header or even in the sidebar to give a sense that spooky season is upon us. How far you go with this holiday-specific customization is up to you but sometimes really leaning into it can leave a lasting, positive impression. Just so long as your “decorating” doesn’t interfere with the standard browsing experience. Are You Ready to Make Your Website Spooky?Now that you have some ideas for how to give your website a spooky makeover, it’s time to get started. These tips are easy to implement and can be done in minutes so there’s no reason not to get into the Halloween spirit this year. Have fun with it and go all out! via Pixel Lyft https://ift.tt/hFtke0X How do you design fresh websites and blogs without coding knowledge? You don’t need to hire a web designer. This is where Blog Designer Pro comes in! Not only will this plugin save you money, but it will also save you on design and development time. You simply have to choose a template and customize it to reflect your brand aesthetic on whatever device or browser it displays. FeaturesBlog Designer Pro has great features that will help you design great websites. Let’s look at some: Unique Blog TemplatesThe plugin comes with over 60 blog templates to choose from. They are even grouped according to categories to make selection easy: grid layout, masonry layout, box view layout, timeline layout, story layout, full width layout, or newspaper layout. The tabbed blog template is one of my favorites. Consider it if you run a blog with lots of posts and categories. CustomizationThe plugin comes with hundreds of possibilities for designing impactful websites and blogs. They allow you to create eye-catching main blog pages, categories, single posts, author pages, archive pages, and more. It is loaded with tools that allow you to customize layouts, colors, backgrounds, fonts, and more thanks to the easy-to-use settings panel. It even comes with Live Preview to see how the website will look before it goes live. Sample ArticlesWondering how to write articles? Sample articles will inspire your ideas. These real articles also act as placeholders that you will replace with your own content. The multi-language feature makes the plugin translation-ready and your content can be available in languages. WidgetsNavigating a blog or website with ease keeps your visitors coming back. Scroll widget, recent post widget, most viewed widgets are included to help you build user-friendly websites and blogs. What’s even cooler, there are layouts that are RTL-ready. Social ShareWhat’s a blog without social share? You will find share buttons or different styles and you can customize them to make it easier and faster to share your blog posts on Facebook, Twitter, Pinterest, Instagram, and others, WooCommerce SupportThe plugin is WooCommerce compatible and you will find over 45 single product layouts for displaying products. Some of these include: WooCommerce grid, WooCommerce slider, WooCommerce magazine, WooCommerce Masonry, WooCommerce list, WooCommerce vertical timeline. Page BuildersBlog Designer Pro works with the following front- and back-end page builders: ConclusionBlog Designer Pro is feature-packed with tools that make it easy for you to design stunning blogs. Try the live demo today! via Pixel Lyft https://ift.tt/xmkyHrF |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
April 2023
Categories |