11 Examples of SAAS Websites Built with Divi

SAAS (Software as a Service) is a popular business model and as you could image SAAS systems needs websites to explain and demonstrate their services to potential clients. Fortunately there are a lot of SAAS websites built with Divi. In this article we take a look at 11 examples of SAAS websites built with Divi to help inspire you for your next SAAS project.

These sites can help with inspiration for layouts, color, images, product descriptions, embedded video, case studies, CTA’s (call-to-action), navigation, and more. Most are brochures with pricing tables. Many include chat and other communication systems. The websites are in no particular order.

1. Invoice Central

Invoice Central displays a full-width image with tagline and CTA, and a section with logos for media where the service has been featured. The image opens an embedded Vimeo video when clicked. The top menu include a chat button and sign-in/sign-up buttons. The next section shows the features with an overlapping section. A Getting Started section shows the process using icons. A scrolling ticker shows client logos. A testimonial slider displays testimonials with zoom animation followed by a CTA and footer with links. The site is a great example of using graphics and color.

2. Visual Planning

Visual Planning includes a full-screen post slider, a section that includes flat-designed images with links to the various SAAS options, and a two-column section with newsletter sign-up form and an event calendar. Following this is a section with blurbs describing the SAAS solutions, two CTA’s, and footer with links. The menu system includes clickable contact information and social links that match the color branding.

3. Traineaze

Traineaze uses a full-screen background image with information about the platform and a CTA. Scrolling reveals a section with icons that shows the benefits in just a few words. The next section uses alternating images and text to show details about the system. Following this is a section with pricing and a CTA, client testimonials with company logos, a section with awards and a CTA, and footer with contact and about info. The menu also includes a CTA. A Zendesk message box remains on screen. The site makes great use of color and images using a clean layout.

4. Altitude 365

Altitude 365 uses a full-screen background image with animated overlays that come and go while providing information about the service. Links to blog posts appear on the right with different colored backgrounds. The menu includes multiple logos, an email link, a help link, and both a standard menu and hamburger menu. The hamburger menu includes clickable contact and social links. The next sections show a timeline of the process, a list of services, case studies with overlays, and an about section using a timeline with a link to more information. The blog page displays the last three posts in large blocks followed by a regular blog listing in four columns. The site has a clean layout and makes great use of color.

5. Formaliti

Formaliti displays a full-screen image with information and CTA in an overlay on one side. A small section provides a short description followed by a more detailed section with CTA and an embedded video, and a section with an image and information. Benefits are displayed with color-branded icons, while another section shows which plans each business sector benefits from. A testimonials section shows images with names and a link to see the testimonials and case studies. A CTA is placed over a particle background. The footer displays links with branded colors. The site makes great use of color and white-space.

6. Netsil

Netsil uses a full-screen image with a tagline and CTA’s. The menu also includes a CTA. Following this is an about section with a download link to a white paper, a section with blurbs about the services, and a section showing how it works including icons and a CTA. A blog section displays featured articles. A custom footer includes links and a sign-up form over a particle background. A chat button remains on screen. The sites makes great use of branded color and animation.

7. Kasisto

Kasisto uses a full-screen background image with a tagline and CTA in an overlay. The next section uses a background with icons with information, logo, and CTA in an overlay. Following this is a full-width image with overlay to demonstrate the product and list the features, a section showing an animation of the product working with CTA’s, a section with quotes from the media, a company statement over a background, and a footer with contact form. The site makes excellent use of color and images.

8. RankAbove

RankAbove uses a full-width image with tagline and CTA in an overlay. Scrolling displays blurbs with icons and CTA, a section with customer logos with link in an overlay over image of customer websites in true parallax, and a section with stats using circle counters and a flat-design graphic. A testimonial is displayed in an overlay over an image of the company in parallax. A section about the services uses circled images and a link. A large footer includes links and a contact form. Contact and login links are placed in the top menu. The site makes good use of overlays and parallax.

9. Ezypay

Ezypay uses a full-screen background image with information and CTA in an overlay. It even includes a video play button that plays a YouTube video in a modal window. Several sections display the product features with links to learn more. A full-width section includes a background image with a webinar CTA in an overlay. Inquiries are made through a full-width contact form. The footer includes links to the site in various languages. The Pricing page includes a country selector. The site makes good use of branded color.

10. vcita

vcita includes full-screen animated background with tagline and CTA. It also includes a CTA in the menu. Scrolling reveals several sections showing an animated demonstration of the app with bullet points and icons of the benefits in an alternating layout. Following this is a full-with CTA with contact info, testimonials, logos of platforms the system integrates with, a pricing table, and footer with links. The site makes excellent use of animation and branded color.

11. OpenRemote

OpenRemote displays a full-screen image with a tagline and YouTube video link in an overlay. The video plays in a modal when the button is clicked. It includes a full-width menu under the logo that includes a separator line. The next section shows the steps in the process using icons. Following this is a section of blurbs about the services, a full-width testimonial slider over a background image, a section with news feeds and latest tweets, sliders for clients and awards, and a footer with links and search. The site makes great use of branded color.

Final Thoughts

These 11 examples of SAAS websites built with Divi are great examples that Divi being used to create interesting SAAS websites complete with detailed product information and benefits, pricing tables, case studies, embedded video, chat systems, and more.

These sites a great for providing ideas for layouts, colors, images, backgrounds, video, navigation, etc. SAAS websites are excellent for examples of showcasing products and also works as examples of product photography and case studies. These websites are sure to inspire you for your next SAAS design.

What are some of your favorite elements of these Divi SAAS sites? Let us know in the comments below!

Featured Image via venimo / shutterstock.com

The post 11 Examples of SAAS Websites Built with Divi appeared first on Elegant Themes Blog.

Maintaining Legacy WordPress Websites — Draft podcast

