Sufyan bin Uzayr – Web Design Ledger https://webdesignledger.com By Web Designers for Web Designers Mon, 06 Feb 2017 17:10:16 +0000 en-US hourly 1 https://wordpress.org/?v=6.5.5 https://webdesignledger.com/wp-content/uploads/2015/08/cropped-Web-Design-Ledger-512x512-Pixel-32x32.png Sufyan bin Uzayr – Web Design Ledger https://webdesignledger.com 32 32 Elementor: A Unique and Useful Page Builder Plugin for WordPress https://webdesignledger.com/elementor-unique-useful-page-builder-plugin-wordpress/ https://webdesignledger.com/elementor-unique-useful-page-builder-plugin-wordpress/#comments Tue, 07 Feb 2017 13:00:11 +0000 http://webdesignledger.com/?p=39690 There is no shortage of page builder plugins and drag and drop editors for WordPress. You can choose from various free and premium WordPress plugins to create and edit your websites on the fly, live with the help of drag and drop mechanism. You do not need to touch even a single line of code! […]]]>

There is no shortage of page builder plugins and drag and drop editors for WordPress. You can choose from various free and premium WordPress plugins to create and edit your websites on the fly, live with the help of drag and drop mechanism. You do not need to touch even a single line of code!

However, amidst such a crowded market, one particular WordPress page builder plugin stands apart: Elementor.

Elementor is a unique and intuitive method of editing and publishing websites in WordPress. Of course, it is a page builder and drag and drop editor, but it offers you absolute control over each and every aspect of your site. You can modify the layout, design elements, appearance as well as make CSS tweaks — all without having to deal with code.

Elementor has a lot to offer and we will soon see the Elementor plugin in action, but first, let us spend a moment to enumerate its various features.

Elementor: Versatile Page Builder Plugin for WordPress

Elementor: Major Features

So, what does Elementor bring to the table?

First, Elementor is fully compatible with virtually every extension and post type that is related to WordPress. This means you can use any free or premium WordPress theme, and make it work with Elementor. But that isn’t all — Elementor lets you work with custom post types, landing pages, portfolio and special pages, and so on.

Elementor comes with its own set of “elements”, or specialized widgets. Using such widgets, you can add content to virtually any section or region of the given page. As such, all you need to do is drag the concerned widget and drop it at the required place in the live editor. Elementor also plays well with third party widgets that you might add using any other WordPress plugin.

Need more? Here is a list of some other features of Elementor:

  • Fully open source, licensed under GPL
  • Translation ready (and compatible with plugins such as Polylang and WPML)
  • Supports Google Fonts and custom icons
  • Optimized for search engines
  • Offers granular control over borders, colors, and other aspects
  • Comes with its own Template Library feature that lets you insert professionally designed templates with a single click (or save your own templates, or import/export them for use on other sites)
  • Elementor supports live Mobile Editing which means you can visually adapt the page design to be mobile responsive to all devices
  • Made a mistake? Elementor has detailed Revision History so that you can undo or redo steps even after saving changes

Well, now that we have seen what Elementor is capable, why don’t we see it in action?

Mode of Operation

Upon activation, Elementor adds a new menu in the WordPress admin panel.

Elementor Menu page Builder WordPress Plugin

Before actually using the plugin, I decided to go through the Settings section. Basically, you get to pick the user roles which will have access to the plugin’s functionality, as well as enable or disable color palettes, set default fonts, integrate reCaptcha, etc.

Elementor User Roles

This is where Elementor scores its first goal. Most page builder plugins overload the settings section, making it almost impossible to actually customize the plugin. Elementor has simplified things here, and this is what adds to its UX score.

elementor Settings

Working with templates is fairly easy. The live editor occupies the full page area once you activate it. The best way to describe it would be to divide the interface in two separate sections.

First, you have the global elements. You can specify global fonts and colors for your WordPress website. Furthermore, you can also save and reuse widgets as global entities, making them good for not just the current viewport but the entire site.

Global Elements in Elementor

For instance, here is what your global font selection would look like:

Global Fonts

Thereafter, you have specific “elements” that you can drag and drop on to the page. The list, as mentioned above, is rather large. You can add text, embed video, images, and a lot more in the free version itself. If you are using the Pro version, you can even add slides, custom templates, countdown timers, and a lot more.

Elementor Widgets

It is worth noting that Elementor treats “elements” much like WordPress widgets. Thus, you also have the luxury of existing WP widgets that you can drag and drop in the live editor itself.

This is how the social icons element behaves when put into use:

Social Icons Elementor

Every element offers granular and well-detailed control over its appearance. You can set display rules to show or hide it on particular devices, alter the border, padding and other layout, and so on.

Widget Settings

Once done, just hit Save and your template is ready. You can then reuse it across as many pages as you want.

Pricing

