Divi Plugin Highlight – J.E.D.I.

If you’ve packaged a child theme for distribution you’ve probably ran into a few hiccups along the way. This process usually involves multiple plugins which result in several files to create your zipped package. It almost never goes well on the first try and there’s usually some troubleshooting involved to get everything working smoothly. All of these problems are solved with a third-party plugin called J.E.D.I. (Jerry’s Easy Demo Import).

J.E.D.I. is an easy to use plugin that creates a packaged version of a child theme or a layout kit. In this overview I take a look at the J.E.D.I. Master edition and create a child theme package and layout plugin, and see how easy to are to install.

Installation and Activation

Install and activate the plugin as normal. Within the dashboard go to J.E.D.I. Master, License. Enter your license key and save changes. Once you’ve saved changes you’ll see a button to activate your license.

Export Demo Content

You can create a packaged child theme or a layout kit. Child themes are like any normal child theme but with an additional item added to the dashboard menu to import the demo content.

Layout kits are not installed the same way as a layout pack, which includes JSON files. Instead, they’re more like a child theme but packaged as a plugin. It also adds a menu item to the dashboard to import demo content. However, it doesn’t actually add a child theme. I recommend using a blank child theme and importing your content into it. If you’re not using a child theme you can only export a layout plugin.

The menu item for both types also adds a documentation tab. You can create your own documentation or use the default.

Child Theme Installer

This is a child theme I’ve created with several custom pages, WooCommerce integration, dummy content, and placeholder images. It also has a vertical menu with code to display social icons from Font Awesome. This is the child theme I will export.

Normally the social icons have to be added manually. Let’s see if J.E.D.I. can handle it.

First, choose what you want to include in the package. The first choice is Posts and Pages. This will look different from one site to another because it includes any post-types you have installed. This child theme has WooCommerce integration, so WooCommerce post types are included.

Choices also include Theme Options and Customizer settings, CSS, menu, widgets, and the option to automatically set the homepage.

Choose between packaging as a layout or a child theme, name the installer file, provide a message for it to display, and set any recommended plugins. Since this child theme uses WooCommerce I’ve set it as a recommended plugin and added the URL to its page in the WordPress depository. It won’t require you to install the plugin and it doesn’t provide a button to perform the install, but it does provide the name and a link to the plugin.

If you’re using the free version, Layout Kit Plugin will be your only Import Installer Style option. The Pro edition adds Child Theme Installer. If you’re not using a child theme, Layout Kit Plugin will be your only option.

Once you’ve made your selections and entered the information click Export Demo Content.

When the package is completed you’ll see the report with a downloadable zip file. Simply download the zipped file and it’s ready to distribute.

Additional Export Options

The Additional Export Options allow you to choose which post types and data to include in the download. With this you can also build a custom support page and a documentation page. Add your own HTML with messages and links. The fields include the HTML with information about each field to help you create your own documentation.

Uploading Your Child Theme

First you must have Divi installed and activated. Next, upload the child theme just like any theme and activate it. Users do not need the J.E.D.I. plugin.

If you’ve included your own image for the child theme, your child theme package that J.E.D.I. creates will include that image. Once the child theme is activated you’ll see a new menu item with the name of your child theme (the Import Installer Name you provided). This includes a button to import the demo data and your documentation. Select this menu and click Easy Demo Import.

You’ll see this screen where you can choose what to import. You’ll also see the list of recommended plugins. Once you’ve made your selections click Import Demo Content.

Note – Divi Theme Options, Divi Customizer Settings, and Widget settings will overwrite your current settings.

After the import is finished you’ll see a message showing what imported and that it’s complete.

The Documentation menu item contains all of the documentation that you created in the Additional Expert Options menu. These fields will show their defaults if you haven’t made changes.

That’s it. All of my custom pages were included and the homepage is set automatically. It even included my custom code for the menu to include the social icons. No other adjustments were needed, and this was on the first try.

Layout Kit Plugin

For this one I want to save the layouts from my child theme as a layout pack.

