Elegant Themes Bloghttps://www.elegantthemes.com/blog
WordPress News, Tutorials And Free ResourcesTue, 26 Sep 2017 21:27:50 +0000en-UShourly1https://wordpress.org/?v=4.8.2Subscribe with My Yahoo!Subscribe with BloglinesSubscribe with NetvibesSubscribe with PageflakesSubscribe with The Free DictionarySubscribe with Bitty BrowserSubscribe with Podcast ReadySubscribe with Daily RotationHow to Create Beautiful Image Borders using Divi’s New Optionshttp://feedproxy.google.com/~r/ElegantThemes/~3/D13NFKp5L9g/how-to-create-beautiful-image-borders-using-divis-new-options
https://www.elegantthemes.com/blog/divi-resources/how-to-create-beautiful-image-borders-using-divis-new-options#commentsTue, 26 Sep 2017 16:00:04 +0000https://www.elegantthemes.com/blog/?p=61175In today’s Divi tutorial, we’re going to show you how to create beautiful image borders on the next website you build. The purpose of this post is to demonstrate how you can create beautiful results that match the images you are using (and the rest of your website as well). With the new Divi options, […]

]]>In today’s Divi tutorial, we’re going to show you how to create beautiful image borders on the next website you build. The purpose of this post is to demonstrate how you can create beautiful results that match the images you are using (and the rest of your website as well).

With the new Divi options, achieving stunning results is easier than ever. You’ll only have to make some modifications that we’ll show you how to make and you’ll be ready to take your web design to the next level. All 8 examples we’ll share with you will use nothing else than the built-in options that the Divi Builder and Image Module offer.

Sneak peek

Let’s take a look at the results you can expect from this post:

How to Create Beautiful Image Borders using Divi’s New Options

Gradient Background

The first possibility you have to achieve beautiful image borders is using a gradient background only. By experimenting with the various gradient background settings, you can achieve simple yet elegant results. We’ll show you three examples of image borders that consist solely of a gradient background.

Standard

The first example we’ll be handling is the simplest and most modest of them all; a standard gradient image border. The result we’ll show you how create looks like this:

Content Tab

Start by choosing a gradient background in the Content tab. For this example, we’ve used the following settings:

First Color: #081e8c

Second Color: #764f9b

Gradient Type: Linear

Gradient Direction: 269deg

Start Position: 40%

End Position: 60%

Design Tab

The next and last thing you’ll need to do is add some padding to the image. It’s simple as that. Go to the Design tab and add ’10px’ to the top, bottom, right and left padding.

Sides

Next up, we have an image border that only shows at the left and right side of the image. Using this kind of image border gives a nice extra touch to the image without putting too much focus on the border itself.

Content Tab

To achieve this type of image border, start by adding the following gradient background to your image:

First Color: rgba(255,255,255,0)

Second Color: #0a8da8

Gradient Type: Linear

Gradient Direction: 166deg

Start Position: 29%

End Position: 52%

Design Tab

In the Design tab, the only thing you’ll need is ’10px’ of padding for the right and left side.

One Corner

Moving on, you can also create corner backgrounds for the images on your website. This type of border is great to use when you want to emphasize a color that is being used within the image.

Content Tab

For the third image example, use the following gradient background:

First Color: rgba(58,8,1,0.58)

Second Color: rgba(41,196,169,0)

Gradient Direction: 152deg

Start Position: 34%

End Position: 28%

Design Tab

Then, add ’20px’ to each one of the paddings as well.

Image Border & Gradient Background

Another possibility you have is combining a gradient background with an image border. This, too, can deliver stunning results as you’ll be able to witness in the next four examples.

Subtle Gradient

The first combination of gradient background and image border is simple yet beautiful. By using the same colors for the gradient background and the border, the image border somehow feels like it’s getting filled with color.

Content Tab

Start by adding the following gradient background settings to your image:

First Color: rgba(255,255,255,0)

Second Color: #777777

Gradient Type: Linear

Gradient Direction: 180deg

Start Position: 65%

End Position: 78%

Design Tab

Move on to the Design tab and use the following settings in the Border subcategory:

Use Border: Yes

Border Color: #777777

Border Width: 3px

Border Style: Solid

Lastly, add a padding of ‘7px’ to all the padding options.

Shaped

Next, we have an example that is great to draw the attention of the visitors. The image itself contains in this case mostly lighter colors, which creates a nice balance with the darker border.

Content Tab

The gradient background settings you’ll be needing for this image border are the following:

First Color: rgba(53,0,188,0.1)

Second Color: #680061

Gradient Type: Radial

Radial Direction: Center

Start Position: 80%

End Position: 80%

Design Tab

Proceed to the Design tab and use the following border:

Use Border: Yes

Border Color: #9a00bc

Border Width: 1px

Border Style: Solid

Scroll down and add the following padding to the image:

Top: 7px

Right: 5px

Bottom: 7px

Left: 5px

Double Border

Using a double border in combination with a gradient background can deliver some stunning results as well. Take a look:

Content Tab

The gradient background color we’ve used in this example is the following:

First Color: rgba(224,43,32,0.61)

Second Color: rgba(12,113,195,0.87)

Gradient Type: Radial

Radial Direction: Center

Start Position: 71%

End Position: 93%

Design Tab

Moving on, use the following settings for the Border subcategory:

Use Border: Yes

Border Color: #f4f4f4 (match with your section background color)

Border Width: 8px

Border Style: Double

And add ’10px’ to the top, bottom, right and left padding of the image.

Triangle Corners

Moving on, you can also create some small corners in your border by using the gradient background option in combination with a dashed border.

Content Tab

To achieve the image border we’ve shown you above, use the following gradient background settings:

First Color: rgba(163,103,6,0)