Welcome to the Post Status Draft podcast, which you can find on iTunes, Google Play, Stitcher, and via RSS for your favorite podcatcher. Post Status Draft is hosted by Joe Hoyle — the CTO of Human Made — and Brian Krogsgard.

Brian and Joe discuss many of the factors that are a part of maintaining a website for the long term. They discuss it both in the sense of when you own the site (like Brian with Post Status), and when you are doing long-term client work (like Human Made with retainers).

There are several things to consider, whether it’s in your own code, or the decisions you make on which third party developer’s tools to use.


Direct Download

Links

Sponsor: SearchWP

SearchWP makes WordPress search better. Instantly improve your site search without writing a line of code! SearchWP enables custom algorithms, searching custom fields, product data, and much more. Improve your site’s search today with our newest partner, SearchWP.

11 Quick Ways to Insert Ads into WordPress… and Increase Your Income This Year

Seems like there are never enough hours in the day to keep your business running, doesn’t it? Between actively working to complete projects while trying to drum up new clients, it’s difficult to think that there’s more you should be doing to boost your revenue stream.

One surefire way to keep your income in the black is to diversify. But if you’re already feeling tapped out, I’d suggest you take a look at a (mostly) passive option for generating income for your business: monetizing your WordPress site.

There are a number of ways you can make money from your website—like creating and selling ebooks or plugins—but those take time and active promotional energy on your part. Instead, why not insert ads into your WordPress site? They’re a fantastic and relatively hands-free way to make money on the side while you maintain focus on your main hustle: building beautiful websites.

Let’s take a look at 11 quick ways you can insert ads into your WordPress site and start passively generating income this year.

The Keys to Successfully Monetizing Your WordPress Site

Who doesn’t like the sound of passive income generation? While it might not be enough to provide you with a full income for the year, it will most likely be enough to help you pay off some of those ongoing business expenses you accrue throughout the year.

Now, for many people interested in monetizing their WordPress site, the first place they turn to is Google AdSense, which seems the logical choice. Google’s tools play an important role in helping websites get found in search and, later, in helping users determine what’s happening with the traffic that pours into them. That being said, AdSense isn’t necessarily the best ad generation tool for everyone.

So, what are your options? For starters, you could take the one most people are familiar with and rely on AdSense to provide ads from random advertisers. You could opt instead to actively sell ad space to sponsors, partners, and other users interested in advertising on your site. Or you could just run your own ads.

In addition to sorting out where you want to source ads from, there are a number of other considerations to make when choosing an option. For instance:

Location

Where do you want to insert ads on your WordPress site?

  • In the header?
  • In the footer?
  • Before or after your blog post content?
  • Within your blog posts?
  • Before or after blog excerpts?
  • In the sidebar?
  • In some other widgetized area?
  • In the WordPress admin dashboard? (Yes, that’s possible.)

Size & Shape

Ads don’t always have to be a small box tucked into the sidebar. Depending on the tool you use, you’ll find that there are sizes, shapes, and orientations (horizontal vs. vertical) that you can select from so long as they make sense for the allotted space within your site.

An important point to remember here is that even though you’re not responsible for designing third-party ads, you should still take time to select the parameters by which the ads will fit. You’ve worked hard on your site’s design and it would be a shame to let all that hard work go to waste by allowing an ill-fitting ad to be thrown in there.

Ad Content

There are typically three options: text-only ads, display (image) ads, and rich media ads (which includes video).

Mobile-friendliness

This one’s a must. If the tool you use to insert ads into your WordPress site doesn’t provide for mobile compatibility, skip it or hide those ads for mobile visitors. Again, you never want a contribution from a third party to disrupt the user’s experience.

Visitor Targeting

For some of you, just finding a reliable ad plugin may be all you need starting out. But once you start to see revenue coming in with each impression (view) or click, you’d be wise to make use of custom targeting settings. You can use things like geotargeting to deliver specific ads to visitors based on their location or you can tweak settings related to demographics to maximize results.

Analytics

You’ll also want to check your ad delivery system for built-in analytical capabilities. Although each tool will offer a way to track clicks, you might want something that conveniently pulls those stats into WordPress or that comprehensively tracks more activity surrounding the ads than just clicks.

Google has a great video on the importance of using analytics to optimize your on-site ad placement and usage:

A/B Testing

It may take some time to figure out where ads belong on your site for optimal performance. You don’t want people to automatically gloss over them while trying to get to your content or, worse, get annoyed with the overabundance of ads that they ditch your site altogether. As always, it’s about striking a good balance between putting your content out there, but to not do it in a way that’s disruptive to the experience.

A/B testing is something to think about if you want more control over which ad sizes, locations, or content get displayed based on visitor behavior.

Although each of these considerations are valid, not all of them will be important to you—especially if you’re just looking for a quick way to make money on the side. Just know that, when you’re ready, there is a lot you can do with ad revenue generation in WordPress.

Quick Ways to Insert Ads into Your WordPress Site

There are a number of ways you can go about quickly getting ads up on your WordPress site. AdSense is one of them. Selling ad space to third parties is another. And you can either manually insert the AdSense code into WordPress or you can use a plugin. Do you know what’s right for you?

Let’s explore your options.

Manually Add Google AdSense Code

For those of you who don’t want to add another WordPress plugin to your site, you can instead generate a code within Google AdSense and then add it to WordPress. While implementation is easy enough, the amount of control you have over ads placed on your site may be limited and the insights you get about clicks and impressions will force you out of WordPress and back to Google.

If you’re comfortable with that tradeoff, then I’d suggest you check out this tutorial. It will walk you through the steps of setting up your first Google AdSense ad, getting the code, and inserting it into WordPress.

Growing Your Blog’s Reach with Pinterest Group Boards

Chances are, you’re promoting your website on Facebook. But what about Pinterest?