Select Layout Kit Plugin. Notice that it’s creating a plugin and not JSON files. Click Export Demo Content and download the zipped file.

The main difference between the layout plugin and standard JSON files is this has the ability to import theme options, customizer settings, CSS, the menu structure, widgets, and it can set your homepage. Of course you could unselect all of those and only supply pages and posts which they could then add to the Divi library.

Uploading Your Layout

Install the layout the same as you would any plugin.

Once you activate the plugin you’ll see the name of the layout in the Dashboard menu. Just like the child theme it includes import options and your own customizable documentation page. Choose the options you want and click Import Demo Content.

When the import is complete it will show the number of files that imported. Once you’ve imported your content you can deactivate the plugin and save the pages to your library.

The result looks the same as my child theme with all of the pages and styles. This isn’t a child theme, so any CSS or PHP changes you make will be made within Divi unless you install a blank child theme.

Extra

It’s also compatible with Extra. However, Extra’s Category pages are not static front pages, so those won’t be included and can’t be automatically set as the homepage.

Since I created a layout using the Category Builder it didn’t bring in the Category layouts or set the homepage, but it did bring in everything else. I’m sure this is a feature that will be added in the future.

Documentation

Documentation is included in the J.E.D.I. dashboard menu. It includes links to each of the sections with complete instructions on using the free plugin and the pro version.

Support

Support is provided through a Google Group or email.

Final Thoughts

I’ve tried several methods of creating child theme packages and J.E.D.I. is by far the easiest. Until now I’ve had to use around 3 plugins and hand-code features such as required plugins and links within the menu. J.E.D.I. works great on multisite (which is the method of choice for many child theme developers).

I did have difficulty importing into a site that I had already imported another J.E.D.I. file into. This might just be a simple issue of needing to clear my website cache.

The installation process for child themes is the same as any one-click install. The main difference is the ability to add your own instructions to the dashboard menu and provide links for support. The process for installing layouts is easier than the traditional method of uploading JSON files to the page.

If you’re interested in an easy method to package child themes and layouts, J.E.D.I. might be the solution you’re looking for. You can create layout files with the free edition. Child theme files requires the pro edition. You can find J.E.D.I. here.

We want to hear from you! Have you tried J.E.D.I.? Let us know what you think about it in the comments.

Featured Image via SkillUp / shutterstock.com

The post Divi Plugin Highlight – J.E.D.I. appeared first on Elegant Themes Blog.

Powered by WPeMatico

36 Photoshop Plugins for Web Designers You Need to Check Out

WordPress is not the only software out there offering useful extensions to their core product. Photoshop, one of the go-to tools for web designers around the world also supports this possibility. And like their WordPress counterparts, Photoshop plugins can also add all sorts of new functionality.

Since we know that many of our readers use Photoshop on a regular basis, we thought it a good idea to offer a different kind of plugin list this time. Below you’ll find the best Photoshop plugins we could find on the web.

They enhance the program with all kinds of improvements. From small scripts and shortcuts all the way to entire new modules that will improve your workflow dramatically and make working with Photoshop even easier.

Ready? Then let’s get started.

Photoshop Plugins No Web Designer Should Ignore

Below you find a list of plugins for Photoshop from different categories that can further enhance your favorite piece of software.

Retinize It

retinize it photoshop plugins

  • Price: Free
  • Available for: CC 2015

In first place, we have a free plugin for quickly creating assets for retina displays. Retinize It adds a new action to Photoshop that lets you export images in their original dimensions or scaled up to double and triple the size.

After installation, you find the new option under Window > Actions. Simply select a layer or group of layers, run the action, name your files and receive the sliced assets. Great for producing retina-ready websites.

Cut&Slice me

cut&slice me

  • Price: Free
  • Available for: CS6

Another plugin to directly export assets from layers. Cut&Slice me automatically trims your images and exports them as PNG files. It can deal with overlapping slices, multiple button states and several resolutions. Unfortunately it’s not quite up to date but still works with older versions of Photoshop.

CSS3Ps