Second Color: #e09900

Gradient Type: Radial

Radial Direction: Center

Start Position: 97%

End Position: 97%

Design Tab

In the Design tab, we’ll need to have the following border settings as well:

Use Border: Yes

Border Color: #e09900

Border Width: 2px

Border Style: Dashed

Lastly, we’ll need a padding of ‘8px’ for the top, bottom, left and right padding.

Pattern & Gradient Background

The last possibility we want to put in the spotlight is using a pattern and gradient background at the same time. This allows you to play around with the look and feel of your images.

Playful

This border contains a gradient background of two colors that are used within the image itself as well. By adding a background pattern as well, the image gives a bit more atmosphere to your website.

Content Tab

For the last example, we’ll use the following gradient background settings:

First Color: rgba(4,49,96,0.51)

Second Color: rgba(119,74,15,0.51)

Gradient Type: Linear

Gradient Direction: 180deg

Start Position: 0%

End Position: 100%

Design Tab

Next, we’re adding a pattern background as well. The pattern we’ve used in this example comes from Toptal. You can use their patterns for all kinds of purposes, just make sure you credit them within your code as mentioned in their FAQ. Once you’ve added the pattern background, use the following settings as well:

Background Image Size: Cover

Background Image Position: Center

Background Image Repeat: No Repeat

Background Image Blend: Multiply

The last thing you’ll need to do is add a padding of ’12px’ to the top, bottom, right and left padding of your image.

Final Thoughts

In this post, we’ve shown you some different ways of creating beautiful image borders. These options give you a perspective on the things you can do with the new Divi options without using any additional CSS. If you have any questions or suggestions; make sure you leave a comment in the comment section below!

]]>https://www.elegantthemes.com/blog/divi-resources/how-to-create-beautiful-image-borders-using-divis-new-options/feed6https://www.elegantthemes.com/blog/divi-resources/how-to-create-beautiful-image-borders-using-divis-new-optionshttps://cdn.elegantthemes.com/blog/wp-content/uploads/2017/09/featuredimage-8.jpg10 Lovely Examples of Girly Websites Made With WordPresshttp://feedproxy.google.com/~r/ElegantThemes/~3/DfHF7z_tqKA/10-examples-of-girly-websites-made-with-wordpress
https://www.elegantthemes.com/blog/resources/10-examples-of-girly-websites-made-with-wordpress#commentsTue, 26 Sep 2017 12:00:21 +0000https://www.elegantthemes.com/blog/?p=60230Girly websites never fail at giving their visitors a calm and refreshing feeling. For this type of website, it’s not as much about what the website can do but what feeling it brings to you. That’s why you’ll notice that most of these websites don’t have too many advanced effects integrated. It goes back to the […]

]]>Girly websites never fail at giving their visitors a calm and refreshing feeling. For this type of website, it’s not as much about what the website can do but what feeling it brings to you. That’s why you’ll notice that most of these websites don’t have too many advanced effects integrated. It goes back to the basics and is all about representing elegance along with the content that is in most cases very visually represented.

You’d be surprised how many “girly” websites are running on WordPress. To give you the slightest clue, we’ve listed 10 very beautiful websites, made with WordPress, which have a girly style to match the message they’re trying to bring.

1. Amy’s Healthy Baking

To start off our list of girly websites, we’ve decided to show you Amy’s Healthy Baking. The first thing that makes this website stand out is the slightly diagonal menu. It’s something you don’t see that often but this website definitely pulls it off. The website has an excellent structure and focuses primarily on the visuals. For a baking website, that’s the best thing you can go with. It makes it easier to navigate through the content that’s being provided and triggers curiosity.

2. Angie Makes

Next up, we have the Angie Makes website. This website represents exactly what it is offering; cute WordPress themes and lovely graphics for web and print. The main color being used on this website is not one you come across so often but it definitely provides the website with the elegance and girly factor it wants to give to its visitors. The social icons and call to action in the right corner of the website manage to stand out, although the color being used isn’t that noticeable.

3. Joy The Baker

The next girly website is Joy The Baker. There are colors everywhere. Primarily, in the website content but the website owner also decided to represent those colors in the logo at the top of the page as well; this site goes visual all the way. One of the very nice-looking things of this website is the sidebar that doesn’t start right away but right after the hero section of the page.

4. Felicia Day

One of the next girly websites is the official website of Felicia Day, a professional actress. This website has an overall very clean and sober feeling but some details make the website very feminine, such as the light pink background with patterns and the font families that are being used. The navigation on this website doesn’t look like something you see that often. Instead of using menu items lined up next to each other, each one of the pages is part of a storytelling process and gets explained even before clicking.

5. We Heart This

Moving on, we’re going to take a look at the We Heart This website. This website revolves all around very girly stuff, no wonder their website looks as girly as the topic they are handling. Besides giving you that girly vibe, the website also uses some very summery colors that put people at ease and give them a holiday feeling. A nice extra touch to the website is the iInstagram feed that’s been provided at the end of the page.

6. The Beauty Department

Those people who love makeup will definitely love the website of The Beauty Department as well. This website is pretty well known in the makeup industry and provides dozens of tips and tricks to their visitors. With a topic such as makeup, it’s only predictable that the website will look very gily. Although it’s girly, they’ve also managed to bring a sense of maturity to the website by using soft colors that reflect feminity and professionality at the same time.

7. Joliette

Joliette is a very girly website on first sight, the logo that is being used gives that away. A website that is girly is often also well-organized as well. The Joliette website is a perfect example for that. The posts that are shared on the home page immediately manage to draw visitors’ attention. The fonts are elegant yet not too playful and the color combination gives that fancy touch to the minimalistic layout.

8. My Beauty Bunny

