How to Create a Highly Visual Services Section for Your Next Project with Divi

The way you present your services on your website says a ton about your company. Not only do you want the message to be clear, but you also want to share your services in a professional and attractive way. With Divi, you can make endless designs that elevate the message you’re trying to bring. In this post, we’re going to share a stunning services section along with the images and Photoshop files used to create it so you can modify them to your needs. We’ll also show you, step by step, how to achieve the exact same result by using Divi’s built-in options.

Result

As usual, before we dive into the tutorial, let’s take a look at the services section we’ll be recreating on different screen sizes.

On Desktop

services

On Tablet

services

On Phone

services

Download This Tutorial’s Files

To lay your hands on the free images & Photoshop files, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

Download For Free

Download For Free

Join the Divi Newlsetter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

How to Create a Highly Visual Services Section for Your Next Project with Divi

Subscribe To Our Youtube Channel

Recreate Services Section

Section Settings

Gradient Background

Start by adding a standard section and use the following gradient background for it:

  • First Color: #f2f2f2
  • Second Color: #ffffff
  • Gradient Type: Linear
  • Gradient Direction: 180deg
  • Start Position: 50%
  • End Position: 50%

services

Row Settings

Column Structure

Then, add a row with the following column structure to your section:

services

Column 2 Background Image

Continue by adding the ‘gradient-square.png‘ image file as the background image of your second column. You can always change the colors of this square by opening the included Photoshop file within your downloaded folder. Along with the background image, use the following settings:

  • Column 2 Background Image Size: Actual Size
  • Column 2 Background Image Position: Bottom Center
  • Column 2 Background Image Repeat: No Repeat
  • Column 2 Background Image Blend: Normal

services

Sizing

Then, move on to the Sizing subcategory and apply the following settings:

  • Make This Row Fullwidth: Yes
  • Use Custom Gutter Width: Yes
  • Gutter Width: 2

services

Image Module

Use Your Own Images in Photoshop File

After finishing the row settings, you can add an Image Module to the second column. You can use the ‘image-collage.png‘ image file which you can find in the downloaded folder. You’re free to use this image without any restrictions. Or, you can open the ‘image-collage.psd‘ Photoshop file and modify the images that are being used to match with your website.

Alignment

Within the Design tab, use center Image Alignment for your Image Module to center it on your page.

services

Text Module Below Image

Text Settings

Now, add a Text Module right below the image you’ve added (in the same column) and use the following text settings:

  • Text Font: Abril Fatface
  • Text Font Weight: Regular
  • Text Font Style: Strikethrough
  • Text Strikethrough Color: rgba(233,193,165,0.51)
  • Text Strikethrough Style: Solid
  • Text Size: 36px (Desktop), 32px (Tablet), 25px (Phone)
  • Text Color: #4f4634
  • Text Line Height: 1.1em
  • Text Orientation: Center

services

Sizing

Move on to the Design tab of that Text Module and modify the Sizing subcategory:

  • Width: 31%
  • Module Alignment: Center

services

Button Module

Alignment

Right below the Text Module you’ve just created, add a Button Module as well. Move on to the Design tab and select a center Button Alignment.

services

Button Settings

Then, open the Button subcategory and apply the following changes:

  • Use Custom Styles for Button: Yes
  • Button Text Size: 12px
  • Button Text Color: #FFFFFF
  • Button Background Color: #4f4634
  • Button Border Width: 0px
  • Button Border Radius: 3px
  • Button Letter Spacing: 4px
  • Button Font: Alef
  • Font Weight: Regular
  • Font Style: Uppercase

services

services

Spacing

Next, make the following changes to the Spacing subcategory of your Button Module:

  • Bottom Margin: 200px
  • Top Padding: 5px
  • Right Padding: 20px
  • Bottom Padding: 5px
  • Left Padding: 20px

services

Title Text Module

Text Settings

In the next part, we’re going to focus on to the Text Modules that share information about your services. Start off by adding a new Text Module to the first column of your row and apply the following text settings:

  • Text Font: Alef
  • Text Font Weight: Bold
  • Text Font Style: Uppercase
  • Text Size: 50px
  • Text Color: #4f4634
  • Text Letter Spacing: 5px
  • Text Line Height: 1em
  • Text Orientation: Left

services

Spacing

Next, go to the Design tab, open the Spacing subcategory and add ’50px’ to the right padding.

services

Border Settings

Lastly, add the following border to your Text Module:

  • Right Border Width: 5px
  • Right Border Color: #e9c1a5
  • Right Border Style: Double

services

Body Text Module

Text Settings

Add a new Text Module right below the one you’ve just created. Go to the Design tab and apply the following text settings:

  • Text Font: Alef
  • Text Font Weight: Regular
  • Text Size: 15px
  • Text Color: #4f4634
  • Text Letter Spacing: 2px
  • Text Line Height: 1.1em
  • Text Orientation: Left

services

Spacing

Move on to the Design tab and add ’80px’ to the left padding.

services

Border Settings