The free version of Elementor page builder plugin is free for life and is available in the WordPress repository. Also, Elementor is fully open source and GPL-friendly and has its own API. In fact, many developers have already created addons, extensions and integrations that work seamlessly with Elementor.

The Pro version of Elementor, in essence, is an extension of Elementor. It comes in three flavors:

  • Personal License costs $49 and lets you use Elementor Pro on one site.
  • Business License costs $99 and works across three sites.
  • Unlimited, as the name suggests, works on unlimited sites and costs $199.

All premium licenses come with a 30-day money back guarantee and one year of updates and support.

Conclusion

Elementor is a worthy page builder plugin for WordPress users. It is simple, easy to use, and does not cause much bloat on your site. In fact, Elementor can do your site wonders especially if you are short on time and wish to quickly setup websites.

The only drawback that I noticed was the lack of white-labelling ability in the premium versions. Ideally, if it were available as a white-labeled tool, Elementor’s Unlimited license could have proved especially useful for design agencies and freelancers.

That said, Elementor is a time-saving, easy to use, non-bloated and valuable WordPress plugin that you should surely give a spin!

]]>
https://webdesignledger.com/elementor-unique-useful-page-builder-plugin-wordpress/feed/ 3
Responsive Foundation Framer: Responsive Design Made Easy https://webdesignledger.com/responsive-design-foundation-framer/ https://webdesignledger.com/responsive-design-foundation-framer/#respond Mon, 26 Sep 2016 14:00:58 +0000 http://webdesignledger.com/?p=37870 There are a good number of front-end editors out there when it comes to responsive design. Some are based on Bootstrap, others on different frameworks, and so on. However, most of them suffer from the same problem — they lack absolute control and originality. As such, most responsive design webpages tend to look similar in […]]]>

There are a good number of front-end editors out there when it comes to responsive design. Some are based on Bootstrap, others on different frameworks, and so on. However, most of them suffer from the same problem — they lack absolute control and originality. As such, most responsive design webpages tend to look similar in nature.

If you have ever experienced the same problem, consider it solved. Meet Responsive Foundation Framer, a unique solution by CoffeeCup that gives you absolute control over your design and at the same time, helps you create intuitive and responsive design without coding.

Responsive Foundation Framer: Responsive Design Made Easy

What is Responsive Foundation Framer?

Responsive Foundation Framer is a visual front-end editor with a solid grid system and custom predefined styles. It is based on the Foundation 6 framework., therefore, Responsive Foundation Framer is minimal, modular and lets you combine elements and styles with ease.

Responsive Design

To begin with, Responsive Foundation Framer lets you harness the full power of CSS without having to deal with even a single line of code! You can specify the dimensions and run through the customization options and it will generate the required CSS code all by itself. Similarly, you can use the color picker to manage the color palette and the inline editor as well as the clickable controls to handle typography. Responsive Foundation Framer plays well with Google Fonts.

But what about content? Well, you can place your content wherever you want it, be it absolute positioning, float or using the Flexbox controls. You can layer multiple backgrounds and structure different layouts all in the matter of a few clicks! Plus, you can use the Picture element to serve different image sizes to your users on the basis of the device that they are using.

Considering the fact that Responsive Foundation Framer is based on Foundation 6 framework, it comes with the advantages of the Motion UI. You can, therefore, easily create animations and transitions with the help of data attributes.

That’s a rather strong list of features, isn’t it? But how does it fare on practice? Let’s put Responsive Foundation Framer to test and see what it can boast of.

Responsive Design: Responsive Foundation Framer Sneak Peak

Most of the action in Responsive Foundation Framer happens by means of components. It comes with its own set of prebuilt and readymade components that you can make use of. Accordions, navigation menus, tab panels, modals, etc. are all there and you just need to click to insert. More importantly, you can create your own interactive components with the help of HTML elements and CSS mixins.

Also, Responsive Foundation Framer includes symbols for global content updates. What does that mean? It means you can save elements (say, a header or a footer) and then update them all from one spot.
componets

The interface is fairly straightforward.  You can edit the rows and layouts as well as different elements on the basis of the right panel.

responsive design

Bear in mind that we are talking about responsive design here. Now since Responsive Foundation Framer is a visual tool, it allows you to click and drag to change, edit, add or delete breakpoints. We know that Foundation framework comes with two breakpoints, but you can add or delete breakpoints by dragging the slider in the tool.

responsive foundation framer

For instance, when the breakpoint value is reduced, Responsive Foundation Framer reacts accordingly:

when-breakpoint-is-reduced

Since my screen was smaller, it allowed me to zoom in and out while fixing breakpoints, so that I can create designs that play well on larger screens too. This design and device agnostic approach is the back-bone of responsive design. It is refreshing to note that Responsive Foundation Framer is aware of this fact.

Once done, you can preview your work on the web browsers installed on your device.

Browsers

