Adding an online store to your website or creating one from scratch is a great way to increase your business revenue and reach new customers. This is especially true if you’re a small business owner looking to expand your customer base without the big budget needed for another physical location.
Incorporating an online store, or in other words, adding eCommerce functionality is an affordable way to spread the word about your business online and reach people beyond your regular business location.
When it comes to building eCommerce websites, a great design, no matter which eCommerce platform you’re using, is a must. A well-designed, responsive, and eye-catching template will put your products in the spotlight and help skyrocket your sales.
Whether you’re a business owner looking to create a new online store, or a web professional that is helping your client with their eCommerce setup, working with a top-notch site template gives you a leg up.
Build an Effective eCommerce Store With a Great Design
When shopping for an eCommerce website template, you should keep an eye out for some important features to make sure you're delivering the best possible experience to your visitors. These features include:
A responsive and mobile friendly design.
A template that allows for featured product images.
In this post, we showcase the best eCommerce website templates for 2020 and beyond. These are all either new themes or have been freshly updated.
Best eCommerce Website Templates for 2020
Here are over 15 fresh site templates perfectly suited for eCommerce stores. They have the features you need to get your online store (or that of your client’s) set up quickly with a great design. So, you can start featuring your products and generating sales online!
Wokiee offers great flexibility and design tools that give buyers total control over their eCommerce website. Support forums and video tutorials to help with setup are extremely popular with anyone who purchases Wokiee, and have helped it earn a solid 5.0 rating.
This premium Shopify theme includes a host of bonus apps, which would ordinarily cost hundreds of dollars:
It’s testament to the Shopify platform that so many of the top eCommerce themes on Themeforest are Shopify themes. Gecko is one such example, and with thousands of sales to its name and a near-perfect rating.
Gecko is ideal for online fashion stores, handmade and craft products, organic produce, furniture, and much more. It offers 15+ homepage layouts, 8+ shop layouts, and a wide range of product page layouts, all of which work superbly on mobile too.
Supro is a relatively new theme on the scene, created by seasoned Magento developers ArrowHiTech. Featuring some really slick and varied design options, Supro is a superb way to show off your product range.
Built on Magento’s default theme, combined with Front-end CMS Page Builder, with 36+ block elements and MGS Theme Settings, Supro is highly compatible with third party extensions.
Available on Envato Elements, Cosi has some very stylish and varied layouts for fans of WooCommerce. Built with modern, open design in mind, its typography and visuals are bold and slick. The screenshot below is taken from one of its minimalistic fashion variants; go and check out its tech demo and its organic store demo to appreciate just how much is on offer!
This is sleek, simple, and one of the best eCommerce website templates out there! Sliders also help to bring the products onto the screen in a sophisticated way. Released in 2019, the developers behind Rogan have wasted no time designing plenty of demos so you can scroll through the options and find the best match for your business. The eCommerce demo in particular is ideal for retail and can be edited based on the products you’re looking to sell.
iOne is a massive theme, considering its minimalistic nature! More than 12 specific demos and too many layout variants to list, Instagram integration, AJAX cart and wishlist, Flexslider, autocomplete search, grid and list layout toggle, quick view popup, layered navigation–jump in and see for yourself.
Porto is a responsive Magento template featuring 18 different homepage layouts including a full-width layout. Your products can be displayed in a variety of grid column sizes; from two to eight and individual category pages can draw your visitors in with a gorgeous slideshow or a parallax background.
Other features include unlimited color options, integration with Google Fonts, unlimited header types, product pages which include product variations, custom design blocks, and more than 300 customization options in the admin panel. You can easily import sample data into Porto so you can get your online store up and running as quickly as possible.
Updated to version 3, Journal is an OpenCart template with more than 2,000 editable options to give you total control over your store. It’s a versatile template that can adapt to both simple and complex shops, depending on your needs.
Journal includes multiple-level menus which let you build complex navigation with unlimited sub-categories, responsive design, full-screen backgrounds which can also be tweaked to include slideshows, the ability to create your own custom product sections as well as using the standard sections such as Featured, Specials, and Bestsellers. This template also includes unlimited color options, the option to modify any of the pre-existing skins and save your own, and much more.
Another highly rated template, Wanium has scored an average of 4.79 out of 5 stars—not bad! With plenty of demos to choose from, you can see how this eCommerce template can be adapted based on the wares you're looking to sell.
The Shop Clothes demo for example is a strong theme that effortlessly combines video with static imagery. The video header is the perfect spot to bring to life new collections and begin to tell your brand’s story. Plus, for only £16, this is a high-quality theme at a great price.
Warehouse is a clean and responsive Prestashop theme which takes advantage of many advanced modules and modifications like rollover images, clean cart, sliders, and more. Warehouse is based on the Bootstrap framework which means your store will look good no matter what device your visitors are using.
Other features include a theme editor which gives you advanced control over the design of your store, the ability to view individual product pages without the need to reload the page, autocomplete search, a blog module, countdown modules, product labels, and more.
Ella is a beautiful Shopify template with real heritage. Originally created in 2014, Ella has been maintained and updated ever since (currently at version 3.0.0), racking up thousands of sales in the meantime! It features large banners which can showcase your most popular products to instantly catch the attention of your visitors.
Ella includes a special category module to display all categories, filterable products, integration with Google Fonts, unlimited color and style options, custom links and icons for social media, the ability to display payment options, product variations, and support for Google Rich Snippets.
On top of this, Ella comes with a related products slider as well as a slider for recently viewed products, which are guaranteed to boost your conversion rates.
Fastest is a Magento site template created to not only look great, but also to load fast. It includes 10 uniquely designed demo websites and multiple layouts for category and product pages.
With Fastest, you can display various promo banners and testimonials to wow potential customers with gorgeous sliders. Other features include unlimited colors and fonts, a portfolio page, social sharing, a responsive design, configurable product grids, vertical mega-menu, a price filter, and more.
Fastor is a modern, powerful OpenCart template with tons of options. Included modules and demo content allow you to create your store in just a few clicks. What sets Fastor apart is the ability to manage multiple stores from one admin panel. Fastor was built on the Bootstrap framework ensuring responsive design across all devices.
Other notable features include advanced settings panel which allows you to change the type of each module for your store, multiple color schemes, unlimited font combinations, 67 pre-made skins, custom hover effects, auto-update price on product pages, cloud zoom on product images, and much more.
Market is a responsive multipurpose Magento theme which is fully customizable and suitable for any store. The template integrates with various Magento extensions such as SM Camera Slider, Vertical Mega Menu, SM Tab Listing, SM Categories and others.
Market offers eight different homepage layouts, various color and font options, four header styles, stunning slideshows and quick product views, Rich Snippet support, highly customizable static blocks, and a powerful search box which allows your customers to quickly find products by entering directly the product name, description, price, and SKU.
Market: Premium Responsive Magento 2 and 1.9 Store Theme
Everything is a truly remarkable bundle of great looking premium themes for Magento. Templates include various styles: creative, unique, flat, material design, clean, elegant, minimal, minimalist, simplicity, generic, common, modern, luxury, outstanding, eye-catching, retro, and vintage which makes them suitable for any niche and any type of eCommerce website.
This bundle includes 11 different custom designs for a variety of niches such as fashion, games, electronics, apps, and others. All templates in this bundle feature responsive design, gorgeous imagery, advanced customization features, product customization options, and more.
If you have a wide product catalogue and want users to find relevant products quickly and easily, then this is a great option for you. As you can see from the Store demo, products are separated according to men’s, women’s, children’s, and accessories.
You only need to briefly head to the reviews section of this theme to see how highly praised it is for topics including customizability, design quality, and flexibility.
The templates also come with the custom Pearl slider, aimed at effortlessly creating and managing responsive slideshows with seamless transitions.
Luxurious sliders and full-width imagery give this eCommerce template an elegant feel. The ability to layer photography behind text also adds to its unique feel.
It has everything you’d expect from the best retail website templates—from an email sign up box, to a blog, to subtle visual cues like mini ‘sold’ signs on products, plus the ability to favorite the product without leaving the homepage. Features like these all help to make the user experience as seamless as possible.
If you’re looking for cool and design-focused, then this is one of the best online store templates out there! You just have to cast your eye on the Arredo template for a few seconds to see how well it would work for chic homeware or uniquely styled products.
Ultimately, this is a template that removes any unnecessary features to product on the number one priority of eCommerce websites: its products.
Never underestimate the importance of a strong header in enticing people to buy—and Classico shows just what’s possible! The default demo shows you how you can incorporate text with imagery, enabling you to quickly show people what to expect from your online store.
Regularly updated, recent updates include an improved admin panel to make editing and publishing content even simpler. There are also loads of different theme combinations to choose from so you can select your favorite layouts, sidebars, header positions, and more.
Another versatile template that screams cool, Depot’s various templates feature furniture and homeware. However, its effortless simplicity mean it could work for a whole host of other products too.
A great feature of this template is its ability to combine imagery with content blocks reserved for headlines or further text without it losing its minimal aesthetic. Subtle movements when users scroll over imagery also help to bring the site to life.
Last but certainly not least, this is one of the best web templates for eCommerce—in part due to its customizability!
There are lots of distinct demos to choose from so you have the freedom to find the best fit, but they all come with useful features like variable products so users can pick their product color, size, style, etc. Plus, there’s a wishlist functionality and an optional top header. Let your creativity run wild!
Suprema - Multipurpose eCommerce Theme
9 Quick Tips on Best eCommerce Practices
When building an eCommerce website, it’s important to follow best practices to ensure your online store will be a successful venture. Here are some of the tips to follow to get you started on the right path.
1. Include a FAQ Section
No matter how simple your store is or how clear your copy, there will always be customer questions that arise over and over again. Make sure to take note of these questions and include them on a page or a section in your store, then add it into your main navigation.
2. Add a Live Chat Widget
A Live Chat option can help turn reluctant visitors into guaranteed buyers by helping them make a decision and answer their immediate questions.
3. Clearly Label Your Sale Section
Recent studies have shown that a large portion of online shoppers are looking for a separate section of products on sale. Give yourself a head start and group all your on-sale products together in one section which is easily to find on your homepage.
4. Include a Search Box
Make it easy for your visitors to find what they are looking for. If you can incorporate autocomplete suggestions in your search bar like in the case of Warehouse, or a give them the ability to search not only by category but by product name, SKU, description, or price like in Market, even better.
5. Use Customer Browsing History for Personalization
Creating a personalized customer experience is extremely important in eCommerce. Metrics such as location, traffic sources, what customers bought, and what pages they viewed can greatly improve your customer service, foster loyalty, and improve sales.
6. Add Big and Beautiful Images
Images are a big part of eCommerce. Make sure your template has the ability to show big product images, display product galleries, and consider giving them the option to zoom in or view your product in a 360-degree view like in the Ultimo or Fastor eCommerce site templates.
7. Insert Clear and Compelling Call to Actions
Your product images are just one part of a bigger puzzle. Great calls to action are the other part. Make sure each product is accompanied by a call-to-action that clearly states what the user should do next.
8. Incorporate Customer Reviews
It’s basic human nature to see what others are saying about a product before we make a purchasing decision. If you have customer reviews, don’t be afraid to show them. However, they don’t have to be displayed front and center. You can safely place them lower on your product pages to leave enough space for a product description and your call to action.
9. Have a Clear Shipping and Return Policy
Your customers like to know all the details before making the final decision about purchasing, this includes your shipping and return policy. Don’t leave them in the dark. Have a section on your website that clearly outlines your shipping and return policies as well as your contact and customer support information. Give them confidence to purchase from you.
2020 eCommerce Design Trends
1. Accessibility
Not only is it the right thing to do, but more and more, we’re seeing a move towards people designing with accessibility in mind. By following the Web Content Accessibility Guidelines, you’ll make your website as easy as possible for people with disabilities to access it. This will include ensuring you use bold contrasting colors to make text as easy as possible to read for people who are hard of sight (amongst many other things).
This trend has been around for some time, but it shows no sign of disappearing. Especially within the context of eCommerce, the best retail WordPress themes will ensure users can find relevant content quickly and easily. Selecting a simple theme with minimal distractions can often be a sensible way to go.
3. Bold Colors and Fonts
Bright color schemes against minimal design are predicted to be the go-to for web design in 2020. Many of the best eCommerce templates provide the option to adapt color schemes and font sizes so your site can evolve with the trends!
4. Motion Design
Many of the eCommerce templates outlined include the option to add video—a handy feature as motion design is predicted to continue to make waves into 2020. Whether it’s adding GIFs to your website or incorporating a video into the header of your website, they can help to bring your products to life.
5. Split Screen Content
This couldn’t be more useful for eCommerce websites as it enables you to give equal weighting to two product types. Predicted to be a force to be reckoned with in 2020, if you want to feature both men’s and women’s products on your homepage for example, you could pick an eCommerce template that follows this developing trend.
Are You Ready to Launch an eCommerce Site?
Running an eCommerce site is not for the faint hearted. There are a lot of things that can go wrong if you’re not careful. However, with well-chosen eCommerce themes from one of our best-selling eCommerce templates and the above tips in hand, your online store is sure to start out on the right foot.
Figma and Adobe XD have been in competition since XD’s release in 2016. At first that competition wasn’t very stiff, with XD’s early releases missing a lot of key features, but things have changed over these past few years. The race between the two applications is now much tighter, and it’s no longer as easy to spot which one will be most suited to you and your workflow.
Figma and Adobe XD, head to head
In this showdown we’re going to go through a deep and comprehensive comparison of Figma vs Adobe XD, find out where each one shines, which one is better overall, and which one is better for your specific set of circumstances.
We’re going to get into pricing as our very first comparison so as we go through the features of both programs you’ll have context to assess how much value you will be getting in each case.
Figma: Free / $12 / $45
Figma
is has a free tier with unlimited storage for up to two editors and three projects. Projects can contain an unlimited number of documents that can be saved online and offline. It has two paid tiers with team focused features named “Professional” and “Organization”, priced at $12 and $45 respectively
per editor, per month.
XD: Free / $9.99 / $22.99 / inc CC $52.99
XD
also has a free tier with no limit on projects, however files cannot be saved locally and must be saved to the cloud, with a storage allowance of 2GB. The paid tier is $9.99 per month, or included
with a Creative Cloud subscription currently $52.99 per month. The paid tier allows local saving and also increase your
cloud storage to 100GB.
Note: As at the time of this article free accounts include unlimited shared documents & shared links plus local saving. However from April 2020 shared documents and links will be limited to one of each, and a paid tier will be required for local saving.
Winner: Figma
Why Figma Wins
You get more in Figma’s free tier than XD’s.
XD’s paid tiers are
cheaper, but Figma’s paid tiers have considerably more features.
Let’s have a rundown of why Figma’s pricing wins, tier by tier.
Free Tier
If not for April’s upcoming restrictions to collaboration and local saving with XD, the competition on whose free tier is most compelling would have been much closer. However as it stands you get more from Figma’s free version than XD’s:
Cloud storage: Figma, unlimited vs. XD, 2GB
Shared documents: Figma, unlimited vs. XD, 1
Shared links: Figma, unlimited vs. XD, 1
First Paid Tier
On the first level of paid tier, XD is $2.01 cheaper per user, which should be noted.
However much of what you get in the paid tier of XD is already available in the free tier of Figma, i.e. unlimited shared documents, unlimited shared links, larger amount of cloud storage.
As for the rest of the paid features in the first tier, Adobe’s main point of difference is it includes access to their full font library, otherwise only available via Creative Cloud. For comparison, Figma provides access to Google Fonts, without a font library of their own.
In contrast, Figma’s first paid tier adds custom file / user permissions, invite-only documents and shared team libraries.
As such, the value provided to you on the first paid tier of these applications will come down to whether fonts or features for collaboration and demonstrating to clients are worth more to you in your workflow.
Generally speaking, web designers would be more likely to find value in the collaboration, permission and sharing features of Figma’s first paid tier than they would the font library of Adobe’s first paid tier.
Note: Figma’s “Professional” tier also extends version history from 30 days to unlimited.
XD just added version history in November 2019, and it has a 30 day limit by default, with the option to mark specific versions to keep indefinitely. This appears to be the same on both free and paid tiers.
Second Paid Tier
Again, XD’s second paid tier is cheaper than Figma’s, this time by $22.01.
However, it would seem XD doesn’t offer as many additions on this tier as does Figma.
The “XD for teams” tier adds:
On-boarding webinars
Web-based admin console
Advanced technical support
The Figma “Organization” tier adds:
Org-wide design systems
Centralized teams
Private plugins
Plugin administration
Shared fonts
Single sign on + advanced security
Design systems analytics
Again in this case, even though XD’s second tier is cheaper, Figma’s seems to offer more value in the form of features that will be practically useful to large organizations.
Section 2. Supported Platforms
XD
Desktop:
Windows & Mac.
Desktop & Mobile device browsers:
XD can generate previews of your designs viewable in the browser to enable clients to give feedback.
Mobile device app:
Adobe XD app on iOS or Android. Emulates mobile devices for live previews
Figma
Desktop:
Windows & Mac (official).
Linux through the community maintained Figma-linux app - provides support for locally installed fonts
Desktop browsers:
Figma can be used for editing in any WebGL supporting browser. This also enables editing via ChromeOS and other Linux / BSD based systems.
Additionally, designs can be previewed by clients in desktop browsers.
Mobile device browsers:
View-only mode allows previewing of designs on iOS and Android. Officially supported in Safari and Chrome but also works in Firefox in my tests.
Mobile device app:
Figma Mirror app on iOS or Android. More closely emulates mobile devices than the browser does for previewing
Winner: Figma
Why Figma Wins
At present Adobe provides no way to access XD outside of Windows or Mac, while Figma can also be accessed via ChromeOS and Linux.
A little over a quarter of respondents to the 2019 Stack overflow
developer survey reported using a Linux based system as their primary operating system, and
it is a commonly used platform among people involved with the coding phase of
web development. With Figma being accessible on Linux and ChromeOS via the browser or community maintained desktop app, this makes it the tool of choice for any team who aren’t 100% Mac / Windows based.
That said, if your team is running entirely on Mac & Windows, you won’t experience any significant difference in terms of platform support.
Section 3. Collaboration, Sharing & Previewing
3a. Collaboration
Figma
Multiplayer
With Figma’s “multiplayer” feature any number of people can be logged in and editing a document simultaneously. You will each have an an avatar that appears in the top toolbar, and each person’s cursor will be displayed with a different color and their name attached to it.
Observation Mode
You can also activate observation mode by clicking the avatar of any other user logged in and on the same document as you. Once this is activated your screen will mirror theirs, showing you every action they take as they move around the document. You can use this both to showcase a document to another person, or to watch a person move through a prototype in order to test its weaknesses.
Team Libraries
A majorly helpful feature is team libraries. Not only can you create design systems comprised of reusable components, color schemes and text styles for your own work, but you can make said design systems available for your entire team so everyone is working with the same common elements.
Automatic Save and Sync
Importantly, Figma automatically saves and syncs any changes to documents and design systems therein. If a person is working on a shared project and a change occurs, they will be notified and able to update what they are seeing immediately so all team members are up to date at all times, no file uploads, downloads or manual merges required.
Adobe XD
Coediting (beta)
As of November 2019 Adobe XD has collaborative “coediting” design in beta, which behaves very much like Figma’s “multiplayer” features. At present the only stand-out visual difference between the two is you don’t see the cursor of other
designers working on the document.
Linked Assets
XD also has “Linked Assets”, whereby if a document is saved to the cloud its components and styles can be accessed from other documents through linking them. If the original component is changed then saved in the source document, the linked document will receive a notification that it can update to see the changes.
You can also organize and access assets through Creative Cloud Libraries. This begins to approach the functionality found in Figma’s Team Libraries, but the features to facilitate the types of team structures people use on projects are not as strong.
If original assets from a CC Library are updated, they won’t change in other documents that are using them.
Collaboration is the central functionality around which a lot of Figma is built, and it shows. Being web based means collaboration features are very quickly and easily accessed, the multiplayer mode is currently more advanced than XD’s coediting beta, it includes observation mode, team libraries, and a smoothly flowing process to sync and update changes to shared assets.
3b. Sharing
Figma
Invitations
In Figma you can send invitations to specific people and set whether they can view, edit and add comments. It’s also possible, rather than inviting individuals one at a time, to create teams, add people to those teams, then share with the required team instead. Further, you can share all the documents in a project with a team rather than having to share one document at a time.
Permissions
There are also four levels of permissions a person can have: viewer, editor, admin or owner. These permissions can be set at the team, project and document level.
Links
You can share a document by sending the the same link you use to edit the document in the browser. Again, you can control what access via link allows, whether that be editing or just viewing. This facilitates an environment of sharing between designers, similar to GitHub or CodePen, and that is going to be buoyed by the upcoming Figma community pages.
It’s possible in XD to generate a link to a web based version of a document. These links can be generated as optimized for:
Design review
Developer handoff
Presentation
User testing
You can also apply custom settings to your generated links instead.
It is possible to allow open access to your shared link, or require a password of your choosing.
Private Invitations
As of June 2019, XD has the ability to email individuals private invitations to view shared links. This system will allow you to further ensure, beyond password protection, that only invited persons are able to view a published prototype online.
If access is restricted to invitation only, a Creative Cloud account will be required by the people invited.
Winner: Figma
Why Figma Wins
XD made a great advance when it added private invitations, however it remains significantly behind Figma’s advanced team management and permissions system, and the ease of allowing open sharing via the browser.
3c. Previewing
Figma
Figma gives you the ability to simply send a client or manager a link to demonstrate a mockup to them live in the browser. You can either set the link to be “view” only so the person can’t inadvertently make unwanted changes, or you can give them “edit” capability so they can directly interact and show you what they’d like to have happen in the design, or make changes such as adding copy they have prepared.
You can also use the “observation mode” described above to show someone through the mockup.
Embedding documents is also possible so they can be displayed within a
webpage if you would prefer to preview in this way. To draw a comparison with CodePen again, this is similar to embedding a pen in a page, but in this case showcasing design rather than code.
XD
As mentioned above, you can generate a link to your XD design that, when shared with a client or manager, will allow them to view the mockup and leave comments on it. However, if you want to allow the person to get more involved, i.e. to give them any editing privileges, this is not currently possible.
A strong point XD has over Figma, though, is the ability to add voice narration to step your client through a demonstration, an excellent feature should you be working with people in different timezones or who have busy schedules:
Winner: Draw
Why a Draw
Both applications have very strong features for previewing documents, especially to clients, including the ability to send a link that allows for inspection in the browser.
On the one hand Figma allows you to let other interested parties interact directly with the document, and if doing a live demonstration they can see your cursor moving around, or they can watch through observation mode. It also has the ability to embed documents into websites.
And on the other hand XD gives you the ability to record a voice walkthrough for a client, something that could be super useful when a real time conversation is not an option. Especially for freelancer web designers, this feature could save a lot of time and potential miscommunication when used instead of written explanations of mockups.
Section 4. Designing
4a. Figma’s Frames vs XD’s Artboards
Figma uses “frames” while XD uses “artboards”. They are similar in functionality, so which one is better and why?
XD’s Artboards
XD’s artboards act as containers representing viewports that hold designs, e.g. a phone screen vs a tablet screen. You can create as many artboards as you like, and when prototyping you can link artboards together to emulate the flow a user might follow through a site or app.
Figma’s Frames
Figma’s frames
also act as containers the way artboards do, but these containers can both represent viewports and design sub-elements such as buttons, sections of content, navigation
elements and so on.
When used at the top level to represent a viewport, frames have all the functionality artboards do. But because they can be nested and used to create buttons, navbars and so on they also bring added functionality to these elements, such as grids and auto-layout.
Winner: Figma’s Frames
Why Figma Wins
Put simply, frames can do everything artboards can do, but artboards can’t do everything frames can do.
4b. Grids & Guides
Guides
Both
XD and Figma have guides.
For a good while XD didn’t have
guides and you would have to awkwardly emulate their functionality by adding rectangles or lines to your page that other objects could snap their alignment to. You might have encountered this workflow hurdle in the past,
but guides have since been added, so rest assured functionality is now equal between XD and Figma in this regard.
Both applications also have grids, but there are some differences in how they function, described below.
Adobe XD Grids
In XD grids can be added to
artboards. An artboard’s grid can be set to either a square grid or set
of vertical columns. Once a grid is created it can be set as the default
grid for your document so it can be easily applied to other artboards.
Figma Grids
In
Figma grids, aka “layout grids”, can be added to any frame whether it
be a top level frame acting as an artboard, or a nested frame acting as a design sub-element. This means you can have differently configured grids nested within
the same design.
Figma also allows you to use multiple grids at once on a frame, with each one overlaid on the other. As such you can have a square grid and columns androws.
Once
a grid is created it can be saved as a grid style and applied to any
frame or component. You can save as many grid styles as you like.
Winner: Figma
Why Figma Wins
Both
applications have grids and guides, but Figma allows you to combine
grid types, use them in nested items, and save multiple grid styles.
4c. Layout & Responsive Emulation
Constraints
Both
applications have constraints, which allow you to tell components to stay in
position or resize relative to certain sides of their parent frame /
artboard. They provide essentially the same settings, so are equivalent in function for all intents and purposes.
There are layout and responsive emulation functions in each application that are quite different, however, so let’s take a look at them.
XD
Repeat Grid
XD has the “Repeat
grid” function, which is an excellent time saving feature. To use it you can select any element, or
multiple elements, press the “Repeat grid” button and your selection
will automatically be set to repeat as many times as you like,
horizontally and / or vertically. The repeat grid element can then be
resized and have the spacing between elements changed as needed.
XD also
has the responsive resize function, which tries to guess what you are
likely to need in a given element. It will then apply constraints to the element accordingly.
As with many features, how helpful this is will depend on your
particular workflow. You may find it aligns with the way you work and
hence saves you a lot of time, or you may find you often have to override the automatically applied constraints. The best way to find out is to give
it a test run and see how it fits for you.
Auto layout is the newest feature in Figma and it is highly advanced and incredibly helpful for web design mockups.
It allows for things like:
Buttons automatically resizing to suit the width of their inner text
Containers expanding or contracting when child elements are added or removed
Applying horizontal and vertical padding settings
Applying "spacing between items", which effectively behaves as margins
Dragging and dropping to sort list items, either horizontally or vertically
Dragging and dropping items between separate lists
Further,
you can nest one auto-layout frames inside another, differently configured auto-layout frame.
This means you can effectively create grids by using horizontal
auto-layout frames for rows, with a parent vertical auto-layout frame
for each column. You can also use nesting to create complex layouts such as multi-post content spaces.
These auto-layout features give Figma the closest emulation of real browser behavior I’m yet to see in a design / mockup application.
Smart selection may not be needed as often now that Figma has auto-layout, but what it allows you to do is select multiple elements and quickly adjust the spacing around them.
I’ve seen this function described as Figma’s answer to XD’s repeat grid function, however I would say that, although it does allow you to modify spacing in a similar way, it doesn’t compare directly as it doesn’t handle the automatic replication of items into a grid for you.
This
comparison is a much harder one to call, because XD’s repeat grid
function is fantastic, and responsive resize can be helpful in certain cases.
However,
Figma’s smart selection functionality was already excellent, and now its auto-layout functionality is the most advanced system of its
type we’ve ever seen in UI design / mockup software. It’s going to take a
lot for any other application to catch up with auto-layout, let alone overtake it.
4d. Creating Vector Graphics
Adobe XD
XD’s vector drawing tools include shape tools and a pen tool. However there is no way to edit the nodes of predefined shapes and editing of pen drawn vectors is limited.
The general idea of vector editing in XD is that
you use it for wireframing, and you switch to Illustrator if you want to create
graphics.
Figma
Figma also has shape tools and a
pen tool, but it adds a freehand pencil tool, and as well as the predefined shapes available in XD it has star and arrow shapes.
You can edit
the nodes of any shape, either predefined or drawn with the pen / pencil, by double clicking it to enter node editing mode. Figma also has the unique “vector
network” functionality whereby any number of segments can branch from a
single node, not just one or two.
Figma’s vector editing tools mean it is fully capable of creating many of the types of graphics used in web design, such as icons, logos and illustrations.
Winner: Figma
Why Figma Wins
If
you want to create graphics from scratch you can do it right inside
Figma, whereas XD is not equipped for this task, requiring a second piece
of software instead.
4e. Fonts
Figma integrates with Google Fonts, while XD integrates with Adobe Fonts. Both can use locally installed fonts.
Winner: Figma
Why Figma Wins
Given
this is a comparison for web designers, and Google Fonts is the most
used web font library, it makes Figma’s font library generally more helpful in
this regard.
That said, if you are using Figma for non-web design work you may find having access to Adobe’s fonts more useful. Additionally, Adobe does have some web fonts so it might be worth your while to check out their collection to help you decide if it provides value to you.
4f. Styling
Let’s have a quick rundown of the differences between styling options in Figma and XD
Figma has multiple fills and strokes. XD has only single fills and strokes.
Both allow you to control advanced stroke settings like caps, miters and stroke alignment.
Both have curved corners and blend modes.
Both have effects, with both having drop shadows, object / layer blur and background blur, but only Figma has an inner shadow effect.
Figma has additional advanced type settings XD doesn’t have.
Winner: Figma
Why Figma Wins
The competition on styling is pretty close, but Figma does come out on top due to its multiple strokes & fills, inner shadow and advanced type settings. For non-web work this would be less significant, but only Figma will allow you to design the types of multiple fills or multiple shadows that are possible via CSS.
Section 5. Design Systems
Both XD and Figma have the three essential pieces of functionality required to make design systems:
Components (formerly symbols in XD)
Color / effect styles
Text / character styles
Let’s look at the ways these three functions differ, or are the same, between XD and Figma.
Both XD and Figma use a master and instance system with their components, with the ability to override properties on component instances. Both also allow for nested components.
Both can allow components from one document to be accessed in another. With Figma this is done through publishing components to the “Team Library”, and in XD it is done with “linked assets”, whereby components can be pulled in from cloud documents.
As mentioned earlier, there used to be an issue with components in XD that they could not be made responsive, but with the introduction of constraints that was no longer the case.
Winner: Draw
Why a Draw
Figma’s components used to be leaps and bounds more advanced than XD’s symbols, but Adobe really closed the gap on this one. The two now are so near to each other in component functionality that neither has any huge advantages over the other.
5b. Color / Effect Styles
XD
Colors are saved in XD by selecting an object then clicking the + button in the Assets > Colors section of the interface. This will add both the stroke and fill colors to the palette. They will be named according to their hexcodes but can be renamed, and can be dragged and dropped for sorting.
XD doesn’t have a way to save effects, like shadows, as styles.
Figma
Colors are saved in Figma by selecting an object then clicking the button that looks like four squares near either the Fill, Stroke or Effects sections of the right sidebar. A name of your choice can be provided at this time. If you use the syntax category / name your styles will automatically be sorted into groups, e.g. buttons / nav. They can also be dragged and dropped for sorting.
Figma can also save effects as styles, such as drop shadows or blurs.
Winner: Figma
Why Figma Wins
This one is very close, almost close enough to call a draw. But Figma having the ability to save effects as styles is very helpful for a design system, as is the ability to choose individually whether to save stroke and fill colors. Automatic sorting into groups is also a handy feature.
5c. Text / Character Styles
Both Figma and XD allow you to save out font styling, referred to as a text style in Figma or a character style in XD. The means of saving these styles is the same as used for saving colors in each program.
Both applications allow you to save all of the font styling options they provide. The only significant difference is that XD allows you to also save a default color for the character style. It can be overridden but will be used when the style is first applied.
Winner: XD
With all other things being equal, the fact that XD lets you set a default color for your character styles is quite helpful, and gives it the edge in this case.
Section 6. Prototyping
6a. Interactions
Support for Multiple Interactions
In Figma you can have 1 interaction per item, for example, a hover interaction or a click interaction.
In XD you can have multiple interactions per item, for example, a hover interaction and a click interaction.
Let’s see a list of the interaction triggers, actions, transitions and easing options available in each application.
Figma
Triggers
On click
On drag
While hovering
While pressing
Mouse enter
Mouse leave
Mouse down
Mouse up
After delay
Actions:
Navigate to (frame - use to move between artboard type frames)
Open overlay (frame)
Swap with (frame - use to swap in alternate component type frames, e.g. buttons, see next section for more info)
Back
Close overlay
Open URL
Transitions
Instant
Dissolve
Smart Animate (see section after next)
Move In
Move Out
Push
Slide In
Slide Out
Easing
Ease In
Ease Out
Ease In and Out
Linear
XD
Triggers:
Tap
Drag
Hover
Time
Voice
Keys
Gamepad
Actions:
Transition (see types in the list below)
Auto-animate (see section after next)
Overlay
Speech Playback
Previous artboard
State change (see next section)
Transitions
Dissolve
Slide left
Slide right
Slide up
Slide down
Push left
Easing
None (aka linear)
Ease Out
Ease In
Ease In-Out
Snap
Wind Up
Bounce
Winner: XD
Why XD Wins
XD
has a collection of triggers you can use for interactions that Figma
does not have, in particular: voice, keys and gamepad. It also has speech playback and state change actions Figma doesn’t have. As such, XD
facilitates more types of UI designs such as voice controlled /
oriented apps or web game UIs.
On top of that it allows more than one interaction per item, allowing you to achieve prototypes with functionality more similar to their behavior in the browser.
6b. States / Swapping
Adobe XD
XD
has a “states” feature to make it easier to design things like button
hovers or switch toggles.
In
XD you just create a component, add a hover state, then restyle the
master component’s hover state right in place. When you preview your
artboard you will automatically have the hover interaction working.
Further, every time you add the component to an artboard its hover
states, toggle states and so on will already be baked in and ready to
go.
Additionally, you can create as many states as you need, beyond just default and hover.
The only downside is you can only use a hover trigger to initiate a hover state, and can’t use one to trigger other actions such as moving between artboards.
Figma
In Figma there is no explicit “state” function. You can
create things like hover effects and switch toggles but to do so you’ll
need to create two separate components and animate between them either
by swapping with another frame or opening an overlay.
If you swap
between frames you can use smart animate to handle the transitions, but
you would need to make a duplicate artboard style frame for every hover or toggle effect
you wanted to create. For example, to show three button hover states you’d need three duplicate frames, one per hover state.
If you want to work within a single frame you can
instead open an overlay, where the overlay is a frame representing the new state, such as a hover styled button. However with this option you can only use dissolve
or “move in” transitions, and not smart animate, meaning you can’t create something like a switch toggle
slide effect.
You would also need to wire up these swapping driven states every time you add a component instance, unlike XD’s components where the states are built in.
Winner: Adobe XD
Why XD Wins
Right now Figma doesn’t really have a state system, but rather a workaround using swapping to create something similar. XD’s state system on the other hand is robust and provides more methods of creating interactions and emulating browser functionality. It is also faster and more convenient to use given states can be saved into components and are then present when you add said component instances.
6c. Animation
The
availability of animations in XD was a strongly differentiating feature
between it and Figma for some time, however Figma has also recently
added in animations, shrinking the gap in this category.
Both applications have similar functionality, whereby you can transition between two artboards / top-level artboard style frames, and any layers with matching names across those frames can have animations automatically applied to them.
However with XD a key difference is you can also use auto-animate to transition between component states, not solely between frames.
Additionally, XD supports interpolation between more properties than Figma. Let’s take a look at the interpolation available in each:
XD allows you to animate between component states as well as artboards / frames, and supports interpolation on more properties in the process. Note in particular its ability to interpolate paths, meaning it can morph between one shape and another. These factors make it the strongest in animation right now.
Section 7. Handoff
7a. Code Generation
Adobe XD
XD can generate CSS code. In order to see this code you
have to generate a developer link then visit said link in a browser. If there is any change to the document you’ll need to regenerate
this link and refresh it.
Figma
Figma can generate CSS, Swift for iOS and XML for Android.
To
see generated code you just open the Code tab in the right sidebar.
If there is a change to the document the code will be regenerated in
real time, automatically.
Figma will also allow you to directly copy CSS or SVG code by right clicking an object, choosing copy / paste, then selecting either Copy as CSS or Copy as SVG.
Winner: Figma
Why Figma Wins
Figma can generate code for iOS and Android as well as CSS. That code is much easier to access inline in the Figma application rather than XD’s process of generating a link then visiting it in the browser. Figma code updates in real time, and CSS and SVG can be copied directly from the canvas. These features add up to making Figma a clear winner on code generation.
7b. Image Exporting
Formats
Both XD and Figma can export images as PNG, SVG, PDF and JPG.
Pixel Density
Figma can export PNGs and JPGs at: 0.5x, 0.75x, 1x, 1.5x, 2x, 3x, 4x
XD
can export JPGs at either 1x or 2x. It can export PNGs at 1x, 2x, 3x,
or if exporting for Android, 75% ldpi, 100% mdpi, 150% hdpi, 200% xhdpi,
300% xxhdpi, 400% xxxhdpi.
Quality settings
XD
has the ability to set image quality as a percentage on JPG export,
while Figma does not, meaning after exporting from Figma you’ll likely
have to re-export to get the file size down to a suitable amount for the
web.
Winner: XD
Why XD Wins
While Figma has a
little more flexibility with pixel density export settings, XD includes
quality settings, and for web designers that’s very important. For this
reason, and for web designers specifically, XD is the winner on image
exporting.
Section 8. Miscellaneous & Extras
8a. File Saving
Note: Here we are talking about saving your document file, not saving image files as covered in the previous section.
Figma
Figma files are auto-saved online and can optionally be saved locally as .fig files. Both types of saving are available at all pricing tiers.
Figma also allows you to maintain an extensive file history collection, allowing you to revert to prior versions at any time. The free tier has 30 days of history while paid tiers have unlimited history.
XD
XD files can be save to Creative Cloud documents on the free tier. On paid tiers they can also be saved locally as .xd files.
XD also allows you to maintain document histories. By default these versions last for 30 days, with the option to flag specific versions to keep. I could not confirm if there is a difference between free and paid tiers for document history in Figma, but from available information it seems to be the same in both.
Winner: Figma
Why Figma Wins
Both Figma and XD have local and online / cloud saving, however Figma provides both of these options in their free tier while XD requires payment for local saving and has cloud storage caps. Additionally, Figma’s auto-saving function is very convenient and helps prevent lost work.
8b. Working Offline
XD
XD allows you to work offline at any time, however you will need a paid account in order to have saved your files locally before going offline.
Figma
Figma does allow working offline, but you need to have had an internet connection when you first began your session in order to properly load the software. After that you can continue working offline.
Winner: XD
Why XD Wins
XD is the only option of the two that allows entirely offline work. If you’re living or traveling in an area with intermittent internet connectivity, XD is going to be the better choice.
8c. Interoperability
Both XD and Figma have interoperability with Sketch in that they allow you to open Sketch files and continue working on them. Let’s see what other software each can interoperate with.
Adobe XD
Photoshop
You can right click an PNG, JPG, BMP or GIF image that’s been added to an XD document and select Edit it in Photoshop. The image will open in Photoshop, and after making your edits you can save the file and your changes will be reflected in XD.
You can also directly open a PSD in XD, an extra helpful feature if you want to work with template assets you have purchased from other designers that were made in Photoshop.
After Effects
XD already has strong animation functionality with auto-animate, but even more sophisticated animations and micro-interactions can be created by bringing After Effects into the workflow. You just select an artboard of layer you want to animate then export to After Effects where you can put your animations together.
Illustrator
It was mentioned earlier that vector illustration can’t really be done inline in XD because instead the idea is you use Illustrator as part of your workflow. To use Illustrator to edit vectors already in your document you can select them then copy paste vectors directly onto a canvas in Illustrator, then copy paste back again when you’ve finished editing. By the same token, you can copy vectors you have created in Illustrator directly into XD.
Figma isn’t designed to interoperate with other design software in the way XD is. However what you can do is copy vectors created in Figma as SVG, and then most vector editing programs, (like Affinity Designer or Inkscape), will allow you to paste those vectors onto their canvas for further editing.
Winner: XD
There really isn’t any significant competition between Figma and XD on interoperability–Figma isn’t designed for it, while XD
works in with other software in the Creative Cloud suite. Granted,
Figma already has strong vector editing tools built in, but XD definitely has an advantage in being able to
facilitate more advanced editing through Illustrator, Photoshop and After Effects.
8d. Integrations
Integrations with third party software is something I’m classing separately to interoperability, where the former facilitates a portion of workflow outside of mockup creation, while the latter is used during the design process.Let’s check out a list of the integrations XD and Figma support.
Note: In some cases there may be plugins that enable extra integrations but we are focusing on official integrations.
Adobe XD
Showcase
Behance
Handoff
Zeplin
Avocode
Sympli
Advanced Animation & Prototyping
ProtoPie
Kite Compositor
Team & Project Management
Jira
Microsoft Teams
Slack
Figma
Showcase
Figma Community (beta)
Dribbble
Handoff
Zeplin
Avocode
Advanced Animation & Prototyping
ProtoPie
Principle
Flinto
Team & Project Management
Jira
Trello
Receive Comment Notifications in Slack
Style Guides
Zeroheight
File Sharing
Dropbox
Winner: Draw
Why a Draw
Figma may have more integrations that XD, with 12 vs. 9, but that in itself is not inherently meaningful. Rather, it’s whether the apps you use in your workflow are supported that determines the value of these integrations. As such, given both have a solid offering of integrations in multiple categories, we’ll call this one a draw.
8e. APIs
Figma has an API that allows design files to be output as JSON data, can read & write comments, and generate image files. This allows development of all kinds of integrations into a Figma based design workflow. For example,
Uber used the API to display in-progress designs on TVs around their office, and allow staff to peruse them through an in-house browser based showcase.
Microsoft used the API to facilitate an automated design handoff process they estimated reduced their workflow by 70%.
GitHub built a system that allows their entire icon system to be managed from a single design file.
The API is openly accessible to anyone with a free or paid Figma account.
Winner: Figma
Why Figma Wins
XD doesn’t have any sort of API. Figma does, and it’s been used for very beneficial purposes so far.
For a while only XD had plugins and it was a pretty significant advantage over Figma. However now both XD and Figma have plugins, so the strength of
each in this category will probably come down to how applicable the plugins for
each application are to your specific workflow.
Both Figma and XD have a healthy plugin ecosystem right now with a lot of useful community made tools.
Note:
Figma does have the additional feature that in the Organizations tier
private plugins can be created and used, however given that’s only on
the highest tier it’s probably not enough of a differentiating feature
to say that Figma’s plugin system will be more valuable to most
designers.
Section 9. Final Scores
Figma Wins: 14
1. Pricing
2. Supported Platforms
3a. Collaboration
3b. Sharing
4a. Frames vs Artboards
4b. Grids & Guides
4c. Layout & Responsive Emulation
4d. Creating Vector Graphics
4e. Fonts
4f. Styling
5b. Color / Effect Styles
7a. Code Generation
8a. File Saving
8e. APIs
Adobe XD Wins: 7
5c. Text / Character Styles
6a. Interactions
6b. States / Swapping
6c. Animation
7b. Image Exporting
8b. Working Offline
8c. Interoperability
Draws: 4
3c. Previewing
5a. Components
8d. Integrations
8f. Plugins
Overall Winner: Figma, 14 to 7
At this stage Figma remains a fairly dominant winner over Adobe XD with 14 wins to 7, and the remaining 4 points of consideration a draw. There are still conditions in which you might prefer Adobe XD though, and that is if the 7 areas it wins are more important to you than the 14 areas Figma wins.
XD has a good chance of being better for you if you’re already deep into working in the Adobe ecosystem. If you’re all in on Adobe software and you want something better for interface design than AI or PS but still in the Creative Cloud family, XD is your solution.
Additionally, XD’s area of stand out strength at the moment is its prototyping, having
taken the win in our three prototyping subsections: Interactions, States and Animation.
XD also might be a better choice for you if you don’t have access to reliable internet or want to use desktop native / non-web-based software
If collaboration is a high priority to you and your team, Figma is currently unrivaled in this space. It’s been built from the ground up with collaboration in mind and as such it will be hard for any other app to knock it from the top spot in the near future.
It also currently outpaces XD quite considerably as a design tool, taking the wins in all six of our design subsections: Frames vs Artboards, Grids & Guides, Layout & Responsive Emulation, Creating Vector Graphics, Fonts, Styling
And finally, if you have team members who utilize Linux or ChromeOS, Figma has the cross-platform support to provide for these platforms.
The Race Continues
When Adobe XD first came out, it was really no significant competition to Figma at all, acting more as a better option for Creative Cloud based interface designers than was Photoshop or Illustrator. However since then, while Figma may still be ahead at the moment, XD has certainly closed the gap quite a bit.
The competition between Figma and XD goes on, and each program is most certainly pushing the other to keep stepping up its game. We see features that were exclusively in one appear in the other on a fairly regular basis. The pressure they apply on one another to innovate is yielding excellent results for us as designers.
So whichever you decide to use in 2020, keep an eye on what the other is doing as, who knows, it might become your new favorite at any moment.
These days, it’s becoming more and more common for couples to meet online. In fact, research suggests that staggeringly, almost 40% of heterosexual couples and 65% of same-sex couples now meet online. With figures like that, it’s clear that dating websites offer huge business opportunities. However, with almost 8,000 dating sites now available, your site has to be a cut above the rest in order for it to last any longer than a fling.
Going well..
How to Create a Dating Website
It may be a competitive market, but today there are plenty of options available to you that will help you design and create a dating website even if you don’t have extensive design or development experience.
One route is to simply pick a high-quality dating theme for WordPress from ThemeForest before customizing them based on your own requirements. Or, you can download PSD app or website templates which you can then edit yourself—this option requires access to software like Photoshop.
Tips For Dating Website Success
1. Make Search Your Priority
For users on a quest to find love, you need to make search functionality a priority. Many templates include either simple search bars or boxes right at the top of the homepage so users can immediately begin their hunt to find the perfect partner.
2. Don’t Miss Monetization Opportunities
Online dating is big business, so make sure you don’t miss getting a slice of the action. With WordPress plugins like WooCommerce, you can monetize your site by asking people for sign-up fees or enabling people to purchase merchandise.
3. Remember Location, Location, Location
It’s all very well helping someone to find the perfect partner, but if they’re based on the opposite side of the world, meeting in the real world becomes trickier. Many WordPress themes or app templates give users the option to share their location in exchange for finding more relevant matches.
Best Selling Dating WordPress and PSD Themes
Read on for 20 of the best WordPress dating themes and templates—all are available on ThemeForest.
This classically designed WordPress theme places a search tool front and center so users can immediately start to scroll for their perfect match. It’s also WooCommerce ready so you can easily collect subscriptions from users to monetize your business plan. Plus, if you want to add membership levels, i.e. gold, silver, and bronze memberships, it’s easy to do so—you can restrict certain pages for users who pay the full fee.
Again, LoveStory offers everything you’d need from a dating site WordPress theme. Search functionality is right at the top to enable users to embark on their journey to find love. The template also includes lots of space to include text around users’ profiles, success stories, as well as useful tips surrounding how to find your match.
Like many of the best dating WordPress themes, users can also edit profile fields, upload photos, add favorites, view gifts and read messages, edit privacy settings without even needing the WordPress back-end.
This dating site theme WordPress couldn’t be easier to navigate—a quality that is sure to be popular with its users! Once you scroll past the simple search bar, you can start to take your pick of a selection of profiles, or you can select by country.
Fully compatible with WooCommerce, a nice feature is that users can pay for their profiles to be ‘featured’ on the homepage to help boost the number of times potential suitors could come across their profile.
This super versatile dating wp theme is clean in design, meaning it can be used either for a dating website or for a whole host of community or social network websites. Like many other WordPress dating themes, the design enables users to create friend connections, share private messages, follow activity streams, join user groups, and receive notifications.
You can also easily search for relevant profiles and integrate social sharing buttons. It comes with MailChimp integration so you can send regular newsletters to your users.
Besocial - BuddyPress Social Network & Community WordPress Theme
With a full-width header that allows for video or imagery plus plenty of large imagery showing profiles, the Gwangi WordPress dating site theme is sleek and modern. The dating website template even offers the option for setting up a shop selling merchandise relevant to your business.
You can also create interest-based groups so members can find others with relevant hobbies to them.
Gwangi - PRO Multi-Purpose Membership, Social Network & BuddyPress Community Theme
With three demos: one for education, one for hotels and restaurants, and the final design for dating, Plaza is another versatile option. It comes with a large search tool, a video player, user testimonials, newsletter functionality, plus a clean and clear pricing table.
You can also include subtle animations that bring the page to life when a user scrolls over certain content blocks.
This content-rich WordPress dating site template opts for a sleek bar under the header to enable users to find potential matches—different in design to many of the sites that pick a large search box. You can then easily explain how to use the site with the help of visual cues and icons.
The option to include numerical facts alongside icons, i.e. how many members and how many men and women are currently online also helps to tell the story of the site. Users can also view pages dedicated to success stories of people who met on the site.
With more than 30 demo templates to choose from, the developers behind Wealth know their stuff! The WordPress dating template included within this theme puts the sign-up call to action right at the top, aiming at attracting new members. It also includes content blocks for information about how the website works, recently joined members, plus success stories.
This premium HTML template is also a great option for dating and community websites. The demo shows just what’s possible—from registration sign-up box, to full-bleed videos, to blog posts, to Google map integration. It’s also praised for its well-coded, modern, and responsive design.
VeroDate - Dating Social Network Website HTML Template
This responsive landing page is crafted for use with social or dating websites. At just $10, it’s one of the cheaper options out there so this is the perfect choice if you’re designing a dating site on a budget. The search box is one of the simpler out there, simply asking the user to tick the icon based on whether they’re looking for a man or a woman, and include the age range. There are also plenty of calls to action asking for users to sign up.
If you’re looking to create a dating app, then this is another brilliant option. The Sketch file includes designs for 22 iOS screens (all designed for iOS 11 and iPhone X), as well as vector shapes, and retina and organized files. You can also easily change the colors based on the look and feel of your dating site.
With sleek sliders, the Lovebird HTML5 template will help your website to look just as professional as any of the heritage sites already out there! The demo template shows what can be achieved with the design if text is kept to a minimum.
Subscribers are included near the site’s header, showing the variety of people who use the site. You can also scroll through the demos to see how the site adapts based on different color schemes.
This cute dating website theme is decorated with animated hearts, a feature that quickly makes it clear what the site is for! The $5 package comes with 11 PSDs, including a fun error 404 page that says: “Page not available but Stanley is.” There is also a great page calling out how long users have to wait until the site is launched—a great technique to build excitement!
Bold color helps to set this dating theme apart, as well as aesthetically pleasing curved content blocks. There is also a strong interactive element, with users able to click on a map to view profiles of users in that location. Scrolling testimonials also help to show how many happy customers have benefited from the site. The HTML5 template includes free Google fonts and icons.
With 14 prebuilt screens, the Lunchmate template quickly shows you how professional your app could look! The UI kit has been designed with the aim of helping people to discover people nearby or to make friends and find people to eat lunch with.
It’s clean, modern, and minimal in style—clearly, a simple user experience has been the top priority for the designers behind Lunchmate.
This Photoshop PSD template includes 37 fully layered PSD files, 3 homepage layout options, shortcodes and modules, plus a boxed and wide style. The simple designs include different color variations so you can include the one that best fits your preferred style.
Another PSD template that is editable with Photoshop, Randki includes 19 mobile app screens that you can use for inspiration for your app design. The templates show how easy to navigate the app can be, allowing new users to provide information including body type, height, education, and lifestyle habits. Design for direct messaging is also included.
Packed with 70 screens, this Sketch file comes with all the designs you need to bring your app to life. It has it all—from visual welcome pages, to several sign up pages, to plenty of different screens showing what the app will look like when users are searching for and interacting with members.
You can even see how audio messages will look when shared via direct message, as well as how the user interface will look when it’s separated by chats and calls.
With bright colors and on-trend gradients, it’s difficult to miss the Dattero template. Editable within Photoshop, the template shows everything that’s possible—and the developers have decided to avoid brevity!
You’ll see content-rich pages for membership details, which include an intro to the individual, key stats, information about their interests, what others say about them, as well as photographs showing their best memories.
Dattero - Dating, Marriage Agency & Matrimonial PSD Template
Last but not least, Mewer is a dating app Sketch file template complete with 20 designed screens. Coming with features including free Google fonts, vector shapes, and pre-made layouts, this is a great option for those looking to create an iOS app.
Designers have included screens showing how the app can look when users are searching for nearby people, plus the direct message screen—in both light and dark versions.
Mewer - Dating App Ui Kit Sketch Template
Find Your Perfect Match!
Now you’ve explored 20 dating site themes and templates, you’re all set to get going! The choice you make will depend on the software you have available, so picking a WordPress dating site on ThemeForest, for example, will be the best option if you don’t have Photoshop. If you still haven’t found your template soulmate, then head to ThemeForest and scroll through plenty of other options until you find your perfect match.
Do you have any other themes you think should have made the list? Let us know in the comments below!
The number of companies selling technology-based products and
services is constantly growing. Whether it’s information technology (IT)
services or the next big mobile app, there is no shortage of options
in the marketplace.
In such a crowded space, a great website can literally mean the
difference between a visitor turning into a customer, or not. It’s the best
place to showcase what makes your company stand out from the
competition. Therefore, you’ll want to build a website that both
informs and impresses potential clients. But how?
The best approach is to start with a proven foundation. That’s where
the right WordPress theme can put you on the fast track to success.
Today, we’ll help you pick the best free or premium technology theme
for your WordPress website.
The Best Startup Themes for WordPress on ThemeForest
Looking for the perfect theme for your IT, software, or technology
company? You’ll want to check out the great selection at ThemeForest.
Part of the Envato marketplaces, ThemeForest has thousands of premium
themes to choose from–including over 300 technology themes.
WordPress Technology Themes on ThemeForest
Top IT, Software and Technology WordPress Themes
Now, let’s review some of the top WordPress technology themes
available. Some are free to download, while others come at a very
reasonable cost. Regardless, each one can help both established tech
companies and startups build an amazing website in a fraction of the
time.
When it comes to promoting your mobile app, simple is often better.
Appset offers 12 beautiful demo landing pages that offer concise,
highly-visual layouts. Also included are a number of inner page
templates for downloads, a blog and FAQs, among others.
Setech offers technology companies a clean layout and tons of
flexibility. You’ll find plenty home page and secondary page templates,
along with headers and modal windows. There’s also a comprehensive
theme options panel to help you achieve just the right look.
Setech - IT Services and Solutions WordPress Theme
Artificial intelligence (AI) is a growing sector and one that can be
applied to many industries. Vizion is a WordPress theme that can help
spread the word about what this technology can do to your intended
audience.
With more than a dozen demo home pages covering industries
like education, healthcare and finance, you’re sure to find one that
fits your niche.
Saasland is a software company WordPress theme that aims to be an
all-in-one business solution. It not only includes 25+ home pages, 100+
total pages and 250+ elements/blocks, it also features a chat and help
desk plugin. This allows you to not only sell to your customers, but
provide service after the sale.
Saasland - MultiPurpose WordPress Theme for Startup
Start building a website for your tech startup in minutes with
Jumpstart. The theme is compatible with the Gutenberg block editor,
making page layout easier than ever. There are also extras such as a
selection of premium plugins, icons and graphics included.
Startit offers the flexibility to help you build a website for just
about any type of tech company. With 21 home page layouts, tons of
custom shortcodes and the inclusion of mega menus, you’ll have all the
tools you need to make a strong first impression. In addition, the
theme has been built with customization in mind.
Cryptocurrency, such as Bitcoin, is big business these days.
Crypterio is a WordPress theme that will help companies in this niche
hit the ground running with a variety of premade demo sites to choose
from.
Whether you’re a consultant, agency or are promoting a new
currency, there is plenty here to get you started.
Crypterio - ICO Landing Page and Cryptocurrency WordPress Theme
Sydney is a free theme with a solid selection of features. It’s
compatible with Elementor page builder and offers a variety of custom
blocks for the plugin. You’ll also find a slider, parallax backgrounds
and a robust theme options panel. Perfect for the startup on a budget.
Taking advantage of the Gutenberg block editor, The SaaS X theme
includes 100+ custom blocks with multiple variations to help you build
stunning webpages faster. It’s also geared towards software, SaaS
providers and startups, with lots of home and interior page layouts to
choose from.
If you’re looking to take a modern approach to WordPress
site design, this theme is a great choice.
TheSaaS X - Responsive SaaS, Startup & Business WordPress Theme
Pursuit is all about ease of use. It features a guided setup process
and the ability to design page layouts on the front end. There’s also a
focus on lead generation, and the included form builder will help you
grow your contact list.
Whether you’re looking to promote a single mobile app, or even run
an app store, Applay includes must-have features.
The unique screenshot
layers effect lets visitors explore app screens in 3D, while an auto
fetch feature brings in data directly from the Apple App Store or
Google Play. WooCommerce support means that you can also sell your apps
in style.
Give your technology product or service the benefit of a standout
look with Ayro. The theme includes a dozen colorful home page layouts,
along with a number of beautiful portfolio styles. You’ll also find
exciting extras like page transition effects, custom shortcodes and a
number of header options.
With a clean, modern look, Fluid will provide a great home for your
startup. The focus here is on beautiful imagery and well-organized
text, allowing your product’s message to stand out. Inside you’ll find 9
home pages, flexible page layouts, social media integration and more.
A great landing page will provide visitors with a visually
appealing, clean, easy-to-read layout. vApp offers up 20 beautiful
landing pages for you to choose from, along with a number of other
essential pages. It also works with the Elementor page builder plugin
and includes 39 custom addons.
Appon bills itself as a “multi-concept” software company WordPress
theme, with the flexibility to serve SaaS providers, apps or other
digital companies. Inside, you’ll find lots of tweakable theme options,
pricing tables, animation effects and a wide array of portfolio
layouts. WooCommerce compatibility means you can sell your products or
services with ease.
One secret to a quick design process is having access to premade UI
elements. Techland includes over 100 of them, perfect for getting your
technology-based website up and running in less time. There’s also
plenty of space to create your own unique identity with a detailed
theme options panel. Also included are a number of home pages, hero
areas and headers to complete your website’s look.
Need a free WordPress theme to provide a solid foundation for your
tech company’s website? Futurio fits the bill with 10 demo sites and
the ability to customize just about everything. It works with Elementor
and features a selection of custom widgets.
Futurio Free WordPress Theme
Tips for Building a Great Technology Startup Website
1. Ensure a Great Mobile Experience
Making sure your website looks great on both phones and tablets is a
given these days, but especially important in the tech industry. If
you’re promoting your own mobile apps, well, it’s indispensable. Thus,
it’s good to know that all of the themes above are responsive.
2. Keep It Simple
Whether you’re a software developer or provide high-end IT services,
it’s likely that your job is complicated. Users, however, don’t need
to know all of the details. Therefore, you’ll want to make things as
simple as possible for your visitors. Use lay terminology and keep text
to a minimum. Also, make sure to utilize photos and infographics to
get your point across.
3. Make the Benefits Crystal Clear
The tech industry is overflowing with competitors. Potential
customers are going to make choices based on what a product or service
can do for them. That’s why it’s vital to put your selling point front
and center. It might be a killer feature, great customer service or a
better price. Whatever it is, make sure users don’t have to dig for it.
4. Include Multimedia Demos
If you’re selling software, users will want to know what they can expect before they download and install your app. A quick video demonstration can provide this information and increase user interest.
5. Keep Your Content Updated
Tech companies, especially startups, are expected to be on the
cutting edge. Having outdated information is a big turnoff. Take
advantage of the great content management features in WordPress to
publish blog posts with new features or even a changelog. This lets
customers know that you pay attention to the details.
WordPress Themes for Building a Great Startup & Technology Website
When building a WordPress website for your hi-tech company, it’s
important to start with the right theme. This will speed up the process
of taking things from concept to launch. And it will offer a set of
features that should be of particular interest to your industry.
Each of the themes in this roundup will get your project off to a
running start. And, they cover a variety of niches and use cases.
Choose the one that fits your needs and use it to build an amazing
website!
According to a study of Google search trends, food blogs are the second most popular type of blog (ranked between fashion blogs and travel blogs). And it’s easy to see why–cooking is an essential part of life for everyone, and food is something that has always brought people together.
Food blogger
Given the accessibility of learning the skill of cooking and the multitude of secrets and insights that are available in any culture's cusine, the desire of sharing further the knowledge is ever-growing. What initially started as people creating their food blogs and sharing what they know in picture and text formats, has now become top Michelin chefs creating their social media accounts. With video content being the most engaging type of content nowadays, there is perhaps no better time to create a video food blog or magazine. For this specific reason, we have showcased a plenty of premium food WordPress themes that you could use either for your new blog or refreshing the style of the existing one.
2 Things To Consider When Choosing a Food Blog WordPress Theme
1. Keep it Clean
A food theme has to have a minimalistic style, an appealing design, and an clean feeling. A food-oriented theme's design should not obstruct the actual content, and visitors should be left with a sense that the website is as sanitary as any professional kitchen or food vendor.
2. How Often Are You Posting?
Another important feature to look after in a food blog WordPress theme is the right layout that fits your posting schedule. If you post more often, consider going for a magazine-like layout because it will display more posts in plain view–making it easier for your audience to find recent posts.
WordPress Food Blog & Recipe Themes on Themeforest
If you’re looking to launch your career (or side project) as a food blogger, or you’re just looking for a place to share photos of your weekend experiments with your new slow cooker, creating a website for your work is the first step. Here are 20 WordPress themes that are ideal for food blogs and recipe sites:
This WordPress theme is made for food bloggers, and it’s super easy to install. Users can submit recipes to the recipe directory, and there’s even a tool to add or search by ingredients. There are seven different blog layouts, responsive design, Google fonts, and gallery posts.
With a 5-star rating, this theme has a grid-based layout, similar to popular food site Foodgawker. There’s a “random post” section where you can highlight articles from the archives on the home page, making the most of your content.
A creative WordPress theme that’s geared towards recipes and ingredients. It has four different post styles, which is nice if you want to add some variety to your site. The rectangle feature/accent color for categories makes the design of this website stand out.
An elegant WordPress theme for “food, travel and lifestyle bloggers”. There are 600+ typography options, color customization, and 3-column sliders. The theme is rated highly for their support team, one reviewer saying that they “are all about ensuring that you get the best experience possible”.
This one is more geared towards restaurants, but it’s an adaptable theme. It has a strong anti-PDF menu stance, promising “the less annoying food menu” with a clean, elegant and SEO-friendly menu design. It’s compatible with OpenTable, the world’s most popular service for restaurant reservations.
If you’re feeling non-committal, this theme offers a try-before-you-buy feature with full access to the demo version. It’s built to create a community for those who love to cook - with searchable recipe ingredients, a recipe database, and more.
Your readers can even add recipes, making it crowd-sourced and collaborative. There are ten layouts for different recipe pages, and you can show the view count for each recipe.
A filterable, super-searchable recipe directory theme. Choose by category, or browse top-rated or recent recipes. There’s also a blog post feature that’s separate from the recipe feed, which would work well for blog announcements, giveaways, or other non-recipe writing. It’s fully responsive and works with Google recipe view.
Another WordPress theme that features grid-based design and a spacious, easy to navigate homepage. It’s an uncluttered look that’s great if you don’t have too much content or plan on publishing less frequently.
This theme works with Wordpress.org and Wordpress.com (they’re different!). It comes with UNYSON, a free drag-and-drop page builder. It promises that building a page will take less than three minutes, and they’ve got installation videos and how-to’s to guide you through the process.
BlogOn is a blogging-focused theme that’s adaptable for food bloggers and recipes. It’s creative and simple, with different options for logo headers, carousels, and feature posts. If you want to mix up the white-background style and add a background image or other bold design choices, that’s an option, too.
Pretty, modern design and a grid-based layout make this theme from MeridianThemes a top choice. It has a high rating from users, and it fits a lot of recipes on the home page–perfect if you are publishing often or have a big library of recipes to showcase! With 19 different modules all designed by expert web designers, there’s room for customization to build your perfect site.
Is your website optimized for Google AMP? With AMP, mobile pages load faster and are given preference in search results. Recipes are one of the top-searched categories out there, and loading time matters. This theme is optimized for AMP on mobile, and it’s also SEO-friendly.
Superfood is another sleek-looking, premium WordPress food theme that feaures exquisite imagery and very realistic mockups and illustration. With a minimalistic yet highly sensitive design style used throughout the theme's pages, it will be a great choice when it comes to refreshing your food blog or website.
Especio | Personal Gutenberg Food Blog WordPress Theme
Especio is an image-heavy, magazine-styled premium WordPress food theme that will work great for a how-to food blog or magazine. With bright colors, a minimalistic and lively style, the theme will definitely complement any food imagery.
Another reason to pick this theme amongst the bunch is its great typography that pairs well with the airy feel and look of the theme.
Setwood is a minimalistic WordPress theme that comes with free lifetime updates, great support and outstanding customer ratings. With a fully-responsive layout and a functional WooCommerce integration, this theme will work great for launching your own shop alongside your blog.
Cuisine is another light, minimalistic and fully responsive premium food WordPress theme. The theme features a custom recipe plugin, multiple page layouts, unlimited color schemes, and custom widgets so that your customization options are virtually unlimited. Coming with importable demo content, it is extremely easy to swap the content on the site with your.
With more than a couple thousand sales, Food & Cook proves to be a theme that has all the bells and whistles you could potentially need for your website. Featuring YouTube and Vimeo compatibility for video embed, this theme will be a great choice if you plan on creating a video recipe food blog or magazine.
Narya, the last premium WordPress food theme in our list - is a beautiful, airy and minimalistic theme that comes packed with features. With the Essential Grid plugin, Revolution Slider, CSS3 animations and 6 homepage and blog layouts, you can hardly go wrong if you choose to go with this theme!
Get Cooking!
With this range of themes to get you started, you’ll be up and running with your own foodie-website in no time. Enjoy!
Use high-quality WordPress calendar plugins and widgets for events, bookings, and appointments. These plugins are easy to set up and will help you meet all your calendar needs for your business.
By adding a premium calendar plugin or widget to your website, you can provide your customers and potential customers with important information about your business and even collect payments for bookings.
In this article, we will feature a selection of the best-selling calendar WordPress plugins and widgets from CodeCanyon. These premium calendar plugins and widgets are designed to give you complete control over the calendar creation process and help you set up a calendar or booking system that fits your particular business. We'll also cover some of the best free calendar plugins and widgets for you to download if you're on a tight budget.
The Best Calendar Plugins and Widgets on CodeCanyon
Explore over 7,000 of the best WordPress plugins ever created on CodeCanyon. With a low-cost one time payment, you can purchase these high-quality WordPress plugins and improve your website experience for you and your visitors.
Here are a few of the weekly best-selling and up-and-coming calendar WordPress plugins and widgets available on CodeCanyon for 2020.
These versatile calendar plugins and widgets allow you complete flexibility over the calendars and functionality of the calendars that you show your audience. Here a few of notable features of the calendar plugins and widgets offered:
create custom events, classes, bookings, and meetings
appearance editor
filterable, sortable, and searchable booking list
Google Calendar integrations
WooCommerce integration
If you need to implement any type of calendar, booking, or scheduling into your WordPress website, then head on over to CodeCanyon and choose from the premium plugins available.
Top 20 WordPress Calendar Plugins and Widgets (From CodeCanyon for 2020)
Here are 20 of the best-selling WordPress form plugins that are available for you to download on CodeCanyon:
EventOn is a multipurpose WordPress event calendar plugin that gives you all the things you need in a calendar.
It has a clean, minimal design, and you'll be up and running quickly and easily.
Major features include:
set unlimited images for an event
Google Maps integration
calendar widgets and shortcode generator
event categories with custom color assignments
social share
Not only can you customize each event with images, maps, icons, colors, and more, but you can also configure your calendar to search and sort in several different ways.
EventOn is a nice, easy-to-use event calendar plugin that also offers a unique slider addon.
You can book and schedule just about anything with this WordPress plugin.
Bookly is an incredible appointment booking system that blurs the line between a WordPress website and a web application. It is well designed, fully responsive, and even supports gestures.
You'll also find:
a form builder
Google Calendar sync
WooCommerce integration
SMS and email notifications
several online payment gateways
and a whole lot more
This plugin allows customers to book and cancel appointments, update personal information, and send payments.
There's also the ability to create schedules for each staff member—you can even block out holidays.
Bookly's customization options and useful features make it more than just a way to serve customers well—it also helps the website owner keep track of staff and appointments at the same time.
Amelia is a simple and powerful plugin for accepting online appointments and bookings. It features a good range of elements and components that make it easy to create beautiful layouts, even when you have no coding experience.
Amelia also allows for Google Calendar synchronization. It is the perfect plugin for gyms, spas, law consultants, fitness experts, etc.
Other key features of this plugin include:
powerful admin dashboard
real-time SMS notifications
smooth UX that provides a seamless booking experience in just one page
There are certain features that you expect with a WordPress calendar plugin; however, there are a few features that set a plugin apart. Take a look at WordPress Pro Event Calendar, and you'll see some advanced features that make it stand out from the pack.
Well designed and fully responsive, this plugin has some great features:
WPML support
fully responsive layouts
flexible event settings
Google Maps integration
subscribe to a calendar
custom fields and date range support
and more
But what really sets it apart is the ability to import events from ICS feeds and Facebook.
Best of all, WordPress Pro Event Calendar accepts events submitted by front-end users, making it easy for users to add events.
Here's another great option for setting up a fully functional event booking system.
Event Booking Pro is very pro as it boasts over 600 settings!
There are a lot of features with this WordPress calendar plugin, and they are always adding more. Here are a few:
user-friendly event creation
very customizable, including text, emails, color, size, padding, and borders
unlimited events
AJAX control panel
offline and multiple booking
PayPal, coupon, and CSV integration
and many, many more
There's no shortage of shortcodes, it supports CSV, and everything can be customized and styled as you like, making it fit into your WordPress theme design perfectly.
Events Schedule is a simple yet powerful WordPress events calendar that lets you schedule classes and events in seconds. It is the perfect plugin for any event organizer.
When it comes to search and filter, Events Schedule offers five filter categories: namely type, location, instructor, day, and time of the day.
The Timetable Responsive Schedule for WordPress plugin offers a new approach to WordPress calendar plugins.
With it, you can create a timetable of events easily! Use the Timetable shortcode generator to create timetable views for classes, medical departments, nightclubs, tutoring, and so on.
Quickly create a timetable by:
adding a new event with day, time, category, and more
adjusting and configuring the design and appearance
generating your shortcode and placing it into a post or page
And that's it!
There are plenty of event options and many different shortcode options—a color picker and font configuration are included.
Booked is another great appointment booking option. It features an advanced appointment calendar which allows ease of management of appointments. It also gives you endless color possibilities when it comes to the design.
Other features include:
guest booking
looks great on any device
customer profile pages
custom login and registration pages, time slots, and custom fields
The WordPress Events Calendar Registration and Booking plugin is feature-rich, offering some options you'll only find in plugin addons.
Everything you need (and maybe more) for successfully setting up a fully functional registration and booking system is right here.
This "out of the box" solution includes:
shortcodes
a color picker
multilingual support
Google Maps integration
recurring events, tickets, and coupons
social media sharing
responsive design
and more
One of the best features of this plugin and others is the countdown timer for all your events. It also features a stats dashboard that lets you keep track of payments and attendees and view the latest events and event categories.
Like several of the above-mentioned WordPress calendar plugins, Booki offers a full booking system using WordPress.
There are so many great applications for this type of plugin, with each plugin offering a unique perspective on the appointment management process.
You can set up unlimited booking projects and service providers. Options include:
add optional extras for bookings
online payments via PayPal Express
offline payments—book now, pay later
admin stats page with summary information
sync bookings to a provider's Google Calendar
and more
As for the calendar itself, it displays your booking and appointment calendar with a popup, inline calendar, and more. It also has a stats page where you can view bookings and other information.
Booki is an excellent solution for booking appointments with multiple projects and service providers.
This calendar plugin doesn't try to reinvent the wheel. Instead, Team Booking ties directly into something you're already probably using: Google Calendar. Team Booking's mission is to:
Use Google Calendar to schedule availability.
Additional features include:
team booking
ability to add discount coupons
keep and export your data
supports Stripe and PayPal
appointment approval system
customized forms for each booking type
maps
and more
There are also a lot of great customer features, like displaying reservations and the option to cancel their appointments.
Team Booking is a fresh take on appointment booking calendars and leverages Google Calendar to the fullest.
This event plugin looks good and comes with out-of-this-world features. You can easily create single, multiple, and all-day events, or events that last for more than one day. You can showcase events in different ways including a grid, box, map, agenda, and more.
It also comes with a front-end submission form where users can submit events. Users can also share events via Facebook Messenger, WhatsApp, and Viber.
This event calendar plugin offers everything you need to get started in creating events.
Other key features include:
customizable event sections
a built-in booking system where users can book and pay for tickets and appointments
You can use a one-size-fits-all booking plugin for hotels and B&Bs, or you can use a solution built specifically for them. With the HBook hotel booking system, customers will be able to book directly from your website.
The plugin features powerful booking management that lets you view bookings and reservations. You can also synchronize your bookings with Airbnb. This snappy plugin includes:
seasons and rates tables
multiple payment gateways such as PayPal, Stripe, Square, and Mollie
availability calendars
customizable booking forms
booking forms and rules
and more
HBook has a clean design and is best configured for hotels, B&Bs, and more!
The Responsive Event Scheduler plugin is one of the best options for publishing event schedules on your website. It is suitable for music festivals, conferences, conventions, meetings, training, exhibitions, etc.
Features include:
built with standards-compliant HTML5 and CSS3—including SVG icons
one-click color customization
event image options
fully responsive
WPML ready
and more
Responsive Event Scheduler is not only impressive from a feature standpoint, but it's one of the best-looking options you're going to find.
As the name suggests, Chauffeur Booking System is a car reservation system suitable for companies of all sizes. It provides an easy way to book a vehicle based on distance, hourly rate, or a flat rate. It also supports WooCommerce and Google Calendar integration.
Webba Booking is specially designed and optimized for service providers, making it possible for them to save time and money. It provides a real-time, two-way Google Calendar synchronization. It also allows you to set different time zones, hence catering to customers all over the world.
Other key features are:
integrations with services such as PayPal, Stripe, and WooCommerce
unlimited appointment schedules
unlimited number of staff appointments and staff members
users can perform multiple bookings simultaneously
Responsive Timetable for WordPress is a flexible calendar plugin that can adapt to different types of businesses. This plugin offers the ability to create and showcase events with a clean and responsive interface. You can also create advanced filters for easy event filtering.
Other key features include:
customized fields
a built-in live editor
responsive interface
event popups
a custom CSS and color picker
5 Free WordPress Calendar Plugins and Widgets for Download in 2020
While the premium plugins and widgets listed above will give the most comprehensive set of features, purchasing a premium plugin or widget may not be in your current budget. That's why I've compiled a list of the top five free calendar plugins and widgets for 2020:
With this free plugin, you can create and manage events with ease. The features available on this plugin allow you to completely customize your calendar to fit your business's needs.
Simple Calendar is the easiest way to add Google Calendar events to your WordPress site. The plugin has a ton of great features including design templates, time zone settings, fully responsive calendars, and much more.
The All-in-One Event Calendar offers a clean visual design with a comprehensive set of features to create an advanced website calendar system. Give this free plugin a try! You won't be disappointed.
Sugar Calendar is a simple and lightweight calendar that provides you with all the necessary features for event management. The easy-to-use interface and the minimal set of features in this plugin will help you get your event calendar up and running in no time.
Whether you are running a real estate business, yoga class, or personal training, the Booking Calendar plugin can help you implement a great booking system. Add this plugin to your collection today!
How to Create a Calendar for a Yoga Class With WordPress Pro Event Calendar
Now that I have gone over all of the best free and premium plugins available on CodeCanyon, I will show you just how easy it is to create a calendar with one of the premium plugins. We are going to go over how to create a simple calendar that displays the times of our yoga class on a calendar with the Wordpress Pro Event Calendar plugin.
1. Create a Calendar
Once you have installed the Pro Event Calendar plugin, we will head on over to WP Dashboard > Event Calendar > Calendars so we can create the calendar that we want to be displayed on our yoga studio website. Next, click the Add new calendar button to create a new calendar. We will fill in the Title field to say "Yoga Calendar." Next, click the save button at the bottom of the calendar editor.
2. Create an Event
Now that we have created our calendar, it is time to add our event. Navigate to WP Dashboard > Event Calendar > All Events. Click the Add New button to create a new event. We will title this event "Yoga Class."
In the right-hand column, we will set up the details for this event. Our yoga class is every Monday, Wednesday, and Friday at 2 p.m., so we need to reflect this in the event. Under Start Time, we will type in "2 p.m." Under Frequency, select Weekly. Then select the checkboxes next to Monday, Wednesday, and Friday.
Finally, hit the Publish button, and the event will now be present on the yoga calendar.
3. Add the Calendar to Your Website
Now it is time to add the calendar to the website. WordPress uses shortcodes to add the calendar to your website, so we will go back to WP Dashboard > Event Calendar > Calendars and copy the shortcode that is under Default Shortcode. We will then click WP Dashboard > Pages > Add New and title it "Calendar".
In the text editor, we will paste this shortcode. Hit the Publish button, and that's it. We have successfully created our yoga calendar, and it's now displayed on a new page that we created.
This short tutorial only scratched the surface of what this plugin can do. I also have a more in-depth tutorial on this powerful plugin, so be sure to check it out!
Unlock the Power of CodeCanyon's WordPress Calendar Plugins & Widgets
To create a fully functional calendar and booking system on your WordPress website, download one of the many premium calendar plugins and widgets from CodeCanyon.
The feature-rich plugins on CodeCanyon will help ensure that the booking process is quick and easy, not only for your customers but also for you in the WordPress dashboard.
What are you waiting for? Get a calendar or booking plugin on your WordPress website today!
Whether you are running a blog or eCommerce business, you will need to convert your website visitors into subscribers in order to be successful. By adding a stylish and interactive popup and opt-in WordPress plugin to your website, you can easily convert your visitors into subscribers and eventually paying customers.
One of the many high-quality Popup & Opt-In WordPress Plugins available on CodeCanyon
The popup and opt-in WordPress plugins available on CodeCanyon will allow you to integrate a popup or form into your website to capture your website user's email addresses, which will give the opportunity to market to them in the future.
The Best WordPress Popup and Opt-In Plugins on CodeCanyon
Explore over 7,000 of the best WordPress plugins ever created on CodeCanyon. With a low-cost one time payment, you can purchase these high-quality WordPress plugins and improve your website experience for you and your visitors.
Here are a few of the best-selling popup and opt-in WordPress plugins available on CodeCanyon for 2020.
Best-Selling Popup and Opt-In WordPress Plugins On CodeCanyon
Opt-in and popup plugins are necessary tools for converting website traffic. Without these tools, you would not be able to capture emails on your website and your marketing campaigns will not be as effective.
By integrating the premium plugins available on CodeCanyon into your website, you will have access to the best popup and opt-in plugins available. Here are a few notable features of these plugins
social lockers
page-level targeting
customizable templates
sidebar widgets
slide in and modal popups
20+ Best WordPress Popup & Opt-In Plugins
Here are 20+ of the best-selling WordPress popup and opt-in plugins that are available for you to download on CodeCanyon:
Ninja Popups is one of the best WordPress popup plugins on Code Canyon, and that’s no wonder, as it offers a dazzling array of features and is integrated with a large number of email marketers. In spite of the plethora of features, this plugin’s drag-and-drop visual editor makes it very user-friendly.
Layered Popups is another WordPress popup plugin that allows you to create your own cool multi-layered animated popups. If getting your hands dirty with code isn’t your style, you can use this plugin to take advantage of over 150 beautifully designed ready-made templates.
ConvertPlus has an enormous library of over 100 beautiful ready-made templates, including WordPress popup forms. It's specifically designed to convert your site visitors to email subscribers, social followers and customers using a wide variety of customizable popups that are triggered by various user actions.
Key features:
over ten popup display positions
12 different visitor behavior triggers and filters
ability to re-engage inactive visitors with interactive popups
ability to tailor your offers to new, returning and logged-in visitors differently
WP Unlimited Pop-ups allow you to effortlessly create eye-catching and inviting looking popups without having to write a single line of code. This plugin comes with ten different popup styles for you to choose from to ensure it fits your website's theme.
Here are a few notable features of this powerful plugin:
PopupPress is a WordPress popup plugin that's all about variety. It allows users to insert any type of content in a popup, be it video, photo slider, disclaimer content, audio, text, or banner ads—you name it.
Usernoise Pro has one purpose: to communicate with your site visitors through feedback. The feedback icon sits unobtrusively on the left side of the screen and flies out when clicked. It's a fast and easy way for your visitors, customers and clients to ask you questions, give you feedback, or send you compliments.
Key features:
support ticket status tags like “New”, “In progress”, or “Rejected”
Modal Popup Box For WPBakery Page Builder can be bought as a standalone, or it comes bundled with CodeCanyon’s top-selling Ultimate Addons for WPBakery Page Builder. The plugin allows you to add popups for a wide variety of purposes: opt-ins for WordPress email subscription, WordPress popup shortcodes, images, videos, contact forms, or social media widgets.
This plugin allows you to offer free downloads on your website in return for users' contact details. Any free download can be offered in return for contact details. What is great about this plugin is it integrates with all the popular email service providers. This allows you to easily add new subscribers into your email service provider and set up sequences and workflows to market to the users who clicked your free download.
Opt-In Panda for WordPress takes a different approach to opt-ins. This plugin allows you to lock a valuable portion of content on a webpage, by hiding or blurring it, and asks the visitor to enter their email address (opt in) to unlock the hidden content. Opt-In Panda will appeal to users who can easily create or already have premium content or freebies that they want to offer to subscribers only.
Key features:
four types of locks
integrates with all the major mailing services and plugins
subscribe visitors through Facebook, Twitter, Google, or LinkedIn
ChimpMate Pro is an opt-in plugin designed specifically for MailChimp WordPress users to help convert readers into subscribers. The WordPress email plugin is highly customizable and allows full control over when and where popups appear.
Extend the functionality of your website with Side Tabs, an add-on for the Layered Popups for WordPress plugin, which allows you to create small tabs and stick them to any window edge. Clicking the tab opens the associated layered popup.
Master Popups is a powerful WordPress popup plugin for creating modal, full screen, slide-in, inline and widget popups, as well as notification bars. The plugin provides users with a number of pre-made templates that are easy to customize so that you can add any type of content within your popups. The plugin works with email services like MailChimp, Mautic, and GetResponse, but also allows you to capture subscriber info and save it directly to WordPress.
Popping Sidebars and Widgets for WordPress allows you to create an unlimited number of custom sidebars and overlays that pop out when clicked by visitors. The sidebars can be aligned vertically or horizontally as needed.
The longer your visitors stay on your site, the more engaged they'll be, and the more chance they'll convert. Videos have been proven to keep visitors on a website longer, so if you want to add videos to your site easily and seamlessly, why not try a popup? The WordPress Vimeo YouTube Popup Plugin allows you to easily create popup videos for your website that appears after a user clicks an element like an image or link. The videos used can be hosted by either YouTube or Vimeo.
Another innovative WordPress popup plugin, WP Flat Tour Builderallows you to create visual tours on your WordPress website in the form of a sequence of text, tooltips and dialog windows that guide the user through the different pages of the site. It can be launched automatically when a visitor arrives on a page or when the visitor clicks on a specific element.
Subscribe Popup is a WordPress subscription plugin that allows you to add a highly customizable popup window with an opt-in form to your blog or website. All data collected by the form is saved in a database or sent to MailChimp, iContact, GetResponse and Campaign Monitor newsletter systems. It can also be exported as a CSV file to be used with any other newsletter systems.
The Ultimate Modal Windows plugin allows you to create a wide variety of customizable WordPress popup forms and flyout panels and place them anywhere on your site.
What’s more, the plugin also provides six user behavior triggering options so that you can choose how and when you want the popups and flyouts to appear.
Key features:
a powerful and easy-to-use editor
MailChimp and GetResponse integration
ability to create any content, including feedback forms or social share buttons
Popups Generator is designed to make it easy to create a wide variety of popups on your site. It offers similar features and functions to Ultimate Modal Windows above, but an important difference is that it allows you to customize and fine-tune popup offers based on the activity of individual network users by using cookies.
An add-on for the Super Forms Drag & Drop Form Builder plugin, the Super Forms Popups Add-on doesn’t have the razzle-dazzle of some of the other popups featured here, but is a good solid choice for users looking to convert visitors to email subscribers.
Key features:
seven demo popups that can easily get you started
fully customizable
12 different visitor behavior triggers and filters
Looking for a fabulous MailChimp WordPress plugin? With MailChimper PRO, you can create stylish newsletter subscription forms that will help you capture the attention of your website visitors.
This WordPress subscription plugin provides you with a number of gorgeous WordPress sign-up templates which are easy to customize to your taste. Use the predefined templates including various popup options to save time, or if you prefer you can use the Visual Builder provided to design your own custom forms. The plugin supports MailChimp and a host of other database managers as well.
Key features:
Visual Builder for easy customization
popup and embed styles
connect with Google Analytics
social integration
view your subscribers directly on your WordPress admin
and more
5 Free Popup and Opt-In WordPress Plugins for Download in 2020
Paid popup and opt-in WordPress plugins will offer you the most comprehensive set of tools. These premium plugins have more features, oftentimes come with customer support, and the overall user experience is much higher. However, you might not currently have the budget to spend on these premium popups and opt-in WordPress plugins and still need to convert your website viewers into subscribers. Below is a list of five of the best free popup and opt-in WordPress plugins.
Optin Forms lets you create stunning opt-in forms for your blog or website. All you have to do to get this form up and running is to select the email service provider that you are using, pick a form design, and style the form. All of this can be accomplished without any coding.
Popup Maker is an incredibly versatile and flexible plugin. You can create various types of popups that will suit your website. You cancreate email opt-in popups, contact form popups, announcements, cookie notices, and much more.
Create and manage powerful promotion modal popups for your WordPress website with Popup Builder. Some notable features of this plugin are popup animation control, unlimited popup creation, and styling customization.
What is great about this plugin is its multilanguage support. This light-weight plugin is fully customizable and can suit all your popup needs for your WordPress website.
How to Add a Popup Form To Your Website with ConvertPlus
To show you just how easy it is to add a popup form to your WordPress website, I am going to create a modal popup using the ConvertPlus plugin.
Once you have installed the plugin, head on over to WP Dashboard > Convert Plus > Modal Popup. This will open up the Modal Designer dashboard where we will then click the Create New Modal button. From the next screen, we will be able to select the template that we would like to use. We will select the sixth template on the page. Hover over the template and click Use This.
Now it is time to edit the modal popup to fit our specific needs. We want this modal popup to be very simple. We would like to offer a free download through this modal pop and have the user click a button to receive this free download.
First, we will remove the ConvertPlus logo. Click on the logo and in the left-hand editor, click None from the drop-down menu. Next, we are going to change the text on the popup. We will change the top text to say, "Get Your Free Download Now!"
Now we will change the second level text to say "Click The Button Below." Then we will change the "Shop Now" text to say "FREE DOWNLOAD." Finally, we will add in our download link by inserting our link in the Button link field in the left-hand editor.
To make this modal popup go live on our website, we will click the gear icon on the far left-hand side of the popup editor. Click the Modal Status drop-down menu and click on the Enable Modal On Site button. There you have it! Your modal popup will be present on all of your WordPress website pages.
These powerful plugins will allow you to create any type of popup or opt-in form you require, style the popup or opt-in form and display it on specific pages of your website. These plugins give you all the tools necessary to boost your subscriber count.
Explore thousands of the best WordPress plugins ever created on CodeCanyon. With a low-cost one time payment, you can purchase these high-quality WordPress plugins and improve your website experience for you and your visitors.
Here are a few of the best-selling and hot new WordPress plugins available on ThemeForest for 2020.
VisBug is an incredibly useful extension for Chrome and Chromium that allows you to make point-and-click changes to any website right inside the browser.
Let’s check out what they are and how to access them in this quick look article.
Z-index Visualizer Plugin
Instantly display the z-index values of all your elements by clicking the search icon in VisBug and entering the letter z. An autocomplete option reading “/zindex” will pop up below. Click it to activate the plugin and a box will appear around your elements displaying the z-index value at the top.
Contrast When Hovering Over SVG
You can now hover over any portion of any SVG image and see what its color contrast value is relative to the surrounding background. First, select the "Accessibility" tool from VisBug, then hover over an SVG. You will see a tooltip appear above your cursor displaying the color contrast value.
Note that the value will display in a color matching the portion of the SVG over which you are hovering, helping you to ensure you are getting the contrast reading for the part of the illustration you intend to measure.
Colorblind Simulation
Like the z-index visualization, colorblind simulation is activated by way of a plugin.
Once again, click the search tool on the VisBug toolbar and begin searching for “color”. You will see an autocomplete option reading “/simulate-colorblind”. Click it to activate the plugin and you will see a box appear in the top right corner listing multiple colorblind simulation options. Select any of those options and you will see the colors of the page transform into a simulation for the specified form of color blindness.
Dark Mode Support
When your operating system is set to prefer dark mode VisBug will detect this and display its tools in dark mode as well, as pictured above.
Click to Pin CSS and A11y Tooltips
It’s now very easy to pin tooltips displaying information on CSS and accessibility. With either the “Info” or “Accessibility” tool active, as you move around a page tooltips will appear when you hover over various elements. In order to pin that tooltip just click in place.
This is best demonstrated in a GIF, as you’ll see in this tweet from VisBug developer Adam Argyle:
VisBug v0.2.21 released today 🎉 - minor bug fixes - minor UI nits - simpler CSS and A11y tooltip pinning (just click!) - new z-index plugin (thx @addyosmani💀🤘) - reduced motion aware - moar tests
Sometimes getting a fully custom-built website isn’t an option. For that reason purchasing an already made HTML template can be a lifesaver, especially when the template is easy to customize! Bootstrap is a superb framework because it’s well-supported, well-documented and very well-liked by developers, designers, and business owners worldwide.
Bootstrap is one of the most widely used frameworks and statistics don’t fall behind on proving that. Out of the top 1 million websites in the world, more than 20% use bootstrap in their libraries which proves that Bootstrap is rather helpful if you’re working in a mobile-first front-end web development environment. Ever since its release in 2011, the framework has been constantly updated and supported. While in 2013 it only had 1.6% of the market share, that grew more than a dozen times. The best part about Bootstrap is its flexibility which allows for it to be supercharged with a plentitude of Bootstrap UI kits and be integrated with Design Language Systems.
Bootstrap is a great tool for maintaining design patterns and consistency in design, but also in code. The fact that it’s the sixth most-starred project on GitHub proves that the repository isn’t only popular, but an ever growing and constantly used library.
Bootstrap’s Main Features
The main purpose of building with Bootstrap is to apply its choices of size, colors, fonts and grids which come in a form of basic style definitions across the full spectrum of HTML elements. This results in a robust and uniform appearance for certain elements and containers. Although the predefined style is good for building stuff straight out of the box, it is easily possible to modify and edit to your needs.
Bootstrap comes with several JavaScript components in the form of jQuery plugins which allow for additional UI elements to be added, such as tooltips, dialog boxes and sliders. The components in Bootstrap consist of an HTML structure, a CSS declaration and sometimes additional JavaScript code, permitting further functionality for certain interface elements.
Some of the most important features of Bootstrap are the layout components that are implemented through a CSS grid layout. The layout component of Bootstrap defines rows and columns and has come to become an industry standard used by both developers and designers alike.
“The [...] important benefit of open source is the vast community that surrounds this tool. If you ever run into issues with using Bootstrap there is a big community that is ready to help.” –
Brenden Thornton
Amazing Bootstrap Templates Available From Envato
I’ve gathered together over 20 amazing Bootstrap templates that will work perfectly for your static or CMS powered website.
These HTML templates are available from Envato Elements where you get unlimited downloads for a single fee.
We’re starting this list with the Pheromone Bootstrap template; a versatile and multi-purpose template that puts the focus on your site’s content. It comes with over 80 HTML files alone. Its overall minimalistic design is excellent for anyone looking to build a portfolio, blog, an online store, or even a full-blown corporate website.
Up next, we have a beautiful Bootstrap template that’s very well-designed. Visually, it has a clean look, with simple but attractive design elements, creatively used imagery, and uses stunning typography.
The template includes more than 120 demo page examples and has 32 block elements in hundreds of variations which is why this template can efficiently serve a wide range of needs.
Even though Coeus focuses heavily on cryptocurrencies, I like this Bootstrap landing page template for its fantastic color scheme. It’s bold, trendy and eye-catching. Whatever your industry may be, you can most certainly repurpose Coeus to make a fantastic impression on your visitors.
It comes with both light and dark color schemes, animations (including transitions, smooth scrolling, and parallax). Moreover, being built with Bootstrap, it’s mobile-friendly too. Coeus is a must have Bootstrap template if you’re looking to make a bold statement.
Brehoh is a fully responsive, single page design Bootstrap template. It’s perfect for online portfolios and resumes. It’s an excellent template for creatives such as photographers, videographers (you can use videos from Youtube as backgrounds), developers, writers or designers. It comes with a fully functioning contact form, sliders, and Ajax functionality.
The Andior Bootstrap website template is massive. It comes with over a hundred (yup, you read that right) HTML templates, as well as over thirteen homepages alone. It works well as a single page portfolio and a full website (even an online store).
Andior is (logically) fully responsive and very well-designed. It will do an excellent job for a freelance portfolio, an eCommerce shop or a corporate website.
I like Candy because it has a creative but simple visual design. It’s not over the top, which helps make it elegant, and the overall visual design of Candy comes across as trendy and modern. It’s a great template for anyone who wants a good looking website without having to make one from scratch.
Next up we have Celia–a multipurpose website that’s best suited for online portfolios. It comes with a variety of pre-made templates, designs, and blocks:
200 blocks and options
145 HTML5 pages
24 homepages
25 portfolio pages with 7 layout variations
12 blog pages
6 shop pages
14 sliders
….and a lot more!
It’s a massive Bootstrap template! Celia comes with many well-designed features and functions. It will be a wonderful template for you to customize for your next project.
LifeCoach is a Bootstrap template designed with coaches, speakers and mentors in mind (yup, its name is very much on point). The template files include PSDs if you want to redesign anything or if you want to see what your ideas would look like before taking the time to customize it with code.
Grandin is a Bootstrap admin template. It’s a great template if you need to create an admin dashboard for yourself, your clients or your company. It’s a large and diverse template that comes with multiple UI components, widgets, forms, tables, chars and the like. It will also function well for any custom eCommerce store if you’re looking to build a dashboard for it.
For more Bootstrap admin templates, take a look at this roundup:
Flone is the first exclusive eCommerce template we have on this list today! It has a huge collection of over forty customizable pages including over ten homepages, over seventeen shop pages, and more than six blog pages.
It’s cross-browser compatible and mobile friendly meaning you won’t have to worry about your website working in any browser or on any device.
OOPS is a collection of 404 Bootstrap pages. These pages are clean, simple and beautiful. Error pages like these can be really beneficial to a user journey, helping avoid confusion and assisting visitors on their way. I was super eager to include this one on the list. OOPS gives you a chance to make the best of bad situations when things go wrong on your website.
I like Parker very much; this Bootstrap template is extremely handy. It has a simple and elegant look to it, which is often all that you need. It’s well documented, fully responsive and W3C Validated.
It can be customized to any business whether it be service or product based, and any website type from SaaS, to agency portfolios, to eCommerce.
I love Seven because it’s a super clean yet creative Bootstrap theme. It’s exceptional as an online portfolio for creatives, however I feel it’s also perfect for those outside of the creative industry as well. It will help make an enjoyable and memorable first impression, whatever the subject matter, thanks to its well-designed look and feel. Of course, this Bootstrap template is mobile friendly, well documented and versatile. What else could you ask for?
Iosoon is an amazing Bootstrap template collection for two reasons. First, the visual design is bold, colorful and eye-catching. It’s distinctive, and that’s important for a coming soon page. Secondly, coming soon pages are often an after thought (like 404 pages). I love this template because it makes announcing your new business or website a lot more exciting for both you and your visitors.
Crispy is another Bootstrap template on our list that has a beautiful visual design. The typography, spacing, and visual elements have clearly been seriously considered when making this template. The template can be used for a variety of purposes such as a corporate website, a blog, an online portfolio, or a resume. It’s responsive and cross-browser compatible, and features a pricing table, milestones, app icons, client/team carousel, and video backgrounds.
Jestem (which means “I am” in Polish) is a designated online resume Bootstrap template. It has an elegant and minimal visual design, which is naturally fully responsive. It’s not a very complicated theme, but it’s certainly a quality one. It comes with two default homepage designs that in turn come with six color combinations.
Once again, I include Haswell on this list because it’s absolutely stunning. This template is exceptionally well-designed. It’s sleek, elegant and minimal in its visual design, however, this Bootstrap template is also very diverse. It comes with over 500 function blocks that allow you to thoroughly customize every detail. The code of Haswell is clean, non-dev friendly, and well commented too. It’s a beautiful and large template that’s simply a dream to work with!
Pogody is another “coming soon” template that you must check out. It’s an exceptionally good looking template; it’s clean, it’s lovely, and it’s the perfect coming soon page. The visual design isn’t overwhelming, and it catches attention pretty well–all important aspects for a coming soon page. Additionally, it’s well documented, easy to use, and full of features such as a “Special Typewriter Text Effect” and an Ajax contact form.
Last on our list today is Oumaila. This Bootstrap template has fantastic energy and vibe, because it was designed with bands and musicians in mind. It’s a single-page landing page that can actually be used in any industry. It’s fully responsive and retina-ready. It comes equipped with a Twitter feed, an Instagram feed, and a single album page.
App Landing is a creative, clean and modern-looking responsive HTML5/CSS3 landing page that is based on Bootstrap. With a great looking design on a wide range of screen sizes, Cooper is a beautiful theme that could be used for showcasing your next application or product.
Bacchus is creative one-page HTML template that is a great solution for any corporate website, a personal portfolio or a creative agency. With its ease of use and customization and a fully responsive design, this template proves to be a great choice when it comes to picking a template that is both functional and modern-looking
Metrica is a fully responsive, multi-purpose HTML5 template that’s based on Bootstrap. With a robust design yet built with flexibility in mind, this template will work great as the foundation of a corporate, portfolio, or one-page website.
The theme, which is component-based, comes with over 200 components that can be edited and rearranged for maximum flexibility.
Stellar, is a premium-looking template that puts an accent on beautiful design that is observed through beautiful typography choices, unusual but interesting content blocks and thematic imagery. For this reason, Stellar will be a great choice for freelance designers and photographers who seek to stand out with their portfolio.
Nobel - Minimal & Versatile Multi-Concept Template
Nobel is a minimalist yet versatile template that puts heavy accent on imagery and photographs in design. With 5 unique landing page designs, unlimited custom slideshows and 4 portfolio layouts - this theme will be a great choice for photographers or videographers because of the unusual layout structure of the website.
Wrapping it up
So there you have it, our newest roundup of amazing Bootstrap templates. What did you think of our list? I hope you’ve found one that’s going to help make your next website project a marvellous one. Feel free to add comments about other worthwhile Bootstrap templates you want us to look out for!
In this new tutorial, we’ll learn how to create a fully functional, responsive image slideshow with thumbnails, from scratch. To accomplish it, we won’t need to write a single line of JavaScript. In actual fact, once more, we’ll only use HTML and CSS as we take advantage of the “CSS checkbox hack technique”.
Note: This tutorial assumes that you’re familiar with that CSS technique along with advanced CSS selectors (e.g. general sibling combinator). If you haven’t heard of these before, or need a refresher, check out the following tutorials:
Next, we’ll put inside a container the .featured-wrapper and .thumb-list elements.
The .featured-wrapper element will contain three lists:
The first list will hold the slideshow images. Only one single image will appear at a time.
The other two lists which are identical will be used for navigating between images/slides. Both lists will contain labels whose for values match the id values of the aforementioned radio buttons.
Tip: In our example, we’ll associate a radio button with more than one label. It’s perfectly valid.
The .thumb-list element will also include the slideshow images along with their descriptions. However, unlike the images of the .featured-list element, these images will always be visible and used for the thumbnail navigation.
In short, our slideshow will provide users the ability to switch between slides via dots, arrows, and thumbnails. Niiice!
Final HTML Structure
By default, the first image should be visible/active. With that in mind, we’ll add the checked attribute to the first radio button.
Putting it all together, here’s the structure of our container:
<div class="container"><div class="featured-wrapper"><ul class="featured-list"><li><figure><img src="IMG_SRC" alt=""></figure></li><!-- other two list items here --></ul><ul class="arrows"><li><label for="image1"></label></li><li><label for="image2"></label></li><li><label for="image3"></label></li></ul><ul class="dots"><li><label for="image1"></label></li><li><label for="image2"></label></li><li><label for="image3"></label></li></ul></div><ul class="thumb-list"><li><label for="image1"><img src="IMG_SRC" alt=""><span class="outer"><span class="inner">...</span></span></label></li><!-- other two list items here --></ul></div>
Note: Within each label inside the .thumb-list, I don’t use the block-level figure and figcaption elements because the W3C Validator will throw an error. We’ll just stick to inline elements.
2. Define the Styles
In terms of styles we’ll first visually hide the radio buttons by moving them off-screen:
Note: I added the bottom: 0 property value to prevent the browser from jumping to the top of the page, each time a label is clicked. Not the ideal approach, yet it seems to do the job. Alternatively, as a more stable solution, I could have set display: none, yet this isn’t recommended due to keyboard accessibility restrictions. Specifically, that style will prevent arrow keys from changing the selected radio button.
As usual, our container will have a maximum width with horizontally centered content
By default, all featured images will be stacked on top of another. They will all be hidden, apart from the image associated with the checked radio button.
To stack the images, surprisingly enough we won’t use the common position property. Normally, what you might expect is that we turn the images into absolutely positioned elements. But that method comes with one big disadvantage: absolute elements are removed from the normal document flow, so we would have to find a way to preserve images’ aspect ratio. For example, a rough, non-elegant solution might be to add a fixed height to the images’ container.
This is where new CSS additions like CSS Grid comes to the rescue, especially if you’re only interested in modern browsers. So first, we’ll make the list behave as a grid container, then we’ll position its items in the same cell by giving them grid-row: 1 and grid-column: 1.
The dots navigation will be absolutely positioned and located at the bottom of the .featured-wrapper element. Each of its labels will have the appearance of a circle, like this:
The navigation arrows will be absolutely positioned inside the .featured-wrapper element:
Keep in mind that only the arrows for the label associated with the checked radio button will appear. To create them, we’ll use the ::before and ::after pseudo-elements of the target label.
Each thumbnail will cover one-third of the parent width, like so:
To position the caption on top of its image, instead of using the traditional CSS positioning, we’ll take advantage of the CSS Grid trick which we learned previously.
We’ll turn the label into a grid element and force the children to cover its full dimensions. By default, only the caption associated with the checked radio button will appear. Also, its content will be horizontally and vertically centered thanks to CSS Grid again.
It might take you some time to understand how the aforementioned styles work. If this is the case, the browser inspector is your best friend!
Conclusion
That’s it, folks! In this tutorial, we managed to build a responsive CSS-only slideshow with thumbnails by taking advantage of the “CSS checkbox hack technique”. Hopefully, you enjoyed this exercise and you’ll incorporate it in an upcoming project.
Here’s a reminder of what we built:
As a last thought, I’d say that without a doubt, the CSS checkbox hack technique is a great way to enhance your CSS knowledge. On the other hand, in a real project, we should be aware of its limitations (accessibility, markup) and when it’s worth using ιt instead of JavaScript alternatives.
Have you ever built something interesting with the checkbox hack? Let us know!
Further Reading
Check out these tutorials to get some inspiration about powerful slideshows you can create by customizing popular jQuery plugins:
The cleaning industry is growing—and fast. Globally, it’s expected to reach $78800 million by the end of 2023 and it’s experiencing double-digit growth in countries like the US, the UK, and Singapore. Whatever the reasons behind this surge, it’s clear that there’s vast potential for current or new cleaning services ready to tap into the market.
Nothing like that feeling of crisp, clean bedsheets
And, to ensure you’re setting yourself apart from competitors and reaching as many customers as you can, setting up a website is a great place to start.
How to Create a Cleaning Services Company Website
Thankfully, you don’t need a budget as big as your cleaning products selection in order to make a high-quality website to attract new customers. Instead, you can simply pick your favorite WordPress cleaning website theme from ThemeForest before easily customizing it to make it your own. Even if you don’t have traditional—or extensive—design or development skills, this is a great, low-cost option sure to give you great results.
Tips for Building a Cleaning Services Website
1. Let Them Book!
If people like the look of your company, then why not give them the option to book straight away? There are WordPress plugins like Bookly that allow users to view online calendars and book a time convenient for cleaners to visit.
2. Be Transparent
In a similar vein, you can also help current and potential customers to calculate the approximate costs of your services. Choosing a cleaning company website template that offers the Calculated Form, for example, will help you to set this up quickly and easily.
3. Tell Your Story
Many WordPress templates are packed with features to help you tell your business’ story. Look out for Mailchimp integration so you can send your blog content to your subscribers, as well as the possibility to upload videos to the homepage.
Best Cleaning Services Company WordPress Themes to Download 2020
Read on for my roundup of the 25+ best WordPress themes for cleaning companies. All are available for download on ThemeForest.
Whether you’re looking for a laundry service WordPress theme, a traditional cleaning service (or anything within the realm of the industry for that matter), then Cleanco should be on your radar!
It’s one of the more popular cleaning themes out there and has everything you could need—including 252 ready-to-use templates to help you build your site quickly, slider animations to enable you showcase imagery or testimonials, plus mobile optimization to ensure the site appeals to customers on the go. It’s also fully integrated with Bookly.
Cleanco 3 - Cleaning Service Company WordPress Theme
With a bold full-width header, you have the perfect opportunity to quickly show site visitors what it is that sets your cleaning company apart. This is a cleaning company website theme that is highly rated for customer support too, so it’s an especially good option for any newcomers who may have some queries setting up their first WordPress site.
The demo theme shows capabilities for animations as the user scrolls—a subtle feature that helps the site to stand out.
With an average of five out of five stars, this is one of the most highly rated WordPress themes for cleaning services out there! Like many of the templates, it comes with the Layer and Revolution Sliders to help you display imagery in an aesthetically-pleasing way.
It’s also complete with 20 color schemes and 20 different patterns so you can ensure the template fits your business’ look and feel. The developers behind this theme have designed with flexibility in mind, also including two different layouts and six different header types.
If simplicity is what you’re after, then this is a solid option. With clean and clear content blocks to quickly show the services you offer, information about your staff, as well as space for eye-catching stats to show your services, Cleaning certainly deserves its place on the list. It can also be easily adapted based on your business type, so if you’re looking for a pressure washing WordPress theme or a laundry dry cleaning services WordPress theme, then this template will work well.
This cute template follows an illustrative theme throughout the many demos, which helps to give it plenty of character! Released in 2019, it’s a relative newcomer to the block but it has already gathered an average of five out of five stars.
It’s also Gutenberg-optimized which helps for super easy editing, all images within the demo content are included within the download package, and there is a support response time of just eight hours.
Although designed with dry cleaning in mind, this flexible template would work for any cleaning company. It comes with useful Plugins like Contact Form 7 to help users quickly and easily get in touch about your services, WooCommerce so people can buy any products or services directly from your site, and Event Calendar to show people what’s coming up!
As you’ll see from the demo, useful calls to action including telephone numbers can be put front and center above the site’s header.
This simple to use template not only looks good, it couldn’t be easier to navigate. A great feature is the booking box right at the top that allows users to quickly input their details to find out more information.
You can also break up key information like your company’s unique selling points in easy to read content blocks. The cleaning services WordPress theme download is also rated highly for design quality and customer support.
Moppers - Cleaning Company and Services WordPress Theme
This highly visual site uses eye-catching sliders to display imagery, as well as allows for imagery of different shapes and sizes. The circular image included in the center of the template also allows for key selling features to be included. A Cost Calculator Plugin comes with the theme, a feature that allows clients to calculate the final cost of a particular job—a useful tool that creates transparency. This one is also Gutenberg-optimized and comes with free lifetime updates.
CleanMate - Cleaning Company Maid Gardening WordPress Theme
With blocks of color to draw the eye to certain sections, Clengo is another appealing choice for those looking to set up or update their cleaning services website. Plus, you can easily amend the color scheme if another hue works for you! It’s SEO-friendly, GDPR compliant, plus comes with a simple portfolio layout so you can display your offerings in a straightforward way.
The testimonial section also helps to add weight to the website. You can also up your content marketing efforts by easily integrating a blog within your new site.
If vibrant is what you’re looking after, then look no further than CarpetServ. As you can see from the demos, this template effortlessly combines illustration with photography and color blocks—a move that makes the template approachable and fun.
It also makes the most of simple icons that change color as you scroll over them, and supports videos—perfect if you want to up the storytelling around your brand. You can include interactive Q&As where answers are revealed when users click on the relevant question.
This simple-to-use WordPress cleaning template supports many of the key Plugins, including Revolution Slider, Booked Appointments, Mailchimp, and Contact Form 7. It’s simple in design, offering users the chance to easily make appointments or request a callback.
This one has received an average of five out of five stars, with users ranking the theme highly for design quality and customer support.
SmartClean | Housekeeping, Washing & Cleaning Company WordPress Theme
Designed with industrial cleaning in mind, but The Kleaner template could be adapted based on whatever cleaning services you’re looking to promote. It comes with three demo templates so you can select your favorite and then adapt it based on the business you’re looking to promote.
It comes with WPBakery Page Builder (formerly Visual Composer) to enable you to create unlimited pages the way you want without needing to stick to predefined layouts. That being said, if you’d rather stick to the demo templates for ease and speed then that’s fine too!
The Kleaner - Industrial Cleaning Company WordPress Theme
A calendar is included to help you keep track of your appointments and the blog also helps you to share your experiences with your current and potential clients. Sliders are used to display testimonials and plenty of calls to action are incorporated into the design to give visitors the chance to find out more or book appointments.
It also comes with the Team Plugin to help you showcase your team by displaying profiles, descriptions, and links. There are also several predefined color schemes so you have the final say as to how your new site looks, and it comes with Unyson Support to help you create custom pages and posts.
This aptly-named theme has everything you need to take your cleaning business to the next level. A particularly good feature is the stats underneath the header which open to reveal further information as the user scrolls. It’s fully responsive, comes with more than 600 Google Fonts, and is SEO-optimized to ensure as many people as possible come across your cleaning website. Users can also scroll to view staff.
This attractively designed cleaning company WordPress template displays information in an appealing way, aiding users to find the information most relevant to them. The blog is well-organized and you can see the most popular and most commented on stories.
It also supports videos so it’s a perfect choice if you want to display brand videos or other assets. It comes with popular Plugins including Revolution Slider and Essential Plugin.
The Qlean | Housekeeping: Washing & Cleaning Company WordPress Theme
This theme is packed with features, including interactive counters, pie charts, horizontal progress bars, and graph charts, as well as custom post formats that include standard, gallery, link, quote, video, and audio. It’s retina ready so your site will work perfectly on retina displays and high-resolution screens.
Like most WordPress themes, you can also enable social media icons and easy share functionality with the click of a button. You can either use the provided social media icons or upload your own.
Max Cleaners & Movers - Cleaning Business Company WordPress Theme
This is a simple, no-fuss option with a price tag to match. It comes with demo content, one-click installation, and is responsive and retina ready. The scrolling logos at the top are a nice touch and help to show how you could display your clients quickly and easily.
It comes with a good balance of copy versus imagery, giving users what they need without overwhelming with information.
Hanover : Cleaning Business Company WordPress Theme
Whether you’re looking for a laundry dry cleaning services WordPress theme or a traditional cleaning website, Jharon may well be for you! It comes with plenty of opportunities for customization, including full-width, transparent, or sticky headers and the position of your logo.
The first demo template opts for a full-width header followed by an explanation of the services offered, stats, and finally a simple diagram to show how the cleaning company works.
Released at the end of December 2019, Clenix is one of the newest cleaning websites out there. With youth on its side, it comes with all the latest WordPress features including being Gutenberg-optimized which makes for simple editing. It’s fully responsive, mobile friendly, and comes with at least 20 inner page layouts.
This well-designed cleaning website theme makes use of the Layer Slider and Revolution Slider—both will help to bring your content to life! There are plenty of content blocks to help users digest information quickly and easily. The use of color in the ‘our packages’ section within the homepage demo is a useful tactic to help people pick the services they require.
The subtle illustrations within the Klear template add to its appeal while helping to signpost important content. It also comes with unlimited colors so you can add your mark to your new cleaning website. You can choose from three types of footer styles and there’s space to include a useful rating system as part of any client testimonials.
Klear - Cleaning Services Company WordPress Theme + RTL
Be Clean is another template praised for how easy it is to customize. It comes with hundreds of Google fonts, multiple header layout options, plus unlimited color schemes to choose from.
Like previous templates, it also comes with cost calculation functionality to help potential clients calculate how much their deserved services will set them back. You can add animations to content parts too to drive attention to particular content blocks.
Be Clean - Cleaning Company, Maid Service & Laundry WordPress Theme
With clean lines and a simple design, Cleaning69 is another great option for your cleaning services WordPress theme. With 69 header options to choose from, you’ll have the freedom to present your information however you’d like. It’s high on image content blocks and low on text so will work well if you’d rather let your photos do the talking.
Cleaning69 - WordPress theme for House Cleaning Company
This simple, professional website makes use of a large full-width header that slides between different imagery. Users can also easily pick the type of project most relevant to them, i.e. house, office, industrial, maintenance, or floor.
As you continue to scroll, you’ll see the Calculated Form that helps people to find out how much their desired service will cost. All in all, this is a straight-forward and high-quality template.
This one comes packed with features, including AccessPress to display your social media profiles as well as subscriber and follower numbers to visitors. It’s also compatible with Mailchimp so you can keep your fans updated about company news and tips.
Finally, you can set up an Instagram feed so your social posts can be displayed in single or multiple widgets.
PrettyPress - House Cleaning Service WordPress Theme
Last but certainly not least, Dustar was released in October 2019 and is modern in its design. It supports videos and a nice feature is the glowing illustrated circle that surrounds the ‘play’ button—it helps to draw the eye straight to the video. It also has a sticky menu when scrolling to aid simple navigation.
Dustar - Cleaning Services WordPress Theme
Now the Fun Begins!
As you can see, there are plenty of cleaning services WordPress themes for you to choose from. Now all you need to do is select your favorite, download it, customize it, then away you go! If you’re looking for something slightly different from any of the featured themes, you can head to ThemeForest to see the full selection.
Are there any other themes you think should make the list? Let us know in the comments below.
Are you creating new pages, editing existing posts and generally improving your WordPress website, but those changes aren’t appearing on your actual website?
Your web browser and plugins can all serve cached versions of your pages and posts, so what you’re currently seeing may not be what everyone else sees!
In this article, I’ll show you how to quickly and easily clear the cache for all the major web browsers and all of the major WordPress caching plugins, including WP Super Cache and W3 Total Cache.
Regardless of whether the issue is browser-based or server-based, by the end of this article you’ll be seeing the most up-to-date version of your WordPress website.
What Is the Cache?
There are two kinds of caching that can cause an issue with your WordPress website: the browser cache and the plugin cache.
1. Browser Caching
When you visit a website, your browser saves certain files to your local computer. These cached files allow your browser to load this site faster on subsequent visits, but it can also make your browser slow to recognize that a website has changed.
This delay can be particularly frustrating when you’re editing your site—it’s not exactly practical to wait while your browser registers every tiny change that you make behind the scenes! In this scenario, you can clear the browser’s cache, which will force it to fetch a fresh copy of your website, complete with all your latest changes.
2. The Plugin Cache
WordPress websites are dynamic, which means they’re built every time someone visits one of your pages or posts.
Behind the scenes, the server retrieves information from your PHP files and MySQL database, and then generates the HTML content that’s displayed to the visitor. This is a time-consuming and intensive process, so instead of building the HTML content from scratch every single time someone visits your site, WordPress caching plugins make a copy of each page or post following the first load, and then serve this cached content to subsequent visitors.
Serving static content improves your website’s overall performance, but it can also cause you to see outdated content. If you’ve cleared the browser cache and your changes still aren’t appearing, then the issue may lie with your plugin cache.
Clearing Your Browser Cache
Before you delve into the plugin cache, it’s worth checking that your web browser isn’t simply loading cached files.
Clearing the browser cache is straightforward, but the process will vary depending on which web browser you’re using:
Clearing the Chrome Browser Cache
If you’re a Chrome user, then:
Click the Menu icon in Chrome’s upper-right corner.
Navigate to More Tools > Clear Browsing Data... This will launch a popup where you can select the cached content that you want to remove.
Select the Advanced tab.
Make sure that Cached images and files is selected. At this point, you may also want to deselect some of the other checkboxes—for example, you can opt not to delete cached passwords, sign-in data, and auto-fill form data.
Give the Clear data button a click.
The Chrome cache will now be deleted; reload your webpage and you should now see the most up-to-date version of your website.
Clearing the Safari Browser Cache
You clear the Safari cache via a Develop dropdown menu that appears in Safari’s toolbar.
If you don’t have access to this menu, then you’ll need to enable it:
In Safari’s toolbar, navigate to Safari > Preferences…
Make sure the Advanced tab is selected.
Select the Show Develop menu in menu bar checkbox.
Close the Preferences window. You should now have access to a new Develop menu.
To clear the Safari cache:
In the Safari toolbar, select Develop.
Select Empty Cache.
Try reloading your site, and Safari should display the most up-to-date version of your website.
Clearing the Opera Browser Cache
If you’re an Opera user, then:
In the Opera toolbar, select Opera > Preferences.
Scroll to the bottom of the subsequent screen and expand the Advanced section, by giving it a click.
Under Privacy and security, select Clear browsing data.
Select the Advanced tab.
Make sure Cached images and files is selected. At this point, you may also want to select or deselect some of the other options—for example, I’d recommend deselecting Passwords and other sign-in data and Autofill form data.
When you’re happy with your selection, click Clear data to flush the cache.
Clearing the Internet Explorer Browser Cache
To clear IE’s cache:
In the upper-right corner, select Internet Explorer’s gear icon.
Select Safety > Delete browsing history.
In the subsequent Delete Browsing History window, select Temporary Internet files and website files.
Select Delete at the bottom of the browser window.
Your Internet Explorer cache will now be deleted.
Using a Different Web Browser?
If you’re using a web browser that we haven’t covered, then look for any Preferences, Security or History menus, as these often contain cache settings.
Alternatively, you can consult your browser’s official documentation, as this should contain information on clearing the cache.
Clearing Your Plugin Cache
If you’ve cleared the browser cache and are still seeing an outdated version of your website, then your plugin cache may be to blame.
Even if you didn’t install a caching plugin, it’s still worth reviewing your list of installed plugins, especially if you share your account with other people! Some WordPress hosting companies also provide their own built-in caching solutions as standard, so a caching plugin may have come pre-installed with your WordPress account.
If you’re unsure, then log in to WordPress and navigate to Plugins > Installed plugins. The majority of caching plugins have the word “caching” in their name, or you can check the description of any unfamiliar plugins.
There are countless caching plugins available, but in this final section I’ll be covering all of the most commonly used WordPress caching plugins.
1. WP Super Cache
The WP Super Cache plugin allows you to clear the cache with the click of a button:
In WordPress’s left-hand menu, select Settings > WP Super Cache.
Give the Delete cache button a click.
Your plugin cache will now be completely cleared.
2. W3 Total Cache
W3 Total Cache is a free caching plugin that’s used by over 1 million people. If you’re one of those million, then you’ll need to take the following steps to clear your cache:
In the WordPress toolbar, select Performance.
Give the Empty all caches button a click.
W3 Total Cache will now flush all of your site’s cached content.
3. WPEngine
WPEngine is a managed WordPress hosting provider that comes with its own built-in caching solution.
If you’re using WPEngine as your hosting provider, then you will have a caching solution and should therefore clear your WPEngine cache.
Select WPEngine from WordPress’s side menu.
Give the Purge All Caches button a click.
The cache will be cleared, and you should now be looking at the latest version of your website.
Conclusion
In this tutorial, we explored how caching can prevent you from seeing your site’s latest content, and how WordPress’s plugin cache can improve your website’s overall performance.
Throughout this tutorial, I showed you how to clear the cache for all the major web browsers and some of the most popular WordPress caching plugins. If you’re using a product that wasn’t mentioned in this article, then you should find the information you need in that product’s official documentation.
The Best WordPress Plugins on CodeCanyon
Explore thousands of the best WordPress plugins ever created on CodeCanyon. With a low-cost one time payment, you can purchase one of these high-quality WordPress plugins and improve your website experience for you and your visitors.
Here are a few of the best-selling and up-and-coming WordPress plugins available on CodeCanyon for 2020.
In this Sketch tutorial you will learn how to design a fitness app dashboard.
To begin with you will learn how to create the starting components of an app dashboard for iOS. You will learn
how to create a basic navigation bar,
how to save and use symbols
and how to create a smart layout.
All these little features will ease your work throughout this free fitness app mockup tutorial.
Next, using simple shapes, paths, and vector shape building techniques, you will learn how to create and import icons inside your fitness app dashboard.
Using subtle shading techniques, symbols or nested symbols and some text, you will learn how to add color and vibration to your fitness app design template.
Finally, you’ll learn how to easily multiply objects and how to create the bottom navigation menu.
For more inspiration on how to adjust or improve your final fitness UI kit you can find plenty of resources at GraphicRiver.
Choose from over 1,800 UI templates on GraphicRiver
What You Will Need:
You will need the following resources in order to complete this fitness app dashboard. Most of these are available from Envato Elements, where a single subscription allow you unlimited downloads. You can also find alternatives to work with if you prefer:
Go to Insert > Artboard from the toolbar or menu (or press A) and the Inspector will reveal a list of artboard templates. Click the iPhone 11 template to create a 414 x 896 px artboard. Once you’re done, hit Escape to deselect your artboard. Now, let's start the work on this free fitness app mockup.
2. How to Add a Navigation Bar in a Fitness App Design Template
Step 1
Go to Insert > Shape > Rectangle from the toolbar or menu (or press R). Click and drag to create a 414 x 70 px shape, place it as shown in the following image and make sure that it stays selected.
Go to the Inspector panel and focus on the Style section. Uncheck the Borders checkbox to disable the border applied to your rectangle and keep the default Fill color.
Step 2
Go to Insert > Shape > Oval from the toolbar or menu (or press O). Hold down the Shift key to create a perfect 40 px circle, make sure that it stays selected and focus on the Inspector panel.
Use the X& Y input boxes to numerically place this new shape. Enter 35 in the X box and 64 in the Y box and your shape should move to the left side of your grey rectangle, as shown in the following image.
Keep focusing on the Inspector panel and move to the Style section. Disable the existing Border and change the Fill color to #F5F5FF.
Step 3
Go to Insert > Vector from the toolbar or menu (or press V). Use three simple clicks to create the arrow shape shown in the following image. Place it as shown below and make sure that it stays selected.
Go to the Style section from the Inspector panel, disable the existing Fill and change the Border color to #4B4B87.
Step 4
Go to Insert > Text from the toolbar or menu (or press T). Click once on your artboard and focus on the Text section from the Inspector panel.
Select the San Francisco Compact Rounded font, change the style to Bold, set the size to 24 and the color to #4B4B87, and then simply type the "STATS" piece of text. Place it as shown in the following image.
3. How to Add a Horizontal Menu in a Fitness App Design Template
Step 1
Go to View > Canvas > Show Rulers (or press Command-R) to activate the Rulers. Right click on your rulers and go to Show All Guides as we’re about to add some new guides.
Focus on the horizontal rulers and move your cursor inside it. Move your cursor to 20 px and simply click to add a new guide. Guides can be moved and repositioned by clicking-and-dragging the guide inside the rulers. Keep focusing on the horizontal rulers and use the same technique to add a second guide at 394. Now that the guides are in place, you can continue the work on your fitness dashboard template.
Step 2
Go to Insert > Shape > Rectangle from the toolbar or menu (or press R). Create a 374 x 40 px shape, make sure that it stays selected and focus on the Inspector panel.
First, use the X& Y input boxes to numerically place this new rectangle. Enter 20 in the X box and 139 in the Y box and your shape should move to the top side of the artboard, as shown in the following image.
Keep focusing on the Inspector panel, drag the Radius slider to 20 and then move to the Style section. Disable the existing Border and change the Fill color to #F5F5FF.
Step 3
Go to Insert > Shape > Rectangle (R) and create a 122 x 36 px shape. Place it as shown in the following image, make sure that it stays selected and focus on the Inspector panel
Drag the Radius slider to 18 and then move to the Style section. Change the Fill color to #4B4B87 and delete the existing Border using the Trash button.
Step 4
Make sure that the rounded rectangle made in the previous step is still selected and focus on the Style section from the Inspector panel.
Click the Shadows button to add a shadow for your selection. Enter the numbers shown in the following image and then click the color well. Change the color to #4B4B87 and then lower the Alpha to 80.
Step 5
Go to Insert > Text (T), add the "Day" piece of text and place it as shown in the following image. Use the San Francisco Compact Rounded font and change the style to Semibold. Set the size to 16 and the color to white (#FFFFFF) and don't forget to change the Alignment to Center.
Step 6
Select the rounded rectangle and the piece of text highlighted in the following image and click the Create Symbol button from the toolbar, or choose Layer > Create Symbol in the menu.
Name your symbol "Button.Active", select a Left to Right Layout and click OK. This will create a master symbol separate from your artboard. If you make a change to a master this will also show in any instances of that symbol in your document. That Left to Right Layout will help you later to create a smart layout.
Step 7
Go to Insert > Shape > Rectangle (R) and create a new 122 x 36 px shape. Place it as shown in the following image with the help of the Smart Guides. Make sure that it stays selected and focus on the Inspector panel
Drag the Radius slider to 18 and then move to the Style section. Change the Fill color to #F5F5FF and disable the existing Border.
Step 8
Go to Insert > Text (T), add the "Week" piece of text and place it as shown in the following image. Use the San Francisco Compact Rounded font and change the style to Semibold. Set the size to 16 and the Alignment to Center, and then click the color well. Set the color to #4B4B87 and lower the Alpha to 50.
Step 9
Select the rounded rectangle and the piece of text highlighted in the following image and create a new symbol (Create Symbol button from the toolbar or Layer > Create Symbol in the menu). Name this new symbol "Button.Inactive", select a Left to Right Layout and click OK.
Step 10
Make sure that the symbol made in the previous step is still selected. Hold down the Option key and simply drag your selected symbol to duplicate it. To constrain movement of your copy to a single direction, hold down the Shift key while dragging. Drag this copy to the right until the Smart Guides shown you that there's a 2 px gap between the copy and the original symbol.
Select this copy and focus on the Symbol section from the Inspector panel. In the Overrides box simply enter "Month" to change the text from your symbol copy.
Step 11
Select your three symbols along with the rounded rectangle that lies in the back and save them as a new symbol. Name it "HorizontalMenu" and don't forget to select the Left to Right Layout.
Now, here's where that Left to Right Layout eases your work. Let's say that you decide to remove one of the buttons. All you have to do is select it, go to the Symbol section from the Inspector panel and select No Symbol from the Overrides menu. This will immediately remove the undesired button and the space that it covers. Having the Layout set to None instead of Left to Right would remove the button, but keep the space that it covers empty.
Step 12
Using the same Overrides menus you can easily change the appearance of your buttons. These are pretty basic changes, but you'll learn more powerful techniques in the following steps.
4. How to Create Symbols for the Fitness App Dashboard
Step 1
Go to Insert > Shape > Rectangle (R), create a 30 px square and place it somewhere in the bottom of the artboard. Make sure that it's selected and go to Arrange > Make Grid. Enter the attributes shown in the following image and then click the Make Grid button. This will add five copies of your square in an evenly spaced row, as shown in the second image.
Step 2
Focus on the leftmost grey square. Go to Insert > Shape > Oval (O) and create a 28 px circle. Fill it with white and place it as shown in the first image. Create a 34 px circle, fill it with white and place it as shown in the second image.
Select both circle made in this step and click the Subtract button from your toolbar.
Step 3
Make sure that the shape made in the previous step is still selected and go to the Style section from the Inspector panel. Be sure that the Fill color is set to white and then focus on the Border. Change the color to white, set the Alignment to Center, increase the Width to 2 and don't forget to check that Round Join button.
Step 4
Go to Insert > Text (T), add the "Z" piece of text and place it as shown in the first image. Use the San Francisco Compact Rounded font and change the style to Semibold. Set the size to 16 and the color to white (#FFFFFF).
Duplicate this piece of text (Command-C > Command-V). Select this copy and lower the font size to 12, and then place it as shown in the second image.
Select both pieces of text added in this step and go to Layer > Convert to Outlines to convert the text into an editable vector paths.
Step 5
Import the flame icon from this 14 Flame icons pack and the other four icons from this Fitness Glyph Color Icon Set. Change their color to white and resize them to fit the grey squares, as shown in the following image. Make sure that none of these icons exceeds the 30 px width and height.
Step 6
Just to make it easier for you to understand the next two step, let's change the color of the artboard. Click the name of your artboard to quickly select it, focus on the Inspector panel and change the background color to black (#000000).
Step 7
Focus on the leftmost grey square. Select it, focus on the Inspector panel and disable the Fill to basically make your selected shape invisible.
Select this invisible shape along with the icon that lies above it, create a new symbol and name it "Sleep".
Step 8
Move to the next grey square and make it invisible. Select it along with the icon that lies above it, create a new symbol and name it "Hear Rate".
Continue with the other four icons and use the same technique to create the "Energy Burn", "Steps", "Running" and "Cycling" symbols.
5. How to Create Complex Symbols for Your Fitness App Design Template
Step 1
Change the color of your artboard back to white. Go to Insert > Shape > Rectangle (R) and create a 177 x 180 px shape. Place it as shown in the following image, make sure that it stays selected and focus on the Inspector panel
Drag the Radius slider to 20 and then move to the Style section. Change the Fill color to #FF6967 and delete the existing Border using the Trash button.
Step 2
Make sure that your red rounded rectangle stays selected, focus on the Style section from the Inspector panel and activate the Shadow. Enter the numbers shown in the following image and then click the color well. Change the color to #FF6863 and then lower the Alpha to 80.
Step 3
Add a copy of your red rounded rectangle and place it as shown in the first image. Select this copy and focus on the Style section from the Inspector panel. Change the Fill color to #7954FF, use the same color for the Shadow and keep the Alpha at 80.
Turn this new rounded rectangle into a symbol and name it "purple".
Step 4
Add another two copies of your red rounded rectangle and place them as shown in the following image. Select the left copy, change the Fill color to #FF8E61, use the same color for the Shadow and keep the Alpha at 80. Turn this rounded rectangle into a symbol and name it "orange".
Select the right copy, change the Fill color to #2AC2FF, use the same color for the Shadow and keep the Alpha at 80. Turn this new rounded rectangle into a symbol and name it "blue".
Step 5
Add another two copies of your red rounded rectangle and place them as shown in the following image. Select the left copy, change the Fill color to #5964FF, use the same color for the Shadow and keep the Alpha at 80. Turn this rounded rectangle into a symbol and name it "indigo".
Select the right copy, change the Fill color to #95DA45, use the same color for the Shadow and keep the Alpha at 80. Turn this new rounded rectangle into a symbol and name it "green".
Step 6
Select the red rounded rectangle, turn it into a symbol and name it "red".
Step 7
Focus on the top-right corner of your red rounded rectangle. Go to Insert > Shape > Rectangle (R), create a 70 px square and place it as shown in the first image. Keep the default fill color, but disable the border.
Double click inside this new shape to activate the vector editing mode. Select the top-right point, go to the Inspector panel and drag the Radius slider to 20. Select the other three points, return to the Inspector panel and this time drag that Radius slider to 35.
Step 8
Make sure that the shape made in the previous step is still selected and focus on the Style section from the Inspector panel. Change the Fill color to white, lower the Opacity to 40% and change the Blend Mode to Soft Light.
Step 9
Go to Insert > Document > Heart Rate and place your symbol instance as shown in the following image. Once again, the Smart Guides will come in handy.
Step 10
Go to Insert > Shape > Rectangle (R) and create a 137 x 140 px shape. Place it as shown in the following image and make sure that it stays selected.
Focus on the Style section from the Inspector panel. Disable the Border, change the Fill color to black and lower its Opacity to about 30%. This shape won't be part of the final design, you'll only need it for some perfect text alignment in the following steps.
Step 11
Go to Insert > Text (T), add the "Heart Rate" piece of text and place it as shown in the first image. Use the San Francisco Compact Rounded font and change the style to Light. Set the size to 16 and the color to white and don't forget to change the text alignment to Left.
Add the "124 bpm" piece of text and place it as shown in the second image. Use the same font and change the style to Semibold. Select the "124" part and set the font size to 30 and then select the "bpm" part and set the size to 20.
Add the "Healthy" and the "80-120" pieces of text and place them as shown in the last two images. Use the same font, but change the style to Light and the text alignment to Right.
Step 12
Now that you don't need the black rectangle anymore, select it and delete it.
Select your red rounded rectangle along with all the objects that lie on top of it, turn it into a new symbol and name it "BOX".
Step 13
Right click on your purple rounded rectangle and go to Replace With > BOX. This will basically replace your selection with the "BOX" symbol saved in the previous step.
Make sure that your selection stays active and go to the Style section from the Inspector panel. Here you should find six possible overrides. Let's start from the bottom. Open the red override and replace it with the purple symbol. This will instantly replace the red background with the purple one. Move up the the next override and replace the heart rate icon with the sleep icon. Finally, move to the other four overrides and replace the existing text with the one shown in the following image.
Use the same techniques to edit the rest of your colored boxes, as shown in the following images.
6. How to Add the Bottom Navigation Bar in a Fitness Dashboard Template
Step 1
Go to Insert > Shape > Rectangle (R). Create a 414 x 97 px shape, place it as shown in the following image and disable the Border.
Step 2
Go to Insert > Shape > Rectangle (R), create a 28 px square and place it as shown in the following image. Make sure that it's selected and go to Arrange > Make Grid. Enter the attributes shown in the following image and then click the Make Grid button.
Step 3
Import the four icons from this 20 Sport Icons (Solid) set. Change their color to #A5A5C3 and #4B4B87, and them resize them to fit the white squares, as shown in the following image. Once you're done, delete the white square.
Step 4
Go to Insert > Text (T), add the pieces of text shown below and use the text attributes shown in the following image.
Step 5
Finally, delete those two grey rectangles and your app dashboard for iOS is complete. This is a good start for a fitness UI kit. Feel free to create your own assets and pages.
Congratulations! Your Fitness App Dashboard is Finished!
Here is how it should look. I hope you’ve enjoyed this free fitness app mockup tutorial and can apply these techniques in your future projects. Don’t hesitate to share your final result in the comments section.
Feel free to adjust the final fitness dashboard template and make it your own. You can find some great sources of inspiration at GraphicRiver, with interesting solutions to improve your fitness UI kit.
Want to Learn More?
We have loads of Sketch UI tutorials on Tuts+, beginner to intermediate level, take a look!
For our form, we’re going to need a bunch of handmade illustrations. Happily, Ian Yates, Web Design editor here at Tuts+, created for us some beautiful illustrations. Thank you, Ian :)
Similar to what we’ve done in a previous tutorial, we’ll create an SVG sprite and embed all the drawings within it. Then, inside the form, we’ll render the target icon whenever we need it by calling the use element.
Notice the preserveAspectRatio="none" attribute which we attached to most of the illustrations. We did this because, as we’ll see later, our icons will scale and loose their initial dimensions.
Form
The form will consist of a heading and an unordered list. Plus, we’ll use a .container for setting a maximum width to the form and horizontally center its contents:
As you can see, each of the list items above contains one or more classes. Alternatively, for readability reasons, we could have created an extra child element and passed those classes to it, like this:
<li><div class="grid grid-2">...</div></li>
Inside the list, we’ll place the SVGs and form elements.
The first list item will include two required input fields along with their SVGs:
The fourth list item will include a fieldset element. Inside it, we’ll put a legend element, a list with two radio buttons along with their SVGs, and its related SVG:
<fieldset><legend>Select preferred method of contact</legend><ul class="checkbox-list"><li><input type="radio" id="email" name="contact-method" checked><label for="email"><svg><use xlink:href="#checkbox_empty"></use></svg><svg class="checkmark"><use xlink:href="#checkmark"></use></svg>
By Email</label></li><li><input type="radio" id="phone" name="contact-method"><label for="phone"><svg><use xlink:href="#checkbox_empty"></use></svg><svg class="checkmark"><use xlink:href="#checkmark"></use></svg>
By Phone</label></li></ul> <svg><use xlink:href="#fieldset"></use></svg></fieldset>
Finally, the fifth list item will contain the submit and reset buttons along with their SVGs:
Before having a closer look at the individual form elements, let’s first define some basic CSS styles. These will include a custom font taken from Envato Elements, a few custom variables, and some reset rules:
Note: for simplicity, I won’t walk through all the CSS rules in this tutorial. You can check the rest of them by clicking at the CSS tab of the demo project.
3. Build the Form Layout
On small screens all our form elements will be stacked:
The form layout on small screens
However, on viewports 600 pixels wide and above, the form layout will change. More specifically:
We’ll arrange the inputs of the first two rows into two equal-width columns.
Each button will cover one-third of the parent row width.
The form layout on large screens
Thanks to CSS Grid, we can easily build the desired multi-column layout. To begin with, we’ll set the .handmade-form .grid container as being a grid. Then, we’ll use the grid-2 and grid-3 helper classes to define the number of grid columns:
The next and most challenging part of this exercise is to position the illustrations relative to their associated form element. To do this, we’ll use the position property. An alternative implementation might be to set the drawings as background images. However, I am not a big fan of this implementation because it needs extra manipulation for making images adapt on various screens.
Let’s take note of our plan:
The SVGs will be absolutely positioned elements.
They will sit in the same position as their form control and have the same dimensions. That’s why earlier we set their preserveAspectRatio to none.
The form controls should be focusable, so we’ll give them a higher z-index.
To create our custom radio buttons, once more, we’re going to take advantage of the “CSS checkbox hack technique”.
If you look again at the markup section, you’ll notice that the fieldset element contains the .checkbox-list list. Inside each label, there are two SVGs. The first one describes the unchecked state of the associated radio button, while the other one its checked state.
The radio buttons should fit on a single line, so we’ll turn the .checkbox-list into a flex container. Also, we’ll absolutely position them relative to their label and give them some fixed dimensions (20px x 20px).
As a radio button changes its state, the SVG which describes its checked state will be animated. To achieve this effect, we’re going to work with the stroke-dasharray and stroke-dashoffset properties which we’ve extensively covered in a recent tutorial.
Note: Even though I’ve attached the stroke-* properties to the parent SVG instead of its path, the effect still works because these properties are inherited.
Conclusion
That’s it, folks! In this tutorial, we managed to build a responsive handmade SVG form from scratch. I hope that this exercise helped you learn something new and inspired you for using it in an upcoming project.
Here’s a reminder of what we built:
In an upcoming tutorial, we’ll go a step further and discuss how to make this form dynamic by incorporating it in a popular WordPress contact form plugin. Stay tuned!
That’s great. WordPress is the world’s most popular content management system (or CMS), and for good reason.
With WordPress you can get yourself a flexible, scaleable and user-friendly website. The software itself is free and all you have to pay for is the hosting you’ll put it on.
But before you can start, there is one thing you’ll have to do, and that’s set up WordPress. This puts a lot of people off: they think it’s tricky, or long-winded, or requires writing code.
None of these are true. You have two options for installing WordPress, both of which are designed to be quick and easy. I’ll show you how to do both of them in this guide.
Premium WordPress Themes and Plugins
Once you've got your site set up, you'll want to explore the thousands of WordPress themes on ThemeForest and WordPress plugins on CodeCanyon. Purchase these high-quality WordPress themes and plugins can and improve your website experience for you and your visitors.
Options for Installing WordPress
There are two ways of installing WordPress: manually, or with the click of a button.
For most non-techies, the click of a button option is the preferred option. But just in case you are prefer the more thorough way, I’m going to help you to do it manually too.
Each method has its own advantages and disadvantages.
Automatic Installation
Pros:
It’s easy.
It works.
Cons:
Your hosting provider might add some extra code or plugins, which could cause you problems in the long run. Or might just annoy you. For most people, this isn’t an issue.
A poor hosting provider might not install the latest version of WordPress. A good one will. (Hint: you should only go with a good one.)
If your hosting provider doesn’t provide cPanel (or something like it) as part of your package, you might not have access to an auto-installer (which is why this is an important criterion when choosing hosting).
Manual Installation
Pros:
You get a clean installation with no extra code or plugins.
Cons:
It takes longer.
It’s not as easy.
Sometimes it doesn’t work properly (although that’s normally due to user error).
For 90% of website owners, the automatic installation is absolutely fine. It’s only if you’re planning to customize the code in your site that you may have issues.
If you fancy trying your hand at manual installation, read through the instructions below and give it a go. But if you prefer an easy life, go with the automatic option.
Installing WordPress With an Auto-installer
Let’s start with the quick and easy option.
First, you’ll need to access your control panel with your hosting provider. This is normally called cPanel, although some providers give it a name of their own.
If you’re not sure how to get to this, check the email you received when you set up your hosting account. It should contain a link to cPanel. And if that fails, ask your hosting provider to tell you or google ‘access cPanel [my hosting provider]’.
The hosting provider I use is Siteground. To access cPanel via their client area, I go to My Accounts > Go to cPanel.
You’re then presented with the cPanel screen.
At this point, you might panic. So many options! Databases! Joomla! Mail! Security! How on earth do you know where to start?
You only need to find the WordPress auto installer. Ignore everything else. Just blank it out. Pretend it isn’t there.
You should find a section called Autoinstallers. In that section you’re looking for an icon with the word WordPress beneath it. If you can’t find that, you’ll need to use Softaculous instead.
Let me start by demonstrating the process with the dedicated WordPress installer.
Installing WordPress With the WordPress Auto-installer
Click on the WordPress logo. This will take you to a set of screens for installing WordPress.
If the Install tab isn’t already open, click on it.
Now complete the fields as below.
Version: lLave this as the default.
Protocol: If you have SSL already set up for your site (some providers give you this when you register the domain), select https://. If not or if in doubt, select https:// Note that SSL makes your site more secure and is worth using if possible.
Choose Domain: If you have more than one domain registered, choose the one you want to use.
In Directory: Leave this blank.
Site Name: Enter the name of your site. You can change this later.
Site Description: Your tagline. Again, you can change this later.
Enable Multisite: Leave this unchecked. Some auto-installers don’t have this: don’t worry if you can’t see it.
Admin Username: Type in the username you want to use. Don’t use admin as this isn’t very secure. You can’t change this later so make sure it’s what you intend to use forever.
Admin Password: Type in the password you want to use. Use something different from your username, with a few upper-case letters and numbers for extra security. You want to make it as hard as possible for people to get into your site. You can change your password later via the WordPress admin screens, to make it more secure.
Admin Email: Type in the email address you want to use for any emails relating to your site. This isn’t publicly displayed.
Select Language: Choose your language.
Select Plugins: Leave all of these unchecked. This will only be an option with some hosting providers: don’t worry if it isn’t there.
WordPress Starter: Uncheck this. Again, this is specific to some hosting providers and you might not have it.
If there are any other options, just leave them unchecked. And ignore any advanced settings: you don’t need to worry about them.
Once you’ve filled out the fields, click the Install button.
The auto-installer will take some time to set up your new WordPress site and then you’ll be taken to a screen with details of your new site. There will be a link to the site itself and a link to your dashboard. In the screenshot below I’ve installed WordPress in a subdirectory.
Congratulations, you now have a WordPress site!
Installing WordPress With Softaculous
If your cPanel doesn’t have a dedicated WordPress installer, you can use Softaculous instead. Follow these steps:
Click on the Softaculous icon in cPanel.
From the menu on the left, select WordPress.
Click the WordPress icon at the top of the screen.
Follow the steps in the previous section.
In fact, the WordPress auto-installer is nothing more than a shortcut to the Softaculous installer. So the process is the same.
Once you’ve done that, you can follow the link to your shiny new site and start getting it ready.
Installing WordPress Manually
Alternatively, you can use the "famous five minute install" to install WordPress manually.
To install WordPress manually you’ll need:
A web browser.
An FTP client. This will let you upload files to the server where your website is hosted. Personally, I use Coda, a code editing application with FTP client included, but if you just need FTP you can choose from our list of the top five FTP clients out there.
Access to your server to create databases—your hosting provider will likely provide you with a tool called phpMyAdmin to do this. If in doubt, ask them!
Note that you won’t need an FTP client if you’re running WordPress locally—that is if you're running it on your computer instead of on the internet.
To install WordPress you’ll need to follow three steps:
create a database on your server
download WordPress and copy it to your server
run the WordPress installation
Create a Database
The database will hold all of your site’s content and without it, WordPress and your WordPress site won’t work. You can create yours in one of two ways, depending on your hosting provider’s setup:
via your hosting admin screens
using phpMyAdmin
With my hosting provider, I use their admin screens to create a database, so let’s look at that first.
Using Your Hosting Admin to Create a Database
In your hosting admin screens, find an option called databases, SQL databases or similar. The exact name will vary depending on your provider.
For example, here’s the screen I use:
If you’re using a similar admin screen, follow these steps:
Give your database a name and type it in the field.
Click on Create Database.
You’ll then be asked to enter a password for the new user associated with this database. Choose a password, type it in, and click OK.
Make a note of the database name, username and password. You’ll need these later.
And, that’s it—your database is ready!
Using phpMyAdmin to Create a Database
If your hosting provider gives you phpMyAdmin as part of your package, or you’re using MAMP to install WordPress locally, you can use this to create your database.
In your hosting admin screens or the MAMP welcome screen, click the link to phpMyAdmin, which might look something like this:
The phpMyAdmin welcome screen will open. Click on the Databases tab at the top left to open the databases screen:
In the Create Database field, type the name of your database.
Click the Create button.
And with that, your database will be created. Make a note of the database name for later. The username and password will default to root.
Step 1 is done—and that’s the trickiest part. It’s plain sailing from here on in!
Download and Upload WordPress
Now you need to download the latest version of WordPress.
Go to the WordPress download page.
Click the Download WordPress button to download a zip file containing all of the WordPress files to your computer.
Unzip the file on your computer in exactly the same way you would normally unzip any other file. You’ll now have a folder called wordpress with all of the WordPress files in it. Make a note of where that folder is.
Next, you need to upload WordPress to your server.
Open your FTP client. Sign in to the FTP on your server using the FTP login details your hosting provider gave you when you created your account. If you’re not sure about these, ask them. You’ll need the server address, your username and the password.
In your FTP client, find the wordpress folder on your local machine and the public_html folder on your server. You should be able to see the two of them side by side. As an example, here’s mine in Coda:
Note that my folder on the remote server is empty because I’m installing WordPress in a subdirectory. Yours will have other files in there—ignore those.
Now drag the contents of the wordpress folder (not the folder itself) to your public_html folder. Your FTP client will copy the files to your server.
Wait for the files to finish copying. Now you’re ready for the third and final stage: Running the WordPress installation.
Run the WordPress Installation
Your database and files are in place and you’re ready to install WordPress!
Open your browser and go to your website. You’ll see the first WordPress installation screen.
You should have all this information noted down from when you were creating your database. Click Let’s Go!
On the next screen, input your database name, username and password. If you’re working locally, the username and password will default to root. Otherwise they’ll be what you specified when you created your database.
Leave the Database Host and Table Prefix fields as they are (note: if in any doubt, ask your host for what to enter as the Database Host, as this can vary between hosting providers—assuming they haven’t already let you know in a previous email when you initially signed up for their services) and click Submit.
Next, you’ll see my favorite screen—the one that tells you WordPress is ready to install. Well done!
Note: If you’re in the US, it will say ‘All right sparky!’. I’m in the UK so it uses the more sedate ‘sunshine’. I prefer ‘sparky’ to be honest.
Click Run the install to access the site details screen.
Finally, enter your site details: the site title, your username and password and email address. If you want Google to find your site, leave the Privacy box checked. Click Install WordPress.
WordPress will be installed and you’ll see a success screen. Hurray!
Now you can log in to your site by clicking the Log In button and entering the credentials you provided when you were installing WordPress.
This will take you to the WordPress dashboard.
Congratulations, you’ve successfully installed WordPress and can now start managing your site!
Installing WordPress isn’t as tricky as you may think. By following the advice above, you can get yourself a brand new site with the world’s favorite CMS. Enjoy!
The Best WordPress Themes and Plugins on Envato Market
Ever since the first publication of a newsletter back in 1609, right up until modern day, newspapers and magazines have been an effective and convenient way to receive and consume information, especially news.
Although physical newspapers are still widely available, printed newspapers saw their popularity peak in 1990 and have since seen a downfall and wide decline in consumption. Most news outlets have naturally moved towards providing online versions alongside their printed news and many are looking at a future of web-exclusive publications.
2019 percentages of populations which consume news digitally (including social media). Source: Digital News Report
Several studies have shown that the audiences of offline news outlets have either transitioned alongside the publications to the web or simply have disappeared.
Premium Media and News WordPress Themes
For all the reasons noted above we have compiled a collection of more than 20 premium media WordPress themes that we believe will well suit your next news website, magazine or blog. With a focus on content, imagery, and an optimized reading experience, the showcased themes will be great when comes to redesigning your existing website or setting the tone for your new one.
When you consider a premium WordPress news Theme, look-out for:
Big sliders, headers, and a focus on imagery as content-heavy websites with no visual media such images or videos in them tend to engage the audience less.
Beautiful typography choices, as solid typography tends to go hand-in-hand with well-designed news and magazine themes.
Multiple sharing options for your articles and content as this is one of the most effective ways of increasing your audience and maintaining engagement within the existing one.
Media and News WordPress Themes available on Themeforest
The Issue is a versatile magazine premium news WordPress theme powered by a simple setup process and an easy to use interface.
With a beautiful design, more than 8,000 possible homepage layout combinations and multiple post layouts & article detail options, this theme is a great choice when it comes to choosing a news and editorial WordPress theme.
The Issue - Versatile Magazine Wordpress Theme by fuelthemes
Zeen is a well-coded and beautifully designed premium theme that is one of the best news WordPress themes currently available on the market.
With an easy to set up structure and a multitude of unique layouts and WooCommerce integration, Zeen has a plentitude of clever features, including but not limited to: lightning-fast live search powered by ajax, a dark-themed design, automatic retina images and a blank page template which comes included that would come in handy for the advanced users who’d like to build something on a blank canvas.
ContentBerg is a minimalist premium WordPress news theme that puts an emphasis on the content in order to make it more readable and friendly to your readership.
With a feature-rich backend and full Gutenberg compatibility, the Contentberg theme will delight with its fully responsive design, several homepage layouts, and block-based layout designs.
PenNews is a powerful WordPress news design created to help you set up a magazine or news website in no time! With a drag & drop functionality, great designs, and extended support included, the theme will serve you well for a multitude of purposes.
The theme comes with a one-click install for any demo, with Google AMP and Facebook Instant Article supported and validated, and a bunch of premium plugins which will make purchasing this theme a bargain.
MagPlus is a premium WordPress theme that will well suit a blog, magazine, or review-based website. It comes with more than 40+ demos, the Elementor site builder, custom cache system and GDPR compliance by default.
With WooCommerce integration, optimization for Gutenberg and 160+ Elements & Modules this theme will help you get started easily and set up a great looking and beautiful news website.
JNews promotes itself as being an all-in-one solution that comes with endless possibilities in crafting great and functional websites. With over 120+ homepages that are well suited for news, magazine or blog-styled websites, the automatic import feature will allow replication in one simple click.
With an easy customization process that is powered by a drag and drop header builder, the WPBakery visual composer, and a front-end visual composer editor - this theme offers a great blend of design, customization options, and performance.
JNews - WordPress Newspaper Magazine Blog AMP Theme
Zox News is another great premium WordPress news theme that gives you a wide range of tools and options that will elevate the look of your website in almost no time! Zox News comes with a mobile-first design, 8 article layouts, and 4 features posts layouts that come with some nice parallax effects and a reviewer plugin.
The theme also comes with WooCommerce integration, child themes, and SEO optimization which will help in better positioning in SERPs.
Zox News - Professional WordPress News & Magazine Theme
Jannah is a content marketing-oriented theme that comes with a plentitude of fresh responsive designs, new features, a complete 1-click install demos, and lifetime free updates.
With Gutenberg support, AMP integration, WooCommerce, and multiple skins, Jannah also comes with unlimited footer and header layouts. This theme will suit your needs greatly if you’re looking for savvy customization options.
Gillion is a premium WordPress news theme that comes with 15+ pre-made high quality and fully functioning website demos that are ready to be published and pushed live ASAP.
With multi-purpose styles, the theme features a powerful admin interface, the Visual Composer page builder, one-click demo install, and fully responsive layouts. Use Gillion if you want to have the flexibility of multiple design options to choose from.
Gridlove is a creative, grid-styled WordPress theme that puts a focus on magazine and news-oriented websites. With several predefined layouts and templates, this theme will let you have an extraordinary website in no time without any coding skills required.
Gridlove comes with a fully-featured demo website so that you can get started with it as fast as you want and as soon as you’d like to.
Click Mag is a conversion-oriented premium WordPress news theme that will maximize your conversions and click-through rates. The theme is attractive because of its various social sharing options, trending posts option, SEO optimization. ClickMag will help you deliver the best user experience possible to your readership and visitors.
Boombox is a multipurpose, magazine theme that has a top-notch design and an extremely customizable layout. With a multitude of features and a content builder at its foundation, this theme will let you populate news, create quizzes and polls, implement a upvoting/downvoting system and set up several monetization options that will help drive up the revenue.
Authentic is a minimal and light premium news WordPress theme that will perfectly suit a lifestyle blog or magazine. With multiple extensive features such as sticky headers, sidebars and share buttons, this theme also comes with more than 350 live customization options and translatable WPML files.
With an ultra-responsive layout and retina ready icons and graphics, Authentic is a great choice when it comes to setting up a good looking website.
Authentic - Lifestyle Blog & Magazine WordPress Theme
Grand News is a premium WordPress news theme with a magazine-style layout that puts a focus on editorial capabilities and a clean and minimal style. With specific support for various popular WordPress plugins and a responsive layout that looks great on all devices, the theme comes with predefined unique demos that were designed specifically for news outlets and websites.
The advanced search options and filtering capabilities will help your readership find their desired content faster and easier.
Bimer is another premium WordPress magazine theme that lets you launch a fully functional viral news website by using the powerful sharing features the theme comes packed with.
Including (but not limited to) sharing buttons, content filtering by popularity, multiple locations within the layout for advertisements and lightweight code, this theme is a good option amongst the bunch.
GoodLife is another premium WordPress news theme that comes packed with more than 10 unique pre-made demo designs, 4 premium plugins worth more than $100 and a plenitude of extensive functionality.
With a price that well justifies the cost of the included premium add-ons, GoodLife is a very affordable choice when it comes to picking a premium WordPress theme for your next magazine or blog-styled website.
Herald is a premium WordPress news theme that makes use of a modern-styled layout, carefully designed and developed with the purpose to be used by news portals and magazine websites. It has a fully responsive design that scales seamlessly on mobile designs, desktops and tablets alike.
With a custom advanced theme options panel and more than 500 variations for the article listing layouts, unlimited sidebars, sticky sidebars, and custom widgets you can hardly go wrong with Herald.
Barcelona is a clean, simple and easy-to-use news and magazine WordPress theme that has been built with simplicity and flexibility in mind.
The theme comes packed with a clean page builder, an interface that lets you easily combine 11 different page modules with 6 different featured posts styles.
Soledad is a premium, heavily-packed WordPress news theme that comes with over 5,000 homepage demos that could be used for multiple purposes. Being compatible with the Elementor Page Builder, the WPBakery Page builder and the 30+ custom elements for Elementor and the WPBakery Page Builder, Soledad is also compatible with GDPR and optimized for great speed.
Pair this with the 100% responsive design, compatibility with BBPress and BuddyPress and RTL language support and you get a theme that’s hard for others to compete with.
Soledad - Multi-Concept Blog Magazine WordPress Theme
FlexMag is a great combination of power and simplicity within a WordPress news and magazine theme. Flex Mag doesn’t require any coding knowledge and provides a multitude of options and flexibility that will let you put together the ultimate news site that’s straightforward in terms of usage and uncomplicated from a feature-richness perspective.
Use its Fly-Out navigation, custom scoreboard, auto-loading for posts and 4 different preset skins to achieve great results in terms of customizable designs and layouts.
NewsTube is a clean, well-organized and fully-responsive premium news WordPress theme. With its fully responsive layout, retina-ready design and many powerful features, the video magazine theme comes with a flexible theme layout and extensive options that allow for easy customization and reaching a website design that’d be exactly the way you’d like.
NewsTube supports video embedding from many popular sites including Youtube, Vimeo, Daily Motion and others. With this, creating great video channels and playlists won’t be a challenge.
NewsTube - Magazine Blog & Video
That’s It Folks!
This concludes our showcase of premium media WordPress themes that we have put together. We hope it has been useful and we’re eager to hear in the comment section below which one is your favorite and how you plan on making the most of it!
Even More Editorial and Media WordPress Themes
We’ve rounded up even more news and media themes for your next WordPress website, including some tips for designing your own–take a look at these example, hot off the press!
Add the best WPBakery add-ons and extensions ever developed to your page builder and add give your website visitors the experience they need. From carousel add-ons to extra WooCommerce product extensions, these WPBakery add-ons and extensions will provide endless new possibilities.
One of the many premium WPBakery page builder addons and extensions available on CodeCanyon
The WPBakery add-ons and extensions available on CodeCanyon will allow you to add extra features not only for your website visitors but for you in the back end of your site, making it much easier to manage your WordPress website.
Create a more powerful website by adding an extension or add-on to your WPBakery page builder today!
The Best WordPress WPBakery Page Builder Add-Ons & Extensions on CodeCanyon
Discover over 7,000 of the best WordPress plugins ever created on Envato Market's CodeCanyon. With a cheap one-time payment, you can purchase one of these high-quality WordPress plugins, extensions, and add-ons.
Here are a few of the best WPBakery add-ons and extensions available on CodeCanyon for 2020.
WordPress WPBakery page builder addons and plugins available for sale at CodeCanyon
These versatile and unique WPBakery add-ons and extensions will help you get the most out of your website. While WPBakery is a complete page builder, the feature-rich add-ons and extensions will allow you to add a wide variety of features to your website, such as:
carousels
extra WooCommerce features
audio players
content boxes
and much more
These extra features and functionality are a must-have for your WordPress website, so don't miss out! Head on over to CodeCanyon and choose from the premium add-ons and extensions available.
20 Best WPBakery Page Builder Addons & Plugins
Here are 20 of the top-rated WPBakery add-ons and extensions that are available for you to download on CodeCanyon:
It’s no surprise that Ultimate Addons is one of the highest-rated and best-selling addons for WPBakery Page Builder. With 20 updates since its inception, this is an addon that works consistently to stay ahead of the competition and deliver a product that meets the needs of a wide range of designers.
WooCommerce Extra Product Options helps you extend the functionality of your WooCommerce store by creating more product options, add conditional logic (within the form builder), and build a wide variety of forms.
Notable features:
control the placement of your new fields
full support for checkboxes, radio buttons, and select boxes
prices can change depending on the selected product variation
One of the top sellers at CodeCanyon, Composium is packed with a dizzying amount of features, including a Google Font Manager with more than 810 fonts, over 70 CSS3 animations, and the option to use any WPBakery Page Builder element in a sidebar. In addition, when you download this extension, you also get a built-in downtime/maintenance manager for your site, which allows you to create a custom maintenance page.
Massive Addons is an all-in-one extension that's packed with enough features to make even the most demanding web designer happy. The latest version has incorporated a ton of user-suggested improvements. Most notably, it has integrated a feature called "container presets", allowing users to preset entire rows or columns.
Video & Parallax Backgrounds is our favourite standalone add-on for adding video backgrounds as well as image parallax scrolling effects to your WordPress site. The plugin functions by providing row adjuster elements to which you can add the background and effects. You can also widen your rows into full-width, full-height, or fullscreen rows.
Notable features:
HD video backgrounds using YouTube, Vimeo or uploaded Webm, and MP4
parallax in four directions: up, down, left, and right, or even fixed
hover backgrounds: move or 3D tilt
make your rows full-height, full-width, or fullscreen
apply your backgrounds and adjustments to nested rows
With over 700 addons and 30 predefined templates, Unlimited Addons is the largest add-on bundle available for WPBakery Page Builder (Visual Composer). This mega-pack will help you build website headers and footers or create pages or sections for team member profiles, testimonials and reviews, design simple sliders, carousels and banners, etc.
Notable features:
one-click import layout from any WPBakery Page Builder page
Modal Popup Box comes bundled with CodeCanyon’s top-selling Ultimate Addons for WPBakery Page Builder but can also be bought as a standalone for those who are just looking for a popup feature. The addon allows you to add popups for a wide variety of purposes: opt-ins for email subscription, shortcodes, images, videos, contact forms, or social media widgets.
Notable features:
ability to create popups of various content, including images and video
Testimonials Showcase is designed specifically to help you display and manage your testimonials. It comes with several themes, colour schemes, and customisable options that will allow you to integrate the addon into your site seamlessly. Testimonials Showcase will have a broad appeal to businesses that need an elegant and easy solution for collecting and displaying customer feedback.
Notable features:
ten responsive themes
grid or slider display
submission form that allows customers to write and submit testimonials
This powerful WPBakery add-on takes carousels to the next level. The lightweight, flexible, and intuitive carousel gives you full control over how you present your media to your website viewers. You can even customize the padding, margins, and essentially every other design element. Add this one to your WPBakery page builder now!
Here are some of the add-ons most important features:
Earlier we mentioned that Video & Parallax Backgrounds was our favourite stand-alone addon for adding video backgrounds as well as image parallax scrolling effects to your WordPress site. If you’re looking for a few other great effects as well, Video & Parallax Backgrounds now comes bundled with over 20 other fabulous plugins in one add-on called Super Bundle.
The Image Hotspot with Tooltip comes bundled with another best-selling CodeCanyon addon, All In One Addons, but for those who don’t own that plugin, this standalone enables you to add a hotspot icon with a popup tooltip to any image on your site. The plugin may not be for everyone but will be of great value to photographers and e-commerce or educational sites.
Notable features:
the tooltip feature supports text, images, video, and other kinds of content
Modern WPBakery Page Builder Addons offers 45 fabulous elements and over 550 shortcode options, and in just two years it has become a powerful contender in the WPBakery Page Builder add-ons and extensions market.
Team Showcase for WPBakery Page Builder is a specialised add-on for WPBakery Page Builder that enables you to add a team or staff member section anywhere on your website in different layouts. Though designed specifically for showcasing team members, Team Showcase can also be repurposed to display testimonials or other image and text content.
Notable features:
ten predefined responsive themes
four different display options
ability to create custom links for each team member
Icon Box for WPBakery Page Builder does one thing very well: it provides users with over 450 Font Awesome icons for use on their site. To make it easy to navigate all these icons, the Icon Box creators have designed a super easy system to find the icon you are looking for with a powerful, integrated, real-time search.
VCKit is a feature-rich collection of over 45 beautifully designed elements with highly customisable features. This handy addon continues to go from strength to strength every year.
WP Post Modules is ideal for creating online magazine layouts, newspaper blocks, creative portfolio showcases, and regular blog feeds using a drag-and-drop interface.
Notable features:
seven display styles
20 pre-built home page layouts
grid and list modes
100% responsive design, optimised for retina display
Created by the authors of WPBakery Page Builder, Templatera is a WordPress template manager that allows users to create, manage and set access to templates based on user roles or content type.
Notable features:
easy content reuse across templates
edit content across templates from one central place
ability to import or export templates in XML format
If you’re looking for a WPBakery Page Builder addon that will enable you to create price estimates that give clients an idea of the costs involved in your service or product, Cost Calculator might be the perfect plugin for you. Cost Calculator allows you to easily create quote or price estimation forms for your WordPress site.
Notable features:
dropdown menus with image icons
numeric slider
on/off switch
reCAPTCHA
and more
Free WPBakery Page Builder Addons & Extensions for Download in 2020
The premium plugins available on CodeCanyon will offer you the most comprehensive set of features. If your current budget will not allow for the purchase of these high-quality add-ons and extensions, there are free alternatives that you can take advantage of.
Below is a collection of the four best free WPBakery add-ons and extensions available.
Livemesh is a great tool to add to your arsenal if you don't have the budget for a premium plugin. It features many different website building items such as post grids, bar charts, testimonial cards, and much more. Each element can easily be added to your website by dragging and dropping.
This add-on collection includes a whopping 28 add-ons that can help enhance your WordPress website. You can expect features such as member profiles, pricing tables, timelines, and countdowns.
Ultimate Carousel is a versatile extension for your WPBakery page builder that allows you to create carousels for any kind of content. Ultimate Carousel is responsive and touch-enabled and is compatible with mobile devices.
This extension gives you the option to add over 80 hover effects for your images with captions. Most of the transitions have thumbnail support, lightboxes, or custom links. This gives your images an interactive component that your users will love.
More Great WPBakery Resources on Envato Tuts+
In this article, we have gone over some of the best premium and free WPBakery plugins available. However, just owning the WPBakery page builder and the add-ons and extensions will not be enough to create a feature-rich website that your users will love. You need to know how to use these tools in order to build a successful website.
Check out the articles below on how you can get the most out of WPBakery and its extensions and add-ons.
Install a WPBakery Page Builder Addon or Extension Now!
In order to give your website visitors the best possible experience on your WordPress website, you will need to have a feature-rich website.
The premium WPBakery add-ons and extensions available on CodeCanyon will help you add these extra features to your website so that you can gain more traffic and run your business more effectively.
This list of WPBakery Page Builder add-ons and extensions just scratches the surface of the products available at CodeCanyon. So if none of the add-ons and extensions seem to suit your website's needs, there are plenty of other great options to choose from.
In addition to the WPBakery extensions and add-ons, there are thousands of other high-quality WordPress plugins on CodeCanyon that can help you improve your website. The large library of plugins contains everything from marketing to eCommerce and social media plugins.
Linters have been around for a good while; but if you’re new to CSS this might be the first you’ve heard about them. A CSS linter will keep your stylesheets in check and make you a better coder!
What Are the Benefits of CSS Linters?
As front end developers we hope that the code we write will be shipped to production and enjoyed by the users of our product. We spend a huge amount of time ensuring that we write code that is free of bugs and errors. But how many of these errors can we figure out without actually running the code? This is where tests come in, though there are certainly things that tests will not pick up, or might not be tested for at all.
For example, as a JavaScript developer, will you prioritize and write tests to handle cases of missing semi-colons? Or rather for performance issues that arise from making use of a universal selector?
The use of CSS linters makes it possible to capture the kinds of CSS issues you might not be aware of. This is especially helpful for beginners, whose skills are in the early phases. Beyond that, the benefits of using linters go well beyond performance to areas like security issues, static analysis, and so on.
Why Use Stylelint as Your Linter?
Stylelint is, in the developers’ own words:
“A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.”
Here are some features that Stylelint gives you;
It supports the latest CSS syntax and understands CSS-like syntax such as SCSS and Less.
It automatically fixes some styles of errors.
It has over 170 built-in rules to catch errors and enforce stylistic conventions.
It is opinionated, giving you the ability to enable only the rules you want to use and configure them to suit your preferences.
It supports sharable config which can be handy when working in a team.
There are different ways to use Stylelint, such as installing a plugin for your favorite code editor, or a plugin for Post CSS, but we’re going to use the Command Line.
Start linting by installing the NPM package on your machine. Open up your terminal and type the following command:
npm install -g stylelint
The above command installs Stylelint globally. If you prefer to have it project-based, you can do so with the command below:
npm install stylelint --save-dev
Then you can have this in the package.json file which is added to your project.
Note: before you actually run the linter you’ll need to set up the configuration, which we’ll cover in a moment. Without configuration an error will be thrown.
There are different combinations when running the command to lint your stylesheet. Let’s start from the one above.
stylelint "**/*.scss"
This command will search for styles in your application and attempt to lint them. If you want to run Stylelint scoped to a particular directory, you have to make use of:
stylelint "styles/*.css"
This works if you already have Stylelint installed globally on your machine. If you do not, you can add that to the script section of your package.json file. The command will lint all .css files contained in the styles directory.
There is also a command for cases where you want to lint the styles that are contained in HTML files.
stylelint "home/*.html"
This will handle styles that are written in the <style> blocks in all HTML files in the home.
Stylelint Configuration
Stylelint uses a configuration to figure out how you want to lint your styles. As an unopinionated tool, it has no styles turned on by default, even though there are default configurations that can be used.
Rules that you wish to use will be contained in the configuration. You will run into errors if you try to lint without having a configuration. Stylelint will be clueless about what to do without the configuration, it expects a configuration file.
There are different methods that can be followed when setting up configuration:
A stylelint property in your package.json file.
A .stylelintrc file. This file can either be in JSON or YAML format.
A stylelint.config.js file that exports a JavaScript object.
These are the places Stylelint will look when searching for the configuration to use. The configuration expected by Stylelint is an object which should have the following keys; rules, extends, plugins, processors, ignoreFiles.
Here is a sample of how a configuration file might look:
Here we are specifying the configuration we want to extend: the standard configuration.
Then we add a few rules we want to make use of. When getting started with Stylelint, you might want to begin by using an existing configuration file. Extending already existing configurations is a relatively easy way to start out, then you can override the styles by adding them to the rules object with your own configuration value.
Rules
In addition to the rules being turned off by default, there are no default values for any of the rules–you’ll have to configure the rules you want to use. To configure a rule, you have to make use of the rule’s name (which is the key) and the rule configuration (which is the value). Here is an example of how that looks:
"rules": {
"indentation": 2
}
In the above snippet, I am turning on the indentation rule. I do that by adding the key and value pair, which is the rule’s name and configuration, to the rules object.
According to the documentation, there are three ways of setting up a rule configuration:
A single value, like the example we have above.
An array with 2 values–the first will be the primary option, while the second is the secondary option
A null value–this turns off the rule.
The rules are broken into different categories like rules for errors, stylistic issues, and limiting language features.
Check the documentation to properly go through the possible rules. Here are a few we can cover:
Prevent Invalid Hex Values
Styelint makes it possible to prevent invalid hex values using the color-no-invalid-hex rule.
"rules": {
"color-no-invalid-hex": true
}
That will make a style like this invalid:
a { color: #00; }
This rule will help save you and your team from mistakenly using an invalid hex value for your color, or background-color, or other cases where you’ll need to make use of a hex color.
Add a New Line After a Semi-Colon
There is also a rule to add a newline after a semi-colon in a declaration block.
always: this requires that a new line is always added after a semi-colon.
always-multi-line: this requires a new line when the rule spans across multiple lines.
never-multi-line: with this value there must never be a whitespace after the semi-colon in multi-line rules.
You can check out the documentation for more on this rule.
Stylelint Plugins
Plugins make it possible to use rules are that not defined in Stylelint by default. You, or members of the community, can build plugins that adopt Stylelint’s methodologies. These plugins can then be used in addition to Stylelint. There are already tons of plugins that are available for you to try your hands on.
stylelint-color-format is a plugin that converts hex color to RGB or HSL format. To use it you need to first install the package.
npm install --save-dev stylelint-color-format
Next, you add it into the plugin array in your configuration.
{
"plugins": ["stylelint-color-format"]
}
With that, you can then add to the rules object to signify the rule’s name and the value you want to use.
There’s lots to learn about Stylelint, and you should now have a good grasp of what is it and how it works. Going forward, you can begin to adopt it into your workflow, and consider using other linters (such as ESLint) for keeping your JavaScript and other code you write in check!
Today, social media is one of the most effective ways to market your WordPress website, earning you invaluable word-of-mouth promotion, boosting your SEO, and helping you build a closer relationship with your audience.
So why make it difficult for visitors to connect with you on Facebook, Twitter, Instagram, and all of the major social media platforms?
Many WordPress themes come with built-in social media buttons, but what if your favourite WordPress theme doesn’t provide this essential feature? Or perhaps you’re not happy with how the built-in social sharing buttons are styled, and want to replace them with icons that don’t clash with the rest of your website?
In this tutorial, I’ll show you how to add essential social media features to your WordPress website. By the end of this article, you’ll have made it easy for visitors to follow you across all the major social networks, by adding icons that link through to your website’s social media profiles.
In addition to following you on social media, you’ll want to encourage visitors to share your latest blog post with their friends and family, potentially earning you hundreds of extra click-throughs and comments and generating that all-important social media buzz. To help you reap the benefits of social sharing, I’ll also show you how to add social sharing icons to your website, including a floating bar that follows visitors as they scroll up and down the screen, ensuring that your social sharing buttons are always within easy reach.
Does Your Theme Already Provide a Social Menu?
Are there any social media profiles associated with your website? Perhaps you’ve created a Twitter or Instagram where you share your latest blog posts, or maybe you want to include a link to your personal Twitter, so your audience can get to know the person behind the website?
In this section, I’ll be covering various ways that you can link to your social media profiles from your website. These social media links are typically represented as icons—for example, in the following screenshot, I’ve added links to my Twitter, Facebook, and Instagram profiles.
Whenever someone clicks any of these icons, they’ll be taken to the associated social media profile—perfect for turning one-off visitors into loyal followers!
There are several ways that you can add social icons to your website, but one of the easiest is to use a theme that provides a ready-made social links menu. If you’re unsure whether your current WordPress theme supports the social links feature, then head over to the Themes Showcase, which displays a list of social media-savvy WordPress themes.
Although the social links menu is one of the easiest ways to promote your social media accounts, each theme supports a specific set of icons, which you cannot customize. If you’re not a fan of your theme’s icons, then you’ll either need to switch to a different theme or use one of the alternative methods covered in this tutorial.
To activate the social links menu:
Log in to your WordPress account, if you haven’t already.
In WordPress’s left-hand menu, select Appearance > Customize.
Select Menus > Create New Menu.
Give your menu a descriptive name.
Select the Social Links Menu checkbox, and then click Next.
To add the first icon to your menu, click Add Items, and then click to expand the Custom Links section.
When you’re happy with the information you’ve entered, click Add to Menu. Rinse and repeat for every social media profile that you want to include in your menu. Once you’ve added all your social media profiles, you’re ready to make this menu live, by clicking Publish.
Head over to any page of your website—all of your social media profiles should now be displayed as part of a new menu.
How to Create Your Own Social Links Menu
If your theme doesn’t provide a social links menu, and changing your theme isn’t an option, then one alternative is to use a plugin. In this section, I’ll show you how to use Social Icons Widget to add social buttons to any widget area.
To set up this free WordPress plugin:
Log in to your WordPress account, if you haven’t already.
In the left-hand menu, select Plugins > Add New.
In the Search bar, start typing Social Icons Widget by WPZOOM. When the correct plugin appears, click its accompanying Install Now button.
When the Activate button appears, give it a click.
Your plugin is now ready to go! Let’s use it to create some links to our social media profiles:
In WordPress’s left-hand menu, select Appearance > Customize.
In the left-hand menu, select Widgets.
Select the widget area where you want to display your social icons, for example Blog Sidebar or Footer 1.
Select Add a Widget.
In the Search widgets section, start typing Social icons by WPZoom and then select the plugin when it appears. In Title, enter any title text that you want to display, in bold, above all of your social icons, for example Follow us on social media!
In the Text above iconssection, you can add some optional text that’ll appear above your social media icons. This is rendered in the style of a subheading, which will appear below any Title text that you add to the widget area.
You now have the option to Show icon labels. If you scroll to the Icons section towards the bottom of this menu, then you’ll find the default label for each social network and can customize it if required. While you’re here, you can also decide which social media accounts you want to include in your menu.
To add a social network, click Add more and then enter the URL for one of your social media accounts, such as https://www.instagram.com/mywebsite or https://www.pinterest.co.uk/example. The plugin should identify the network based on the URL and display the correct icon automatically.
Choose whether clicking one of your social icons should launch a new tab, or whether the link will be opened in the current tab. You can now style your icons.
Most of these options are fairly self-explanatory. For example, you can use the Icons Alignment dropdown to choose where these icons appear within the selected area, and whether your buttons should feature a colourful icon with no background or a white icon with a colourful background. It’s worth exploring these settings in detail, as you can create some interesting and unique effects.
When you’re happy with your configuration, click Apply, and links to all of your social media profiles will be added to your website.
Generating a Social Media Buzz With Simple Share
Your social media accounts are a powerful tool for promoting your website. However, you can reach an even wider audience by encouraging visitors to share your content via their own social media accounts.
Not only can social sharing introduce your website to an entirely new audience, but people are more likely to pay attention to content that’s shared organically by a third party, rather than by the person who created that content. If you make it easy to share your content, then you may find that a chunk of your website’s traffic comes from third parties!
By adding social sharing buttons to your website, you can allow visitors to share your content with just a few clicks. In this section, I’ll be adding these quick and convenient social sharing buttons to my website, using Simple Share Buttons Adder.
This free plugin allows you to choose exactly where your social sharing buttons appear. For example, you might restrict these buttons to specific webpages, or embed them in the middle of your blog posts so visitors don’t have to scroll to the very bottom of the page in order to share your content.
You could even choose to hide the social sharing buttons on certain webpages, which might be handy if you’ve monetized your website by creating an Amazon affiliate store, but would prefer visitors to share your website’s unique content, rather than Amazon’s products.
In this section, I’ll show you how to set up Simple Share Buttons Adder and then use it to create a row of social share buttons.
After we’ve created this simple row, I’ll be exploring some other ways that you can display these buttons, such as embedding them in your content using a shortcode or transforming them into a floating share bar.
To create a row of share buttons:
In WordPress’s left-hand menu, select Plugins > Add New. Search for the Simple Share Buttons Adder plugin, and when it appears, select Install Now. When prompted, click Activate. In WordPress’s left-hand menu, select Settings > Simple Share Buttons.
You can now create a lineup of all your favourite social networks, using drag and drop.
Now it’s time to specify exactly where these buttons should appear on your website. You can use the sliders to restrict these buttons to specific categories of content, such as Pages, Posts, and the Homepage. Alternatively, it may be quicker to specify where these buttons shouldn’t appear, by typing the name of each page into the Hide On These Pages field.
Simple Share Buttons Adder gives you lots of different ways to style your sharing buttons, so click to expand the Styling section and spend some time exploring the available options. As you experiment with these settings, WordPress will display a live preview, so you can monitor how these buttons will eventually appear on your website.
At this point, you may also want to add a live counter, which will display how many times this particular piece of content has been shared via social media. To add a live counter, click to expand the Counters section and then drag the Share Count slider into the On position.
When you’re happy with your settings, click the retro floppy-disc icon.
Your chosen social sharing buttons will now appear on your website. If you click any of these buttons, then it’ll automatically launch a popup that contains all the information you need to post this content to your chosen social media platform.
Embed Social Sharing Buttons Anywhere on Your Website
Alternatively, once you’ve set up your social sharing buttons, you can embed them in any location, using the automatically generated shortcode. For example, you could encourage visitors to share your blog post, by displaying your sharing buttons immediately after your blog’s most compelling paragraph.
To embed your social media sharing buttons anywhere on your website:
In WordPress’s left-hand menu, select Settings > Simple Share Buttons.
Scroll to the Shortcode section, and click to expand. This should reveal a shortcode.
Click the shortcode’s accompanying Copy button.
Navigate to the page, post, or any other item where you want to display your sharing buttons, and open that item for editing.
Find the exact location where you want to display these buttons, and paste the shortcode into this section.
Your social sharing buttons will now appear at this exact location.
Create a Floating Sharing Bar
You can encourage visitors to share your content, by ensuring that your social sharing buttons are always within easy reach. Using this plugin, it’s possible to create a floating sharing bar, which will follow visitors as they scroll around the page.
To create this floating bar:
Navigate to Settings > Social Share Buttons.
Select the Share Bar tab.
Find the Share Bar slider and push it into the On position.
You can now configure your share bar in exactly the same way you configured your original social sharing buttons.
Conclusion
In this tutorial, I showed you how to encourage visitors to follow you across all the major social networks and share your content via their own social media accounts. I also covered a number of ways that you can customize the default social media buttons, based on the look and feel of your website, and how to change where these icons are displayed.
Do you have any tricks or tips for encouraging people to interact with you on social media? Or a favourite social media plugin that we didn’t mention? Let us know in the comments below!
The Best WordPress Themes and Plugins on Envato Market
In this tutorial you’ll learn how to edit PSD files, in the browser, without using Adobe Photoshop. It’s possible thanks to a tool called Bannersnack, so let’s take a look and see what it’s all about!
Editing PSD Files With Bannersnack
Watch the video tutorial, or check out the text version underneath.
Bannersnack: the Original Online Banner Maker
You might know Bannersnack as “the original online banner maker” and you may have used it for your own marketing campaigns. But Bannersnack is actually a more versatile design tool than you might think.
Your Bannersnack Workspace
Visit bannersnack.com, sign up for a free account, and click on My Workspace to begin working.
In your workspace you’ll get access to all the projects you’ve created, and quick links to kick off new projects.
Designing Banners in the Browser
We’re going to click on Make a banner (a single banner, instead of a collection) which will take us to a bunch of premade templates. There are different sizes, different layouts, and templates for all the social media assets you could need. There are even templates for print projects such as business cards and flyers.
You might prefer to create your own banner from scratch, in which case the editor will give you all the tools you need to design, save, and output your own project in the browser. If you’re used to designing in Adobe XD, Sketch, Figma, or any other major design application, the tool selection will all seem perfectly intuitive:
Banner Generator
Bannersnack’s real power is in creating banners (unsurprisingly) and its automated generator tool is especially convenient. When designing banners you’ll need to account for all kinds of dimensions and sizes; letting Bannersnack take care of that for you will save you loads of time.
Note: this feature is only available to Premium users of Bannersnack, so you will need to pay to get access. Pricing begins at $7/mo for individual licenses.
Create a new project, but this time choose a Banner set:
You can then select the range of banner sizes you want to cater for, and then go on to pick a template (static or animated). Take a look at this chocolate banner design; the same design assets, fully editable, applied across various layouts:
Saving and downloading all the asses you’ve created is the same process as with single banners. Your new project will be available to continue working with in your workspace.
How to Edit PSD Files With Bannersnack
So that’s given you a sound introduction of working with Bannersnack, but this tutorial is actually about editing Photoshop files in the browser, so let’s get things back on track!
Recently, Photoshop integration was added to Bannersnack, and with it an online PSD editor. There are two ways to get a PSD file into the Bannersnack editor to work with it:
#1. Use the Photoshop Plugin
The first approach is to send the file, from Adobe Photoshop, to Bannersnack, and this requires the Photoshop Plugin. For that to be possible you’ll need to install ZXP Installer. This open source extension will allow you to install the ZXP plugin file on Windows or Mac OS.
Once installed in Adobe Photoshop you’ll be asked for an API access key, which you can get from bannersnack.com under your Account details.
With that added to the plugin window within Adobe Photoshop you’ll be logged in and ready to go. In the image below you’ll see I have selected one artboard (this Photoshop collection of tech banners is available on Envato Elements), and it’s ready to be moved to your workspace via the Bannersnack plugin panel:
Once added, your PSD banner is available to edit, just like any other Bannersnack template.
#2. Upload PSD Directly
This method is perhaps the most convenient as it doesn’t even require you to have Photoshop installed on your system.
Go to your workspace and Create new project (just as before). This time, instead of selecting a banner template or starting your own from scratch, you can drag and drop your PSD file straight into the browser.
You’ll be shown a list of all the layers present in the file you’re uploading, and you can select/deselect those layers depending on whether you want them to be imported or not.
Note: Bear in mind that missing fonts from your system may create minor inconsistencies when the design is imported, but that’s the case with any design application, and it’s easily remedied.
Editing Your PSD
Bannersnack tools allow you to move the PSD layers around, remove them, add other elements (such as text, and stock images) and even add animation. Take a look at the video at the top of this post for more details of what’s possible with the PSD editor.
Conclusion
So there you have it; a very simple solution for editing PSD banner designs directly in the browser! Before signing off, let’s just look at some reasons you might want to consider using Bannersnack.
5 Reasons for Using Bannersnack
It’s free! The fundamental tools within Bannersnack are all free to use.
You don’t need to own Adobe Photoshop to edit PSD files with Bannersnack.
You won’t need to rely on a designer to make simple changes to a PSD file.
You can export in a wide range of formats (JPG, PNG, GIF, MP4)
Bannersnack allows you to animate easily, something you’ll struggle to do with Photoshop.
.jpg)
.jpg)
.jpg)