Lastly, use the following border settings for this Text Module:

  • Left Border Width: 5px
  • Left Border Color: #e9c1a5
  • Left Border Style: Double

services

Clone Text Modules 4x

Go ahead, clone both Text Modules 4 times and place two sets in the third column so your services will be equally divided in your row.

Change Text Modules 2 & 4

services

Spacing Title Text Module

You’ll need to make some small adjustments to the Text Modules marked in the print screen above. First of all, add ’50px’ of left padding to the Title Text Module and remove the right padding.

services

Border Settings Title Text Module

Then, open the Border subcategory and replace the right border style with a border style on the left instead.

services

Spacing Body Text Module

Continue by opening the Body Text Module, add ’80px’ to the right padding and remove the left padding.

services

Border Settings Body Text Module

And, again, change the side of your border into the right side instead of the left in this case.

services

Change Text Modules 3 & 4

services

Top Margin Title Text Modules

The last thing left to do is add ‘350px’ top margin to both of the bottom services on desktop only. Keep ‘0px’ for tablet and phone.

services

Result

We’re done! Let’s take a final look at the result on all screen sizes.

On Desktop

services

On Tablet

services

On Phone

services

Final Thoughts

In this post, we’ve helped you recreate a stunning services section that you can use for your next project or any future project you have. Besides showing you the needed Divi built-in settings, we’ve also shared the images and Photoshop files which will help you modify the services section to your needs with little effort needed. If you have any questions or suggestions, make sure you leave a comment in the comment section below!

The post How to Create a Highly Visual Services Section for Your Next Project with Divi appeared first on Elegant Themes Blog.

Powered by WPeMatico

GIMP: A Free and Open Source Alternative to Photoshop

Photoshop transcended being a piece of software to become a verb indicating any kind of image manipulation. The problem is that it costs you money. The cost isn’t quite as extravagant as it was years ago because of Adobe’s Creative Cloud subscription bundles, but it’s still a decent investment, and many people go out looking for the best Photoshop alternative they can find. Most of the time, that’s the open-source gem GIMP.

So…What Exactly is GIMP?

GIMP photoshop alternative

Before we go any further, understand this: GIMP not as polished as Adobe Photoshop. If you’re used to open-source software, that should come as no surprise. It’s really hard to get UX and UI designers to contribute as much as devs for some reason. If you want the sleek, polished, ultra-professional, modern experience, head to the Creative Cloud page and subscribe. GIMP ain’t gonna work for you. And that’s cool.

But if you’re not scared away by the simple, function UI, there’s a lot of power in this Photoshop alternative.

GIMP, short for GNU Image Manipulation Program, is an open source image editor that you can use on Mac, Windows, or even Linux (which can’t run Photoshop at all). GNU is a type of open-source license, and it just happens to be the same one our dearly beloved WordPress uses.

GIMP was first released all the way back in 1996 (that’s pretty old, but not as old as Photoshop’s 1988 debut). Since that original 1996 release, the community surrounding it has steadily grown, and the functionality has exploded. You can even use Photoshop extensions with it.

Beware of Fake Downloads

Just a quick aside here as a warning. Open-source software comes with its own set of challenges, despite how awesome it is, and GIMP is no different. Years ago someone forked the repo for the editor and made a product called GIMPshop that was meant to be “more accessible to the many Adobe Photoshop users out there,” according to the dev.

But let me urge you not to download GIMPshop under any circumstances. First of all, the original fork hasn’t been updated in years and years, and secondly (and more importantly), some folks with bad intentions released an alternate version of GIMPshop (which was also named GIMPshop) that is chock-full of malware and viruses.

So between an incredibly old build, dated UI, and bunches of baddies in the code, I urge you to stay away and only download the original and official software from their website.

Getting Started with GIMP

GIMP is local software, not cloud-based, so you have to go download the installer, and get it set up on your system. There shouldn’t be any issues with that any more than any other program you download.

Just be aware that GIMP has a pretty long load time. In my experience, it’s about 3x what the most up-to-date Photoshop is. I don’t think that’s a big deal, honestly, but you should know.

Initial UI

The UI may take some getting used to. It’s a multi-window UI initially, and you can see the difference here from opening up the same image in Photoshop and GIMP.

GIMP vs Photoshop UI

Don’t be alarmed if you hate the multi-window view. You can change it by going to Windows -> Single-Window Mode. Suddenly, things begin to look a lot more accessible and familiar to Photoshop users.

GIMP Single Window Mode

What Can You Do With GIMP?

A lot, actually. While you can see the UI doesn’t have the pizzazz of Adobe’s flagship, it has many of the same features. If you’re a Photoshop power user, then it might be missing that must-have element. For casual users, it’s more than powerful enough to get nearly any job done.

The big differences come in the workflow. GIMP doesn’t follow Adobe’s standards for keyboard shortcuts or layout. And many features users find standard are missing from GIMP. That’s not to say you can’t do them. GIMP has an incredibly robust and powerful toolset. But keep in mind that you may be dealing with series of workarounds.

Exposure, For Instance

