Schlagwort-Archive: Wordpress

5 Design & Development Skills to Learn This Summer

Summertime is here – at least in the northern hemisphere. And while our thoughts often turn to vacations and outdoor activities, this time of year is also a perfect opportunity to learn something new.

Web design and development is ever-changing, with new techniques and technologies coming out all the time. This places us in a constant struggle to figure out where to train our focus. Nevertheless, it’s critical that we continue to educate ourselves in order to level up our skills. After all, the future waits for no one.

With that in mind, let’s take a look at 5 design and development skills worth your time this summer. While you may already be familiar with them, there’s likely at least some aspects of each that you’ll want to explore more deeply.

1. CSS Grid

CSS Grid

For some of us, there’s always a little trepidation when working with new CSS goodies. We want to use the latest features, but there’s also the fear of leaving out users on older tech. But there also comes a point when we simply need to take advantage of something that’s better than what we’ve been using.

The time has come for CSS Grid to be widely adopted. It’s no longer an edge-case, as the last several versions of all major browsers have supported this powerful new layout feature. And the advantages of using it are just too great to ignore.

CSS Grid makes even the most complex layouts possible without the need for overly-complicated code. The syntax takes some getting used to, but really is quite simple once you get the hang of it (a major improvement over the useful-but-finnicky Flexbox). This one is here to stay and will be an important part of a designer’s repertoire for years to come.

Learning Resources:

2. JavaScript


Indeed, JavaScript has been with us for quite a while. It’s a language that has many flavors and popular frameworks that we leverage to enhance our sites. But it’s also becoming even more important as some new tools are bringing JS out of the background and into the spotlight.

For one, the new WordPress Gutenberg editor relies heavily on JavaScript for the creation and use of custom content “blocks”. That the world’s most widely used CMS is turning to the language is reason enough to take a deeper dive into it. But it’s also, in one form or another, powering all sorts of web applications these days.

That does make it a bit more difficult to decide where to focus your energy, though. Some applications are tied to specific frameworks such as React or Vue. So, where you spend your time should really be specific to what you want to accomplish. If your desired skill requires knowledge of a framework, that should point you in the right direction. Otherwise, there’s nothing wrong with learning the fundamentals of plain old vanilla JS.

Learning Resources

3. Micro-Interactions


Among the finer details of design are micro-interactions – those little visual cues that go along with various user actions. It might be the effect you see when clicking a button, providing visual confirmation of what you just did. It could also be a progress bar that fills up as you move through a multi-step form.

These items are small in stature but can perform wonders for the user experience. They give users confidence in what they’re doing, which in turn makes them more likely to interact with your site again and again.

Learning Resources

4. Design Systems

Design Systems

If you’re looking for absolute consistency in the look of your website or app, a design system can get you there. Sometimes referred to as a “pattern library” or “styleguide”, it’s a visual language that helps you to document UI elements so that they can be reused. This ensures that fonts, colors, shapes, icons, etc. are consistent across all platforms. This is especially important when working as part of a team on large-scale projects.

For example, when everyone on your team knows what a call-to-action button should look like, it makes the job of implementing such an element much easier. Designers don’t have to approximate or conjure up their own solution because the standard is right there in the documentation.

We often design things in a bit of a haphazard way – coming up with various elements as we need them. That may work well enough for some projects, but just about everyone can benefit from a design system – even if you’re the only one on the “team”. The more well-organized you are, the better your work will be.

Learning Resources

5. Typography


Many of us self-taught designers never formally learned best practices when it comes to typography. We use what looks good to us – but there’s more we could be doing. Responsive text, for instance, is something we all need to be aware of.

Taking some time to review the fundamentals, along with the latest techniques, is a worthwhile endeavor for all designers – formally trained or not.

Learning Resources

Fresh Skills for the Summer

As the Fresh Prince once opined, “Summer, summer, summertime / Time to sit back and unwind”. That may be fine for some, but web designers need to keep their hustle on all year round. Sure, take some time and enjoy warm weather and the great outdoors. But don’t miss the opportunity to improve those mad skills.

The post 5 Design & Development Skills to Learn This Summer appeared first on Speckyboy Web Design Magazine.