After Facebook, Pinterest is the second largest source of social media referral traffic. It is also the third most popular social network among U.S. adults, after Facebook and Instagram. If you’re not using Pinterest as part of your blog’s traffic strategy, you are missing out on a potentially gigantic source of traffic.

Even if you are already on Pinterest, are you using it to its full potential? Pinterest group boards are a great way to draw relevant visitors to your blog posts from this social platform, and they allow you to reach an audience beyond your existing followers. Often, the potential reach of these pins is many times larger than the reach of pins shared to your own individual boards.

This article will explain how Pinterest group boards work, how to find and join them, how to get the most out of them, and how to start your own group board. If you’d like more traffic to your website, read on.

How Pinterest Group Boards Work

If you’ve ever used Pinterest, you know that the website operates like a giant mood board. There is a main stream of popular pins, pins from the people you are following, “suggested” pins, and ads. You can “re-pin” any of these pins, or share, onto your own themed Pinterest boards.

Example of Pinterest group boards

A selection of Pinterest group boards by Joanna Goddard, the blogger behind A Cup of Jo

Group boards work similarly to regular boards, except with group boards, there are multiple people curating content to the same board. Here’s one example, a group board with 136 collaborators and over a million followers, by Better Homes & Gardens:

Group board example

That’s right, over a million followers! Due to the increased reach, thanks to the powerful collaborators, group boards often have a following much larger than the individual collaborators’ accounts. This massive following gives even brand new pins a considerable boost, and that single pin can turn into thousands of pins as it is shared across the followers’ boards.

Therein lies the power of Pinterest group boards. They make an incredible promotional tool if they are engaging and highly relevant to your content. Keep reading to learn how to find and join group boards.

How to Find Pinterest Group Boards

To the uninitiated, Pinterest group boards can seem pretty hard to find! Searching Pinterest by board doesn’t always pull up useful results, and scrolling through the board lists of the biggest “Pinfluencers” in your niche can be extremely tedious.

Instead, using a group board directory like this one or the tool PinGroupie is recommended.

By using these resources you should quickly be able to find a few relevant group boards. PinGroupie is especially useful as it allows you to search, sort, and filter the results. However, this tool is not updated very often.

If you were searching for a group board about blogging, here are some of the top results on PinGroupie:

Pingroupie group board search tool

What Makes a Good Pinterest Group Board

When looking for a good board to join, consider several factors. First of all, prioritize relevance to your website above all else – if it isn’t relevant to your target audience, you’re not going to get the kind of traffic that sticks around.

Next, look at the number of followers, which you’d ideally want to be larger than your own follower count. Smaller boards can still help your blog reach new audiences, though, if they are super relevant.

Next, check the board out and see if the pins generally have a good number of re-pins or if the activity is pretty low. Pinterest doesn’t share the re-pins of individual pins anymore; instead, the number is a total of all the copies of that pin on Pinterest, which can make it a little hard to judge.

Finally, look at the number of collaborators on the board. If the number is pretty high, you know that the board is probably taking new contributors regularly. If the number is small, it’s not that likely that you’d be able to join, but it’s always worth a shot.

Architecture group board

Let’s say you have a blog where you often wrote about architecture or you had a website that promotes architectural products and services. This board looks like a great option to join. The topic is clearly architecture, and all the recent pins are on-theme. The board has nearly 300,000 followers, which is great no matter what your personal follower count is. All the recent pins have around a thousand re-pins, and some in the first few rows of pins have re-pins in the multiple thousands. Finally, the board has over 700 collaborators and according to the description is actively accepting new pinners, so your chances of being accepted are high.

How to Join Pinterest Group Boards

Sometimes, like in the example above, pinners will explain right in the description how to join their group board. In other cases, it won’t be quite so simple.

You can always identify who the “owner” of a group board is by looking at the first account listed as a collaborator. Generally, they will ask that you follow all of their boards (or at least the group board you are interested in pinning on), then contact them in some way and provide your email address. This may be through a comment on a recent pin (make sure that pin belongs to the owner of the board), a contact form linked in the description, or through another board. Every group is different, so just follow their preferences as best you can.

If no application process or method of joining is listed, the board may be closed to new members. However, you can still reach out to the board owner through their email address or website and ask – it doesn’t hurt! If you contact them this way, I recommend you keep things as brief as possible, quickly getting across the fact that you want to join that specific board, why you would make a good curator and the essential information they need to add you, like your email address.

Tips for Expanding Your Reach on Pinterest Group Boards

There is no secret to succeeding with Pinterest group boards in particular – a lot of these best practices apply to pinners on their own boards, as well. However, this is a good checklist to run through in either case.

1. Enable Rich Pins

If you haven’t yet verified your website with Pinterest and enabled Rich Pins, now is the time to do so! Following these steps adds some additional information to your pins, like the article title. It also makes your pins take up more real estate on the Pinterest stream, increasing the chances that your pins will receive engagement.

Rich Pins example

In the image above, you can see how a rich pin stands out.

2. Create “Pinnable” Graphics for Your Blog Posts

This is such a no-brainer, but it is an absolutely essential step if you want your content to succeed in Pinterest group boards.

Create a different “pin-worthy” image for each blog post you publish. These should use beautiful photos (sometimes more than one, collaged) and be pretty straightforward – often, including a text overlay with the name of the blog post is a great step.

Example of pinable images

When it comes to inspiration, food bloggers are miles ahead in terms of pinnable imagery. If you want to learn how to use Pinterest to its full potential, follow some of the biggest food bloggers.

3. Pin More Than Just Your Own Content

Yes, you joined the group board in order to promote your blog posts. But it is important to remember your role as a “curator” – you are supposed to be sharing the best content, whether it belongs to you or someone else.

4. Use a Tool to Schedule Pins