Another beauty blog that runs on WordPress is My Beauty Bunny. This one is probably one of the girliest websites of them all. With colors like pink and mint green that frequently appear on the website, this website represents girliness at its finest. Visuality is not missing at all and starts right at the top of the page where the website owner decided to add a personal touch and introduction with an Instagram feed right away.

Made With Divi

9. Anita Costa

The first girly website that is made with Divi, and that we want to share with you, is Anita Costa. A beautiful coaching website that uses very girly yet elegant colors. The website owner immediately starts by representing herself in the hero section of the website. Besides, the website is also available in three languages; English, French and Portuguese.

10. Life on a Plate

The second and last Divi website in our list of girly websites is life on a plate. Although this website doesn’t necessarily use girly colors, the look and feel of the website still feel very girly. Something that we’ve seen in all of the girly websites we’ve mentioned up until now is the white background color that allows the other colors to draw the attention. The girly factors of this website are the font families and layout that are being used.

Final Thoughts

In this post, we’ve shown you some girly websites that are made with WordPress. We’ve noticed that most of them have some things in common such as the use of soft colors, elegant fonts and light background colors. If you have any questions or suggestions; make sure you leave a comment in the comment section below.

]]>https://www.elegantthemes.com/blog/resources/10-examples-of-girly-websites-made-with-wordpress/feed20https://www.elegantthemes.com/blog/resources/10-examples-of-girly-websites-made-with-wordpresshttps://cdn.elegantthemes.com/blog/wp-content/uploads/2017/09/featuredimage-5.jpg10 Fun Ways to Use The Divider Module with The New Divi Optionshttp://feedproxy.google.com/~r/ElegantThemes/~3/wwLRx41KXkE/10-fun-ways-to-use-the-divider-module-with-the-new-divi-options
https://www.elegantthemes.com/blog/divi-resources/10-fun-ways-to-use-the-divider-module-with-the-new-divi-options#commentsMon, 25 Sep 2017 16:00:24 +0000https://www.elegantthemes.com/blog/?p=60948In today’s Divi tutorial, we’re going to share with you a glimpse of what you can do with the new options that have been added to Divi in the previous updates. More precisely; we’re going to share 10 interesting ways you can style the Divider Module with these new changes. The possibilities are truly endless, […]

]]>In today’s Divi tutorial, we’re going to share with you a glimpse of what you can do with the new options that have been added to Divi in the previous updates. More precisely; we’re going to share 10 interesting ways you can style the Divider Module with these new changes. The possibilities are truly endless, but this post might help you find the inspiration you need for your next project.

Sneak Peek

One of the best things about this tutorial is the fact that we’ll not be using any additional CSS (or code of any kind for that matter). All the examples we’ll be creating will only use the options that are included within the Divider Module. Let’s take a quick look at the dividers we’ll build before I show you how to create each on step by step:

10 Fun Ways to Use The Divider Module with The New Divi Options

Create Reusable Section

The first thing you’ll need to do is create the section that we’ll use throughout all 10 examples. Of course, you can use the dividers in other contexts as well, but by making this section first, you’ll have the opportunity to play around with your own Divi Builder and see which one you prefer.

Create New Page

Start by creating a new page in your WordPress dashboard, enabling the Divi Builder and opening the Visual Builder.

Create Section with Three-Column Row

Once you’re on your new page, create a standard section and use a three-column row within that standard section. We’ve used ‘#f4f4f4’ as the section background color.

Add First Text Module

Then, add the first Text Module to the first column of the row. Open the settings, type down the text you want to appear and go to the Design tab. Within the Design tab, make the following changes to the Text subcategory:

Text Font: Lobster

Text Font Size: 35

Text Color: #000000

Text Line Height: 1.7em

Text Orientation: Center

Add Second Text Module

Once you’ve added the first Text Module, you can add another one right below it. Add the text you want to appear and go to the Design tab. Within the Design tab, make sure the following modifications apply:

Text Font: Roboto

Text Font Size: 14

Text Line Height: 1.7em

Text Orientation: Center

Clone Text Modules & Place in Other Two Columns

Once you’ve created these two text modules, you can put them in the other two columns of the row as well.

Before Getting Started

We’re going to share 10 fun ways you can style Divi’s divider module. Each one of the examples will have three dividers that are in harmony with one another. Most of the settings are the same for all three modules. We’ll start by showing you the settings that count for each one of them and continue by showing the changes you need to make to the other two dividers. So, every time you finish the first divider, clone it and place it in the other two columns. Once you’ve done that, you can make the modifications to the other two dividers.

Note: For each one of the dividers, you’ll need to enable the ‘Show Divider’ option within the Content tab.

1. The Blurred Triangle

First Divider Module Settings

Content Tab

Within the content tab, we’re going to make use of the following background settings:

First Color: #e09900

Second Color: rgba(255,255,255,0)

Gradient Type: Linear

Gradient Direction: 176deg

Start Position: 13%

End Position: 31%

Design Tab

Move on to the Design tab and make sure the following settings apply to the Sizing subcategory:

Divider Weight: 0

Height: 25px

Width: 35%

Module Alignment: Center

Scroll down the same tab and use the following animation settings in the Animation subcategory:

Animation Style: Slide

Animation Repeat: Once

Animation Direction: Center

Animation Duration: 1200ms

Animation Intensity: 80%

Second Divider Module Settings

Content Tab

In the content tab, the only thing you’ll need to do is change the first gradient color into ‘#0c71c3’.

Design Tab

Next, you’ll need to add some animation delay of ‘250ms’ to the Animation subcategory.

Third Divider Module Settings

Content Tab

Change the first gradient color into ‘#8300e9’ for the last divider.

Design Tab

The animation delay you’ll need to add to the Animation subcategory of the last divider is ‘500ms’.