via Speckyboy Web Design Magazine


Amelia – a WP Booking Software that Lets You Manage Appointments While You Sleep Sponsored

Taking appointments might appear to be a low-level task. It involves little more than picking up the phone or responding to an email. The problem with that point of view is that it generally takes up more of your time than you realize. Managing those appointments can take up a lot more time and cost your business money.

In addition, a variety of problems can arise when appointments are managed manually. Making an appointment may not be possible during non-business hours or on weekends. It might be the case that there’s no one there to take them. Or, if your appointment-taker is away from the phone or busy on another line. Here, a potential client may lose patience.

People sometimes forget appointments too. It is a different kind of problem, but a problem nevertheless.

Put an automated booking specialist like Amelia in place. These problems will become history.

Introducing Amelia

Once Amelia is installed, you’ll begin to wish you had such a flawless system in place years ago. This WordPress plugin is the brainchild of one of Code Canyon’s Elite authors. The latter is the creator of its best-selling wpDataTables WordPress plugin. It is also an author that has sold more than 17,000 licenses.

Amelia was created with businesses in mind that are dependent on bookings. Businesses like coaches, gyms and fitness clinics, consulting firms, and spas. For businesses like these, a booking system must be easy to install and super-easy to use. Amelia is such a system. Once installed and set up, it’s 100% automated and ready to go.

You will love your new automated booking system. Your clients can book make appointments from their computers and smartphones 24/7. You can view and manage these appointments from a central, perfectly organized place.

2.0 Amelia’s Key Benefits

You’ll save a surprising amount of money

The person assigned to take and manage appointments obviously expects to be paid. It simply makes more sense to pay a one-time fee for the most professional booking specialist you’ll find. This is a booking specialist that’s on the job morning, noon, and night and on weekends and holidays too. This specialist always gets things right and never complains. That’s Amelia we’re talking about!

You can Devote More Time to Key Tasks and Assignments

The time taken away from a key task to answer the phone or check your email may not seem like a problem. But interrupting work in progress to manage an appointment can be an annoyance.

You can always ignore a ringing phone and wait for a more convenient time to check your email. But you are likely to lose potential clients by doing so. Amelia will keep humming right along booking and managing appointments. All this is while you are attending to other tasks.

Your Business Environment Looks and Is More Professional

Amelia’s UI is a pleasure to view and work with. This automated booking system gives your business operation a much more professional look. Clients can book appointments in seconds at any time and they don’t have to wait for someone to answer the phone. They don’t need to wait until the next day for an email confirmation. They also won’t listen to elevator music when they’ve been put on hold.

Everything is in Its Place – in One Place

With Amelia in place, you’ll remember the hard times you had to look through notebooks to find what you need. Or, you needed to scroll through endless Excel tables. All in hopes of finding an appointment you made and can’t remember.

What’s pleasing about those memories is knowing that with Amelia, you won’t ever have to go through any of that again. You’ll be able to see at any time who’s in charge of a client. You will know the time, place and duration of a scheduled appointment, and what the service is costing.

3.0 Amelia’s Top Features

The Search Booking Wizard: This wizard gives you a convenient way to search for a suitable service or employee. You can easily find the perfect time to fit the occasion.

A Step-by-Step Booking Wizard: This wizard gives you alternatives in scheduling appointments. You can do so based on a chosen parameter – Service, Employee, Date; at each step.

The Dashboard and Reporting Feature: You can get a quick overview of your business’s performance on Amelia’s dashboard. This includes charts that will help you track key financial and conversion-related KPIs.

Workflow Calendar: Amelia provides multiple workflow options. You can track by day, week, or month, or by timeline, calendar view or by an interactive list of appointments.

Catalog View: This feature generates an online catalog of services along with your booking form. It does so by using a shortcode and adding information about your service and images.

Employees Management: This feature manages employees contact data that is stored in the WordPress database. It also configures personal work schedules including days off.

Locations Management: It makes no difference to Amelia if you have several business locations. Your automated system will still manage your appointments and contact data.

Group Appointment Booking: Amelia manages both individual and group appointments. You can specify minimum or maximum capacities or group sizes.