In order to be successful with Pinterest, you must be consistent about your pinning and spread out your pins across the times that your followers are online. You could try and be online and manually pinning whenever your audience is. Or, you can use a Pinterest scheduling tool instead.

Free scheduling tools are hard to come by, so you’ll probably need to invest in a paid option. However, over time you will find that the resulting growth to your Pinterest account is worth it.

Here are a few Pinterest scheduling tools to get you started: Tailwind, Viralwoot, Viraltag, Buffer, and BoardBooster.

How to Start Your Own Pinterest Group Board

At some point, you may decide to start your own Pinterest group board, in order to take advantage of the benefits group boards offer their owners and have a better handle on the exact theme of the board.

Begin the board as you would any board on Pinterest, by pinning relevant content. Provide the board rules and an explanation of how to join in the description.

Then, invite relevant pinners you trust to curate content on your new board. A great way to find collaborators is by posting in a Pinterest thread on a Facebook blogging group. Over time, your board will grow and people will start asking to join.

Final Thoughts

Obviously, there are plenty of benefits to joining Pinterest group boards, as well as starting your own. Hopefully, this post has helped you see the value of using group boards to boost your traffic and how to get started.

If you’ve joined some group boards already, how have they helped you grow your blog’s reach on Pinterest? Share your experiences in the comments below.

Article thumbnail image by Author Username / shutterstock.com

The post Growing Your Blog’s Reach with Pinterest Group Boards appeared first on Elegant Themes Blog.

Weekly WordPress News: Tabs Are Back at the Plugin Directory

This week, tabs made a triumphant return to the WordPress plugin directory. There’s also an interesting plugin that runs your content through IBM’s Watson to gauge its emotional "feel". And if you’re using Internet Explorer 8, 9, or 10 (or your readers are), you’ll be out of luck starting with WordPress 4.8. Those browsers are getting kicked from WordPress’ target browser coverage.

The post Weekly WordPress News: Tabs Are Back at the Plugin Directory appeared first on WPLift.

25+ Free Icon Fonts for Theme Designers or Anyone Else [Update 2017]

Want to spice up your WordPress themes? Icon fonts provide a handy way for you to both enhance the design of your themes and give your theme’s users more functionality. And best of all, there are heaps of free icon fonts you can start using today.

On the design front, they allow you to quickly implement icons without needing to grab individual images or vectors. And on the functionality front, they allow your users to easily include icons in their theme customizations. The Nielsen Norman Group found that, when properly used, icons can improve web usability, so it’s definitely a nice thing to add to your themes, especially on menus.

I won’t belabor the point too much because I’m guessing you already know the benefits of icon fonts if you found your way to this post.

So, without further introduction, I give you my list of 25+ beautiful free icon fonts.

Font Awesome

free font icons font awesome

Font Awesome is the current king of icon fonts. In a single collection, it offers over 675 different icons. Though it was originally designed for Bootstrap, Font Awesome works well with all frameworks. You can implement it either by hosting the CSS yourself or including the BootstrapCDN Font Awesome CSS file.

Dashicons

free icon fonts dashicon

Even if you don’t know Dashicons by its name, you know its icons. Dashicons is the official font of the WordPress admin dashboard. And if you like those designs, you can bring those same icons into other aspects of your WordPress site.

Themify Icons

Themify Icons is a set of over 320 icons from popular theme provider Themify. You can download it as both an icon font version or a plugin version. And best of all, it’s 100% free for both personal and commercial use.

Foundation Icon Fonts 3

The Foundation Icon Fonts 3 set includes 283 different icons with one font. They span eCommerce, social media, accessibility, and more. All the icons include rounded corners to give them a “softer more approachable feel”.

Elegant Icon Font

The Elegant Icon font includes 360 free icons covering a variety of uses. All of the icons are completely free to use. As the name suggests, the Elegant Icon Font comes from Elegant Themes, the creators of the Divi theme.

Dripicons

Personally, I love the style of Dripicons. They’ve got beautiful thick lines and an overall great aesthetic.

Pictonic

The Pictonic package includes 266 free font icons. They cover a range of brands and uses. If you sign up for Pictonic, you can get access to thousands more icons.

Sosa

Sosa is a set of 160 free icons from Ten by Twenty. They span a variety of uses, so you should be able to find something helpful.

Typicons

Typicons is a set of 336 “pixel perfect” free font icons. They’re all-purpose and cover tons of different areas.

Metrize Icons

Metrize Icons is a free font icon collection with 300 metro-style designs. The icons are all beautiful and circular. I dig it.

Ionicons

Ionicons are a beautiful set of icons. You can directly grab the latest CSS file hosting by MaxCDN.

Symbol Signs

Symbol Signs is a collection of 50 commonly used signage symbols. It’s by no means for every project, but if you have this specific need, it’s a great option.

IcoMoon

IcoMoon’s free icon pack includes 490 different vector icons for you to play around with. You can also search all of the icons by keyword, which is a nice touch. Much easier than trying to sort through manually!

Batch

Batch is a set of 343 different icons built by Adam Whitcroft. I like the style of the icons included in Batch quite a bit.

Socialico

 

Socialico is a set of 74 different social media icons. So if you need to add a variety of social media networks to your theme or website, it’s a great option. But don’t expect anything else.

Raphaël Icon-Set

The Raphaël Icon-Set isn’t huge, but it does have some great icons. All of them are mapped to specific letters on your keyboard to make them easy to use.

Entypo

Entypo is a free icon pack containing 411 “carefully crafted premium pictograms”. It also includes a social extension if you need icons for social networks.

MFG Labs Icon Set

The MFG Labs Icon Set is the result of an internal project. Now, it’s public and freely available for you to use in your websites. The icons are definitely beautiful, though the selection isn’t as broad as some of the other font icon packs.

Ligature Symbols