css3ps

  • Price: Free
  • Available for: CS3 and later

As the name suggests, this service is able to convert Photoshop layers to CSS3. What’s special about it is that it’s a cloud-based service and free to use.

The plugin supports multiple layers (including text), drop shadows, gradients, border radius and more. In addition to that, it can also deal with SCSS and SASS.

Corner Editor

  • Price: Free
  • Available for: CC 2015

If you ever need to produce rounded corners, this script is for you. It enhances Photoshop’s abilities to create round corners, works with any polygonal shape, includes multiple corner styles, allows you to edit multiple layers at once and more.

HTML Block

html block photoshop plugins

  • Price: Free
  • Available for: CC 2015 (Mac OS only)

Our next contender allows you to place HTML and CSS right inside Photoshop documents. That way, you are able to create web assets directly within the software and use online assets in your PSD file. The latter includes web fonts, external CSS and more.

Font Awesome PS

font awesome ps photoshop plugins

  • Price: Free
  • Available for: CC

Font Awesome is an icon font that’s gaining in popularity and use. For that reason, it only makes sense to include in Photoshop files. Thankfully, this plugin makes that easy as pie. Just download and install for free and you are good to go.

Layrs Control 2

layrs control

  • Price: Free
  • Available for: CC, CC 2014

This plugin is a collection of seven scripts that make some of the more annoying aspects of Photoshop easier. It includes a layer name editor, the option to remove unused effects, can automatically delete empty layers, rasterize smart objects, find similar files and more. Free to download and use as you want.

CSS Hat 2

css hat

  • Price: $39.99
  • Available for: CC 2014-2017

CSS Hat automatically translates layer styles into CSS3. That way, you can just copy and paste it instead figuring out how to implement the graphics on site.

The plugin can work with several layers at once, fonts and different font styles and is able to spit out LESS, SASS, Stylus and more. It also has many features you find in code editors such as syntax highlighting. CSS Hat is also available for older Photoshop versions.

Page Layers

page layers photoshop plugins

  • Price: $35
  • Available for: Mac OS X only

Many plugins on this list have the goal to make it easier to turn Photoshop files into websites. However, the other way around be just as necessary. That’s what Page Layers is for.

The plugin automatically converts websites to PSD files and saves each page element as a single layer. Open any page in the embedded browser and simply save it to Photoshop. The plugin is not free but sounds like it’s worth the price.

PNG Hat

  • Price: $27.99
  • Available for: CS5, CS6, CC, CC 2014.1+, CC 2015

Made by the same people as CSS Hat, this plugin enhances Photoshop’s ability to export PNG files. For example, it comes with better compression and can export CSS rules. PNG Hat also comes with a generous money-back policy if you are not satisfied.

Fontself

fontself

  • Price: 49€
  • Available for: CC 2015, CC 2017

Next up is a plugin that lets your make your own font via drag and drop. In an age where typography is getting more and more important on the web, that’s really good to hear. Simply turn (colored) images and vectors into OpenType fonts. Control kerning, ligatures and more. Fontself is also an actively maintained plugin, so owners get new features for free.

Getty Images Photoshop Plugin

  • Price: Free
  • Available for: CC 2016 and above

Getty images has a huge collection of stock images and a plugin that lets you import them right into Photoshop. Search and filter thousands of high resolution images and sync your purchases with a Getty account.

PSD Cleaner

psd cleaner

  • Price: $19.99
  • Available for: CC 2014.1+

Another plugin by Source that supercharges Photoshop’s layer panel. PSD Cleaner automatically scans your layer structure and shows opportunities for improvement. It will help you find unnamed layers, delete empty ones, find layers that stretch beyond the canvas and more. In short, it will keep you organized.

WebZap

web zap

  • Price: $19
  • Available for: CS5 and above

It might come as a surprise but Photoshop is not actually made for web design. The program started as photo-editing tool and only later added abilities to create layouts.

To make up for that, there’s WebZap. The plugin provides ready-made elements for creating web layout mock ups in no time. It is based on the 960 grid, can create formatted Lorem ipsum text, navigation, buttons and more.