You can sync (“Publish”) to the cloud if you have a paid subscription, or you can “Export” and deploy to your website or server elsewhere.

Responsive Foundation Framer comes with various customizable themes.

Festival Theme

You can, of course, tweak every theme to suit your needs and requirements.

Wave Theme

Unit Switcher: Control Unit Measurements on the Fly!

Responsive Foundation Framer lets you control unit measurements on the fly. We know that not all units are created alike. For example, layout elements work great with percentages as they can adapt based on the available width. While working with margins and padding you may want to use EM so you can space out your elements relative to the size of your text. However, what if you wish to use fixed dimensions for the purpose?

Unit Switcher

This is where the Unit Switcher proves useful. Visual designers will totally dig the VW option for fluid typography that resizes smoothly based on the device width and not just at a breakpoint. What to use when? It really depends on the design problem you’re addressing!

Pricing

Responsive Foundation Framer costs $79 for one license. It includes all of the features as well as premium quality support and access to documentation and tutorials.

There is a free trial option available as well. Responsive Foundation Framer runs on OSX and Windows devices.

Verdict

Responsive design is no longer a luxury. Everyone accesses the web via mobile devices at some point or the other during the day. Similarly, many people do use gigantic screens on their computers. All said and done, if your website is not responsive, it is of very little use.

As such, as a web designer, your designs should adhere to the principles of responsive design. Now, for the most part, most “responsive design” tools tend to repeat the same process over and over again. Either you are expected to code everything from the start, or you are given a severely crippled frontend editing functionality that offers a limited number of breakpoints and options for you to work with. In either case, your responsive design project does turn out responsive enough — but it lacks uniqueness and innovation that is expected from a web design concept.

Responsive Foundation Framer is an ideal tool for the job. By offering you granular control over each and every aspect related to your design, Responsive Foundation Framer makes it easy to create truly responsive design concepts. Similarly, several frontend visual editors tend to overlook the importance of web fonts; this one does not! Responsive Foundation Framer supports Google Fonts.

You also have the option to work with the back-end and export your stylesheets to the code editor of your choice. This makes it useful for folks who like to work with code rather than point and click all the time.

All said and done, Responsive Foundation Framer is a very useful solution when it comes to visual front-end editors for responsive design. By all means, you should consider giving it a spin right away!

Visit Responsive Foundation Framer

]]>
https://webdesignledger.com/responsive-design-foundation-framer/feed/ 0
Mozello: A Website Builder For Creating Amazing Sites https://webdesignledger.com/mozello-website-builder/ https://webdesignledger.com/mozello-website-builder/#comments Wed, 14 Sep 2016 16:00:59 +0000 http://webdesignledger.com/?p=37286 Due to the ever-increasing reach of the internet, having an online presence or website for your business is no longer a luxury but a necessity. Now, not everyone can code and deploy websites. Similarly, hiring web developers or design agencies too might be overkill and beyond the budget of many folks. If this is the […]]]>

Due to the ever-increasing reach of the internet, having an online presence or website for your business is no longer a luxury but a necessity. Now, not everyone can code and deploy websites. Similarly, hiring web developers or design agencies too might be overkill and beyond the budget of many folks. If this is the case, a website builder can come to your rescue.

Basically, a website builder lets you create a blog, website or an eCommerce store with ease without having to deal with technical aspects of web development. A good website builder will take care of everything for you such as web hosting, coding, mobile-friendly websites, etc.

If you are looking for one such solution, meet Mozello. It lets you create modern, feature-rich and amazing websites in just a matter of a few clicks.

Mozello: A Website Builder For Creating Amazing Sites

What is Mozello?

Mozello is a simple and no-nonsense website builder that does just what it is supposed to do: help you create websites. It has a ton of features to its credit, and whether you are building a blog, a website or an online store, Mozello can handle it all.

Here is a basic run-down of all that Mozello has to offer:

  • Mozello lets you setup and build websites in just a matter of few clicks and within minutes.
  • Every website that you create using Mozello is fully responsive and mobile-friendly. Thus, no matter which device your visitors might be using, your website will look great across all screen sizes.
  • Mozello supports multilingual websites and also offers exemplary SEO features.
  • You can integrate with external services such as Disqus or Google Analytics.
  • Mozello offers support and detailed documentation if you ever run into a problem.
  • Mozello can be used to create virtually any type of website: a portfolio, a corporate site, a blog, a news site, an online store, etc.
  • Mozello is totally ad-free (even on the free plan).
  • You need absolutely zero technical skills in order to use Mozello. In other words, there is no steep learning curve.

Pricing

Mozello offers three plans for you to choose from — Free, Premium and Premium Plus. Let us run the features of each plan.

The Free plan, as the name suggests, is free of cost. You get 500 MB of storage and you can create an online store with ten items. The catch is that the free plan shows a Mozello link in the footer. Plus, you must use a sub-domain for your site such as yoursite.mozello.com If you have had any experience with WordPress.com free plans, you can notice a good deal of similarity here.