Ligature Symbols is a free icon pack with a very odd name. What’s nice is that all of the icons are easily searchable so that you can quickly find what you need.

PW Drawn Icon Font

The PW Drawn Icon Font includes over 80 free icons with a very unique style. It’s definitely different than the other icon packs on this list.

Fontelico

Fontelico is a small set of 30 different free icons.

Feather Icon Set

Feather Icon Set is a nifty free set of minimalist icons. They’ve got a neat trendy style that I enjoy.

Premium Pixels

This Premium Pixels set is 80 different mini icons that you can use across a range of topics. You can download both as a PSD or an icon font.

Rondo Social Icon Font

Rondo Social Icon Font is a beautiful collection of ~40 circular social media icons. I definitely dig the style on these.

Map Icons

Need a set of font icons that you can use with the Google Map API? If so, Map Icons are for you. Very helpful for displaying geographical locations in a more aesthetic way.

Weather Icons

Another niche icon font set. Weather Icons is a free icon font containing 222 weather themed icons. So if you need to display when it’s raining or sunny, these are the icons for you.

Space Icons

Space Icons is a set of 230+ beautiful space-themed icons. Spaceships, planets, and lots more are included in this neat icon set.

Wrapping Things Up

As you can tell, there are a lot of free icon font sets out there. I tried to round up some of the best, but I know that there are more out there. So if you know of a great set of free font icons that deserve to be on this list, definitely give us a shout out in the comments and share with the crowd!

Colin Newcomer is a freelance writer and long-time Internet marketer. He specializes in digital marketing, WordPress and B2B writing. He lives a life of danger, riding a scooter through the chaos of Hanoi. You can also follow his travel blog.

Divi Plugin Highlight – Divi Timeline Module

One of the most interesting ways to show chronological information is with a timeline. Whether it’s step-by-step instructions, a list of experience for a resume, a list of projects for a portfolio, or even blog posts, timelines can make the information visually appealing. You can create your own timelines within the Divi Builder using a plugin called Divi Timeline Module.

Divi Timeline Module, which is a third-party plugin by Tortoise IT via Elegant Marketplace, adds several new modules (the main module and three companion modules) to the Divi Builder to create two different types of responsive timelines:

  1. One where you create content for each point on the timeline. Each item in the timeline can have its own content, links, colors, fonts, icon, etc.
  2. One that uses your existing content from either pages, posts, media, or projects.

In this overview I’ll step through making both types of timelines and then I’ll show an example of building a blog page. For this overview I’m using free images from Unsplash.com. Let’s get started.

Installing the Divi Timeline Module Plugin

Installation is simple. Just upload the plugin and activate as you would any plugin. There’s no other setup required.

Creating a Timeline

There are four modules: (Post) – Vertical, Content, Featured Image, and Vertical. Although it will work with multi-column layouts, single-column layouts work best. Timeline – Vertical or Timeline (Posts) – Vertical will be used within the pages. The rest will be used to create a layout.

Timeline Vertical

Add the Timeline – Vertical module to a single-column row.

In the General Settings we can add a new timeline item, provide a title for the timeline, and choose the timeline’s color. Click Add New Timeline Item to create each of the timeline elements.

Clicking Add New Timeline Item opens a content editor complete with text, media, label, show more button, icon, icon color, background color, and image/icon animation. It also includes all of the standard Advanced Design Settings as well as Custom CSS.

Add as many timeline elements as you want. You can see here that I’ve added five elements and changed the Central Line Color to green. Within the timeline elements I selected icons and colors for each element.

Timeline Vertical Result

Here’s the quick timeline that I made. It has five items – each with their own content and icons. The color that I chose for the line was also added to the bottom of the content windows. I’ve added a background image to the section that holds the module.

Of course by using the Advanced Design Settings the module can be styled to match the page, so you don’t have to have a white background or these fonts.

This is a great choice for numbered steps of instructions, resume, list of products, portfolio, etc.

Post Timeline

You can also create a timeline from your content. This includes posts, pages, media, or projects. How it works can get a little complicated but it’s easy to create.

You’ll need to do two things:

  1. Create a layout
  2. Create the page and choose that layout

All of the modules needed to create the layout and the page are included. Let’s create an example using sample blog posts.

Create a Layout

First, create a layout. In the dashboard, go to Divi, Divi Library, and select Add New. Give the layout a name that makes sense to you (I chose Post Timeline Layout). Select Layout as the Template Type. Leave Global unchecked. Click Submit.

The layout you create will display the posts (or the post-type you choose). Think of this as creating your own blog module, only you get to design the layout of the posts. It’s not that, but that example helped me to understand it easily. Well, it kind of is that, but not really. Moving on.

This layout is built using the Timeline Content, Featured Image, and Post Title modules that are included in the plugin.

To create the layout, choose a two-column layout and place the Timeline – Featured Image module on the right, and the Timeline – Post Title and Timeline – Content modules on the left. Of course you might want to play around with layouts a little bit, such as using only the image or title, or placing them in different configurations, but let’s build the regular layout first.

Note – these modules are not used within a page like most Divi Builder modules. They’re meant to be used within a layout that will be called by the Timeline (Posts) – Vertical module.

This is the layout as it looks in the Divi Builder. As expected, each of these modules have their own options including General Settings, Advanced Design Settings, and Custom CSS.

I’m using a 1/3, 2/3 layout but 1/2, 1/2 works too. It will partially depend on the size of the featured image you want to use and the amount of content you want to display, as well as other settings such as font sizes.

Once you’ve placed your modules and chosen all of your settings select Update in the right under Publish.

Let’s look closer at each module.

Featured Image Module

The Featured Image Module does exactly what you’d expect – it displays the featured image of a post. It includes a dropdown box where you can choose the image size. It also includes alternate text, title, open in lightbox, link URL, open in same window or new tab, animation, remove the space below the image, alignment, disable for devices, and admin label.

