In addition to our technical and quality requirements for Template Kits, we are specifically looking for content that has commercial demand and usability. If we don’t accept your content, it is usually not that the design is poor quality or does not have inherent or artistic value, but simply that they are not quite right for our marketplace and customers.
Great Template Kit design has the following qualities:
- Trend-forward
- Clean
- Easy to Customize
- Effective
- Fast-Loading
- Understand Our Audience
- Follow current design trends
- Make it clean and polished
- Make it effective
- Make it usable
- Content considerations
- Responsiveness
- Animation
Understand Our Audience
We find the majority of template kit users are familiar with WordPress and have experience using visual builders, or are novice design professionals getting into visual design in the browser for the first time. For this reason, it is important to develop your designs with this audience in mind:
- Use familiar UI patterns, but don't be afraid to modernize the style
- Avoid brutalist or overly abstract layouts that make navigation or focus unclear.
- Find the most logical way of configuring an element to achieve the effect you want. For example, don't add a background image under Advanced if the element has a background tab of its own.
Research The Niche
Before diving into a Template Kit project, we recommend taking a little time to research your kit’s niche and find new and interesting ways to present it in the same way you would prepare for a new theme or website design.
It can be difficult to decide what niche to design for and where to focus your efforts for the best chance of commercial success. The good news is that generally all of our research and analysis points to the fact that customers are looking for a very broad and diverse range of photos, so chances are someone out there is looking to license and use what you design.
While there’s definitely a broad need for all types of websites, there are still some styles and niches that tend to float just above the rest.
- Technology & Startups
- Business & Trade Services
- Nature & Travel
- Education, Health & Medical
- Food
We want unique designs. For example, if the kit is for a Hairstylist, we don’t want a design that looks the same as all the Barber themes on Themeforest.
Understand the niche and the kind of content a website owner will need to present but also what a potential visitor/customer wants to see.
Play to your strengths (and your available resources)
While it can be tempting to simply go for what’s most popular, we always recommend sticking to what you’re best at and what makes your designs unique.
Keep in mind your strengths aren’t just your skills or experience, but your physical location, connections, relationships, and available resources as well. Take advantage of subjects or use cases that you might have easier access to then most other designers. For example, if your cousin is a woodworker or your best friend’s sister owns a catering company, you might want to exploit those particular subjects in greater depth.
Diversify
We all know it’s not always best to put all your eggs in one basket. But also consider that there’s more than one kind of egg out there as well. If you’re able build a broad portfolio across multiple subject areas that’s great, however there’s also lots of diversity to explore within any one specific niche.
For example if you’re an expert designer with a portfolio of general business themes, you might try tailoring your content to a specific small business, such as a plant store, or an au pair. Or you might work to diversify by offering a new perspective on a popular theme - instead of a faceless travel agency offering trips to the tropics, consider a married duo that needs a website for their niche services offering dog-friendly outings.
Follow current design trends
We have high expectations for the quality of the design, and expect all design work to be finished and professional. While you’re working through the design stages of your template kit, keep the following principles in mind:
Make it Modern
Modern design encompasses any design that breaks away from the bootstrap-style designs of yesteryear. This is not to say grids are bad or freeform is good, but that end-users are more likely to choose fresh and interesting looks. With that said, the design must still be functional and user-friendly - avoid overly vogue or brutalist designs that can confuse the average user.
Be original
We want to see only your best, original work.
Get familiar with popular themes, mockups and Elementor layouts that already exist out there and ensure you do something different or new. This is especially important regarding stock, font and color choices – try using fonts and color palettes you haven’t tried before.
Make it clean and polished
Clean design typically means uncluttered, simple, easy to read and more “white space.” This does not mean you must strive for minimalism, it means removing distractions and focusing on the content, the key message, and the most important action. Elements and text should have ample spacing and contrast to help guide the visitor’s focus, and the overall design should look cohesive and complete.
Make it effective
Templates should be effective web pages that are engaging for the visitor, with content that is focused on a goal and easy to follow.
When a visitor first lands on a webpage, there are only a matter of seconds for them to decide if they are interested, and if they understand what to do next. You don’t need to be a UX expert, but it’s a good idea to make sure that your page layouts have real structure and purpose, with a clear indication of what the user should interact with.
Make it usable
In addition to being easy to visually understand by visitors on the outside, users must be able to customize your templates with their own colors, text and stock and achieve the same overall design when working in the builder. Visual effects, such as image shapes or collages, should be achieved in the builder and not a graphic editing program so the user can change those photos or elements and maintain their intended style.
The template's layout and design should translate easily to the builder's controls so someone familiar with Elementor is not confused on where to change something.
Content considerations
We expect each Template Kit to have professionally applied font pairing and UX considerations. You do not need to create copy or body text for your kit, but we do expect headlines and button text to be niche-appropriate and in English. We also recommend setting the appropriate HTML tag and alignment in the Content controls.
Second to color, your kit typography can make or break the design. Look at current design trends to help choose a great font pairing and avoid using more than two fonts.
- Line height should use ems for body text and must be set on all text and heading elements. 1.5 is standard.
- Avoid display fonts for body text or small headings as it makes text hard to read:
For example, Playfair Display is a fine heading font, but it is not a readable body font or at sizes below 24px. Amatic SC is a fine heading font, but does not include lowercase letters, so should not be used as a body font.
Choosing Stock Images, Videos & Icons
Photo elements in your design should serve a functional purpose in the design and not overpower the content (unless the photos themselves are the focus). The best photo choices are those with the following qualities:
- Consistent / complementary colors to the overall design
- Are of a similar style or appear to be from the same set
- Comply with our content requirements (i.e., do not contain inappropriate language and/or explicit sexual, violent or drug-related content).
- Communicate the design's goal, benefits or theme
- Have been web-optimized for fast load while maintaining quality/resolution
Use quality images
When choosing what photos or graphics to use in your designs, it’s important to consider competitive factors and what other similar photos might already be available.
Generally, the more common the stock, the more selective we will be in acceptance.
Don’t add anything to stock images
Consider other ways that the template might be edited, manipulated, processed, or combined with other visual elements. It may be tempting to overlay your own text or graphics on top of a photo in Photoshop to flesh out a concept or speed up design. It’s always best, though, to upload the original photo and then use Elementor to achieve the desired style so that customers are able to easily change the content without losing the design.
|
In this design, the pink overlay is embedded into the middle demo photo and will be lost if the end-user changes the image. |
In this design, a transparent mask was used in Elementor as a background overlay, allowing the user to change the color or image and still maintain the shapes. |
Avoid Over-Processing
It’s okay to use color filters to normalize a stock photo, but images that are free of effects and filters look more natural and tend to age better. Use the image filter or overlay options in the builder elements to achieve stylistic effects whenever possible.
Video & Audio
Due to size restrictions, we discourage use of locally hosted video and audio files. You may link to YouTube or Soundcloud from the elements that support it.
- Use native options in Elementor to add video and audio - avoid shortcodes or embeds.
- Use niche-appropriate video.
- Make sure the video is family-friendly.
- Disable video sound, playlists and related videos.
- Never use auto-play.
- Enable privacy mode.
Icons & Illustrations
- To allow for ease of customization, use the native icon elements or options whenever possible.
- Avoid over-use of on-trend illustrations - seek out styles, illustrations or color combinations that are fresh and new.
- Always use high-resolution/sharp graphics that can be resized within a reasonable range and look good on all screen sizes.
Responsiveness
When it’s time to deal with screen resolution, there’s always a dilemma of choosing what screen to design for. There’s no one-size-fits-all approach in this case, but we recommend ensuring your design looks amazing at 2550w, 1440w and 1280w before also ensuring the smartphone view is a good representation of the desktop design.
Elementor contains excellent responsiveness for its elements by default, and offers a tablet and mobile view in the editor to help you tailor your layouts. However, don't depend on the defaults to produce perfect results. Here are some things to watch out for:
- Make sure hero areas focus/text fit “above the fold” and titles are appropriately positioned.
- Scale down huge titles.
- Adjust column widths to break grids into more readable sizes.
- Ensure text is at least 1 em or 2% from the edges.
- Sections and headings that are not full-screen should not have too much space between them (i.e., avoid unnecessary scrolling).
- You may reverse columns on mobile (if supported i.e., Elementor) to ensure images and text flow in the right order under the Responsive tab of the Advanced options of your section.
- Shape dividers may need their widths and heights adjusted to maintain the same look.
- Custom positioning must be set separately on tablet and mobile modes for any element using it.
- Make sure any custom styling via CSS is fully responsive!
We recommend using a lightweight tool or browser addon to help test your kit at laptop widths (such as 1280x720) to catch any issues - often what looks great at 2550px wide does not work at 1280px, so adjustment is needed. Additionally, ensuring your kit looks right at 768px is just as important.
Animation
Elementor provides us with some fun and easy tools to add a little extra movement and interaction to our layouts in the form of Hover Effects and Animations. There are millions of layouts out there today, which can make it hard to innovate on layout alone - add a little movement and interaction to your kits to help set them apart. When working with animations that involve movement, be sure to set appropriate delays and intervals, and test the page load often to ensure the loading and scrolling flows together elegantly:
- Adding motion effects to main layout sections may negatively affect page load. Consider adding motion effects to columns or individual elements only.
- Left-to-right and right-to-left animations may negatively affect page load if not clipped to the area they immediately appear. Try combining them with the correct z-index or overflow settings on their respective containers.
- Layering animations usually doesn't work out well. Avoid adding animations to elements that are already in an animated container and vice versa.