Minimum Booking and Cancelling Times: This feature lets you configure your booking and cancellation periods.

Automated Notifications: Amelia sends email notifications to clients when an appointment has been booked. It also notifies them when the appointment is pending, canceled, or rejected. Notifications are also sent for appointment follow-ups, birthday greetings and other reasons.

Schedule Settings: This feature ensures employees are aware of standard business hours. It informs them about non-work days and the like, and any schedule changes.

Online Payments: Payments for services rendered can be made via PayPal or Stripe.

Customizable Design: Amelia’s frontend interface can be customized. Make your booking controls match your businesses brand style and your WordPress theme!

Why It’s a Good Reason to Try Amelia Now

There are many good reasons to use Amelia. One of them is the opportunity to advance your business’ professional look.

Amelia doesn’t require any training to use, and there’s little effort involved in setting it up. Thus, it’s easy to take it on a trial run to see how it will work for you and your team.

You’ll also discover how easy it is for Amelia to fit your business needs. It can easily manage your appointments around the clock.

Missed or misplaced appointments will be history. You can empty your wastebasket into the trash bin without fear of losing a slip of paper.

With Amelia, you will have everything in its place and perfectly organized. Just like that, you can turn your attention back to the must-do tasks and assignments.

The post Amelia – a WP Booking Software that Lets You Manage Appointments While You Sleep <span class="sponsored_text">Sponsored</span> appeared first on Speckyboy Web Design Magazine.

via Speckyboy Web Design Magazine

WordPress Gutenberg Block API: Extending Blocks

Welcome back to our series on creating custom blocks with the WordPress Gutenberg Block API. This tutorial is all about extending the random image block we created in the previous post. We got as far as adding a drop-down control to select an image category. We’ll continue with this by adding more block options to allow further customization.

Specifically, we’ll see how to add block settings in various parts of the editor. That’s right, you’re not just limited to adding block controls directly on the block itself!

The final my-custom-block plugin code is available to download. Just click the link in the sidebar to the right and download the zip file to your computer, and install it as you would any other WordPress plugin. You can also find the source code in our GitHub repo.

Gutenberg development is cracking on at a fair pace, and there’s been a new significant release since the last tutorial was published. The version of Gutenberg used in this tutorial has been updated to 3.0.1, and some of the editor UI may look slightly different from screenshots shown in previous tutorials in this series.

Let’s Extend!

The drop-down control we added in the previous tutorial was located inside the editor, directly underneath the markup for the random image. This was convenient, but we have other choices too.

We can also add block controls to a pop-up toolbar (which appears when a block is selected) and a block inspector panel.

Block control locations

In the screenshot above, we can see the toolbar controls for the paragraph block [1], as well as the associated controls in the panel inspector [3]. Location [2] shows the drop-down control for our random image block.

You might already be thinking about which location you’d choose for your own block settings, but you don’t have to choose just one of these locations. They aren’t mutually exclusive. For example, for the paragraph block (shown above), you can see that the settings are split between the block inspector panel and the toolbar. 

Furthermore, it’s perfectly OK to have two separate controls in different locations in the editor that affect the same setting. You might not want to do this too often, but it’s useful to know how to implement it, so we’ll see how to do this a little later on.

Direct Block Settings

Let’s start with the easiest way to add functionality to your block, which is directly inside the block’s edit function. We’ve already used this approach to add our random image drop-down control because it requires very little extra effort.

We won’t go over adding new controls to the block itself, but we can tweak the behavior of the drop-down control to be a bit more intuitive. To make it render as close as possible to the front end, we can restrict the drop-down from appearing unless the block is selected.

Let’s make this change now. If you’re following this tutorial from last time then open up /my-custom-block/src/random-image/index.js in your favorite editor. This is the main JavaScript file for our random image block.

One of the props passed to all blocks is isSelected, which holds the status of the block’s visibility. We can use this to conditionally display the category drop-down control.

Firstly, pull out isSelected from the props object and add it to the list of constants inside the edit function. This is useful so we can reference it by a shortened name (i.e. isSelected rather than props.isSelected).

Next, we can use this property to determine if the drop-down control should be displayed:

This is a shorthand way of testing that isSelected is true, since we can’t use a full-blown JavaScript if statement inside JSX code.

Make sure you’re still watching files for changes so any block source code (JSX, ES6+, Sass, etc.) is transpiled into valid JavaScript and CSS. If you aren’t currently watching files for changes, then open a command-line window inside the my-custom-block plugin root folder and enter npm start.

Open up the Gutenberg editor and add the random image block. This time, the drop-down control isn’t visible if the block hasn’t been clicked yet.

Conditional Block Control

This gives the block a much more interactive feel to it.

Toolbar Controls

If you’ve used any of the core Gutenberg blocks (such as the paragraph block) then you’ll be familiar with toolbar settings. As soon as the Paragraph block is selected, a pop-up toolbar appears containing buttons for formatting the text. This type of control is great for block settings that have an on/off type state—for example, text alignment or formatting such as bold or italic.

We’ll use the built-in alignment toolbar control to allow the drop-down image category control to be left (the default), right, or center aligned.

First, we need to pull out the AlignmentToolBar and BlockControls components from wp.blocks. These allow us to show alignment controls inside a floating toolbar above our block when it’s selected. These are part of the core components we can use in our own blocks.

The BlockControls component acts as the toolbar container, and AlignmentToolbar is placed inside.

We still need to hook up the behavior of the alignment toolbar manually, which we can do by adding a new categoryAlign attribute to store block alignment status (left, right, or center).

Our attributes object now contains two settings.

The default for the categoryAlign attribute is an empty string, which will result in no alignment being applied by default.

To reference the new attribute, we can pull this value out into its own constant variable the same way we did for the drop-down category attribute.

All we need to do now is drop the two new components into the edit function and configure the properties.

As you can see all we needed to do was to assign the value attribute of Alignmenttoolbar to categoryAlign attribute and call the setAttributes function whenever a new toolbar button has been clicked. This function in turn updates the categoryAlign attribute and keeps everything in sync.

To apply the alignment style of the drop-down control, we need to add a style property to our form element.

Control Alignment

Note that we don’t need this control to affect anything on the front end, so we didn’t need to add any code to the block’s save function.

Adding a Settings Panel

The block inspector panel provides you with a large area to add block controls and is a great location for more complex controls.

We’ll focus on adding two drop-down controls to the inspector panel. The first one will be a duplicate of the category drop-down control to select the type of random image. This demonstrates how to have more than one control updating a common attribute.

When one control is updated, the corresponding one will automatically update too! In practice, though, you’ll usually only want one control per setting.

The second drop-down control will allow you to select the filter applied to the random image. The PlaceIMG web service supports two types of filter—grayscale and sepia—and we can select between them by simply adding sepia or grayscale to the HTTP request URL. If we don’t specify a filter then a standard colored image will be returned.

The code for the two drop-downs is pretty similar, so we’ll add them together.

First of all, let’s define the new blocks and components we need.

Here, the new variables are InspectorControls, PanelBody, PanelRow, and Fragment, which are all used to help create the inspector panel UI.

The <Fragment> component is very useful when you need to return multiple top-level elements from the edit or save functions but don’t want to wrap them in an element that will be outputted.

<Fragment> won’t output any markup at all on the front end and acts like an invisible container. It’s just a convenient way to return multiple top-level elements and is an alternative to the previous method of returning an array of elements instead.

We only need to add one new attribute called imageFilter as the existing category attribute can be reused.

Inside the edit function, we need to add a new variable with references to the new attribute.

Adding a block inspector panel is surprisingly easy. The component structure we’ll use is as follows:

The <InspectorControls> component acts as the block inspector container, and <PanelBody> defines individual collapsible sections. Inside each of these, you can have any number of <PanelRow> components, which in turn contain your controls.

We’ve already defined markup for our category drop-down control which we can reuse. To do this, abstract it out into a separate function:

This function can then be referenced whenever we need the category drop-down control rendered. The markup for the block inspector panel needs to be outside of the block markup, so we can use the <Fragment> component to wrap them both before they are returned.