mozello website builder

The Premium plan of Mozello does away with all the limitations. You get 50 GB of storage and can add up to 100 items in your online store. Plus, you also have the ability to map your custom domain and there are no links to Mozello anywhere on your site. This plan costs $7 per month.

And the Premium Plus offers everything of the Premium plan, but with no limits. You get unlimited storage and can add unlimited products to your online store. For this plan, you will have to pay $14 per month.

Also, it is worth noting that all plans support mobile devices and offer great customization features to help you setup your website. Furthermore, social media integration, SEO, support for Google Analytics as well as access to HTML code is available on all the plans, including the Free plan.

Mozello in Action

Once you login to your Mozello account, you are presented with the choice to select the design template that you wish to work with. This, of course, can be changed later on.

Thereafter, the customization and editing happens by means of a frontend live editor. You just need to click on the concerned block or section and then you can edit it therein.

1

 

Similarly, adding a new font scheme or color scheme is also a matter of just a few clicks.

2

 

The sidebar on the left offers you links to the sections that you might need.

mozello sidebar

You can add a blog or news section to your site. It is interesting to see some fine details in Mozello. For instance, you do not see any mention of comments when live editing your website. But if you head to the Settings part of your blog, you will find a field to add your Disqus shortname and integrate Disqus comments on your blog.

mozello disqus website builder

In the Settings panel, you can specify the favicon for your website as well as Google Analytics tracking ID. You can also change your account settings.

mozello settings

For code junkies, the ability to add custom HTML code in body or head is also there.

mozello code

As you can see, creating and editing a website using Mozello is fairly easy and requires no knowledge of web design at all.

Conclusion

A good website builder should be able to do two broad tasks: save the user’s time and be powerful enough to accommodate different types of websites. Mozello accomplishes both of these tasks very well.

First, it can save you not just time and efforts but also money. Picturize this: you can code and build your website yourself. So you probably can invest time and save the Mozello fees. However, you still will need some place to host your site, and good web hosting is not always cheap. As such, even if you possess the technical skills required to build websites, you might still end up spending more than what you would’ve with Mozello. For $14, you can get unlimited storage with Mozello as well as a handy website builder; doesn’t happen everywhere, does it?

Secondly, Mozello does not churn one website after another. Instead, it gives you full control of your site. Don’t like a given block or page? Remove it or edit it. Wish to change the font scheme? Need a blog on your site? All yours!

Website builders are not everyone’s cup of tea. Sometimes, you do need access to a proper database as well as custom coded scripts. For example, if you are running a gigantic forum, you might be better off with a dedicated piece of software. However, for all practical purposes, if you wish to get online quickly either for your own site or your clients’, Mozello is a decent and worthy site builder that you should surely take a look at.

Visit Mozello

]]>
https://webdesignledger.com/mozello-website-builder/feed/ 1
Zoey: An eCommerce Platform With A Difference https://webdesignledger.com/zoey-ecommerce-platform/ https://webdesignledger.com/zoey-ecommerce-platform/#comments Mon, 22 Aug 2016 13:00:17 +0000 http://webdesignledger.com/?p=37024 There is no shortage of eCommerce platforms and tools for online businesses. However, most of them suffer from the same flaw: they are either overloaded and bloated, or they rely on heavy customization and coding skills. Even more so, numerous eCommerce platforms tend to work well only if you extend their functionality by means of […]]]>

There is no shortage of eCommerce platforms and tools for online businesses. However, most of them suffer from the same flaw: they are either overloaded and bloated, or they rely on heavy customization and coding skills.

Even more so, numerous eCommerce platforms tend to work well only if you extend their functionality by means of addons and plugins. Otherwise, it is nearly impossible to run an eCommerce store.

Ever faced the same problem with eCommerce platforms? If that is the case, this post has a special solution meant for you. Meet Zoey, a new eCommerce platform and online store builder.

What makes Zoey special? Well, it expects no coding skills from you, and works perfectly well right from the start.

Zoey: An eCommerce Platform With A Difference

What is Zoey?

As already stated, Zoey is an eCommerce platform and an online store builder. As an eCommerce platform, Zoey gives you absolute control over your online business. And as a store builder, it lets you put together your online shop within minutes using a handy drag and drop interface. Even if you have never built an online store before, or having no experience in coding, Zoey is very easy to master.

Zoey Featured

We will be giving Zoey a spin later in this article, but first, let us take a look at its major features.

Design

To begin with, Zoey offers an impressive arsenal of web design features that can give any other tool a run for its money. Don’t like coding? Have no fear, the drag and drop builder can be used by anyone. Need pre-made presets and design assets to save your time? How about a special style editor for controlling every single element of your site, and a live preview to help you view your changes in realtime? Yes, Zoey offers all of that.

