5 Unique Ways to Style Divi’s Contact Form Module

Welcome to Day 62 of our Divi 100 Marathon. Keep tuning in for 100 days in a row of awesome Divi resources as we count down to the amazing release of Divi 3.0 on the final day of the series!

The humble contact form is often a straight-forward even boring section on many websites. My goal with this post was to look for some lively design inspiration on various design showcase websites and Pinterest and see if I could then re-create what I found with Divi–adding some spice to a traditionally bland contact form area. Here are my results!

5 Unique Ways to Style the Divi Contact Form Module

Subscribe To Our Youtube Channel

The Default Contact Form Module

Before we get started, let’s take a look at what the Divi Contact Form Module looks like by default. This is the starting point we’re using in each example below. To get the same results that we’ve achieved simply follow the instructions under each example.


The default Divi contact form module.

1. Music/Fashion Form


The concept for this design is something that would look good on a musician’s website or perhaps a fashion website of some kind. This design requires two sections, one atop the other. Each section has one row and one module. The top section has an image module and the bottom section contains the contact form module.


Section Settings:



In the general settings tab of your top section, add the image you’re using as your background. Then, scroll down and flip the “use parallax effect” switch; I chose to use the “true parallax” option. Below that, set the top padding to 0px.


In the second (bottom) section, set the background color to #000000.

Row Settings:


In the top row’s settings, under the General Settings Tab, flip the switch to “make this row fullwidth”. Then, flip the switch for “use custom gutter width” and set the gutter to 0. Add a top padding of 0px.


In the bottom row’s settings, under the General Settings Tab, flip the switch next to “use custom width” and set it to 850px.

Image Module Settings:


In the General Settings Tab, upload your image. Scroll down and flip the switch next to “remove space below the image”.


In the Advanced Design Settings Tab flip the switches next to “force fullwidth” and “always center image on mobile”. Then add 0px to the top margin and -5px to the bottom margin.

Contact Form Module Settings:


In the Advanced Design Settings Tab, set the form background color to fully transparent. Set the font to Playfair Display, all caps. Set the font size to 80. Then, set the title text color to #f0b43e.


Next, scroll down and set the form field text color to #ffffff. Flip the switch next to “use border” and set the border color to #f0b43e with a width of 1px and a solid style. Then, flip the switch next to “use custom styles for button”.


Set the button text size to 16, the button text color to #f0b43e, the button border width to 1, and the button border color to #f0b43e–with a radius of 1.

In the custom css tab, scroll down to the text box titled Main Element and place this css inside:

margin-top: -250px;
padding-bottom: 150px;

Then scroll down the box titled contact title and place this css inside:

text-align: center;
padding-bottom: 50px;

When you’re done, click “save and exit”, update the page, and enjoy your new contact form!

2. Color Bars Form


My goal with this design was to create something fun and bright that could fit nicely on a personal authority website for a marketer. This design requires one section, one row, and one contact form module.


Section Settings:


In the General Settings Tab upload your section background image. I chose to use an image where I’d removed the background so I could experiment with various background colors. In the end I chose white (#ffffff).

Row Settings:


The General Settings Tab flip the switch next to “use custom width”. Set the custom width to 750px. Then, add 450px of padding the top and 200px of padding to the bottom.

Contact Form Module Settings:


In the General Settings Tab for the Name Field flip the switch next to “make fullwidth”. Then, in the Advanced Design Settings Tab set the background color to rgba(255,58,111,0.64).


Repeat the same steps in each of the field settings using different colors. I used this yellow rgba(234,204,32,0.71) and this green rgba(20,173,97,0.7).


In the Advanced Design Settings Tab for the whole contact form module, set the form field font to bold and call caps. Set its size to 15 and it’s color to #000000. Then, flip the switch next to “use custom styles for button”.


Set the button text size to 16 and it’s color to #ffffff. Set the button background color to #000000. Set the button font to bold and all caps.

In the custom css tab, scroll down to the box titled Main Element and enter this css:

margin-top: 75px;

In the box titled Contact Button, enter this css:

margin-top: 10px;

When you’re done click “save and exit”, update the page, and view your new contact form!

3. Envelope Form


The idea behind this design was an RSVP form that someone might create for an event website. This design consists of one section, with one row, and one contact form module.


Section Settings:


In the General Settings Tab set the background color to #98dbe2.

Row Settings:


In the Advanced Design Settings Tab, upload your envelope image and add however much padding to the top as you need for the whole image to show. In my case that was 200px.

Contact Form Module Settings:


In the Advanced Design Settings Tab, set the form background color to #ffffff. Set the title font to Permanent Marker and increase its size to 60. Set the title text color to #ffffff.


Scroll down and flip the switch next to “use border”. Set the border color to #cccccc, set the width to 3px, and the style to solid. Then, flip the switch next to “use custom styles for button”.


Set the button text color to #ffffff. Set the button background color to #a0a0a0. Make the button font bold and all caps.

In the custom css tab, scroll down to the text box titled Main Element and enter this css:

margin-top: 180px;
padding: 25px;

Then, scroll down to the box titled Contact Title and enter:

text-align: center;
margin-bottom: 200px;

When you’re done click the “save and exit button”, update the page, and view your new contact form!

4. Postcard Form


As a big fan of old sci-fi art I really like the idea of mixing new technology with vintage style. So for this example I wanted to create a vintage sci-fi post card contact form. This design consists of one section, one row with two columns, and one contact form module.


Section Settings:


In the General Settings Tab, upload your background image.

Row Settings:


In the General Settings Tab, add 250px of padding to the top and bottom.

Contact Form Module Settings:


In the Advanced Design Settings Tab, set the form background color to #fdf2d7. Set the title font to Roboto Condensed; bold, all caps. Set the title font size to 35. Set the title text color to #344044.


Then, scroll down a bit and flip the switch next to “use custom styles for button”. Set the button text color to #344044 and the button background color to #e7c24a. Scroll down a bit further and change the button font to Roboto Condensed; bold, all caps.

In the custom css tab, in the text box titled Main Element, enter this css:

margin-right: -200px;
margin-left: 200px;
margin-top: -25px;

When you’re done click “save and exit”, update the page, and enjoy your new contact form!

5. Material Form


This design is based on a concept I saw mocked-up on Pinterest. I was curious to see if I could re-create it with Divi and it turned out pretty neat! This design consists of two sections, each with one row. The top row has two columns and four modules. Three text modules on the left and one contact form module on the right. The section below is populated with four text modules and a few divider modules for spacing.


In the instructions below I’m going to focus on showing you how to achieve the overlap effect and the contact form styles since the rest are simple text modules.

Section Settings:


In the General Settings Tab of the bottom section, set the color to #ff3b49. Then, it that section’s custom css tab, enter this css into the text box titled Main Element:

position: relative;
z-index: 0;

Contact Form Module Settings:


In the Advanced Design Settings Tab set the form background color to #ffffff. Set the title font to size 16; bold, all caps. Then, scroll down and flip the switch next to “use border”.


Set the border color to #ff3b49, its width to 1px, and style to solid. The, flip the switch next to “use custom styles for button”.


Set the button text size to 16. Set the button text color to #ffffff. Set the button background color to #ff3b49. Set the button font to bold and all caps.

In the custom css tab enter the following css into the text box titled Main Element:

padding: 40px;
box-shadow: 0 0 20px rgba(0,0,0,.1);
margin-bottom: -200px;
background: #ffffff !important;
position: relative !important;
z-index: 1;

When done click “save and exit”, update the page, and enjoy your new overlapping, material style contact form!

Tomorrow: Download the Free Resume Pages Layout Pack

Divi 100 is rolling right through the 60’s with another week of awesome Divi tutorials and freebies. Tomorrow we’ve got a new layout pack featuring cv/resume style pages. Don’t miss it!

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

Article thumbnail image by Dmitry Lemon5ky / shutterstock.com


Divi 100 Day 62

The Countdown To Divi 3.0

This post is part of our Divi 100 marathon. Follow along as we post free Divi resources for 100 days in a row! This 100-day countdown will end with the game-changing release of Divi 3.0, including our brand new visual editor built from the ground up using React. Divi 3.0 will change the way you build websites with the Divi Builder forever!
Let the countdown begin.

Learn More About Divi 3.0

The post 5 Unique Ways to Style Divi’s Contact Form Module appeared first on Elegant Themes Blog.

Sliders Don’t Suck and Here’s Why Your WordPress Site Needs One

Sliders and carousels were a really hot design trend a few years ago. You would’ve been hard-pressed to find a website that didn’t have some sort of rotating element on the homepage – especially above the fold.

But then something changed. Designers and developers started to abandon sliders for static imagery. As the interest in minimalistic designs and longer scrolling websites grew, sliding banners became a perceived distraction and threat to the rest of super simple designing. And if designers had chosen to apply any sense of movement to a website, it was contained in a parallax scroll, animated icons, or a video player.

Still, there are some designers who will argue that sliders and carousels are effective design elements that help improve user engagement, when used correctly. We’re going to explore the validity of this argument today and give you pro-sliders some helpful tips and tools to use in order to ensure user engagement within your website’s sliding elements.

To Slide or Not to Slide, That is the Question

Most design trends will face doubt or criticism at some point as newer, cooler ways of web design take over. So for many designers who are focused on simplicity right now, it may be difficult for them to understand how rotating content can fit into that ideal.

To carousel or not to carousel?
To carousel or not to carousel?

Not to Slide?

Here are some of the most common arguments we hear from the naysayer camp:

  • Slow to Load: The addition of sliders and carousels slows down a website’s load time, which will not only drive visitors away but will also negatively affect SEO.
  • Bad for SEO: Since so much content is jam-packed into a single slider, it’s difficult to optimize the page and SEO for all of that content.
  • Unnecessary Distraction: The rotation of sliders keeps visitors distracted from the content around it.
  • Difficult to Use: Multiple slides give visitors too many options to keep track of and it’ll require too much effort to dig back through the slides to find the one they want.
  • Interrupts UX: For visitors who prefer a quick vertical scroll for their content, sliders can wear on their patience as they have to sit and wait for each one to rotate through.
  • Poor Click-Through Rate: According to some studies, sliders are ineffective at getting visitors to click. While visitors may be interested in reading one or maybe even a few slides, most don’t take any action.
  • Unattractive: Many designers believe that sliders and carousels look tacky, especially when used to promote advertisement-looking images and messages.

Many times, the slider and carousel opponents will cite the 2013 study conducted by Erik Runyon on the Notre Dame University website. In his study, he tracked information on the number of clicks for each slide, the manual rotation of slides, as well as the performance of auto-forwarding slides. These are the numbers most anti-sliders will bring up:

  • Of the total site visitors, only 1% clicked on a call-to-action (CTA) in the slider.
  • When someone did click on a slide, 84% of the clicks were on the first one. All subsequent slides received 4% each of the total amount of clicks.

If you read the one-page study closely though, you’ll see that Runyon isn’t making the argument that carousels are a weak or even obsolete design trend. In fact, the other stats included in his study (which most people leave out of their argument) showed that visitors were more receptive to carousels when used on different types of websites or when used in other ways (auto-forwarding vs. manual rotation).

Like with anything in design, there’s a proper time and place for everything. You just have to know when it’s right for you.

To Slide?

Now, let’s take a look at the argument for the supporters of sliders and carousels:

  • Space Saver: Carousels allow for a large amount of images or content to exist within a single space instead of forcing visitors to scroll down a too-long page.
  • Reduce Clutter: For some websites, it’s important to showcase different products, work samples, team members, and more. Sliders can reduce the clutter which may inevitably come with all those moving, yet related pieces.
  • Attention Grabber: Adding the right type of movement to a website’s design can help draw visitors in to high quality and relevant content.
  • Provide Perspective: Some websites have a product or service that needs to be highlighted from different angles. A great example of this is a phone retailer who wants to display a number of images of their mobile devices from different viewpoints.
  • Multi-Purpose: While the University of Notre Dame’s website didn’t work well with the carousel, there are other business types that will. Retails, freelancers, and others looking to highlight their products and services (rather than random promotions) can benefit from a sliding design element.
  • Video Replacement: Video is “in” right now… but it’s not that affordable of a marketing investment for smaller businesses or those with a tight budget. Slideshows are a great alternative that still allow for creativity in design and movement.

For those that support the slider and carousel movement, you should check out this study conducted by Mobify. While the results cannot be placed side-by-side with the Notre Dame study since the variables don’t align, the end results do show that, when used in the right setting, carousels work very well with an online audience. Here are some of the results that came out of this experiment:

  • The very nature of e-commerce websites makes them a better breeding ground for carousels than education websites.
  • Mobile users may be more receptive to a carousel because it’s easier to swipe on a device than to click or wait for auto-forwarding on a desktop.
  • Visitors find carousels showcasing a variety of marketing messages as irrelevant and too salesy in the wrong setting.
  • The definition of “success” (number of clicks on a CTA vs. number of clicks to the next slide) is relative. You just need to have a solid understanding of what they really aim to achieve.

While the results from the Mobify and Notre Dame tests are not definitive proof regarding the performance of carousels and sliders on a website, they do demonstrate one very important fact: Designers and developers need to know their audience fairly well before applying any design principle to a website. It’s ultimately the pains and goals of your customers and prospects that drive them to visit the website in the first place. If a carousel can be effectively used to deliver content around those ideas, then there’s a good chance they’ll be well-received.


Manage multiple WordPress websites with The Hub

The Hub is your mission control for monitoring the vital stats of all your sites, including uptime, performance and security. Add as many sites as you want – including Multisite networks – and receive instant security alerts, run performance scans, and get notifications when any of your plugins or themes need to be updated.


15 Ways to Add Value to a Website with a Slider or Carousel

Your website is expected to function properly. That’s why many of the concerns of anti-sliders are valid. If you’re using a slider for the sake of appeasing a client just because they really want one or you just haven’t taken the time to research the tips and tools you need to properly pull it off, you could end up putting your website’s performance and reception in danger.

If user engagement is what you’re looking for, then the user experience always needs to be top-of-mind in web development. So when adding a slider to your website, keep the following tips in mind:

#1: Optimize Placement

When sliders came into prominence, they would’ve sat right at the top of the home page where most designers currently place hero images. As a WordPress developer though, you know there are other areas of the website that have the potential to make good use of denser sliding content.

The Zappos websites features a centrally placed slider.
The Zappos websites features a centrally placed slider.

#2: Consider the Size

Do you need to include a full-width slider or is it taking up unnecessary space? Consider the purpose of the slider, the size of the images within it, and the balance it can create with the rest of the elements on a page to determine what will be the best size for it.

#3: Use High-Value Content

If the studies above proved anything, it was that your visitors want to view content that provides some sort of value to them. Make sure the images and copy used in your slider reinforce your website’s mission and messaging and give visitors the motivation to look through it in its entirety.

The Visit Philadelphia website features professionally shot photographs of the city.
The Visit Philadelphia website features professionally shot photographs of the city.

#4: Select High-Res Images

In general, it’s a bad practice to use images of low resolution or poor quality on your website. The same should apply to a slider or carousel—especially since the big draw for this type of design element is usually the photos included within.

#5: Keep Text to a Minimum

Sliders and carousels are fantastic at showing off imagery, but text can detract from that experience. Busy images can often make text placed on top of them hard to read. Also, if a slider rotates too quickly, visitors may not have enough time to read. And then you also need to consider that text embedded in an image probably won’t display properly on mobile devices. If possible, avoid using text as it will only complicate matters. If it can’t be avoided, try to keep it to a minimum.

#6: Pay Attention to the Scroll

There are a number of ways you can approach scrolling controls. The decision to choose one over the other usually depends on the content contained within the slider. Auto-scrolls work fine for image-only sliders, so long as the scroll doesn’t happen too quickly. Your best bet may be to force-stop the slide as soon as someone clicks or views the slider. It will then be up to them to click or swipe when they’re ready for the next slide.

We use a slider on our homepage (when you're logged out) to display testimonials.
We use a slider on our homepage (when you’re logged out) to display testimonials.

#7: Give Visitors Control

Whether your slider is an auto-scroll or manual scroll, make sure slider controls exist for when your visitors are ready to take over the scrolling experience. Keep in mind that arrows, buttons, and dots can distract from the content in the slide, so see if you can find a way to display them only once a visitor hovers or clicks on a slide.

#8: Create a Subtle Slide

Sliders don’t need to be jarring in their motions in order to gain attention. There are a variety of transition movements that are much subtler—like a fade—that will still grab attention enough to get your content viewed.

#9: Emphasize the Important Stuff

In the contrasting studies mentioned above, they both noted that the first slide is always the most looked at and clicked. That’s why it’s important to sort your slides strategically. If there is a product or service element that is most important for your audience to see, put it in the first position.

#10: Limit the Slides

On a related note, there will be some visitors who want to view more than just the first slide or image. However, that doesn’t mean their patience won’t wear thin after a while. Use your slides to share your message, but be brief. Cap it at four slides where appropriate.

#11: Focus on Speed

It’s always difficult to get excited about adding more images to your website when you already know how much the current ones bog down your site’s speed. So if you’re going to use a slider, make sure you have a good image optimization tool to keep them from slowing things down.

#12: Customize Each Slide

If you’re going to include a CTA on your slides, try to keep the design and placement consistent for each of the CTAs. However, if each slide links to a different service or product, you might want to apply a unique color to each. If someone wants to scroll back through the slides and find the one they were interested in, the colors will more easily set them apart from one another.

#13: Consider Accessibility Obstacles

There are a number of accessibility considerations you’ll need to take into consideration before adding a carousel to your website. W3C has done a great job in detailing what you’ll need to do in order to make your carousels keyboard- and screen reader-friendly.

#14: Make It Responsive

Carousels and sliders can be tricky to pull off on mobile devices if you’re planning to include text, oversized images, or scrolling buttons/arrows. There are ways to make this work though, so be sure that you start by using a slider plugin that advertises itself as “responsive.”

#15: Use Plugins

Last, but definitely not least, you’ll need plugins to help you create your website’s slider, capture the desired effects you want it to have, and optimize the content for high performance. Here are some of our top picks:

  • WP Smush

    WP Smush plugin image

    If you don’t already have a way to compress your website’s images, this is a great place to start. This plugin will automatically downsize and optimize the images you use inside and outside your slider, and ensure they never get in the way of your website’s load time or performance.

    Interested in WP Smush?

  • Carousel Horiztonal Posts Content Slider

    Carousel plugin image

    Typical website designs call for no more than 3 or 4 columns of horizontal widgets or blocks of content. With a carousel though, you can now showcase multiple batches of content within a single space. In addition, this plugin offers various transition effects, pagination options, and is fully responsive.

    Interested in Carousel Horiztonal Posts Content Slider?

  • Kiwi Logo Carousel

    Kiwi logo plugin

    If you’re planning to use your carousel to show off logos—be they of your partners, clients, sponsors, or something else altogether—this plugin will do the trick. You can also play around with greyscale coloring if you want to give all your logos a muted, but consistent look (which is great if you want to keep the focus on your own website’s logo and brand). With a drag-and-drop interface, this plugin is an easy one to use if all you want to do is showcase logos.

    Interested in Kiwi Logo Carousel?

  • Huge-IT Slider

    Huge IT Slider plugin

    This is by far the most popular slider plugin available on WordPress at the moment. If you’re looking for a responsive slider for your website’s videos and images as well as one that’s chock-full of customizations, go with this.

    Interested in Huge-IT Slider?

  • A/B Theme Testing

    A:B Testing

    So let’s say you do end up adding a slider or carousel to your WordPress site, but you’re worried it’s just clogging up space or driving people to click away. It might just be that you haven’t used the right transition effects, colors, images, size, or placement, right? With A/B testing you can test out different versions of your slider before completely dumping it and jumping on the anti-slider bandwagon.

    Interested in A/B Theme Testing?

Wrapping Up

The most important thing to remember in all this is that if you choose to use a slider or carousel on your website, that it needs to serve your audience’s needs. It can’t just be to stuff a bunch of product images or testimonials into a small space on your sidebar. Everything about your slider element should be strategically designed, from the placement of it to the transition styling. If you have content worthy of displaying in rotation on your site, then make sure you’re using the right design element to let it shine.

Related posts:

  1. 10 Most Popular Free WordPress Slider Plugins – Reviewed and Ranked Finding the perfect slider for your site is by no…
  2. 11 Excellent Free Responsive WordPress Slider Plugins Love ‘em or hate ‘em, sliders are popular and people…
  3. Is Smart Slider 3 the Best WordPress Slider Plugin on the Market? I rarely write plugin reviews, and I never write about…
  4. So Your Client Wants a WordPress Slider? Before You Cringe, Here’s What You Need to Know Whether you love them or hate them, sliders are still…

5 Email Opt-in Designs You Can Create with Divi’s Email Opt-in Module

Welcome to Day 61 of our Divi 100 Marathon. Keep tuning in for 100 days in a row of awesome Divi resources as we count down to the amazing release of Divi 3.0 on the final day of the series!

There are a wide range of email opt-in form designs floating around the web. What you may not realize is that with a bit of creativity you can achieve most of them with Divi’s built-in email opt-in form module. That’s why in today’s post I’m going to show you how to achieve five different design variations with Divi’s email opt-in module to help spark your imagination as to what is possible with this powerful and flexible module.

The Default Email Opt-in Module

Before we get started, let’s take a look at what the Divi Email Opt-in Module looks like by default. This is the starting point we’re using in each example below. To get the same results that we’ve achieved simply follow the instructions under each example.


The default Divi email opt-in form.

1. Overlapping Section


Divi email opt-in module overlapping a section.

The concept in this example was to show how you can overlap a section with your contact form, achieving attractive designs like the one above. To begin to duplicate this, you’ll need to set up your backend builder as we have set up ours in the image below.


Section Settings:

As you can see we are working with two sections. The top section housing the image of the family and the bottom section housing the email opt-in form.



In the top section’s General Settings Tab, do the following: set your background color to match the background color of our image, #d3d47f. Then, scroll down and enter in 0px for all of your custom padding fields.


In the bottom section’s General Settings Tab, do this: set your background color to #8d716d. Another color we pulled from the image we’re using.

Row Settings:


In the General Settings Tab for the top row (containing the image module) set all of your custom padding fields to 0px.


In the General Settings Tab for the bottom row (containing the email opt-in form module) flip the switch that says “make this row fullwidth”.

Image Module Settings:


Under the General Settings Tab, add your desired image. Then, in the Advanced Design Settings tab for the image module, set your bottom custom margin value to 0px.

Email Opt-in Module Settings:


First, under the General Settings Tab, set your background color to #ffffff. Then, switch over the the Advanced Design Settings Tab and do the following: set your header font to bold; move the header font size up to 26; set the header text color to ##8d716d. Moving on down the options set your body font to bold and the body text color to #bcbd53.


When you get to the custom margin and padding controls, this is where we are going to achieve our overlapping effect. Set your top custom margin to -300px and add a 10% custom padding value to all padding input fields.


Next, flip the switch next to “use custom styles for button”. Adjust your button text size to 16. Set your button text color to #ffffff. Set your button background color to #68d6e2.


Set your button border width to 0. Set your button border radius to 3. Select the bold option on your button font. Select “no” for the button icon. And finally set your button hover border radius value to 3.


Now it’s time to move into the Custom CSS Tab. Under Main Element place the following bit of css:

box-shadow: 0 0 50px rgba(0,0,0,.2);
border: 5px solid #68d6e2;

Then move down to the box labeled Newsletter Fields and copy in this bit of css:

background-color: rgba(141, 113, 109, 0.05);
color: #6f5551;

2. Profile Image


Divi email opt-in form with a profile image integrated into it.

The concept here was to simply add a profile style image to the top of the contact form for a personal touch–something great for “authority” bloggers. This email opt-in form requires one section, one row with three columns, and two modules–an image module and of course the email opt-in module.


Email Opt-in Module Settings:

First things first, let’s create our opt-in form. In the General Settings Tab we’ve set the background color to #135da4, chosen light text color, and set the text orientation to center. Then we hop over into the Advanced Design Settings.


Set the header font to bold and all caps. Change the header font size to 18. Set the body font to bold and adjust the body font size down to 14. Then, set the body text color to #68d6e2.


Next, we adjust the margin and padding. Set the top margin to 0px and the top padding to 69px. We can leave the rest alone.


Finally, we add some custom styles to the button by flipping the switch next to “use custom styles for button”. The button text size is set to 16. Button text color is #ffffff. Button background color is #68d6e2.


Last but not least we also want to set the button font to bold and to select “no” in the add button icon dropdown menu. Now we have our blue form.


Image Preparation:


Now we need to prepare the profile image via photoshop or some other image editing software by removing the background and adding a blue strip to the bottom that matches the blue of our email opt-in background. As you can probably tell from the image above, there’s a bit of visual trickery we plan to put into play. We’re going to take this image and remove all the space between the bottom of it and the top of the form to achieve the appearance of them being one and the same.

Image Module Settings:


There are just two things we need to do with the image module. First, upload the image. Then, in the Advanced Design Settings Tab, set the bottom margin to -69px. This is what will bring bottom of our image’s blue box to meet the top of our blue form.


3. Skinny Opt-in Form


Divi email opt-in form slimmed down to a single strip.

A skinny opt-in form design is very popular because it’s easy to stick between two sections on a page, many times right above the fold. With a few modifications we can turn the Divi email opt-in module into just such a skinny strip. Here’s how:


As you can see above, you’ll need one section, with one row, one column, and an email opt-in form module.

Section Settings:


There are two things you need to do in the section settings. The first thing, under the general settings tab, is to set the background color. We chose to set ours to #135da4.


Then we want to go down to the custom padding options and set top padding to 40px and bottom padding to 20px.

Row Settings:


Likewise, there are two things that need to be configured in the row settings. Under the general settings tab, set the custom padding for all input fields to 0px. Then we want to hop all the way over to the custom css tab, scroll down to the input box called Column Main Element, and enter the following css:

text-align: center;

Email Opt-in Module Settings:


In the advanced design settings tab set the header font to bold and all caps. Set the header font size to 26. Then, go down to the custom margin and padding controls. Set them all to 0px.


Then flip the switch next to “use custom styles for button”. Set the button text size to 16, the button test color to #ffffff, the button background color to #68d6e2, and the button font to bold. Finally, select “no” on the “add button icon” dropdown menu.

Now for the interesting stuff. In the Custom CSS Tab add this to the text field “css class”: horizontal-optin. We’ll come back to that. Now, scroll down to the following text boxes and paste in the corresponding code.

Main Element:

display: inline-block;

Newsletter Description:

display: inline-block;
width: auto;
margin-top: -20px;

Newsletter Form:

width: auto;
display: inline-block;

Newsletter Fields:

display: inline-block;
width: auto;
margin-left: 30px;

Newsletter Button:

display: inline-block;
width: auto;
margin-left: 30px;

When all of those snippets have been added, click the “Save & Exit” button. We now need to add some css to the page that will act on the css class we added to the module earlier.


In the page settings custom css box, place the following code snippet:

.horizontal-optin p{
display: inline-block;

When that is done click save, update your page, and view your new skinny opt-in form!

4. Big Bold Opt-in Form


Here we get some more modules involved to create a form that takes up an entire section.

The idea here was to create a big bold opt-in form that took advantage of an entire row or section (depending on where you place the background image) and which works together with other modules to achieve a whole. Here is what this looks like on the backend; one section, one row, two columns, two modules.


Row Settings:


The row settings we have one configuration to make per settings tab. Under General settings adjust all of the custom padding fields to 60px.


Under advanced design settings, upload your desired background image. We chose to use something that would provide some texture but not be otherwise distracting.

Finally, under the custom css tab scroll down to the Main Element and enter:

border-radius: 5px;

Email Opt-in Module Settings:

The email opt-in module here is pretty straight-forward with the only modifications being made to the text and button styles. Here’s a quick run-through:


Under the advanced design settings tab set the header font to Kreon and then set that to bold and a size of 32. The body font should also be set to bold and a size of 14.


Next, flip the switch next to “use custom button styles”. Set the button text size to 16, the button text color to #ffffff, and the button background color to #68d6e2.


Then, a little further down, set the button font to bold and all caps. Select “no” in the “add button icon” drop-down. Then we hop over the custom css tab.

Under the Newsletter Fields text box place the following bit of css:

font-size: 12px;
font-weight: bold;
text-transform: uppercase;
color: black;

Image Module:


In the general settings for the image module, upload your image. Then, in the advanced design settings tab, set the image max width to a value that looks good. In our case that was 300px. We also chose to always center the image on mobile.


When finished, save your settings, update the page, and view your new email opt-in form.

5. Irregular Form Shape


This Divi email opt-in form has an irregular shape.

As is probably obvious, this concept was simply to create an irregular form shape. To show that it’s possible to, quite literally, think outside the box. Here is what that looks like on the backend; one section, one row, three columns, one email opt-in module.


Email Opt-in Module Settings:


In the advanced design settings tab the first thing we need to do is chance the form field background color to rgba(25,25,25,0.1) and the form field text color to #3d3d3d.


Moving down, set the header font to bold and size 26. Set the body font size to bold as well, and its size to 14. Then change the body text color to #939393.


And then here is where things get interesting. In the custom padding controls we’re going to combine percentages with pixels. Set the top, right, and left padding fields to 20%. Set the bottom field to 100px.


Then, flip the switch next to “use custom styles for button” and adjust the button text size to 16. Set the button text color to #ffffff. Set the button background color to #c42c1b. Set the button font to bold and select “no” from the “add button icon” dropdown menu.

Finally, hop over to the custom css tab and scroll down to the text box titled Main Element. Enter this css there:

border-radius: 20px 20px 100% 100%;
border-top: 5px solid #c42c1b;

When you’re finished, save your settings, update the page, and view your new irregularly shaped form.

Tomorrow: Learn 5 Unique Ways You Can Style Divi’s Contact Form Module

Tomorrow we’ve got another Divi tutorial planned. Just like this post, we’ll be taking you step-by-step through five unique ways that you can style Divi’s contact form module. See you then!

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

Article thumbnail image by BarsRsind / shutterstock.com.


Divi 100 Day 61

The Countdown To Divi 3.0

This post is part of our Divi 100 marathon. Follow along as we post free Divi resources for 100 days in a row! This 100-day countdown will end with the game-changing release of Divi 3.0, including our brand new visual editor built from the ground up using React. Divi 3.0 will change the way you build websites with the Divi Builder forever!
Let the countdown begin.

Learn More About Divi 3.0

The post 5 Email Opt-in Designs You Can Create with Divi’s Email Opt-in Module appeared first on Elegant Themes Blog.

Fake FreeDNS Used to Redirect Traffic to Malicious Sites

During the last couple of days we performed a few similar cleanup requests where sites occasionally redirected visitors to malicious sites that displayed ads, spam and malicious downloads. One of our security analysts, Andrey Kucherov, did some research in conjunction with our research team to find what was going on. In all cases the redirect…

The post Fake FreeDNS Used to Redirect Traffic to Malicious Sites appeared first on Sucuri Blog.

The Freedom Of WordPress

Last week, Torque asked community members to share their WordPress story for the chance to win a trip to WordCamp US 2016.

We were pleasantly overwhelmed by the number of submissions. It was inspiring to read about how WordPress has touched the lives of some many people — from leading them to financial freedom and enabling them to spend more time with their families to empowering users to travel the world. A big theme throughout was accessibility and how people with disabilities found their home in WordPress and the community.

A big theme throughout was accessibility and how people with disabilities found their home in WordPress and the community.

We set out to help someone get to WordCamp US and were completely awed and inspired. A huge thank you goes out to everyone who took the time to share their story. It certainly wasn’t easy choosing a winner, but we could only pick one. So, without further ado, the winner is Lindsay Liedke. Lideke shared an empowering story about how WordPress allowed her to be closer to her child.

Read The Submission In Full Below:

The submission has been edited for grammar.

When I got divorced and was forced to go back into the workforce, I was devastated, to say the least. My son was a mere two years old and all I could think about was all the lost minutes I would rack up. His milestones, his eventual school activities, and the all-around chances to just enjoy what I love most — being a mom. Yet, a mom must do what a mom must do. So I went back to school, became a certified paralegal, and left for the corporate world every day to make ends meet.

However, as the years began to fly by, I became determined to find a way to change my life to be what I wanted. I knew I still needed to support myself and my son (we all have bills to pay, right?). But I also knew there had to be a way I could work from home AND spend time with my growing boy. Then I discovered WordPress. I cannot even remember exactly how this happened. It was random and I guess just meant to be. I happened across Tom Ewer’s wonderful blog Leaving Work Behind and I set the gears in motion. I knew I wanted to do exactly what he was doing. And he was using WordPress so I figured I would give it a shot. I was educated, I loved to write, what could go wrong?

So, every day from 7 a.m. to 4 p.m. I worked tirelessly at my law firm to make a steady paycheck. I would then come home, play with my son, feed him, bathe him, and tuck him into bed. Then, I would get to work on my second (full-time time job). I created my own WordPress website, began pitching clients, and started freelance writing for other WordPress website owners for whatever pay I could get. I didn’t make that much at first (and who needs sleep, right?) but I was able to climb out of the debt my divorce left me in month by month which was exhilarating. My client list began to grow and the work kept pouring in. Before I knew it, I had a handful of WordPress websites I was regularly crafting articles for and I was on track to make more money than I was at my corporate job.

Fast forward almost exactly one year and I am now officially a “work at home mom.” I quit my corporate job to write from home and will never look back. I never miss any school activity my son has. I can volunteer in his class, take him to and from school, and play with him well into the evening when he comes home. This summer I have yet to pay a babysitter to watch him while I work and he is so happy that mommy is home all the time.

The opportunities that WordPress has provided me are better than a few paragraphs could ever explain. Life is full of twists and turns but I just wouldn’t have it. I love my child more than anything in the world (as most parents do of course!). And I was determined to make the most out of what I could and achieve what I really wanted. Thankfully WordPress was presented to me in the oddest of ways, one random day while I was surfing the Internet. I will forever be thankful that WordPress and the WordPress community of amazing people that have helped me along the way came into my life when they did. And that is how WordPress has changed my life.

Come back next week for excerpts from other submissions. Thanks to everyone that wrote in.

Emily Schiola

Emily Schiola is a Staff Writer at Torque. She loves good beer, bad movies, and cats.

The post The Freedom Of WordPress appeared first on Torque.

Scaling WordPress — Draft Podcast

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

In this episode, Joe and Brian talk scaling WordPress, and what to do when you think you might’ve reached WordPress’s limits. From meta data, to users, to traffic management, they break down some of the most common scaling issues.

Direct Download


  • Posts
  • Meta
  • Search
  • Database
  • Users
  • Traffic (types of caching)


Sponsor: iThemes

iThemes has a full suite of excellent products to help you level up your WordPress website. From iThemes Security, to BackupBuddy’s new live backups, to Exchange for your next membership site, iThemes has you covered. Thanks to the team at iThemes being a Post Status partner!

Managing Clients Just Got Easier With ManageWP Orion

One of our main aims is to improve your workflow, making sure that daily you don’t waste time on unnecessary clicks. You can focus on what really matters. Managing clients is a big part of any WordPress maintenance business, and often the logistics behind the management take more time than the actual making/maintaining of websites.

We have already introduced little ways to help you manage clients, let client tags and client reports do the heavy lifting, while you can quickly and efficiently maneuver your clients. However, we haven’t stopped there, now you have a whole screen dedicated just to your clients.

feature-image-2 copy


What is the Client Screen?

Think of your client screen as you client notebook, that’s where you go to be able to have a clear overview of all of your clients. We noticed how much you like having a websites overview screen, a place where you can search all of your websites, so we made the same for your clients.

Client Photo and Notes

Now you can see all of them in one place. Each client will have a photo – Orion will automatically search their gravatar if there isn’t one you can manually add a photo of your client. You can also add a client photo by copying the photo URL. At a glance you can recognize your clients and access their websites.

Alongside the photo, each client will have their contact details, and a notes sections. In this section you can write notes about the actions you need to perform for your clients. It’s easy to loose track of what needs doing when, this way you can write yourself little reminders. This can be anything from “send client report” to “new client, send contract”, it’s up to you entirely. You can be creative here.

clients screen

View Client Websites

Each client will have two buttons by their client box, one is for websites. Here you will be able to see how many websites that client has, and by clicking on the view websites button it will take you to that client’s websites. This makes it now even easier to access all of your client’s websites.

clients screen

Create Client Reports

Next to the “View websites” button, we thought it logical that with one click you can create a client report. All of the client’s websites are automatically grouped and incorporated into one client report. By clicking the button you will be taken to the client report page where like normal you can continue to pick and choose what you want to include in your client report.

clients screen

My Watch Says It’s Break Time …

With the new additions break time should come quicker than before, saving you hours of tedious client management a year. Now you can spend that time doing something you enjoy or perhaps landing yourself some more clients!

The post Managing Clients Just Got Easier With ManageWP Orion appeared first on ManageWP.

What to consider when taking an online store offline

If you’ve found success selling your products or services online, you’ve probably given some thought to expanding offline — that is, opening a brick and mortar store. Switching from a solely online business to a multi-channel merchant is difficult, though. And the harsh reality is that not everyone has the time or resources necessary to do it well… […]

The post What to consider when taking an online store offline appeared first on WooCommerce.

11 Of The Best Premium WordPress Plugins Worth Their Money

There is no denying that WordPress and the WordPress sphere are thriving.

The platform has been the fastest growing CMS for several years straight and in June this year more than 2,000 people gathered for WordCamp Europe 2016 — the largest WordPress convention in history.

Another sign pointing to the continuing success of WordPress is the growing number of premium plugins. Although there are more than 40,000 free WordPress plugins in the directory, a lot of people these days opt to pay for their plugin needs. So much so that the number of successful WordPress companies with six-figure revenues and beyond is steadily rising.

However, while there are undeniable advantages of going premium (additional features, better code quality, premium support, regular updates) are paid plugins really worth their price?

The answer depends. Not everything that has the word “premium” attached to it is a necessary investment. Often, there are free alternatives that can do as good a job.

To help you distinguish which is which, we have compiled a number of the best premium WordPress plugins that definitely are worth their price tag. So, if you are in doubt, this article will help you decide what is worth putting your money towards.

11 Of The Best Premium WordPress Plugins on The Market

For each premium plugin on this list, we will try to also offer a good free alternative. That way, if you are strapped for cash, you can still get similar functionality without having to invest into every single entry on this list.



Category: Spam filter

Price: from $5/month

One thing that most new website owners are surprised by is the staggering amount of spam their sites receive. In fact, on popular websites spam comments can make up as much as 85 percent of total comments. That’s right, only 15 percent of comments a website receives are legitimate.

Even with the moderation tools inside WordPress, that’s a lot of comments to take care of.

Fortunately, Akismet wants to do this work for you. The plugin is the number one spam-fighting plugin out there. Not only that, it is the number one WordPress plugin — period, however, the fact that it comes pre-installed on every new WordPress setup is probably helping somewhat.

The way it works is, the plugin scans all incoming comments for spam and filters out those that are flagged by their ever-growing database. It is also frequently updated to be able to deal with the newest spam tactics.

Akismet can be found for free in the WordPress directory. In order to use it, however, you need an API key that usually costs money. Yet, for personal blogs there is also a “name your price” license so that beginners don’t have to drown in spam comments either.

On the other hand, paid licenses come with additional features such as daily or even real-time backups and more. Definitely worth the investment.

Free alternatives: Antispam Bee, WP-SpamShield

WP Rocket

best premium wordpress plugins wp rocket

Category: Caching plugin

Price: from $39/year

Caching is one of the best ways to speed up WordPress and reduce page loading time. What it basically means is saving a pre-rendered version of your site on the server so that browsers don’t need to generate it from scratch every time someone accesses your website.

While there are excellent free alternatives (see below) WP Rocket made it on this list because of its simplicity. WP Rocket is essentially a plug and play, which means that all you have to do is install, switch on and it works. Set it and forget it.

In contrast to that, most other caching plugins ask you to go over loads of options before they start doing their thing. This is especially tedious for beginners who have no idea what they are doing.

That’s not to say that WP Rocket doesn’t come with customization options. However, you don’t have to go through pages and pages of them just to get the plugin running. A big relief for anyone strapped for time.

Free Alternatives: W3 Total Cache, WP Super Cache



Category: Website management and maintenance

Price: free (with premium addons)

If you are working with WordPress, chances are high that you are not only taking care of one site but several at the same time.

Even with a platform as user-friendly as WordPress, this can be a hassle: surfing to each dashboard, logging in, performing updates and other maintenance tasks — it takes a lot of time.

ManageWP makes this process more streamlined by letting you take care of everything from one central location. From the dashboard, you can manage themes and plugins, create posts and pages or update WordPress and its components on all your sites with just a few clicks.

The plugin even can even give you information about site uptime, access to Google analytics and schedule site backups. Plus, they have affordable plans and awesome support. What’s not to love?

Free Alternative: MainWP



Category: Backup plugin

Price: from $80/year

Maintaining regular backups of your site is essential for any website owner. If something goes wrong or your site gets hacked, having a backup at hand is the quickest way to get up and running again.

BackupBuddy is one of the best and most popular solutions for this. Not only does it save and restore your site’s files and database at the touch of a button, it can also migrate entire websites to a new server or domain.

In addition to that, the plugin can perform backups at regular intervals and send copies of your site to external services like Dropbox, FTP, Google Drive and more for extra security.

Plus, BackupBuddy is made by iThemes who are a well-known name in the WordPress sphere because of their quality and support.

Free Alternatives: UpDraftPlus

Gravity Forms

gravity forms

Category: Webform generator

Price: from $39/year

For many, Gravity Forms is the premium form-building plugin for WordPress. In fact, there is no free trial option, which should tell you a lot about its standing in the community.

Depending on your license Gravity Forms comes with virtually endless form options, from simple email opt-in to complex scheduling applications.

Additional features include multi-page forms, auto-responders, advanced fields, conditional logic, pricing fields, payment options, reCaptcha and much more.

As if that wasn’t enough, everything can be configured through a simple drag-and-drop interface. That way the plugin is easy to use for beginners and advanced users alike.

Free Alternatives: Contact Form 7


OptinMonster Plugin

Category: Lead generation

Price: from $49/year

OptinMonster is one of my personal favorites and made by the guys behind WPBeginner. It is an awesome lead generation plugin that allows you to create opt-in forms for email newsletters quickly and easily.

The plugin has many different ways to present your form and call to action including popups, header and footer bars, slide-ins, full-screen CTAs and other. It also comes with built-in analytics and reporting options as well as A/B split testing.

One of the highlights, however, is the exit intent technology. This will show your opt-in form right at the moment when your visitor moves to close the current tab or window. The advantage: They can view your content without the usual interruption and still see your call to action.

In addition to that, OptinMonster is super fast to set up. While you create the actual forms on their website, you need the WordPress plugin to configure how it will show up on your site.

Free Alternatives: SumoMe (read our detailed SumoMe guide)

WP Migrate DB Pro

WP Migrate DB Pro

Category: WordPress migration

Price: from $89/year

Here we come to another plugin I have been using myself for a while. I actually decided to purchase WP Migrate DB Pro after writing a review about it.

The plugin helps with moving WordPress by taking care of most tedious part — the database.

Usually, database migration involves a lot of steps from export to upload to changing URL references. WP Migrate DB Pro does away with all of this by allowing you to automatically sync the database (and — optionally — media files) between two WordPress installations.

For example, that means you can keep your development environment and live site in the same state at the touch of a button. The first time I saw it happen was a real eye opener for me.

The downside of the plugin is that it is on the pricier end of the scale but if you are a developer who maintains lots of client websites, it will save you heaps of time (and money) in the long run!

Free Alternative: None


best premium wordpress plugins coschedule

Category: Editorial calendar

Price: from $15/month

Keeping track of your content marketing is not always an easy feat. Between planning, writing and executing your content strategy, there is a lot to keep in mind and it can be hard to keep a bird’s eye view over everything.

Luckily, this is exactly where CoSchedule’s excellent editorial calendar can do for you. The plugin helps with all your organization and content strategy needs by allowing you to schedule blog posts, social media messages, team tasks and more.

For example, you can change the publishing date of upcoming blog posts simply by dragging and dropping them to another place in the calendar. From the WordPress backend to boot!

In addition to that, you can add social media messages for Facebook, Twitter, LinkedIn and other networks to go out together with your latest posts.

CoSchedule also improves coordination between team members by letting you assign tasks, add notes to upcoming publications, set deadlines and more.

And that’s just the tip of the iceberg, CoSchedule has a lot more to offer and for a reasonable price! Definitely worth a look.

Free Alternative: Editorial Calendar

Restrict Content Pro

restrict content pro

Category: Membership plugin

Price: from $49/year

Membership sites are a favorite business model among web entrepreneurs to bring in repeat revenue. The idea is simple: people pay to access premium content.

One of the big names in this sphere is the membership plugin Restrict Content Pro. It is made by Pippin’s Plugins, a household name in the WordPress industry.

The plugin allows you to set up multiple membership levels for your content with different prices and access restrictions.

It is very easy to use. For example, member-only content can be restricted via simple shortcodes. I fact, there is a whole host of such options to display or hide content with many different conditions.

Additional features include discount codes, discounted trial periods as well as a filterable reporting module for payments, earnings and signups. Plus, the plugin comes with a great help section and stellar support at a pretty competitive price point.

Free Alternative: WP Members



Category: Comment management

Price: from $20/month

I was recently quoted on Twitter on my enthusiasm for this particular plugin when Postmatic 2 was rolled out. For good reason. Postmatic has made quite the impression on me and I wish all of my clients used it.

As a blogger, dealing with blog comments is part of daily life. Anyone who writes for a living will spend considerable time interacting with users who are so friendly to leave comments on things you have written.

Yet, it can get a bit out of hand: Surf to recent articles, check for comments, log in, hit reply, write comment, and submit — you can spend hours just doing that.

Postmatic makes this process much easier by sending comments directly to post authors via email. That way, you can approve, move to trash, move to spam and — most importantly — answer any comment right from your inbox.

That’s right, click reply, write your answer in the email, hit send and the rest is taken care of.

However, here’s the kicker: your subscribers get the same option! They, too, can react to any comment from the convenience of the email inbox. If that won’t get them talking, I don’t know what will.

The plugin also comes with additional options like opt-in forms for email newsletters, sending out latest blog posts to subscribers and more. However, just the email commenting system alone is, in my opinion, worth the investment.

Free Alternative: None


WPML WordPress translation plugin

Category: Translation plugin

Price: from $29/year

With the growing internationalization on the Internet, offering your WordPress website in more than one language can be a worthy investment. By translating your content, you can reach loads of additional readers for your writing and customers for your products services.

While there are many WordPress translation plugins out there, the real heavyweight among them is undoubtedly WPML. The plugin is a real workhorse and will do wonders in the background of your site.

WPML can translate posts, pages, custom post types, taxonomies, menus and a lot more. It also has out-of-the-box support for more than 40 languages and you can add more if needed.

Plus, the plugin is e-commerce ready, supports multi-user translations, has outstanding support and continues to be actively developed. I can wholeheartedly recommend it.

Free Alternative: Ceceppa Multilingua

What is Your Best Premium WordPress Plugin?

Access to thousands of free plugins is one of the reasons for the success of WordPress. However, sometimes it also makes sense to pay go the paid route.

Premium plugins come with extra perks such as new features and premium support and oftentimes dominate their market for good reason.

In the list above, we have seen some of the best premium WordPress plugins currently available and the reason that makes them a worthy investment. By opting for one of the above options, you can be sure to get your money’s worth.

While in many cases free plugins do a sufficient job, if you run a professional site, paid options definitely have their place. Especially for key features and functionality, they can really take your WordPress website to the next level.

Which premium WordPress plugins can you recommend? Which ones do you use on a regular basis? Let us know in the comment section below.

Nick Schäferhoff is an entrepreneur, online marketer, and professional blogger from Germany. He found WordPress when he needed a website for his first business and instantly fell in love. When not building websites, creating content or helping his clients improve their online business, he can most often be found at the gym, the dojo or traveling the world with his wife. If you want to get in touch with him, you can do so via Twitter or through his website.

The post 11 Of The Best Premium WordPress Plugins Worth Their Money appeared first on Torque.