Next, we need to add the block inspector components for the category and image filter drop-downs. These need to be defined inside <PanelRow> components, and we also have to define a new callback function to handle the onChange event. This is very similar to the category drop-down code from the last tutorial, so it should be familiar to you by now.

Putting this all together, the edit method’s return function now looks like this:

And the setFilter callback is defined as:

To get the filtered image, we need to update the RandomImage component to accept the new filter value every time the drop-down is changed.

Notice how we’re using this new component property in the edit method to send the new filter value to PlaceIMG.

All these code changes result in a new block inspector panel being created with two drop-down controls to change the image category and filter.

Block Inspector Controls

To get the new filter property working for the front end too, we just need to update the save method. 

Frontend Image Filter


In this post, we covered three different methods for adding settings to a block:

  • pop-up toolbar
  • directly on the block itself
  • block inspector panel

We only added basic settings for each block, but we could easily take this even further by adding support for multiple images, adding image captions, and controlling styles such as the border color, radius, or random image size.

I’m sure that by now you’ve probably got some ideas for creating your own custom blocks. I’d love to hear what kind of blocks you’d find useful in your own projects!

We’re just getting started with Gutenberg here at Envato Tuts+, so if there are any particular aspects of Gutenberg block development you’d like to see covered in more depth in future tutorials, please let us know via the comments.

from Envato Tuts+ Code – WordPress

Weekly News for Designers № 441

Our 50 Favorite CSS Frameworks, Libraries & Tools from 2018 – Level up your CSS game with these fresh resources.
Our 50 Favorite CSS Frameworks, Libraries & Tools from 2018

Vivid.js – A JS library with over 90 SVG razor-sharp icons.

What should a new designer know about typography? – Using typography to help solve problems.
What should a new designer know about typography?

How to test accessibility of emails – A guide to making email more accessible for everyone.
How to test accessibility of emails

60GS – A 60-column CSS Grid starter kit.

MapSVG Brings Incredibly Powerful and Flexible Maps to WordPress – A tool to create vector SVG, Google and image maps in WordPress.
MapSVG Brings Incredibly Powerful and Flexible Maps to WordPress

Accessible CSS-Only Floating Labels – Create a floating label effect that is also accessible.
Accessible CSS-Only Floating Labels

Three Dots – A collection of loading animations – all with just 3 little dots.
Three Dots

Strawberry – A light-weight CSS Flexbox framework.

Combining the Powers of SEM and BIO for Improving CSS – Write better and more efficient CSS.
Combining the Powers of SEM and BIO for Improving CSS

How to Find Out What a Client Really Needs – Ways to get a better sense of what a project is all about.
How to Find Out What a Client Really Needs

JSUI – A tool for visually organizing, creating and managing JavaScript projects.

Chatbots – A Creative’s Guide – A look at how to design a conversation.
Chatbots - A Creative's Guide

The 10 Most Popular Open Source Front-End Web UI Kits – A collection of great UI choices for your next project.
The 10 Most Popular Open Source Front-End Web UI Kits

Cirrus – A responsive CSS framework that uses Flexbox.

In defense of Functional CSS – One designer’s opinion on the benefits of Functional (aka Atomic) CSS.
In defense of Functional CSS

Collapsing Logo Effect – Re-creating the logo effect seen on PracticalVR.
Collapsing Logo Effect

Follow Speckyboy on Twitter, Facebook or Google+ for a daily does of web design resources and freebies.

The post Weekly News for Designers № 441 appeared first on Speckyboy Web Design Magazine.

via Speckyboy Web Design Magazine

New Course: Coding Blocks for WordPress Gutenberg

Are you ready for WordPress Gutenberg? This dramatic redesign of the WordPress editor aims to provide a true WYSIWYG experience by breaking up pieces of posts and pages into individual blocks of content. 

In our brand new course, Coding Blocks for WordPress Gutenberg, you’ll learn how to create your own blocks to extend the functionality of the Gutenberg editor. 

Coding Blocks for WordPress Gutenberg

What You’ll Learn

In this step-by-step video course, Jeremy McPeak will show you exactly how blocks work in WordPress Gutenberg and how to write your own.