Plus, since this is the era of the mobile web, Zoey offers special tools to preview and test mobile design. In addition to that, Zoey also comes with several free and fully responsive themes that are ready to be customized as per your needs.

zoey ecommerce

Infrastructure

Your online store is only as good as the infrastructure it is hosted on. After all, if your visitors find your website offline, there will be sales.

Zoey takes care of everything, thereby giving you time to focus on your actual business. Whether you need specialized datacenter location to target customers from a specific location, or a Content Delivery Network to boost the performance of your store, Zoey offers it all. You get to choose from 10 globally distributed datacenters and powerful scalable hardware. Your store also gets unlimited bandwidth, so have no fear even if you get millions of hits daily.

Also, Zoey implements site-wide HTTPS to foster a feeling of trust and security for your visitors and clients.

Marketing, Payments and Operations

Zoey offers a large array of marketing tools to help you drive more traffic and sales to your store. You can run batch promotions, discounts, special coupons and gift deals. Zoey has Search Engine Optimization tools that you can utilize in your store such as site wide HTTPS, advanced site map, and mobile friendly design. These are all things that Google looks at to give you a higher rankings in search. Zoey also gives you the freedom to customize H1 tags, title tags, meta descriptions, URLs and more to improve rankings.

Zoey comes with detailed statistics and reports for cases such as cart abandonment. You can also integrate it with various other platforms such as Google AdWords, Optimizely and MailChimp.

You can implement over 50 payment gateways on your store, including credit cards, PayPal, bank transfers and Cash on Delivery. If you are selling physical good on your store, you can select from various shipping carriers, manage inventory and even integrate with the likes of Etsy and eBay.

B2B eCommerce

Screen Shot 2016-08-19 at 11.13.52 AMIf you are running a wholesale business or B2B store, Zoey is the ultimate solution for you. Now merchants take take advantage of essential features needed to run a B2B business, such as site access restrictions. This will allow you to control the customers who can access your store or which customers have the ability to checkout. You can make the entire store password-protected so only the customers that you have pre-approved on the backend can view your store. Another setting in B2B is the pricing flexibility – which is extremely important for any B2B business. Zoey let’s you customize pricing based on customer group and order volume so you can manage different pricing for wholesale and retail customers. Furthermore, you can allow bulk orders, offer custom pricing for B2B buyers, and so on.

Well, enough with the features. How does Zoey perform in reality? I decided to give Zoey a spin and find out.

Zoey in Action

Once you successfully login to the admin panel, you will find it fairly similar to any modern-day CMS out there. There are specialized menus for each function to help you get started. I am going to run each menu one at a time, so as to give you a comprehensive picture of all that you can expect from Zoey.

Zoey Menu

The first menu is fairly simple, whereas the Orders menu lets you view new orders and manage them accordingly. However, the standout menu, in my view, is the Analytics section. Now, many eCommerce platforms tend to outsource analytics to external services, such as Google Analytics or likewise. However, Zoey offers it all for you straight in the admin panel. You get details such as total number of orders, conversion rate, revenue earned, purchase funnel, etc. Furthermore, you also get to view analytics related to abandoned carts to help you better optimize your site.

Zoey Analytics eCommerce

Adding products to your store is a breeze too. You can setup categories and attributes, specify gift cards or discounts, and add a product within minutes. Interestingly, Zoey lets you add SEO details, and upsell or cross-sell features right at the time when you add a new product. There is no special extension or page that you need to visit.

Add Products eCommerce

Similarly, you can create lists and groups of your customers, or export that list as a backup. Adding a discount rule is also pretty easy, perfectly with all the conditions and time limits for the particular discount.

Zoey Add Customer

In the Setup menu, you can add details such as shipping, localization, taxation, et al. Similarly, for advanced users, there are API integrations, URL rewrites and various other options available in the Advanced menu.

However, one of the most striking feature of Zoey is the Blog menu. Now, there are numerous blogging platforms out there, and there are numerous eCommerce platforms out there. However, what if your eCommerce solution allowed you to run your blog natively? I know many big online stores that use an external solution, such as WordPress or Ghost, to run their blog. This is often an unwanted maintenance on their hands, because more often than not, online stores tend to use their blogs only to mouth the company developments, announce new deals, etc.

Zoey lets you run a blog from the admin panel itself. You just need to specify a blog address (such as mystore.com/blog or mystore.com/notes and so on), and then get started with writing.

Blogging Zoey

You can add excerpts, categories and tags to your posts in the blog.

Blogging eCommerce

As you can observe, Zoey’s backend is fairly simple and straightforward that can be mastered within minutes.

But wait, aren’t we forgetting something?

Yes, the drag and drop editor!

All you need to do is hit Edit My Design, and then select the page that you wish to edit.

Zoey Edit

All edits happen live with previews, so you can be sure of what you are doing. You can drag and drop elements, or add new elements directly in the live editor.

