10+ Tips: How to Design High-Converting Landing Pages
Landing pages are a valuable marketing asset that can be used to promote your services, products, webinars, lead magnets, and more. They can help you grow your email list as well as increase sales, which is why it’s crucial that your landing page design follows best practices.A great landing page design will help you present the information about your offer in a logical manner, build trust with visitors, and ultimately lead to more conversions. To discover some great landing page themes, review this article:
15 Best WordPress Landing Page Themes - Made for Conversions
Brenda BarronIf you’ve been wondering how to design a high converting landing page, you’re in the right place. In today’s post, we’ll explain how you can design a landing page (even if you've got no design skills or coding knowledge) and share tips on what makes a high-converting landing page.How to Design a Great Landing PageDesigning high-converting landing pages isn't as difficult as it seems. Nowadays, thanks to numerous templates, anyone can design a beautiful landing page that converts. The main benefit of using a premade template is that you don’t have to learn how to code or hire a developer to design a landing page every time you want to promote an offer.You can find some great landing page designs on Envato Elements.Another benefit of using a template is that landing page templates are...
Figma Frame Tips
Frames allow you to combine layers together under a single parent. Unlike groups, frames in Figma have explicitly set dimensions (much like an HTML iframe). Here are some great tips and tricks for when you’re working with frames.Watch Tips
1. Nest Objects by Drawing Frames Around ThemUse the Frame tool (F) to draw a frame around a whole bunch of objects on your canvas; they’ll instantly become child objects of the frame, without you needing to manually drag and drop them into a new frame.
2. “Resize to Fit” Frames InstantlyOnce you have a frame around a group of objects you can hit the Resize to Fit button to make the frame wrap snugly around the whole group.
3. How to Scale Frames and Their ContentsBy default, if you resize a frame, its contents will be unaffected (but cropped). However if you want to scale the contents as well, grab the Scale Tool (K) and resize the frame; all the contents will resize uniformly along with it.
4. Use Constraints on Frame ContentsYou can use constraints to control how a child object behaves when its parent frame is resized. By default, if you resize a frame by dragging its bottom left corner handle, all the contents will remain positioned in the same place, relative to the top right corner. However, by selecting a child object and altering its values in the Constraints panel, you can make it cling to any edge or corner you wish.
Figma On Canvas Tips
Welcome to more Figma tips and tricks! This time we’ll be looking at five things to help you when you’re working directly on Figma’s canvas.Watch Tips
1. Navigate Nested LayersYou can navigate nested layers within a Figma document by holding down CTRL or CMD (depending on your platform) then right-clicking on the page. You’ll get a small context menu pop up with a list of all the objects nested under the item that you’ve clicked. Click on the object you want in order to select it. Easy!The context menu
2. Move the Selection Box During SelectionWhen you’re drawing out a selection box to try and grab a bunch of items, if you hold down SPACE you can actually move the selection area. This makes it much easier to be specific about what you select.Moving Figma’s selection area with the SPACE bar
3. Precision ZoomingYou can zoom in and out of a page in Figma much like you can with a lot of applications; hold down CTRL or CMD and hitting the + or - key, but you can add some precision to the process too. Go to and activate Main Menu > Preferences > Keyboard Zooms into Selection.Once that’s done, select an object, then hit CTRL or CMD and +, and you’ll zoom directly in to the item that’s selected.
4. Zoom Directly Into an ObjectAnother way to zoom directly into an object is to double-click on its icon in the layers panel.
5. “Nudge” Pan Around CanvasFigma allows you to do...
New Course: Essential JS Libraries for UI
Figma Layer Stacking Tips
In this episode of our series on Figma tips and tricks we’ll look at ways to speed up your layer stacking. Let’s dive in!Watch Tips
1. Move Layers Up and DownTo quickly move an object up or down the layers stack, hold down CMD or CTRL (depending on your platform) and hit one of the square bracket keys [ or ]. The left square bracket will move an object down the stack, and the right square bracket will shift it upwards.
2. Move Layers to Top or Bottom of StackThe previous keyboard shortcut, with the addition of holding a modifier key (ALT or SHIFT depending on your platform) will move an object to the top or bottom of the stack. So:
ALT + CMD + [ or ] on Mac OS
SHIFT + CTRL + [ or ] on Linux and Windows
3. Paste Object Directly Above a LayerIf you already know exactly where in your layer stack you want an object to appear, select the item that you want your new object to appear above (which you can do with either CMD or CTRL + click) then paste in your new object.Figma Learning ResourcesStay tuned for more tips, and to start using Figma like a pro take a look at our series of courses:
Introduction to Figma
Beyond the Basics: Figma
A Guide to Prototyping in Figma
Hat tip to Carmel DeAmicis and Valerie Veteto for their regular community tips roundups—go and check them out!
Landing Page vs. Website Homepage: When Do You Use Which?
If you’re like most business owners, you’ve probably spent a lot of time working on your website. You’ve created all the important pages, making sure your homepage has several calls-to-action that point visitors to your Work With Me or Contact page, and you've got a page on your site that talks about what you've got to offer.But, then you hear about landing pages and how they help convert visitors into customers and you start to wonder if you should've created a landing page instead.If you’ve been wondering what is the difference between a landing page and a homepage, you’ve come to the right place. In this post, we’ll explain what a landing page is and what a homepage is. We'll look at how they're different from each other, and explain when you should use a homepage and when you should use a landing page.Landing Page vs Homepage vs WebsiteIf you turn to the internet for answers, you'll inevitably run into comparisons and explanations that muddy the waters when it comes to landing pages, homepages, and websites. While it’s true that there are some similarities between those terms, there are also a number of differences between them. Let’s explain what each does.Landing Page DefinitionA landing page is a page that's focused on getting visitors to take action. It’s a page that's created with the sole purpose of getting traffic from several sources or, in other words, it’s the...
A Guide to Selecting Email Templates for eCommerce
One of the biggest challenges of eCommerce is driving
traffic to your website; the “simple” idea being to get people to browse your site and
convert their visits into sales. Email marketing can be an effective method for
After all, if someone has made the effort to sign up for
your mailing list, they must have some interest in your offerings. From there,
it’s a matter of providing a compelling reason to click through to your
website. Showcasing sales, special offers and new products are all great ways
to entice customers.
This is where the right email template can make all the
difference. It’s important that your template looks good, is easy to read and
mobile-friendly. Above all, you’ll want to use a template that helps to get
your message across in an appealing manner.
With that in mind, let’s explore some features to look for
when choosing an email template for your store. Along the way, we’ll show you
some fantastic selections that are available from Envato Market.Top selling marketing email templates on Envato Market
1. Make Sure It’s Easy to Customize
A unique business requires an equally unique email template.
Therefore, you’ll want to look for one that offers several customizable
options. For example, many templates include access to online “builder” apps
that let you drag-and-drop various items onto a canvas. This gives you control
Keyboard Accessibility Tips Using HTML and CSS
Making your website accessible for keyboard-only users is an important part of the bigger accessibility picture. Here are some keyboard accessibility tips you can quickly implement using basic HTML and CSS.A11y From the BeginningThese tips are part of Web Accessibility: the Complete Learning Guide, where we’ve collected a range of tutorials, articles, courses, and ebooks, to help you understand web accessibility from the beginning.What is Keyboard Accessibility?A keyboard can be the primary means for some users to navigate websites. Nowadays, when most web interfaces are designed with mouse cursors and touch interaction in mind, keyboard navigation is neglected. Keyboard accessibility is the practice of making sure that users can navigate efficiently and unhindered using just their keyboard.Who Might Need Keyboard Accessibility?These are the main target groups of keyboard accessibility:
Users with motor disabilities who have difficulty using a mouse, using a touch device, or clicking on small things.
Blind or visually impaired users frequently prefer to navigate websites with specific Braille keyboards.
Amputees or those with congenital amputation (birth without a limb or limbs, specifically hands in this case) often use special hardware mimicking keyboard functionality.
Anyone who simply doesn’t have access to a functioning mouse or touchpad.
1. Test Your Site...
The latest from AMP Analytics providers
As AMP turns three, we can’t help but look back with nostalgia on how far along we’ve come along in our mission – Build the best open web technology that lets publishers create fast and secure pages without compromising on user-experience. That is why we built the analytics infrastructure in AMP that allows for “collect once, notify many” architecture for metrics on the page. This allows for AMP Analytics to be fast and accurate while using fewer resources on mobile devices.
AMP Analytics’ interface allows third-party analytics partners to easily integrate with the service. Websites building with AMP can choose from over 55 analytics providers today to get accurate metrics of the page.
We’re continuing to invest in the ecosystem, and wanted to give a shoutout to some of the amazing providers who also continue to invest in AMP. Over the coming few months, you’ll see deeper integrations from the following partners with AMP.
AMP continues to be adopted by Adobe customers, who love the speed that AMP provides and the mobile first approach. Adobe has supported AMP from the beginning with two different analytics templates that customers can use based on their needs. In 2019, Adobe would like to build out more robust ID linking capabilities as well as enhance the current templates to support more events out of the box to make the implementation...
AMP story learnings and best practices
Since we announced the developer preview of AMP Stories, we’ve been focused on ensuring the format is an easy and compelling way for publishers to create visual content on the web. It’s been exciting to see the experimentation and direction that some early testers have taken with the product.
Naturally we’ve also had a lot of people asking us to share early learnings about AMP stories – what works, what doesn’t – so we’ve tried to compile a quick run-down of best practices here:
1) AMP stories are just that – stories, intended to communicate a message, explain a situation, an event, a person, a concept. Publishers should be telling important stories worth reading that are both visually-rich and share relevant information in their text accompaniment. We’ve seen visual stories created in a variety of content categories, from sports to recipes to hard news to entertainment. Some things to avoid:
AMP stories which are just image slideshows or auto-generated are often lacking the core content that users are expecting and looking for when choosing what to read.
AMP stories should be complete, self-contained articles; they should make sense and be useful to the user without requiring the user to link out.
See AMP story examples from the Washington Post, Mic.com and FIFA (shown above).
Example from FIFA
2) Asset Quality Matters
Designing Accessible Content: Typography, Font Styling, and Structure
Creating and designing accessible content means more than just choosing accessible typography. Even with “perfect” font families in place on your website, people with low vision, cognitive, language, and learning disabilities may still struggle to process the text. Let’s look at all the steps and design considerations you’ll need to take into account when making your content more accessible.1. Consider Your TypographyIt can be a bit overwhelming when you think of all the elements you have to consider when choosing an accessible typeface–serif vs. sans-serif, font variations, font size, kerning, tracking…to name just a few–but if you follow the guidelines below you will have taken the first steps in making your website typography more accessible.Find Common GroundLess is more when it comes to accessible typography. The easiest way to make your typography accessible is to choose a common font and limit the number of fonts on your website. This is especially important for your main body copy. Studies show common fonts most often win when reading speed and user preference of different fonts is compared.Common font families used for accessibilityCommon fonts include:sans-serif font families: Arial, Calibri, Century Gothic, Helvetica, Tahoma, and Verdanaserif font families: Times New Roman and Georgiaslab serif font families: Arvo, Museo Slab, and RockwellIt’s...
New Course: Website Accessibility With ARIA Roles
Learn how to make your websites accessible to as many people as possible by watching our new short course, Website Accessibility With ARIA Roles.What You’ll LearnThe ARIA specification provides us with a set of rules and guidelines for creating accessible websites that are usable across browsers and assistive devices. In this short course, Craig Campbell will show you how to use ARIA roles and attributes to improve your websites' accessibility.You'll learn about the "navigation" role, how to create accessible menus and checkboxes, how to label your content to enable people with screen readers to make sense of it, and more.Watch the Introduction Take the CourseYou can take our new course straight away with a subscription to Envato Elements. For a single low monthly fee, you get access not only to this course, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+. Plus you now get unlimited downloads from the huge Envato Elements library of 700,000+ creative assets. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.