2. The Color Shadow

First Divider Module Settings

Content Tab

Use the following gradient background settings in the Content tab:

First Color: #e09900

Second Color: rgba(255,255,255,0)

Gradient Type: Linear

Gradient Direction: 180deg

Start Position: 0%

End Position: 72%

Design Tab

The first thing you’ll need to do within the Design tab is change the color of the divider into ‘#000000’.

Within the Styles subcategory of that same tab, use ‘Solid’ as the Divider Style and ‘Top’ as the Divider Position.

Continue scrolling down and make the following changes apply to the Sizing subcategory:

Divider Weight: 2

Height: 20px

Width: 70%

Module Alignment: Center

And lastly, use the following option settings for the Animation subcategory:

Animation Style: Bounce

Animation Repeat: Once

Animation Direction: Center

Animation Duration: 2000ms

Second Divider Module Settings

Content Tab

Change the first gradient color of the gradient background into ‘#0c71c3’.

Design Tab

Within the Animation subcategory, add ‘350ms’ to the Animation Delay option.

Third Divider Module Settings

Content Tab

Make the same change to the third divider but use the ‘#8300e9’ color instead.

Design Tab

And lastly, add an animation delay of ‘700ms’.

3. The Gradient Series

First Divider Module Settings

Content Tab

For the first divider, use the following gradient background settings:

First Color: #0970a0

Second Color: rgba(255,255,255,0)

Gradient Type: Linear

Gradient Direction: 119deg

Start Position: 0%

End Position: 86%

Design Tab

Within the Design tab, choose ‘#FFFFFF’ as the color of your divider.

Next, make the following changes to the Styles subcategory:

Divider Style: Solid

Divider Position: Vertically Centered

While still in the same tab, make sure the following settings apply to the Sizing subcategory:

Divider Weight: 3

Height: 10px

Width: 25%

Module Alignment: Left

Add ’15px’ to the bottom padding within the Spacing subcategory as well.

And lastly, use the following settings for the Animation subcategory:

Animation Style: Slide

Animation Repeat: Once

Animation Direction: Left

Animation Duration: 2000ms

Animation Intensity: 100%

Second Divider Module Settings

Content Tab

The gradient background settings for the second divider are slightly different:

First Color: #0970a0

Second Color: rgba(255,255,255,0)

Gradient Type: Radial

Radial Direction: Center

Start Position: 0%

End Position: 100%

Design Tab

Within the Sizing subcategory, change the Module Alignment to center.

Lastly, centralize the Animation Direction as well.

Third Divider Module Settings

Content Tab

The third divider contains another gradient background as well:

First Color: rgba(255,255,255,0)

Second Color: #0970a0

Gradient Type: Linear

Gradient Direction: 119deg

Start Position: 14%

End Position: 100%

Design Tab

We’re going to make the same changes we made to the second divider but use right instead of center.

4. The Rolling Circle

First Divider Module Settings

Content Tab

Start by making the following gradient background settings apply:

First Color: #e09900

Second Color: rgba(255,255,255,0)

Gradient Type: Radial

Radial Direction: Center

Start Position: 20%

End Position: 21%

Design Tab

The first thing you’ll need to do in the Design tab is use the ‘#000000’ color for the divider.

Second Divider Module Settings

Content Tab

For the second divider, change the second gradient background color into ‘#0c71c3’.

Design Tab

And add an Animation Delay of ‘250ms’.

Third Divider Module Settings

Content Tab

For the last divider, change the second gradient background color to ‘#8300e9’.

Design Tab

And finish off by putting the Animation Delay to ‘0ms’.

Final Thoughts

With the new Divi options, a lot of new creative things are possible with the built-in settings of each module. In this post, we’ve specifically shown you how these options can help you enhance your design through the Divider Module. If you have any questions or suggestions; make sure you leave a comment in the comment section below!

]]>https://www.elegantthemes.com/blog/divi-resources/10-fun-ways-to-use-the-divider-module-with-the-new-divi-options/feed14https://www.elegantthemes.com/blog/divi-resources/10-fun-ways-to-use-the-divider-module-with-the-new-divi-optionshttps://cdn.elegantthemes.com/blog/wp-content/uploads/2017/09/featuredimage-7.jpgHow to Add Post Publishing Confirmation Messages to WordPress (In 2 Ways)http://feedproxy.google.com/~r/ElegantThemes/~3/F-pcpJAxAIk/how-to-add-post-publishing-confirmation-messages-to-wordpress-in-2-ways
https://www.elegantthemes.com/blog/tips-tricks/how-to-add-post-publishing-confirmation-messages-to-wordpress-in-2-ways#commentsMon, 25 Sep 2017 12:00:36 +0000https://www.elegantthemes.com/blog/?p=57407If you’ve been working with WordPress for a while, you’ve likely posted an early draft by mistake at one point or another. Regardless of the reason, it’s certainly annoying. Depending on your blog’s setup, it could have some negative consequences – even compromising your position if you’re working on behalf of someone else. The most […]

]]>If you’ve been working with WordPress for a while, you’ve likely posted an early draft by mistake at one point or another. Regardless of the reason, it’s certainly annoying. Depending on your blog’s setup, it could have some negative consequences – even compromising your position if you’re working on behalf of someone else.

The most elegant solution to this problem is to implement a feature that adds post publishing confirmation messages within WordPress. As you might imagine, you can do this using a plugin. In this article, we’ll teach you how to do it, and also show you a manual way. Let’s get started!

Why You Need Post Publishing Confirmation Messages

In short, a post publishing confirmation message is simply a pop-up message that asks if you’re sure about your decision. It’s a handy way to combat misclicks and other publishing errors.

These messages are both easy to implement, and they can have a positive impact on your site too. For example:

You can stop accidental publications. We’ve worked on hundreds of WordPress posts over the past few years, so we’re very familiar with the platform. Still, that doesn’t stop us from potentially hitting the wrong button and posting an early draft of an article.

They can prevent automated emails and social media updates from going out. A lot of people integrate their social media and email campaigns with WordPress. So, whenever there’s a new post, your social media would update automatically, which is something you don’t want happening by mistake.

There are no downsides to confirmation messages! Adding this feature won’t impact your site’s usability or performance. It’s just an extra click on your way to publishing a new post, so there’s little downside to it.

Of course, not every website needs to add post publishing confirmation messages. For example, if you’re running a single-author blog and you’ve never run into an issue with accidental publications, you’re probably safe. However, we do recommend this feature for WordPress sites with multiple authors, to minimize risk.

The Publish Confirm plugin is perhaps the easiest way to enable confirmation messages for WordPress. It works with posts, pages, and even custom post types. What’s more, the message automatically stops appearing after you publish each post, so you won’t need to deal with it for simple updates. The plugin also plays nicely with Divi, so it’s easily implement on your Divi-powered site too.

Finally, the plugin’s confirmation window text can be modified to your liking if you don’t mind tweaking a few lines of code. In fact, we’ll teach you how to do it in a moment.

Either of the approaches below is entirely valid. If you’re looking for the fastest route to add confirmation messages to WordPress, you’ll probably want to stick with the first method.

On the other hand, if you don’t mind tweaking a couple of files and pasting a few lines of code, you can avoid adding a new plugin altogether by going with the second approach. With that out of the way, let’s get down to business!

1. Use the Publish Confirm Plugin

First off, you’ll want to install and activate the plugin. It’s very much a ‘plug-and-play’ solution, so it’s ready to go as soon as the activation process is complete. Simply create a new post, and when you try to publish it, a confirmation message will pop up:

As far as customization goes, we’ve already mentioned that you can change the confirmation message itself. To do so, you’ll need to use an FTP client such as FileZilla to access your site’s back end. It’s also advisable to back up your site before you begin tinkering. Finally, you should also set up a child theme, so your changes will persist when the theme is updated.

Once you’re in, make your way to your WordPress root folder, which often appears as either public_html or www. Next, access your theme’s functions.php file:

In our case, the route to that file was public_html/wp-content/themes/Divi. Once you’ve located your functions.php file, right click on it and pick the View/Edit option:

This will open the file with your default text editor. Then, just add the following code snippet to the end of the file:

You can, of course, alter the message to your liking. When you’re ready, save your changes and close your editor. Now return to WordPress, and try to publish another post to see your changes in action:

Keep in mind that you don’t need to change the plugin’s default confirmation message if you don’t want to. However, this gives you a way to tailor the message to your particular needs.

2. Add Code to Your functions.php file

This next method should be right up your alley if you’d like to get your hands dirty with code. To get started, you’ll need to access your theme’s functions.php file, as we did in the previous section.

Once your functions.php file is open in your favorite editor, copy and paste the following code:

Finally, save your changes and close the functions.php file. The next time you’re about to publish a post, you’ll see a confirmation window much like the one created by the Publish Confirm plugin. In this case, though, it’s all your own work!

Conclusion

Adding a post publishing confirmation message to your WordPress website is a simple feature that can make it much more user-friendly. It’s the kind of functionality you’ll probably forget about untilit saves you from making an embarrassing mistake. Plus, it can come in handy if you run a blog with authors who aren’t that used to WordPress.

There are two ways to implement this feature, and both are relatively straightforward:

]]>https://www.elegantthemes.com/blog/tips-tricks/how-to-add-post-publishing-confirmation-messages-to-wordpress-in-2-ways/feed7https://www.elegantthemes.com/blog/tips-tricks/how-to-add-post-publishing-confirmation-messages-to-wordpress-in-2-wayshttps://cdn.elegantthemes.com/blog/wp-content/uploads/2017/07/post-publishing-confirmation-message.pngDivi Plugin Highlight – J.E.D.I.http://feedproxy.google.com/~r/ElegantThemes/~3/2Tl2vcfwaBU/divi-plugin-highlight-j-e-d-i
https://www.elegantthemes.com/blog/divi-resources/divi-plugin-highlight-j-e-d-i#commentsSun, 24 Sep 2017 16:00:42 +0000https://www.elegantthemes.com/blog/?p=60832If 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 […]

]]>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.

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.

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.

]]>https://www.elegantthemes.com/blog/divi-resources/divi-plugin-highlight-j-e-d-i/feed7https://www.elegantthemes.com/blog/divi-resources/divi-plugin-highlight-j-e-d-ihttps://cdn.elegantthemes.com/blog/wp-content/uploads/2017/09/shutterstock_356418434-960.jpg36 Photoshop Plugins for Web Designers You Need to Check Outhttp://feedproxy.google.com/~r/ElegantThemes/~3/2gpZ_BBkS18/photoshop-plugins-for-web-designers-you-need-to-check-out
https://www.elegantthemes.com/blog/resources/photoshop-plugins-for-web-designers-you-need-to-check-out#commentsSun, 24 Sep 2017 12:00:13 +0000https://www.elegantthemes.com/blog/?p=57514WordPress 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 […]

]]>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.

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.

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.

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.

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 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.

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 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.

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.

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.

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 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.

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.

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.

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.

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 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.

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.

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.

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.

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.

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.

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.

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 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.

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.

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.

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 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.

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!

]]>https://www.elegantthemes.com/blog/resources/photoshop-plugins-for-web-designers-you-need-to-check-out/feed6https://www.elegantthemes.com/blog/resources/photoshop-plugins-for-web-designers-you-need-to-check-outhttps://cdn.elegantthemes.com/blog/wp-content/uploads/2017/08/photoshop-plugins.jpg10 Divi Child Themes for Musicianshttp://feedproxy.google.com/~r/ElegantThemes/~3/fk36i9MTnj0/divi-child-themes-for-musicians
https://www.elegantthemes.com/blog/divi-resources/divi-child-themes-for-musicians#commentsSat, 23 Sep 2017 16:00:12 +0000https://www.elegantthemes.com/blog/?p=60321One 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 […]

]]>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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

]]>https://www.elegantthemes.com/blog/divi-resources/divi-child-themes-for-musicians/feed10https://www.elegantthemes.com/blog/divi-resources/divi-child-themes-for-musicianshttps://cdn.elegantthemes.com/blog/wp-content/uploads/2017/09/shutterstock_648922102-960.jpgHow to Track Post Changes by Adding a History Feature to WordPresshttp://feedproxy.google.com/~r/ElegantThemes/~3/LE7FKmr6GE0/how-to-track-post-changes-by-adding-a-history-feature-to-wordpress
https://www.elegantthemes.com/blog/tips-tricks/how-to-track-post-changes-by-adding-a-history-feature-to-wordpress#commentsSat, 23 Sep 2017 12:00:19 +0000https://www.elegantthemes.com/blog/?p=60660If you’re running a website with multiple contributors, it can be hard to track post changes in WordPress itself. This can become a problem if you’re trying to identify the source of an error, or keep tabs on your writers’ activity. Finding a way to track post changes in WordPress enables you to keep logs […]

]]>If you’re running a website with multiple contributors, it can be hard to track post changes in WordPress itself. This can become a problem if you’re trying to identify the source of an error, or keep tabs on your writers’ activity.