Subtle Patterns

  • Price: $17.99
  • Available for: CC and upwards

Subtle Patterns is a library of free, tilable texture patterns. The plugin of the same name brings them to your Photoshop dashboard. That’s it.

ScreenSnap

screen snap photoshop plugins

  • Price: $9.99
  • Available for: CC 2014 or newer

Next on our list of Photoshop plugins is ScreenSnap. The program allows you to create screenshots from PSD files, either of the full document or from selected area. No need for cropping or saving manually, just select a folder, click one button and you are good. Great for sharing your work with others, even in retina size.

Duplllicator

  • Price: Free
  • Available for: CC, CC2014

Here we have an extension to quickly clone layers and groups of layers when you need several of the same object. Just pick how many copies you need and how you want them spaced apart.

Perspective Mockups

perspective mockups

  • Price: $19
  • Available for: CC 2017

As you can see from the screenshot, the plugin homepage contains lots of swear words. Aside from that, this plugin makes perspective mockups of your design. That way, you can better understand how they look on a phone or tablet from the outside. The plugin has many presets but is also fully editable.

Size Marks PS

  • Price: Free
  • Available for: CC 2014

Size Marks allows you to add labels of an object’s size or distance between objects with the marquee tool. Each label is saved in a new layer and completely customizable. This is super helpful when adding specs for the person who will turn the PSD into a website.

Fontea

  • Price: Free
  • Available for: CC 2014, CC 2015

For anyone dissatisfied with Photoshop’s default offering of fonts, Fontea includes all web fonts available on Google Fonts (currently 800+). The plugin also keeps up to date with the online repository and allows you to set up collections of your favorite fonts.

Pixabay

  • Price: $4.99
  • Available for: CC 2015 and higher

This plugin is like the Getty image plugin mentioned earlier, however, for the Pixabay image library. It contains hundreds of thousands of free stock images that you can now add with a single click. The plugin also includes powerful search options and all images are CC0 licensed. Plus, it’s very affordable.

There are more plugins like that for other stock photo libraries like Shutterstock and Pexels.

LayerCraft

layercraft

  • Price: Free
  • Available for: CC, CC 2014

Another plugin to export UI assets from Photoshop layers. LayerCraft has the ability to scale your images upon export, can trim transparent pixels and export in different sizes for retina display.

Lorem Ipsum Generator

free lorem ipsum generator

  • Price: Free
  • Available for: CS 5/6, CC

As the name suggests, this is a plugin to create Lorem ipsum placeholder text. That way, you don’t need to copy it from external sources anymore. The generator offers customizable output, the ability to copy to your clipboard with one click and is actively maintained.

LoremPicsum

lorempicsum

  • Price: Free
  • Available for: CS, CC

This one is similar to the Lorem ipsum version, however, it creates random images instead of text. Select an area, pick a cartoon and you got yourself a placeholder image. Fun gimmick: images come from popular TV shows and films like Futurama, The Simpsons, Finding Nemo and Up.

Social Kit Pro

social kit pro

  • Price: $9.99
  • Available for: CC 2015+

And another Source plugin. This one aims to improve everything social media. It contains templates for creating ads on mobile and desktop, cover photos and profile images. You can even live preview the results inside Photoshop.

Layer Guides

  • Price: Free
  • Available for: Unknown

Guides are an important tool within Photoshop to keep everything structured. However, they can be annoying to handle.

This plugin hopes to alleviate that. It adds new buttons to add guides on the sides of layers as well as through their horizontal and vertical center. No more need to drag, just click and you are good.

Long Shadow Generator

long shadow generator

  • Price: Free
  • Available for: CS6, CC

The plugin name basically says it all. Long Shadow Generator helps you create long shadows in Photoshop. You can control shadow length and opacity, color, gradient and angles. Then just add them with one click.

TinyPNG

  • Price: $50
  • Available for: CS5, CS6, CC and upwards