Drag and Drop

All themes are free and responsive, so you can select whichever one that you love the most.

Themes

Pricing

Zoey offers three plans for you to choose from. All plans come with support for responsive themes, advanced analytics, unlimited storage and bandwidth, custom domains, as well as Point of Sale and Amazon/eBay integrations.

Professional Plan costs $89 per month. If you need something extra, opt for the Business Plan at $199 per month that comes with support for HTTPS, B2B functionality, CDN, and multiple languages and currencies.

Beyond that, there is also the Premier plan that starts at $599 per month. It comes with enterprise level features such as custom apps and design, a dedicated account manager with priority support, and a lot more.

All plans come with a 14-day free trial, so you can give them a try with no string attached. Also, there are no setup or transaction fees involved in any plan.

Conclusion

Running an eCommerce store is complicated business. You have to take care of shipping, product management, taxes, customer support, and a lot more. Quite obviously, website management and development as well as hosting can be another chore that you’d be better off avoiding.

Zoey is very clearly a good fit for online stores and businesses. It does its job well, and lets you focus on the actual management of your business. You can easily forget about web hosting, running custom scripts to integrate payment gateways, or paying a hefty fees for getting a responsive site.

Furthermore, if you are a web designer yourself or a web design agency, you should by all means give Zoey a try right away! It goes without saying that you must be having various clients asking you to setup a website for their eCommerce store. Using Zoey, you can setup websites and stores within minutes, and since the interface is beginner-friendly, you can pass on the website to the clients easily.

So what are you waiting for? Go ahead and make use of the 14-day free trial, and check out Zoey right away!

]]>
https://webdesignledger.com/zoey-ecommerce-platform/feed/ 5
CSS Hero: Customize WordPress Themes Easily https://webdesignledger.com/css-hero-customize-wordpress-themes-easily/ https://webdesignledger.com/css-hero-customize-wordpress-themes-easily/#respond Thu, 21 Jul 2016 17:35:21 +0000 http://webdesignledger.com/?p=36773 It is common knowledge that there are a large number of WordPress themes out there that can lend your website or blog a unique look. You can opt for a simple free WordPress theme, or go with a premium theme, or even select a framework or starter theme and build your own. In other words, […]]]>

It is common knowledge that there are a large number of WordPress themes out there that can lend your website or blog a unique look. You can opt for a simple free WordPress theme, or go with a premium theme, or even select a framework or starter theme and build your own.

In other words, the possibilities are endless when it comes to WordPress themes, and so are the potentials for customization.

However, there is a small downside to this advantage too: you are not the only one with access to premium or free WordPress themes. As such, for every website that you make, there might be hundreds others built with the same theme.

So, how do you truly tweak the appearance of your website so that it stands out?

css hero

Of course, the answer is that you customize your WordPress theme. But what if you are not comfortable coding? Or, what if you do not have the time to code a child theme or make changes to functions and hooks?

If any of the above questions sound like something you can relate with, this post has all the answers you need! Today, we present to you a unique solution that lets you do more with your WordPress themes: CSS Hero.

CSS Hero: Customize WordPress Themes Easily

CSS Hero is a premium WordPress plugin that allows you to design your own WordPress theme without writing a single line of code.

Sounds fancy? Imagine it to be a visual page builder, on steroids. CSS Hero works by allowing you to select and modify elements of your website. The editor is displayed on the front end of your website and customizing each element is as simple as point and click.

Using CSS Hero is extremely simple! Just upload and activate the plugin, and you are good to get started with customizing your website.

Customizations are applied separately to your original theme styles by generating an additional CSS stylesheet that works on top of and in assonance with your theme’s actual stylesheet. And before you ask, yes, you do have the ability to undo the changes that you make via CSS Hero. All changes are saved therein, which means you can upgrade your WordPress theme without worrying about losing the changes.

css hero in action

But there is more to CSS Hero than just point, click, edit, save. In fact, it allows full control on every element of your WordPress theme. CSS Hero currently works with and supports more WordPress themes than I can ever count, and the list is growing as we speak — other than popular free and premium themes, it is also compatible with frameworks such as Genesis, Thematic, etc. Also, if you have other plugins on your site, WooCommerce or Wordfence or likewise, CSS Hero plays well with all of them.

Major Features

CSS Hero has a long list of tools and features in its arsenal, such as:

  • A huge collection of Google Fonts
  • Color Picker to experiment with and make background changes
  • Easy editing of element sizes such as margins and sliders
  • Special effects like shadows and transitions as well as animations
  • Easy undo by keeping track of your editing history
  • CSS Hero is ready for the mobile web: it supports responsive design
  • Outputs clean, legible CSS stylesheets

But, wait, the above features are present in virtually every other visual editor for WordPress, isn’t it?