Among other things, you’ll learn how to:

  • define attributes to maintain state
  • build and refine the user interface for your block
  • store data
  • add rich text capabilities

Check out the quick intro video to get a better idea of what’s included, so that you can get fully up to speed with Gutenberg before it becomes part of WordPress core!

Watch the Introduction



Take the Course

You can take our new course straight away with a subscription to Envato Elements. For a single low monthly fee, you get access not only to this course, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+. 

Plus you now get unlimited downloads from the huge Envato Elements library of 550,000+ creative assets. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.

from Envato Tuts+ Code – WordPress

Great Tools and Resources that Designers and Design Teams Should Start Using

Web designers face a peculiar set of circumstances with respect to technology. New tools, resources, and techniques make their work easier. They also provide opportunities to create improved products.

At the same time, changing technology can present challenges. One of them being the need to keep up with changing times if one is to keep up with or stay ahead of the competition.

As one example, let’s take graphics. It has almost replaced text as the preferred method of presenting information on the web. Team collaboration is another example. Here, interactive prototyping, video, and live chat have taken over. They have replaced phone calls, email, and in some cases, meetings and business trips.

Keeping up with the times can be easy and even fun when you have the proper tools and resources at your disposal, like any of the following.

1. Mason


Mason promotes project collaboration, adaptability, and agility. Its pre-packaged solutions of common digital product requirements address today’s most comment digital product requirements.

One of the areas where Mason differs from the rest of the pack is the ability of team members and even clients to make changes to Mason modules during the design/development phase or after deployment. Registration and login features give you total control over who is authorized to make these changes.

These features enable you to streamline your collaboration activities by allowing changes in requirements to be handled by others.When designers, developers, clients, marketing organizations, and others are authorized to build, ship, and edit a Mason feature, it eliminates the necessity of requiring repetitive deployment cycles to keep a digital product up to date.

The modular content (pre-coded blocks of content) helps to speed up project workflow by simplifying page management for every page you build. You’ll be able to get your deliverables to your clients more quickly and your clients will be able to get their products in front of their customers as well.

2. Mobirise


Small customer projects like small websites, portfolios, landing pages and the like shouldn’t require having to use a variety of tools and resources for successful completion. The end products must still adhere to high design and development standards, but that is not an excuse for having less than total control over your projects from start to finish.

Mobirise offers an easy way to create small projects such as these. It features 1200+ templates and blocks and a huge library of images, fonts, and icons. It’s offline and has everything you need to work with on a single platform.

You can host your products wherever you want, since it’s so way to work with it’s a great tool for non-techies, and its an ideal choice for those who prefer to take a visual approach to design. Best of all, Mobirise is free for both commercial and personal use.


3. Elementor


When more than 900,000 users jump on board during a WordPress plugin’s first two years on the market, you know there must be a good reason for it. Elementor, currently the #1 WordPress page builder, not only has all the website-building features and functions you’ll need, but it won’t cost you a dime.

This free, open source frontend builder is destined to become even more popular, thanks to a host of new features being introduced incrementally throughout 2018 as part of the latest version, Elementor 2.0. Since you’ll have all the freedom and creativity you want, you won’t feel limited by the way a theme is designed. The goal of Elementor’s authors was to make website building painless and effortless, and that is precisely what they achieved.

Elementor comes with a host of beautiful templates, 800+ Google fonts, 400+ icons and plenty of color options.

4. A2’s Fully Managed WordPress Hosting

A2's Fully Managed WordPress Hosting

A2’s fully managed hosting service is well known for easy site staging and fast, super-reliable and scalable hosting expertise and capacities. A2 Hosting can claim up to 20 times faster page loading speeds than most of its competitors.

This service’s prices are quite affordable, and in most cases, A2 can move you over from your existing host at no charge.

5. Goodiewebsite


Goodiewebsite is a software development service offering cost-effective coding at competitive prices. This service specializes in small to medium-size (1 to 10 page) websites; a size common to many small businesses and creative agencies.

Prices start at $999 for which you can expect reliable service and top-quality deliverables.


Whether your team consists of yourself and one other guy, or is huge and dispersed around the globe, is a team management tool that should fit your project needs like a hand in a glove.