TinyPNG is an online service I often recommend for optimizing images before uploading them to WordPress. It compresses JPG and PNG files to make them as small as possible.

The site also offers a Photoshop plugin to do the same inside the image-editing software. It lets you preview and save directly, scale, use partial selection and more. If their site is any indication, the plugin is well worth the money.

Glifo

glifo photoshop plugins

  • Price: $19
  • Available for: CS5, CC

Glifo adds the option to export vector icons from Photoshop as icon web fonts. Sounds like a great addition to the Font Awesome plugin.

specKing

specking

  • Price: $19
  • Available for: CS5, CS6, CC 2014 and upwards

Another plugin to add measurements and design specs to Photoshop files, however, this time as a premium version. Measure sizes, margins and fonts and automatically create specs in editable overlays. Looks super simple and comfortable to use.

Export Kit

export kit

  • Price: $19.33/month
  • Available for: CS6 and upward

This Photoshop plugin lets you convert PSD files to HTML, CSS, WordPress, iOS, Android and more. It also contains collaboration features. Looks very powerful, however, it comes with a monthly license and is not entirely cheap.

Photoshop Social Share Plugin

photoshop social share plugin

  • Price: Free
  • Available for: Unknown (Mac OS only)

The next item on our list adds important sharing functionality to Photoshop. It allows you to share and publish files directly from inside the program via email, social networks and other platforms. Just pick a format and you are good to go.

Transform Each

  • Price: Free
  • Available for: CS5, CS6, CC

Transform Each is a script that allows you to transform several objects at once without changing their position. What that means is best exemplified by the GIF below. Pick your anchor points, the transformation you want to achieve and it will get you there with one click.

ToonIt!

  • Price: $129
  • Available for: Photoshop CS and later

A fun one at the end. In case you ever think about creating an online graphic novel, this service will be of great help. It turns regular photos into cartoons, has many presets and mature technology. A bit on the pricey side though.

Photoshop Plugins in a Nutshell…

Photoshop is a wonderful tool for web designers. It is powerful, packed with features and constantly updated.

However, sometimes we wish it had some additional features or easier ways to accomplish tasks. That’s where Photoshop plugins come in.

As you have seen from the list above, plugins can add lots of different functionality. From shortcuts to entirely new functions.

And that’s only the ones that are useful for web design. There are many more out there, especially for image retouching. Do you have anything to add?

Do you know additional Photoshop plugins that you like and recommend? Please share in the comments section below!

Article thumbnail image by VectorsMarket / shutterstock.com

The post 36 Photoshop Plugins for Web Designers You Need to Check Out appeared first on Elegant Themes Blog.

Powered by WPeMatico

10 Divi Child Themes for Musicians

One of the best ways a musician can promote their music, talents, and services is with a sharp website. Divi is a great choice for musicians and fortunately there are several child themes available to help you get started. In this article we’ll take a look at 10 Divi child themes for musicians.

Musicians have a variety of needs for their websites, which can include any combination of a shop to sell their albums or merchandise, an event calendar to show upcoming events, information about the musician and the type of work they do, a contact form, booking information for lessons, audio samples, and links to videos or CD’s.

Many of these child themes are designed specifically for those is the music industry and provide those specific features listed above. Some are all-purpose child themes that lend themselves well for use by musicians. As a bonus I’ve also included a layout pack in this list for those who just want to add a layout to their current child theme. The child themes are in no particular order.

1. Solataire

Solataire includes a unique custom header that shows the menu as center inline on desktop and default on mobile, a custom audio player so visitors can hear samples, a tour page with links to buy tickets, and WooCommerce integration so you can sell your music and merchandise from the styled shop page or modules. It includes large typography that matches the styling and has a modern look. It’s a great choice for anyone in the music industry.

Price: $60 | More Information

2. JOSEFIN BAND

JOSEFIN BAND is a homepage for the JOSEFIN theme with lots of page layouts and custom modules, and includes the Page Builder Everywhere plugin. The band homepage displays a full-screen image with link to tour dates. Scrolling reveals lots of double-column sections, full-width sections with parallax, number counters, a styled blog, styled contact form, and more. It includes WooCommerce integration.