Well, there is more. Some exclusive CSS Hero features, shall we?

  • Live Device Mode: Lets you adjust and customize your theme the way you want it to look across devices, such as smartphones, tablets, laptops, desktops, etc.
  • Cross-App Color Picker: Lets you pick colors from other apps right within the editor.
  • Detailed History: When I mentioned easy undo of changes, I did not mean one change or two. You can browse through the detailed steps and undo selectively.
  • CSS Hero Inspector: Inspector is a CSS Hero plugin which allows additional control on code generated by CSS Hero. Relying on CSSLint, it performs syntax checks on the code, so that you can easily refine, edit, and even remove CSS code and stylesheets or add your own.
  • Rocket Mode: CSS Hero comes with an experimental feature named Rocket Mode. It tries to guess the CSS selectors from your WordPress theme, all by itself. Thus, if you ever manage to run a theme that CSS Hero does not officially support, you can still edit that given theme with no hassles, as Rocket Mode can “guess” the CSS selectors by itself.

As you can see, no visual editor plugin can actually beat CSS Hero. Oh, and did I mention it does not operate on the basis of “shortcodes” and custom tweaks that force you to stay loyal to it? It is just pure CSS — even if you remove CSS Hero, you can still have all the CSS code in the world to play with.

Animator Plugin For WordPress

CSS Hero also has a free Animator WordPress plugin. It works fully independent of the CSS Hero main plugin, and it lets you add CSS animations to your website without having to deal with any level of coding.

Pricing

CSS Hero offers three separate plans, so you can pick the one that best suits your needs:

  • Starter Plan: Costs $29 per year, and lets you work with one website. It does not include the CSS Inspector feature.
  • Personal Plan: Costs $59 per year, and lets you work with five different websites.
  • Pro Plan: Costs $199 per year, and lets you work with 999 websites.

CSS Hero also has a 30-day refund policy, so you have nothing to lose. Plus, all plans come with a year of premium grade support and upgrades. The Inspector feature, however, is part of the Pro and Personal plans only.

Conclusion

All said and done, CSS Hero is lightweight and easy to use WordPress plugin that is the definitive solution when it comes to customizing your WordPress themes using an easy and intuitive WYSIWYG interface.

If you already have some skills in terms of design, this plugin will make the overall process a lot quicker. However, if you are a total newbie, CSS Hero can still help you manifolds as it renders clean and well-coded CSS based on your customizations, thereby helping you learn CSS and the art of web design in a swift manner.

Even more so, it goes without saying that CSS Hero leaves no footprints. It uses resources only if you launch the live CSS editor; otherwise, it will not consume any server memory per se. As such, CSS Hero does not slow your website down, nor does it compel you to remain tied to it. All it does is output great CSS code that you can use as per your needs, even if you ever choose to migrate away from the plugin!

CSS Hero is a really impressive solution for folks who need to quickly and easily customize and tweak the appearance of their WordPress themes. See it in action on the live demo, or visit the CSS Hero homepage to learn more.

]]>
https://webdesignledger.com/css-hero-customize-wordpress-themes-easily/feed/ 0
BBE For WordPress: The Bootstrap Building Engine You Should Use https://webdesignledger.com/bbe-wordpress-bootstrap-building-engine/ https://webdesignledger.com/bbe-wordpress-bootstrap-building-engine/#comments Mon, 11 Jul 2016 16:30:46 +0000 http://webdesignledger.com/?p=36554 WordPress, for the most part, provides an intuitive and easy to use manner of website creation and development. It is simple, straightforward, and offers great scope for customization. However, at the end of the day, you might need specialized tools for the job, and when it comes to website creation, there are several builder plugins […]]]>

WordPress, for the most part, provides an intuitive and easy to use manner of website creation and development. It is simple, straightforward, and offers great scope for customization.

However, at the end of the day, you might need specialized tools for the job, and when it comes to website creation, there are several builder plugins and themes out there for WordPress users that you can rely on.

But unfortunately, vast majority of these website builders, be they independent or work in assonance with WordPress, are bulky and bloated. They offer a difficult to use interface, and focus too much on either being beginner friendly or developer friendly. You can either go for a WYSIWYG editor that feels like a toy if used by a seasoned coder, or a code-heavy builder that is rocket science for the less advanced users.

What should one do? Well, we have the perfect solution for you: meet BBE, the Bootstrap Building Engine for WordPress. At its core, BBE is not a power tool or a framework. It is a simple WordPress theme that behaves and works the way you want it to, thereby helping you do more with WordPress.

BBE For WordPress: The Bootstrap Building Engine You Should Use

What is BBE for WordPress?

Before we go any further, let us take a moment to familiarize ourselves with BBE for WP.

Basically, BBE is a totally free WordPress theme (yes, you read that right — free of cost for you to download and deploy). It comes with a powerful Bootstrap powered page builder, and numerous readymade components to help you get started with. Furthermore, it offers an HTML editing platform to help you incorporate and preview your changes for your website.