Your team needn’t be particularly tech-oriented to use it, and it will relieve you of the burdens often associated with managing multiple Excel files, doing your project planning on whiteboards, and attending one overly-long meeting after another.

7. The Hanger

The Hanger

You don’t often hear the terms “modern” and “classic” used to describe the same thing, but The Hanger manages to answer to both descriptions. Since this WooCommerce theme is almost ridiculously easy to set up, you can have a customized eCommerce WordPress site that perfectly aligns with a client’s brand up and ready in a very short time.

8. LayerSlider


The LayerSlider plugin serves as a platform on which awesome sliders, image galleries, attention-getting slideshows, animated page blocks, and even complete websites can be created.

Its features include a visual drag and drop editor, versatile layout options, and handcrafted slider templates covering everything from personal to corporate needs. LayerSlider is responsive, retina and high-resolution ready, and SEO friendly.

9. Uncode – Creative Multiuse WordPress Theme

Uncode – Creative Multiuse WordPress Theme

Uncode is a powerful, user-friendly theme that has all the functionality needed to build an outstanding portfolio to showcase your work in a very few hours. New features like the powerful Gallery Manager, Slides Scroll, and Shape Dividers have created even more design options that are guaranteed to give your products a professional and uniquely creative look.

Visit Uncode’s user showcase for ideas and inspiration. Be prepared to be impressed!

10. Houzez


Houzez is a WordPress-based real estate and property management system that provides realtors with the functionality needed to administrate a real estate marketplace, coordinate their agents and accept submissions.

Features include advanced search filters and options, listings options, a custom search composer, and a custom fields builder that gives you the ability to add custom fields to display whatever information your business model requires. You will also be impressed by Houzez’s customer support!

11. Fluid UI

Fluid UI

Fluid UI is a web and app prototyping tool you can apply to significantly speed up your design workflow by sharing wireframes, mockups, and prototypes with team members and other project stakeholders. Information sharing and feedback can be accomplished via interactive video presentations and live chat. Fluid UI features extensive libraries of web, desktop, iOS and Android design components.

12. Pixpa


Creatives look for tools that will enable them to showcase their work in the best possible manner. Pixpa’s all-in-one platform is more than up to the task. Not only is it a top portfolio website builder with drag and drop design tools, but it offers so much more- integrated e-commerce store, blog, and even client proofing.

With Pixpa you’ll save time and money by not having to bounce back and forth among several tools to get the results you want. Get started for free with the 15-day trial.

13. wpDataTables


wpDataTables is far and away the premier WordPress plugin for creating tables and charts. It is so good at managing huge amounts of complex data in minutes if not seconds to create beautiful, responsive, interactive, and maintainable charts that many of its users switched over to WordPress simply for the opportunity to use it.

wpDataTables accepts data in most formats and from many different sources, including massive MySQL tables.


Thousands of designers access’s database every day to locate fonts they wish to use but don’t know the name of, or are looking to find the closest possible match. Although the directory is huge (450,000 commercial and free fonts at last count), an automatic artificial intelligence system takes your image and identifies the font by name quickly and efficiently.

Unless you enjoy looking for needles in haystacks, you’ll appreciate the time you’ll save using this powerful resource.

15. is far and away the best source of free fonts on the market. This online directory places thousands of fonts at your fingertips. The fonts have been assigned to 87 smartly-defined categories, enabling you to quickly zero in on a specific font or browse through several fonts that have a similar style.

Once you find a candidate, you can create a string of text with it to see how it will appear in actual practice.


What are your thoughts on this collection of tools and resources? Here, you should be able to find one or more that will speed up your workflow. Some of them can provide optimum hosting for your needs. Others are focused on helping to improve the quality of your deliverables.

You might be looking for a multi-purpose theme, a specialty theme, or a team management tool. Whatever it is, you’ll find it here. You can be confident that whatever you select, it will be the best of the best of its type.

The post Great Tools and Resources that Designers and Design Teams Should Start Using appeared first on Speckyboy Web Design Magazine.

via Speckyboy Web Design Magazine

MapSVG Brings Incredibly Powerful and Flexible Maps to WordPress Sponsored