I’m choosing a medium image size and turning off animation.

Post Title Module

The Post Title Module lets you link to the content and change the admin label and set CSS settings. I recommend leaving the Link to Content setting set to Yes. I left the rest set to their defaults.

Content Module

The Content Module lets you choose to show experts or content, and display a Read More button. I set it to show an excerpt and the read more button.

Create the Page

Create a new page using the Divi Builder and drop the Timeline (Posts) – Vertical module into a single column layout.

Timeline (Posts) Vertical Module Settings

This module will call the layout that you created. Here you have a lot of options including title, layout, central line color, icon for the items on the timeline, show numbers or icons, icon/number color and background color, animation, pagination, post type, number of posts to display, post offset (which post to start with), taxonomy, and admin label.

In order to call the layout you created, select it from the dropdown list called Loop Layout. Scroll down and chose Posts as the Post Type in order to display blog posts.

Once you’ve made all of your choices, publish the page.

Post Timeline Result

The result is a blog page with my latest posts on a timeline. I’ve placed the timeline over a background image (the image is added to the section). With this module the icons are global. I’ve set the timeline to blue with a tan icon background and blue icons. The post module can be further styled to match the page using the Advanced Design Settings.

A Blog Example

The timeline can be used within other layouts. I wanted to create a blog layout that displays a few posts at the top and then the rest within a timeline.

I created a layout in a single column with the image at the top, content in the middle, and the title at the bottom.

I then created a page with a Blog module and the Timeline (Posts) – Vertical module. I set the Blog module to display three posts in a grid. I set the Timeline module to have an offset of 3 so it will ignore the posts that the Blog module will display and start at post number 4. I placed a Text module between them with a message that alerts the visitor that the content below the blog posts are still part of the blog.

Blog Page Result

Here’s the blog page. The result is a clean layout that guides the reader through the content. Of course this doesn’t have to just be a blog page. This could also be used to show projects for a portfolio page, artwork, services, etc.

Final Thoughts

Timelines are great design elements to display chronological or numerical data. Divi Timeline Module adds this functionality to the Divi Builder, providing an easy way to create custom timelines or use your content such as pages, posts, media, or projects to create chronological timelines to display within your layouts.

The plugin is easy to use and all of the design settings you’d expect from any Divi Module are here. It doesn’t take long to learn and creating the layouts and pages is as fast and simple as using the Divi Builder. If you want to add a timeline to your website, Divi Timeline Module is a great choice.

We’d like to hear from you. Have you used Divi Timeline Module? Let us know about your experience in the comments.

Featured Image via Ollie The Designer / shutterstock.com

The post Divi Plugin Highlight – Divi Timeline Module appeared first on Elegant Themes Blog.

A Quick Guide to Adding a Favicon to Your WordPress Site

Brand recognition is critical for a company’s website. That’s why you invest so much time coming up with a simple yet bold color palette, consistent imagery, and well-defined brand messaging. The more consistent you are in defining and establishing that identity across your site, the more ingrained it’ll become in your visitors’ minds.

But you know that it’s not just what appears on your site that visitors, prospects, and customers remember you for.

Social media pages need to align with your brand identity; video branding does, too. It’s not just these larger offshoots of your brand that matter either. Take your favicon, for instance. It’s such a small detail—one that doesn’t even occur on a web page—and yet there’s a good likelihood your visitors will notice if you don’t have one or if the one you’ve chosen doesn’t look great.

It’s this attention to detail when developing a consistent brand identity that will really drive home the idea that the company or individual behind this website has got it together. In other words, not only did you take time to create a small icon to maintain your brand’s presence outside of the website, but you also considered how it affects UX, too.

If you’ve yet to create or add a favicon to your WordPress website, you’ve got to get on that, like, now. Or, better yet, yesterday.

Why Your WordPress Website Needs a Favicon

These are what favicons look like in the address bar and in browser tabs:

Favicons are quickly recognizable in browser tabs.
Favicons are quickly recognizable in browser tabs.

These are also favicons, this time in your bookmarks:


Favicons also help distinguish between bookmarks.

Here’s another example of favicons you can find in a web browser’s history:

Favicons displayed in your browser history.
Favicons displayed in your browser history.

 

Did you even realize your site’s favicon got so much airtime?

Like I said, this is about establishing a clear presence of your brand on-site as well as off. Sure, a favicon is pretty small so it might not always get noticed, but no matter how far users deviate from your site, don’t you want them to still have a piece of your brand they can instantly recognize?

In addition to bolstering your brand identity, favicons also help guide visitors back to you. If you create an eye-catching and unique favicon that helps users easily pick it out of a crowd of other favicons, they’ll remember that.

How to Create a Favicon for Your WordPress Site

Follow these three steps to create a high-quality favicon and ensure that it displays correctly on all browsers.

Step #1: Design the Favicon

By this point, you should already have a logo for your website. Start there.

You then have a few different options for designing a favicon:

  • You can use whichever design program you’re the most comfortable with (ideally, the one used to design your logo). Photoshop is one of the more popular options, but you can also use a free tool like Canva. Then extract a piece of the logo that’s unique as well as memorable.
  • You can also create something completely new if you don’t have a logo to work from. This Favicon tool is a good one to try.
  • Lastly, you can always download a free icon from the web until you have an official logo created for your site.

When creating a favicon, be sure to follow W3C’s guidelines for sizing it. Basically, they recommend you design a favicon as a square, either 16×16 or 32×32 pixels. For colors, they recommend 8- or 24-bit.

Once a favicon is designed and ready to go live, you’ll need to export the file either as an ICO, PNG, or GIF. These are the three most universally accepted favicon formats. That being said, ICO is the most versatile of them all as it stores various sizes and versions within the single file, so that each browser can determine which of those sizes is optimal for their purposes. If you’re unsure of how to export to ICO, use this Favicon Generator.