Finding a way to track post changes in WordPress enables you to keep logs of practically all of the activity for your posts and pages. For this article, we’ll talk about why this functionality can help you and how to implement it in three simple steps. Let’s get to it!

Why You Might Want to Track Post Changes In WordPress

Ideally, you’d be able to keep detailed tabs on your users and their actions on your website. WordPress partly enables you to do this, but the details are often sparse, and you can’t quickly sort through the information. Here’s how a more robust logging functionality can help you:

You can track changes to any posts on your website. A good logging solution will track new posts, edits, deleted articles, and more.

They can help you troubleshoot errors. Sometimes updating plugins and themes can cause errors on your site, and if you log when this happens, it can help you identify the source.

It can strengthen your security. Some tracking tools also take note when someone tries to log into your website, and record their IP. This is a good way to spot brute force attacks before they get through.

As far as we’re concerned, any website can benefit from keeping detailed activity logs. However, if multiple people have access to your dashboard, that makes your site an even better candidate. Keeping track of who does what without a dedicated tool can be next to impossible, so it makes sense to find an option that enables you to do so.

The Simple History plugin does a lot more than just enable you to track post changes in WordPress. It sets up a log of events on your dashboard’s home page that tracks new posts, displays changes to existing ones, and notifies you when content is deleted.

In addition, the plugin also notes when new attachments are uploaded, along with when taxonomies are modified, a comment is made, a widget is added, themes and plugins are installed, and more. In short, it enables you to log almost every event that takes place on your website. Plus, it enables you to sort through them using multiple criteria, meaning you don’t have to go through dozens of pages to find the information you want.

The best part is, the plugin is completely agnostic. It doesn’t care what theme or other plugins you’re running – it just keeps track of all the events that happen on your site, and it also works perfectly alongside the Divi theme.

How to Track Post Changes by Adding a History Feature to WordPress (In 3 Steps)

Before we go any further, you’ll want to install and activate the Simple History plugin. When you’re ready, move on to step number one.

Step #1: Configure the Plugin

One of the great things about this plugin is there aren’t a lot of complicated settings (hence its name). After activating it, you can find a new Simple History tab under Settings on your WordPress dashboard. From this tab, you can choose whether to display your logs as a widget, or give them their own page under your Dashboard tab:

We prefer the latter, but you could enable both options at once. Further down, you can choose how many events you want your logs to display per page:

You can also clear your logs manually by clicking on the Clear log now button. This can be useful for privacy purposes, but keep in mind that logs are automatically deleted every 60 days. Finally, you can tick the Enable RSS Feed option at the end of the section if you want to view your logs using a dedicated reader:

If you enable that option, the page will display a link to your log’s RSS feed once you save your changes. The plugin also includes an option to generate a different address for your feed if you think the original has been compromised. After all, you don’t want anyone to just waltz in and take a look at your site’s logs.

Step #2: Access Your History Logs and Sort Through Them

There are two ways to access your logs, depending on the settings you chose during the first step. By default, Simple History creates a widget under its own name in the Dashboard > Home tab:

The same log is also accessible if you go to Dashboard > Simple History, only in this case, you get a full page layout instead of a widget:

Fortunately, the functionality for both logs remains the same, so you can use either one you want. You’ll also notice there’s a search bar above your logs, which enables you to look for events that include specific words during a period of time:

If you click on the Show search options link, you’ll also be able to look for specific types of events. Simply click on either Log Levels or Message Types,and choose the type of events you want to see:

Finally, you can also look for all of the actions particular users have taken. In this case, you’ll need to enter their usernames in the Users: field manually, instead of choosing from a list. When you’re ready to start your search, just click on the Search events button and get to work on finding the information you want.

Step #3: Learn How to Export Your History Logs as JSON or CSV Files (Optional)

As we mentioned earlier, the Simple History plugin automatically deletes your logs every 60 days. If you want to store them permanently, they can be exported as JSON or CSV files. To do this, go to Settings > Simple History and look for the Export tab:

Once you’re in, choose the format you want to export your logs in, and click on the Download Export File button. We’d recommend selecting CSV files, since you’re more likely to have spreadsheet software on your computer you can use to open them, but your mileage may vary.

Conclusion

Using the right tool, you’ll not only be able to track post changes in WordPress – you’ll also get the ability to log practically all activity on your site. This gives you an easy way to see what’s happening on your website, at a glance. It’s perfect for monitoring your users’ actions, and logging changes to your posts and pages.

To set it up, just install and activate the Simple History plugin and follow these three steps:

Configure the plugin.

Access your history logs and sort through them.

Learn how to export your history logs as JSON and CSV files.

Do you have any questions about how to track post changes in WordPress? Ask away in the comments section below!

]]>https://www.elegantthemes.com/blog/tips-tricks/how-to-track-post-changes-by-adding-a-history-feature-to-wordpress/feed8https://www.elegantthemes.com/blog/tips-tricks/how-to-track-post-changes-by-adding-a-history-feature-to-wordpresshttps://cdn.elegantthemes.com/blog/wp-content/uploads/2017/09/track-post-changes.pngBreaking Into the Divi Economy with Jerry Simmons – The Divi Nation Podcast, Episode 62http://feedproxy.google.com/~r/ElegantThemes/~3/6_i7Y7JpT3g/breaking-into-the-divi-economy-with-jerry-simmons-the-divi-nation-podcast-episode-62
https://www.elegantthemes.com/blog/divi-resources/breaking-into-the-divi-economy-with-jerry-simmons-the-divi-nation-podcast-episode-62#commentsFri, 22 Sep 2017 16:00:08 +0000https://www.elegantthemes.com/blog/?p=61493Hey Divi Nation, we’re back this week with another episode of our podcast and video show that highlights yet another standout individual in our community. This week, I got to sit down and chat with Jerry Simmons. Jerry is someone who broke into the Divi economy by scoring a job with prominent community member Geno […]

]]>Hey Divi Nation, we’re back this week with another episode of our podcast and video show that highlights yet another standout individual in our community. This week, I got to sit down and chat with Jerry Simmons.

Jerry is someone who broke into the Divi economy by scoring a job with prominent community member Geno Quiroz over at Monterey Premiere. If you’re someone who has been enjoying using Divi and wondering how you might be able to turn it into a career, then you’ll want to watch or listen to this episode to hear how he did it.

Jerry is a very active community member, particularly in the Facebook groups. But he’s also known to show up at WordCamps and Meetups (like the most recent one out in Orange County that a large number of Divi Community members attended).

Jerry is also one of my favorite types of community members. He’s someone who came to WordPress and Divi from a completely different background (Jerry’s a pastor by trade) and yet is now able (after a few crash courses) to work professionally in this field.

He’s also a Divi Nation first! He’s the first person we’ve ever had on the show who’s not a freelancer or founder of a third party, but a dedicated staff member of a third party Divi product creator or service provider. Something that I find really satisfying as it’s a great indicator of community (and industry) growth.

During the course of our conversation, Jerry and I discuss why he made is transition into WordPress and Divi, what skills and attributes have served hime well, and tips on how others can do the same thing.

See You Next Week!

Well that’s all for this week’s episode. Thanks again to Jerry for making the time to be on the show. I hope you enjoyed our chat as much as I did. If you have any questions feel free to leave them in the comments section below!

]]>https://www.elegantthemes.com/blog/divi-resources/breaking-into-the-divi-economy-with-jerry-simmons-the-divi-nation-podcast-episode-62/feed2https://www.elegantthemes.com/blog/divi-resources/breaking-into-the-divi-economy-with-jerry-simmons-the-divi-nation-podcast-episode-62https://cdn.elegantthemes.com/blog/wp-content/uploads/2017/09/dn-Jerry-Simmons-Blog-Thumbnail.jpgIs Freemius the Right Choice for your Plugin or Theme Business?http://feedproxy.google.com/~r/ElegantThemes/~3/6cDcXDLpHUw/is-freemius-the-right-choice-for-your-plugin-or-theme-business
https://www.elegantthemes.com/blog/resources/is-freemius-the-right-choice-for-your-plugin-or-theme-business#commentsFri, 22 Sep 2017 12:00:22 +0000https://www.elegantthemes.com/blog/?p=60811Freemius may sound like a background character from Game of Thrones, but alas. Freemius is a WordPress plugin service with a really neat concept: you can sell your plugins and themes through the WordPress dashboard instead of using an external marketplace. You can also collect data about usage, activation, and deactivation that may help development […]

]]>Freemius may sound like a background character from Game of Thrones, but alas. Freemius is a WordPress plugin service with a really neat concept: you can sell your plugins and themes through the WordPress dashboard instead of using an external marketplace. You can also collect data about usage, activation, and deactivation that may help development decisions.

Give Me Freemium or Give Me Death

It’s should not be surprising that Freemius is aimed at–drumroll, please–freemium apps. (Get it? Freemius…freemium? Hilarious.) Freemium is the catch-all for those apps that have a somehow-limited demo that you get for free and are prompted to upgrade to unlock its full potential.

Freemius’s whole shtick is that it offers free and freemium developers a toolset that not only gives them data on users’ activation and deactivation habits, and software usage and versions, but also has an integrated sales component within the plugin itself.

It’s a pretty neat concept, but does it work? And as a plugin or theme developer, is it worth the integration?

That depends. But I’ll do my best to go through the highlights as I see them so you can make an educated decision.

Features

Freemius does a ton of stuff that’s broken down into three subsections: Insights, Checkout, and Revenue. You can see everything they offer here, with direct comparisons to other products you may be using.

Instead of charging for these as individual services, Freemius uses a percentage-based revenue model for access to all three. They have a complete breakdown and example case you can read through, but the basic rundown is this:

That won’t work for everyone, obviously. But if you’re a dev who’s shelling out more than 7-10% on platform fees already, you should at least check it out.

Free for Free Stuff

What I do think is awesome about Freemius, though, is how it doesn’t cost anything if you have an unmonetized plugin or theme. You know who you are, you generous, open-sourcers, you.

If you’ve got a free plugin or theme out there in the wild, you can access Freemius’s features without paying anything. Because, you know, percentage-based models and free stuff don’t jive.

It’s easy to set up, and data is great for nerds like us, so I am really not seeing much of a reason not to use it with free plugins. From where I stand, there’s not a downside that I can see.

Analytics

If you’re a data junkie like me, this is where the meat-and-potatoes of the service comes in. I rarely make a decision about anything without weighing data in one way or another, and I assume as a developer and business-person, you don’t, either.

Getting Set Up

First off, I love it when a site lets you sign up with Github. It should be a no-brainer for software companies, and Freemius gets a gold star from me for that. It’s just one less step you have to go through…since you’re a dev with a Github account anyway. (And if you don’t wanna, normal stuff works, too.)

As soon as you sign-in, you’ll see some videos that give a brief overview of each feature (watch them, obvs) and a button on the left that says Add Plugin/Theme. When you decide to add your plugin or theme, click the button and enter the info.

Note the highlighted snippet: If your item is listed on the WordPress.org repository, use the exact same slug.

When you’ve followed directions and have everything set up, you’ll have full access to the Freemius SDK and dashboard for data and everything else.

Integrating the SDK

The hardest part of Freemius is integrating the SDK, and it’s not even that hard. You just have to go through the steps of doing it. Like WordPress itself, they have a 5-minute install. That’s what I call staying on brand.

With that done, you’re good to go. Freemius is active in the plugin and you can get data.

Speaking of Getting Data

The biggest selling point to Freemius is how it collects data from your users. Upon installation of an integrated plugin or theme, users will be given an opt-in dialogue (of which 60% do, according to the Freemius website), bada-bing bada-boom…data in your dashboard.

Not only are they opting in to providing your feedback and data, once they do, you get a mini-email list of users you can directly interact with. Freemius has integrations with email services where you can send updates and news and such to users who you know 100% are using your product.

Those are great. And having been on the user-end of that experience, I can say it’s simple and easy and that I personally opted in for certain plugins (when I normally don’t).

But as a developer, as great as knowing why people do use your stuff can be, knowing why they don’t can have an even larger impact to your bottom line.

Freemius knows that, too, apparently.

Deactivation Feedback

I uninstall plugins pretty quickly. A few clicks, a few minutes, and I can usually decide if the newfangled shiny is going to be a mainstay of my website, or if it’s just not quite a fit.

I do this for good software, too, but mostly it’s because it doesn’t quite fit the niche I need filled. But I can’t tell the dev that without going to their site or leaving a review or submitting a support ticket or hitting them up on Twitter…you get the point.

When there’s a Why are you leaving me, friendo? pop-up, I fill it out. Apparently others do, too.

Getting Real/Useful Criticism

One of my favorite snippets on the Freemius websites is about how their product can end one-star reviews. And while that is obviously a heavy dose of hyperbole, they are onto something.

The feedback form provides an alternative way to spill the anger. Angry users feel satisfied criticizing your plugin once in the feedback form without affecting your WordPress.org avg rate.

By giving users a way to vent their frustrations directly to you, they really may not feel the need to openly criticize you with the one-star of death. Sure, if they’re really internet-angry, they’ll skewer you at every opportunity, but if they’re just normal-angry, Freemius may be able to save you some ratings and get you honest feedback.

But What about Active Users?

You get tons of data on them, too. From updates to WP and PHP versioning, if they opt-in, you get a pretty good idea of who your users are, not who you think they are.

Check This Out!

Outside of data analytics, a big selling point for some folks is being able to connect to your users within their dashboards, not yours. Instead of going to your website or an external marketplace like Envato or CodeCanyon to buy a license, if you’ve integrated with Freemius, users can buy within their own dashboard without interrupting their own workflow.

(That doesn’t stop you from including your plugin on Envato or CodeCanyon, by the way, or the WordPress.org repo.)

Do they need additional scalability right then? Done and done. It helps you make a sale, and it helps them keep on keeping on. Everyone wins.

And Stripe and PayPal Express are built in, so yay!

Subscriptions, Too

I was intrigued when I saw that Freemius supports recurring payments and subscription models. If you’ve ever done a recurring subscription for users, then you understand what a real pain it can be.

Whenever I finally get around to finishing up the subscription plugin that’s been rolling around in the back of my mind for a while, Freemius is going to be my first stop. A lot of the solutions are kind of a pain to implement, if you ask me.

After all this, I think Freemius may offer the best solution for that pricing model–mainly because of how hands-off the whole process can be for everyone involved once it’s set up initially.

So…Is Freemius Right for You?

Maybe. I dunno. They do offer a lot of really nice features, and if you have free plugins and themes, I honestly don’t see a reason not to give them a shot. You’re not out anything except the time it takes to set up and integrate their SDK.

If you’re making a living (or even have a side-hustle) with your plugins and themes, that’s where it gets a little more ambiguous.

The up-front costs are low, but they’re regular. You’re not going to be able to outgrow them and make the costs an even smaller fraction of revenue. So really large companies may not find it as financially viable as small-to-mid-sized ones.

In the end, I think Freemius is worth giving a shot simply because of the suite of features and how easy it is to get set up as a trial. If you’re on the fence about it, set it up with one of your free plugins and give it a look and report back to let us know what you think.

Do you use Freemius or know someone who does? Let us know your experiences in the comments and help your fellow devs make a decision!