Maps play an integral part in creating a great user experience. Whether they are used to show multiple retail locations, detail a specific attraction or visualize statistics, they help users to get the information they need.

Working with WordPress, however, creates a classic dilemma. Each type of map you want to use on your website requires a different plugin. This can lead to both difficulty in maintenance and decreased site performance. Not to mention that these various tools all work independently of one another. Combining the features of different map types just wasn’t possible – until now.

With MapSVG, you’ll find a complete solution for creating virtually any type of map you can imagine – all in one powerful WordPress plugin. Let’s take a deeper look:


A Solution for Every Type of Map

Thanks to a recent update, MapSVG now enables you to create and combine three types of maps: Interactive vector maps (using SVG), Google Maps and image maps. This gives you the power to build the perfect map for your specific needs.

Interactive SVG Vector Maps

What makes SVG maps so useful is that they render perfectly at any size and they can include all sorts of interactivity. MapSVG comes loaded with a collection of country maps, but also lets you use your own SVG images. This opens up possibilities well beyond geography. Images of building floor plans or seating charts, for example, can be added to help users further explore a venue.

Plus, there are a wide array of interactive features that can be implemented. Use tooltips with custom HTML to make for an in-depth experience. Add markers and directory indexes to help users find what they’re looking for more easily.

Custom fields enable you add virtually any type of data to a map. Maps can also be searchable and filterable. This type of map makes even the most complex images easier to understand.

An interactive SVG map with a directory.

Google Maps

MapSVG lets you combine the power of Google Maps with the interactive possibilities of SVG. Vector maps can be automatically layered on top of any type of Google Map (road, satellite, terrain or hybrid) to bring even more usability and convenience.

Users can scroll, zoom and interact with your maps in new ways. Again, you can choose from the included library of country maps or add your own.

Using your own vector artwork provides even more choices for enhancing a map, such as displaying various landmarks and making them clickable. Visibility toggles enable users to turn various features on or off, letting them focus on what’s most important to them.

A Google Map with custom SVG artwork.

Image Maps

Interactive image maps are a great way to help users better understand a concept. Using MapSVG’s drawing tools, you can easily create clickable maps from any JPEG or PNG image – right from within WordPress. You have control over every aspect of the process, allowing for a fully custom UI.

Map functionality can also be extended with custom JavaScript and CSS. The possibilities for what you can achieve are virtually limitless.

An interactive image map.

Create Interactive Maps in Minutes

Of course, a tool is only as good as its interface. So, it’s good to know that MapSVG makes map creation quite easy and intuitive. Whether you’re working with one of the included SVG country maps or a custom image that you’ve uploaded, you’ll be up and running in no time.

As an example, I’m going to create a custom map of a place I’ve always wanted to visit – Australia. To get started, I select the map I want from the drop-down menu of included SVG maps. From there, it’s time to customize!

A new map of Australia, ready to customize

The first thing I notice is that all the regions of the map are clickable. This makes working with one of the included maps super easy. To the right, there are a number of options – including sizing, responsiveness and whether I want to allow features such as zooming, tooltips and popovers.

There’s also a menu that lets me navigate to other settings panels, where I can change the map’s colors, have a look at various regions or add custom code. Changing colors, for example, took all of a few seconds to master.

Color settings for a custom SVG map.

I also decided to add a clickable directory of the various regions, which will display on my WordPress page. Following the helpful tutorials on MapSVG’s website made this task a breeze. Within approximately five minutes, I had a customized interactive map of Australia that I can expand upon even further as I wish.

Map of Australia with directory feature.

Start Building Interactive Maps with MapSVG

Interactive maps are a tool that you can use to help increase user engagement and provide information in an easy-to-digest format. MapSVG is the only WordPress plugin you’ll ever need to create highly-customized maps that fit your exact specifications. They’re powerful, responsive and incredibly easy to build.

There’s no need to settle for anything less. Download your copy of MapSVG today and unleash the full potential of your maps.

The post MapSVG Brings Incredibly Powerful and Flexible Maps to WordPress <span class="sponsored_text">Sponsored</span> appeared first on Speckyboy Web Design Magazine.

via Speckyboy Web Design Magazine