Step #2: Add the Favicon to Your Site

There are three methods for adding a favicon to a WordPress website.

Option #1: Code

If you prefer to code the favicon into the backend, you can use this option.

  • Save your favicon file as “favicon.ico”.
  • Upload it to the root directory on your server.
  • Update the HTML code in th element of your site. Here is the favicon code that all browsers will accept:<link rel="shortcut icon" href="http://bit.ly/2qgeb9t" />
  • Save your changes.

Option #2: Theme Customizer

This second option is available if your WordPress theme customizer allows for it (which most do).

You can update your favicon using the Theme Customizer.
You can update your favicon using the Theme Customizer.
  • Log into WordPress.
  • Navigate down to the Appearance tab and select Customize.
  • Find the Site Identity widget.
  • In there, you can define your site’s title, tagline, and upload your favicon.
  • Save your changes.

Option #3: Use a Plugin

WordPress plugins let you do practically anything, so it shouldn’t come as a surprise that they can do this, too.

The RealFaviconGenerator’s WordPress plugin is my pick for easily generating and setting up a favicon for your site. It’s rated 5-stars in the WordPress Plugin Directory and has 100,000 active installs, so it’s pretty much guaranteed to work for you, as it did for me.

Step #3: Check the Favicon on the Front-End

As with any other work you do on your site, you should take a moment to verify that your favicon looks good when live. Use the RealFaviconGenerator to test it out on all major browsers. Once you’re pleased with the end result, you should be good to go. There, wasn’t that easy?

Wrapping Up

Want to ensure your brand is instantly recognized no matter where users engage with it? Create a clear and unique symbolic representation that you can add to WordPress. Then let the favicon serve as your stand-in no matter where people run into your website or its bookmark stand-in around the web.

7 Foolproof Ways to Protect Your WordPress Site from Content Scrapers

Content scraping (aka web scraping, web harvesting, web data extraction, and so forth) is the process of copying data from a website. Content scrapers are the people or software that copy the data. Web scraping itself isn’t a bad thing. In fact, all web browsers are essentially content scrapers. There are many legitimate purposes for content scrapers like web indexing for search engines, for instance.

The real concern is whether the content scrapers on your site are harmful or not. Competitors may want to steal your content and publish it as their own. If you can distinguish between legitimate users and the bad guys, you have a much better chance of protecting yourself. This article explains the basics of web scraping, along with 7 ways you can protect your WordPress site.

Types of Content Scrapers

There are many different ways content scrapers go about downloading data. It helps to know the various methods and what technology they use. Methods range from low tech (a person manually copying and pasting), to sophisticated bots (automated software capable of simulating human activity within a web browser). Here’s a summary of what you may be up against:

  • Spiders: Web crawling is a large part of how content scrapers work. A spider like Googlebot will start by crawling a single webpage, and go from link to link to download web pages.
  • Shell Scripts: You can use the Linux Shell to create content scrapers with scripts like GNUs Wget to download content.
  • HTML Scrapers: These are similar to shell scripts. This type of scraper is very common. It works by obtaining the HTML structure of a website to find data.
  • Screenscrapers: A screen scraper is any program that captures data from a website by replicating the behavior of a human user that is using a computer to browse the internet.
  • Human Copy: This is where a person manually copies content from your website. If you’ve ever published online, you may have noticed that plagiarism is rampant. After the initial flattery goes away, the reality that someone is profiting off your work sets in.

There are many ways to do the same thing. The categories of content scrapers listed above is by no means exhaustive. Additionally, there is lots of overlap between categories.

Tools Used by Content Scrapers

7 Foolproof Ways to Protect Your WordPress Site from Content Scrapers

Image by medejaja / shutterstock.com

There are a variety of content scrapers available, as well as a variety of tools to help the web scraping process. Some expert organizations also exist that offer data extraction services. There is no shortage of tools content scrapers can use to get data.  These tools are used by hobbyists, and professionals for a range of different purposes. Many times you can download a bundle full of tools like Beautiful Soup, a Python package for parsing HTML and XML documents. Below are a few tools commonly used by content scrapers.

  • cURL: This is part of libcurl, a PHP library for making HTTP requests.
  • HTTrack: A free and open source web crawler that downloads websites for offline browsing.
  • GNU Wget: A tool for downloading content from servers via FTP, HTTPS, and HTTP. Get it free from GNUs website.
  • Kantu: Free visual web automation software that automates tasks usually handled by humans such as filling out forms.

7 Ways to Protect Your WordPress Site from Content Scrapers

7 Foolproof Ways to Protect Your WordPress Site from Content Scrapers

Image by 0beron / shutterstock.com

The administrator of a website can use various measures to stop or slow a bot. There are methods that websites use to thwart content scrapers, such as detecting and disallowing bots from viewing their pages. Below are 10 methods to protect your site from content scrapers.

1. Rate Limiting and Blocking

You can fight off a large portion of bots by detecting the problem first. It’s typical for an automated bot to spam your server with an unusually high number of requests. Rate limiting, as its name would suggest, limits the server requests coming in from an individual client by setting a rule.

You can do things like measure the milliseconds between requests. If it’s too fast for a human to have clicked that link after the initial page load, then you know it’s a bot. Subsequently block that IP address. You can block IP addresses based on a number of criteria including their country of origin.

2. Registration and Login

Registration and Login is a popular way to keep content safe from prying eyes. You can hamper the progress of bots that aren’t able to use computer imaging with these methods. Simply require registration and login for content you want only for your viewers. The basics of login security apply here. Keep in mind that pages that require registration and login will not be indexed by search engines.

3. Honeypots and Fake Data