All of that — for free. Sounds awesome, doesn’t it?

But how is BBE different from the various other page builders out there? Isn’t it yet another Bootstrap based framework or monster theme?

bbe for wordpress

BBE is more than just a standard framework, and it is different from the millions of bloated frameworks that you might have come across. BBE is a simple and standard WordPress theme. It works well with the Theme Customizer, and gives you total control over the template elements. You can tweak and modify every single page element, and essentially learn how web development should work, or extend it by means of custom code.

Furthermore, since BBE is based on Bootstrap, it can be skinned by means of Bootswatch as well. BBE lets you include shortcodes and widgets, and edit content, labels and images right from the frontend itself. BBE offers SEO optimized code, and it lets you reuse HTML and CSS code samples as well. Plus, it saves your HTML editing history, so you can go back and undo the changes if something gets messed up.

bbe main

Well, that’s what we had with the features of BBE theme. What about its actual implementation?

BBE WordPress Theme in Action

So I decided to give BBE theme a spin on a test site. You can download the free WordPress theme yourself and try it out, though the premium components will require a subscription.

You can upload and activate the theme much like you would, with any other WordPress theme. After activation, BBE does not add any separate settings section in the WP admin panel. All of the action happens from right within the Customizer.

In the Theme Customizer, you can choose the Bootswatch skin that you wish to use, as well as enable or disable the Lightbox, and so on.

bbe customizer

Of course, that is not all. The real beauty of BBE lies in the fact that you can create pages using different types of containers, columns and blocks. If you have had any level of experience with Bootstrap, you will feel at ease with BBE right away. Here is a video to help you get a better idea:

And here is a handy getting started guide for you.

Pricing

As already mentioned, BBE the theme in itself is totally free of cost. However, if you opt for a premium membership, you can gain access to a remote repository of HTML components that can help you accomplish a lot more with BBE in WP.

The premium membership costs $79 per annum, and also entitles you to premium level support.

Conclusion

In a world filled with page makers, page builders, website creators, frameworks and skeleton themes, where exactly does BBE for WP stand?

To be frank, BBE does not reinvent the wheel. It is not something that you will look at and be amazed simply by seeing a demo or a GIF. However, once you actually give BBE a try on your website or your web project, you will realize what BBE attempts to accomplish. This is where you might come to admire BBE in the long run.

BBE solves one major, often-talked about but rarely addressed problem that exists with modern page builder plugins and themes or frameworks — bloatware. BBE is not bloated and it does not promise to do everything under the sun for you. BBE is simple, and works in a clean manner, much like a good WordPress theme should.

Furthermore, BBE knows what comes under its territory and what does not. The code is SEO friendly, the theme is eCommerce ready, but if you wish to setup a theme shop or handle SEO features, get the plugins that you need. Your WordPress theme should not encroach upon plugin territory, and BBE for WP is aware of this rule.

Lastly, the BBE theme is free to download and extend, so there is nothing for you to lose in this. The premium membership does cost $79, and depending on whether or not you need to use the premium features, you can choose to opt for it.

Download the Bootstrap Building Engine for WordPress from this page.

]]>
https://webdesignledger.com/bbe-wordpress-bootstrap-building-engine/feed/ 6
Sketch 3.7.2 Has Been Released https://webdesignledger.com/sketch-3-7-2-released/ https://webdesignledger.com/sketch-3-7-2-released/#respond Mon, 25 Apr 2016 20:31:43 +0000 http://webdesignledger.com/?p=35177 Sketch, the popular design tool for Mac users, has just released its newest version 3.7.2 Sketch 3.7.2 comes with several new features and bug fixes. Here is a run-down of what it brings to the table: New Symbols created from Artboards are now named after the Artboard, rather than being renamed to ‘Symbol’ SketchTool now […]]]>

Sketch, the popular design tool for Mac users, has just released its newest version 3.7.2

Sketch 3.7.2 comes with several new features and bug fixes.

Here is a run-down of what it brings to the table:

  • New Symbols created from Artboards are now named after the Artboard, rather than being renamed to ‘Symbol’
  • SketchTool now dumps Symbol overrides as a dictionary instead of a string
  • Fixes a crash that could occur when swapping a Symbol instance in the Inspector
  • Fixes a crash that could occur when reverting changes
  • Fixes a bug where printing Artboards resulted in blank pages
  • Fixes a bug where Sketch would hang after choosing ‘Paste Here’, having copied a layer style
  • Fixes a bug where Symbol instance layer styles would not be applied to the Group created when detaching an instance from its Symbol
  • Fixes a bug where Symbol instances could end up detached when reordering pages

sketch

You can purchase and download or upgrade Sketch from the official website (note that it is no longer available in the App Store).

]]>
https://webdesignledger.com/sketch-3-7-2-released/feed/ 0