Price: $75 – $145 | More Information

3. DJ 1 Page

DJ 1 Page is a one-page design with sections for music, videos, events, photos, and a contact form. It includes a right-side sliding menu, CSS animations, CSS section separators, an events countdown, and links to services such as Mixcloud, Soundcloud, Youtube, etc. It provides a bold look through its black and yellow color scheme.

Price: $75 | More Information

4. NicePuccino One Page

NicePuccino One Page is a one-page design with the idea of promoting a person. It uses large typography, dark gray and bright green color schemes, and lots of custom elements. It includes a full-width image gallery, styled toggles, multi-layout CTA’s, styled person modules, a three-column testimonial section in parallax, and more.

Price: $49.90 | More Information

5. DJ

DJ is a single-column design with a focus on events. It displays a full-screen image with social links, event information, and a booking CTA. A SoundCloud section displays in two columns using icons for the audio player. Services are displayed in multiple layouts with various overlays and colors. It includes a styled email form, pricing tables, and contact info. The purple and black color scheme fits the club atmosphere perfectly.

Price: $45 | More Information

6. Divi Ultimate Bands

Divi Ultimate Bands is a homepage for the Divi Ultimate theme. It displays a full-screen image with CTA’s, embedded video sections, a project slider to display albums, styled testimonial sections using an overlay in parallax, styled audio players with album covers, an events calendar with ticket CTA, and a styled blog section. The bold red and black colors look great.

Price: $245 | More Information

7. DJ – Sono

DJ – Sono was designed for DJ’s and musicians with a focus on live events. It includes a full-screen header with CTA and overlay that’s great for your video backgrounds. Display your equipment and services in the three-column about section. Testimonials are displayed over a background. It also includes styled Services and Blog pages with styled sidebars to match.

Price: Free | More Information

8. Eventus

Eventus was designed for any kind of events business and works great for musicians to display their events and musical services. It includes full-width backgrounds in parallax, overlapping blocks that label the sections, styled overlays including hover animated overlays, 2-column and 3-column blog layouts, styled email and contact forms, and a full-width gallery. The fancy fonts match the theme’s style.

Price: $54 | More Information

9. Diamond

Diamond is an all-purpose child theme with lots of little animations that’s perfect for a musician who wants a website with a minimal but unique design. It includes 11 page layouts and 78 library items. The person modules show off you or your band members and the project modules are great for your services and albums. Blog posts and sidebars are styled to match.

Price: $97 | More Information

10. Make a Splash

Make a Splash is an all-purpose child theme with several industries in mind including creatives such as artists and musicians to display their albums, events, and music services. It includes an overlapping logo, angled edges, fly-in animation, custom page headers, etc., and lots of custom pages. It adds a new feature called Simple Color Reset which makes it easy to change your primary colors. Images are included.

Price: $175 | More Information

Layout Pack: Music Studio Layout Pack

Music Studio Layout Pack is a great choice for those that don’t want to use a pre-made child theme for their music website. It comes with 5 Page Layouts – Home, The studio, Musicians, Equipment, and Contact. The pages include section separators and several styled modules. The images are included and are royalty free.

Price: Free | More Information

Final Thoughts

If you’re interested in building a website for musicians these 10 Divi child themes for musicians are a great place to start. They have a variety of features including integrated music players and styled audio modules to play audio snippets, styled shop modules to sell your music and merchandise, event pages to inform your fans of upcoming events, pricing tables for your music services, and lots more.

I’ve been a guitar player since the early 80’s and I’d like to start a website about guitar… and I know just which child theme on this list I’ll use.

We want to hear from you. What’s your favorite Divi child theme for musicians from this list? Let us know in the comments below.

Featured Image via Visual Generation / shutterstock.com

The post 10 Divi Child Themes for Musicians appeared first on Elegant Themes Blog.

Powered by WPeMatico

Canadian Web Hosting [Ad]