In computer science, honeypots are virtual sting operations. You round up would-be attackers by setting traps with a honeypot, to detect traffic from content scrapers. There are an infinite number of ways to do this.

For example, you can add an invisible link on your webpage. Next create an algorithm that blocks the IP address of the client that clicked the link. More sophisticated honeypots can be tough to setup and maintain. The good news is that there are lots of open source honeypot projects out there. Checkout this large list of awesome honeypots on github.

4. Use a CAPTCHA

Captcha stands for Completely Automated Public Turing test to tell Computers and Humans Apart. Captchas can be annoying, but they are also useful. You can use one to block areas you suspect a bot may be interested in, such as an email button on your contact form. There are many good Captcha plugins available for WordPress, including Jetpack’s Captcha module. We also have an informative post on The Benefits Of Using CAPTCHA In WordPress you should probably check out.

5. Frequently Change the HTML

This can mess with content scrapers that rely on predictable HTML markup to identify parts of your website. You can throw a wrench into this process by adding unexpected elements. Facebook used to do this by generating random element IDs, and you can too. This can frustrate content scrapers until they break. Keep in mind that this method can cause problems with things like updates and caching.

6. Obfuscation

You can obscure your data to make it less accessible by modifying your site’s files. I have come across a handful of websites that serve text as an image, which makes it much harder for human beings trying to manually copy and paste your text. You can also use CSS sprites to hide the names of images.

7. Don’t Post It!

The real world is your best bet when it comes to encryption. If you have information you absolutely need to be private, don’t put it on the internet. Not putting the information on the internet is truly the only way to keep your content safe. While the methods we mentioned here are all effective ways to prevent content scrapers from stealing your data – there are no guarantees. These methods make it more difficult, but not impossible.

Wrapping Up

Some security measures affect user experience. Keep in mind that you may have to make a compromise between safety and accessibility. It’s best to go after the low hanging fruit first. In many cases, you can find a plugin to help. Security plugins like WordFence, and Sucuri can automate rate limiting and blocking, among other things. The most effective methods I have come across involve:

  • Using honeypots
  • Obfuscating the code
  • Rate limiting and other forms of detection

There are no bulletproof solutions to protect your site from content scrapers. The evolution of more sophisticated content scrapers arose as a response to savvy webmasters. It’s a back and forth battle that has been going on since the early 1990’s. Scrapers can fake nearly every aspect of a human user, which can make it difficult to figure out who the bad guys are. While this is daunting, most of the content scrapers you will deal with will be basic enough to easily stop.

Do you have any experience with malicious content scrapers? What did you do to stop them? Feel free to share in the comments section below.

Article thumbnail image by Lucky clover / shutterstock.com 

The post 7 Foolproof Ways to Protect Your WordPress Site from Content Scrapers appeared first on Elegant Themes Blog.

The Best of WordPress.com in April

You’re off to a strong creative start in 2017! Here are a few recent updates and stories from the WordPress.com community in April that we wanted to share with you.

What’s new

This Year’s WordPress Default Theme, Twenty Seventeen, Is Now Available

wptwentyseventeentheme

“Great looking theme!” – Jason Thornberry

Independent Publisher 2 Is Here

flat-device-mock

The Independent Publisher theme has long been beloved for its simplicity and legibility, and we’re happy to announce that it has been improved, ever so slightly. Read our interview with the designers, Caroline Moore and Kjell Reigstad.

Check Out the New Look, Products, and Features of the WordPress Swag Store

monstro_wordpress_swag-25

For a chance to be featured on the website, post WordPress swag pics to Twitter and Instagram using #WPSWAG. Use code WPSWAG for 20% off all items. (Offer ends May 12.)

Longreads Just Turned 8 Years Old. Here’s What the Next Eight Years Look Like

celebrating-8-years

Longreads is rapidly becoming the best place on the internet for personal essays, and there are ambitious plans to do even more. Read more on our plans, and contribute to the Longreads story fund — WordPress.com will even match your contributions.


Designing for [X]: inclusion

AA Quote 01 alt

Better conceptualizing, designing, building, and improving how to meet the needs of underserved users is a core part of how we work at WordPress.com, and that was the focus of April’s Design and Exclusion (#DesignX) conference (check out the complete video and transcript at x.design.blog). 

hack20detroit20day20220tours-9343-01201

How can we help entrepreneurs working in cities around the world? That’s the challenge Hajj Flemings explored in an April essay for Design.blog. He shares some of the insights which came out of the 100 Project Hackathon — a project tasked to build nine small business sites in a 48-hour period in Detroit. 

Perspectives: ‘But Wait, Is Your Last Name Filipino?’ (Samantha Hankins)


In your toolbox: inspiration + insights

10,000 Kilometers: Quintin Lake on Walking and Photographing Britain’s Coastline

Flock of Sheep, Gammon Head, Devon.

Two Aprils ago, Quintin Lake set off from St. Paul’s Cathedral in London. The journey? To walk 10,000 kilometers around the coast of Britain. We caught Quintin just before he embarked on a 15-day adventure around the edge of Snowdonia, North Wales. Read about Quintin’s epic walk along the sea.

Quotables: “If you really love writing, it’s like eating. You can’t live without doing it.” – The writing life of Harvard historian and New Yorker staff writer Jill Lepore (Harvard Gazette).

Case Study: How one photographer is blogging a 10,000 kilometer journey around the coast of Britain.

Try it out: Importing Google Docs → WordPress.com.


Now following

“WordPress was the best… I’m very happy to be back.” — welcome back, Leo Laporte!

Check out Amazon CTO Werner Vogels’s new site, Werner.blog.

Hang out with us on Instagram and tag your ‘grams with #DiscoverWP.


That’s all for now!

What did you love about your own work in April? Comment with a link to a post you’re proud of, or something new you learned about designing your site. Feeling motivated? Download the WordPress app on iOS and Android