For instance, one of my most used tools in Photoshop is darkening the background of an image. Like in the image above with the Window -> Single-Window Mode highlighted (thought the arrow was applied after that in Snagit).

To do so, you highlight the area you want highlight, right click and pick Select Inverse (to select everything except your highlight)then you hit Image -> Adjustments -> Exposure and pick how dark you want the background.

In GIMP, you can’t adjust exposure settings at all. This will be coming in version 2.9, which is available as a development version for Windows only (sorry Mac and Linux users).

That said, there’s a kind of workaround for this. You use the Rectangle Select Tool, make your selection, go to the Selection Editor tab and change it to Invert the Selection. Then it’s just Colors -> Desaturate… -> Brightness.

gimp vs photoshop

For my needs, it works well. But I am a casual user who makes tutorials. High-end photo editors and graphic designers know that Exposure and Brightness are two entirely different things.

The Basics are the Same(ish)

That said, most of the basic stuff is the same in both, and GIMP performs admirably and holds its own. Over the past few years, GIMP has really grown and become much more user-friendly than it ever was before. If you’ve been turned off by its learning curve in the past, give GIMP another look.

The learning curve is steep for either program, honestly, and I think it’s about even now in terms of accessibility. Just keep in mind the principles you learn in one will transfer.  The tools and workflow will take some adjustment if you move from one program to the other.

Keep in mind that GIMP uses different names for most of the tools, too — like Rectangular Marquee Tool and Rectangle Select Tool in the example above. Or Text Tool vs the Horizontal Type Tool. There’s also Paintbrush vs Brush, Bucket Fill Tool vs Paint Bucket Tool, and the Color Picker vs Eyedropper in Gimp and Photoshop, respectively.

Plus, all the tools and panes and icons are in different locations and menus.

Plus GIMP has a normal CMD-Z Undo that just keeps going back through your actions. That means you don’t have to use use Photoshop’s awkward CMD-OPTION-Z Step Backward (in PS, CMD-Z only goes one-step back and turns into Redo.)

So…Should You Use GIMP?

Absolutely. If you’ve got an Adobe Photoshop membership already, you don’t have much reason to use GIMP except to play around. But if you’re a casual user who doesn’t need all of the super-advanced features that most of us will never use, GIMP is more than fine for your needs.

GIMP is an amazing tool that eliminates the need to pay for Photoshop. It’s not a full replacement, though it’s finally hit the point in its life where it can be used professionally. Probably not for high-end photographers or graphic design power users, but if you’re a blogger or marketer who’s occasionally tweaks and resizes some images for posts, social media, and email blasts, GIMP may be right up your alley.

How do you feel that GIMP compares to Photoshop?

Article thumbnail image by Sentavio / shutterstock.com

The post GIMP: A Free and Open Source Alternative to Photoshop appeared first on Elegant Themes Blog.

Powered by WPeMatico

Actually MainWP, You Will Miss out on Vulnerabilities if You Rely on the WPScan Vulnerability Database

https://www.pluginvulnerabilities.com/2018/02/13/actually-mainwp-you-will-miss-out-on-vulnerabilities-if-you-rely-on-the-wpscan-vulnerability-database/

The marketing of security products and services often consists of misleading or outright false claims, which isn’t all that surprising considering how awful the security industry is.  One thing we have seen being misleadingly used fairly often is the phrase real-time, which often is used in way that make it sounds like a much higher level of service is being

Powered by WPeMatico

Our Proactive Monitoring Caught an Authenticated Arbitrary File Upload Vulnerability in Church Admin

https://www.pluginvulnerabilities.com/2018/02/13/our-proactive-monitoring-caught-an-authenticated-arbitrary-file-upload-vulnerability-in-church-admin/

One of the ways we help to improve the security of WordPress plugins, not just for our customers, but for everyone using them, is the proactive monitoring of changes made to plugins in the Plugin Directory to try to catch serious vulnerabilities. That sometimes leads to us catching a vulnerability of a more limited version of one of those serious vulnerability

Powered by WPeMatico

This Might Be Why Woocommerce CSV Import Was Removed From the WordPress Plugin Directory

https://www.pluginvulnerabilities.com/2018/02/13/this-might-be-why-woocommerce-csv-import-was-removed-from-the-wordpress-plugin-directory/

When it comes to improving the security of WordPress one the easiest things to do would be to start alerting when websites are using plugins that have been removed from the Plugin Directory for security issues. We have been trying to get that to happen for over five years, but the WordPress team has continued to fail to do that, while

Powered by WPeMatico

Vulnerability Details: Authenticated Arbitrary File Deletion Vulnerability in Woocommerce CSV Import

https://www.pluginvulnerabilities.com/2018/02/13/vulnerability-details-authenticated-arbitrary-file-deletion-vulnerability-in-woocommerce-csv-import/

From time to time a vulnerability is fixed in a plugin without the discoverer putting out a report on the vulnerability and we will put out a post detailing the vulnerability so that we can provide our customers with more complete information on the vulnerability.

One of the areas where we think that the wordpress.org Plugin Directory could probably improve

Powered by WPeMatico