What we did to make Needyesterday GDPR Compliant

What we did to make Needyesterday GDPR Compliant

TIPS & TRICKS

What we did to make
GDPR Compliant Needyesterday

Follow us on

Fabio Sarcona, Co-Founder Needyesterday, Italy

8 June 2018

From 25 May the new privacy legislation is in force. And yes… for weeks you have seen everywhere the 4 most hated letters of the web: GDPR. And even today, 2 weeks after the new regulations come into force, there is a lot of confusion. In this article you will learn what we have done to get Needyesterday GDPR compliant and sleep well after that.

So we thought about sharing our experience and what we did to make Needyesterday GDPR compliant. What will follow will be a series of tips and tricks that we used for for our site.

Disclaimer: I do not want to replace any legal expert (which I always recommend consulting) but I want to help you by addressing the GDPR with a practical approach and without technical terms (that you find in the glossary I have included).

I want to immediately tell you this: if you are not the CEO of large company, then most likely making your site GDPR compliant will not be a big deal. Relax.

That said, in this article…

I will show you:

  • What we did to make Needyesterday GDPR compliant
  • What steps we have followed and what questions we have asked before proceeding with the update of our site
  • Which tools we have used
  • A glossary with all the most common terms used in the new GDPR regulations.

You will NOT find:

  • One-click solutions
  • Magic potions
  • Plugins that will make GDPR Compliant 100% and also prepare an excellent coffee for only $ 49
  • Armaggeddon theories on the end of the internet

Are you ready? let’s start! 😉

What data you collect, how and for what reason

If you are a freelancer or a small web agency, probably you will collect this kind of data:

  • First name
  • Last name
  • E-mail

and perhaps, in some cases, the link of your client’s site.

You probably acquire this data through a Contact Form or through your newsletter.

And most likely you use this data to send an estimate on a new project, to update and communicate with your client or to do web marketing through your mailist.

If you recognize yourself in this analysis, then you have already completed the first step to be GDPR compliant. In fact, this is one of the most important things to do: understand what data you collect from third parties and how. Do this step before any technical intervention or any investment in tools or plugins to make your site GDPR compliant.

This first step is crucial because the GDPR aims to make the management of sensitive data more transparent, so for the next step it is important to have this solved this point.

I have added below some questions that can help you complete the first step.

Questions:

How is consent collected? For example:

  • Web forms
  • Sign In page
  • Email campaigns
  • Telemarketing campaigns
  • Other

What information is being collected? For example:

  • Name
  • Email
  • Phone Number
  • Address
  • Other

Who is collecting it? 

Which plugin or tool is collecting data?

Why is it being collected? For example:

  • Site statistics
  • Behavior on the site (example: Heatmap)
  • Geolocation

How will it be used? For example:

  • To contact customers
  • Remarketing
  • Sending proposals

Who will be the data shared with?

What will be the effect of this on the individuals involved?

Is the intended use likely to cause individuals to object or complain?

How is this consent demonstrated? For Example: 

  • I keep a record of when and how we got consent from the individual
  • I keep a record of what they were told when I collected the data

Where is consent recorded? For Example:

  • With your CRM system (for example Mailchimp)
  • Server
  • Database

Answering these questions you will surely give you a clearer idea of what to do to make your site GDPR compliant.

What did we do?

At Needyesterday we asked ourselves three precise questions:

How do we get data from our users?

– Optin-form
– Contact Form on our Contact us page

Which data do we collect?

In the case of our optin-form, we collect just name and email.

In the contact form we collect:

– First name
– Last name
– Email

When the user is interested in working with us or in a partnership, we also request to provide a link to their portfolio and Linkedin profile and their role.

And for what reasons do we ask for these data?

In the case of our optin-form, we offer free access to all our freebies immediately after sign-up to the newsletter.

In the case of our contact form, we request user data to process requests and never use data in any other way except to respond to support requests or to requests for more information.

I believe a good way to make your website GDPR compliant is simply to treat your users’ data as if it were your personal data: with the utmost respect and only for the reasons you stated.

If you do not give your users data to third parties, if you do not take any data without your consent, if you have the utmost care and common sense to keep this data, you are and will always be GDPR compliant.

Clear and transparent information

The second step is to inform how you will use the data you collect in the clearest and most transparent way possible.

For example, if your site has a Landing Page where you offer free resources such as:

  • Free layouts
  • Reports
  • Courses
  • Ebooks

and ask the user’s name and email to give access to your resources, then it will be immediately clear why you are asking for that data.

Implicitly you are saying:

If you enter your name and your email here I will give you my free resources.

What does this mean? That the user is aware of the fact that his data is needed to get your free resources.

At this point you probably have a question in your mind: Do I need to add a checkbox requesting explicit consent to the subscription?

Drumroll… and the answer is simple: NO.

Why? Because as described in this excellent article by Tim Strifler the user is already aware immediately of the reason why you are requesting the data.

For example, on our Freebies page, through the optin-form in the Header we ask for the name and the user to give access to a .zip package that includes all the free resources. The reason why we ask for the data is clear.

The same principle applies if on your Contact page you ask for data such as Name, Surname, Email to send an estimate for a new project.

What did we do?

Optin-Form Freebies:
We didn’t do much extra to be compliant. We have always preferred to be transparent starting from the copy we use. So the user is immediately aware that his/her data are mandatory to get free resources and to be informed on our new tutorials and offers. This made it unnecessary to add the infamous checkbox that is surely destined to remain one of the most discussed points of the new privacy regulations.

Contact form and Comment Form
Our users’ emails are never used for remarketing or other purposes not described. So we did not have to add any checkbox that asks for explicit consent as done for example in the Comment Form of the Elegant Themes blog.

Make access to collected data and cancellation simple

Another important point of the GDPR is access to the collected data. What does it mean?

It means that all users must be able to request the cancellation of their data to respect their right to be forgotten as established by the GDPR.

The ability to export and delete user data is a feature that was introduced with WordPress version 4.9.6. The same applies to data stored by Woocommerce that can now be exported and deleted using the new WP export feature 4.9.6. Another thing introduced by Woocommerce is the ability to determine how long you will keep your customers’ data when it is no longer necessary for order processing.

Many plug-in developers will introduce similar tools or native integrations with WP’s Data Export, so in the coming weeks we can certainly expect news that will make access to the stored data easier and faster.

What did we do?

We have chosen to use the plugin GDPR Data Request Form Plugin and we have added a form for requesting and deleting data directly on the Privacy Policy page. At any time the user can request to recover his data and obtain the right to oblivion with the cancellation.

And what about the data collected by Woocommerce?

With regard to Woocommerce, the data used to process any Orders will also be deleted and then we decided to keep data for a maximum of one year for completed orders (see screenshot #1).

Alternative to GDPR Data Request Form Plugin
You can also use the Delete Me plugin that will help you easily manage the request for access and deletion of the collected data.

Regarding subscribers to our newsletter, we give a quick and easy way to unsubscribe – meaning stop receiving our email, not deleting their data, Mailchimp as many email services don’t delete user data after an unsubscribe – by inserting a link in every email we send along with a short note reminding you why they are subscribed to our newsletter (see screenshot #2).

GDPR and ePR compliant cookie consent

You will have already heard a thousand times about cookies, what they are and what they do… so I do not want to add to bore but I want to talk about what the new legislation request to be Cookie Compliant.

To make the use of cookies of your site compliant with GDPR and ePR, it is necessary that you first obtain the explicit consent of the users but it is not the only thing established by the GDPR, the consent must:

  1. Given before the installation of cookies. This means that no cookies, except technical cookies, can be installed on the site prior to the user’s consent.
  2. Inform users about what cookies you use. Your users need to know what cookies you use and for what reason and you must do so by providing specific and clear information about what they are giving their consent to.
  3. Ensure access to pages. Users must be able to use the website even if they have refused all cookies that are not strictly necessary. I have seen in some guides that it was advised not to show images, texts or any other content if the user does not give explicit consent to the use of cookies. This is pure madness because all those technical cookies needed to use the site or in general all those cookies that do not collect any data or preference in the background, have no reason to be blocked.
  4. Keep track of consent. All consent data must be stored securely to provide evidence of consent in the event of a check (check out the screenshot below).
  5. Renewed once a year. Cookies must be renewed every 12 months, so they can not be stored later than this period.

What did we do?

For the Cookies Consent we have chosen to use CookieBot a cloud service that does an automatic scan of the site by detecting the cookies used and allows you to obtain preventive blocking of cookies, to ensure the use of the site even without consent to cookies not strictly necessary and access a downloadable CSV document that tracks all the consents obtained.

If you want to know more about the Cookie Consent, I recommend this great article Cookie Consent | How I do comply with the GDPR?

Tools and Resources

Generate Privacy Page

#Iubenda  (Affiliate)

We have used Iubenda to generate our Privacy Policy page. Iubenda allows you to generate a Privacy Policy by adding the various services used by your site chosen from a list of over 300 services.

All you need to do is choose those in use on your site and Iubenda will automatically create your Privacy page.

The annual cost per person / language is $19 but if you use this affiliate link, you get a $10 discount on the first year of subscription.

Always automatically, Iubenda generates the text with the regulations provided by the GDPR and updates automatically if the regulations change.

it’s very easy to integrate because there are several ways to include Iubenda on your site: you can use a WordPress plugin, but I recommend the Embed code solution directly on your Child Theme or in the Divi Options panel (in the Integrations tab).

Last week Iubenda also released a new tool for managing and storing sensitive data, a specific tool for GDPR. The cost is $29 per month and it is an excellent solution if your site or your clients’ treat sensitive data such as Clinical Data, Bank Data, and other data that need more complex management.

Cookie Law

#Cookiebot:  (Free version)

Iubenda generates a banner for the consent of Cookies but it does not prevent cookies from being prevented as required by the regulation. For this reason we at Needyesterday have preferred to use CookieBot which scans your site and automatically generates a preventive blocking of cookies installed on your site.

CookieBot automatically generates a page Privacy Policy as well that includes cookies active on your site, but it is standardized and not custom as Iubenda offers. So in the end we preferred to manage the two things separately (Iubenda for the page Privacy and CookieBot for preventive blocking).

Alternatively, you can also use this other great plugin for Cookie Law:
#Ginger – EU Cookie Law

Request Data

#GDPR Data Request Form Plugin

Others tool and resources:

#GDPR Ebook by Mailchimp

#Delete Me (plugin WP)

Two tools that allow you to find active cookies on your site:

#Cookie Scan

#Cookie Check

Facebook Groups:

EU GDPR (General Data Protection Regulation) & E-Privacy Regulation

GDPR For Online Entrepreneurs (UK, US, CA, AU)

Glossary of Terms

Binding Corporate Rules (BCRs)
a set of binding rules put in place to allow multinational companies and organizations to transfer personal data that they control from the EU to their affiliates outside the EU (but within the organization)
Biometric Data 
any personal data relating to the physical, physiological, or behavioral characteristics of an individual which allows their unique identification
Consent
freely given, specific, informed and explicit consent by statement or action signifying agreement to the processing of their personal data
Data Concerning Health
any personal data related to the physical or mental health of an individual or the provision of health services to them
Data Controller
the entity that determines the purposes, conditions and means of the processing of personal data
Data Erasure
also known as the Right to be Forgotten, it entitles the data subject to have the data controller erase his/her personal data, cease further dissemination of the data, and potentially have third parties cease processing of the data
Data Portability
the requirement for controllers to provide the data subject with a copy of his or her data in a format that allows for easy use with another controller.
Data Processor
the entity that processes data on behalf of the Data Controller
Data Protection Authority
national authorities tasked with the protection of data and privacy as well as monitoring and enforcement of the data protection regulations within the Union
Data Protection Officer
an expert on data privacy who works independently to ensure that an entity is adhering to the policies and procedures set forth in the GDPR
Data Subject
a natural person whose personal data is processed by a controller or processor
Delegated Acts
non-legislative acts enacted in order to supplement existing legislation and provide criteria or clarity
Derogation
an exemption from a law
Directive
a legislative act that sets out a goal that all EU countries must achieve through their own national laws
Encrypted Data
personal data that is protected through technological measures to ensure that the data is only accessible/readable by those with a specified access
Enterprise
any entity engaged in economic activity, regardless of legal form, including persons, partnerships, associations, etc.
Filing System
any specific set of personal data that is accessible according to specific criteria, or able to be queried
Genetic Data
data concerning the characteristics of an individual which are inherited or acquired which give unique information about the health or physiology of the individual
Group of Undertakings
a controlling undertaking and its controlled undertakings
Main Establishment
the place within the Union that the main decisions surrounding data processing are made; with regard to the processor
Personal Data
any information related to a natural person or ‘Data Subject’, that can be used to directly or indirectly identify the person
Personal Data Breach
a breach of security leading to the accidental or unlawful access to, destruction, misuse, etc. of personal data
Privacy by Design
a principle that calls for the inclusion of data protection from the onset of the designing of systems, rather than an addition
Privacy Impact Assessment
a tool used to identify and reduce the privacy risks of entities by analyzing the personal data that are processed and the policies in place to protect the data
Processing
any operation performed on personal data, whether or not by automated means, including collection, use, recording, etc.
Profiling
any automated processing of personal data intended to evaluate, analyze, or predict data subject behavior
Pseudonymisation
the processing of personal data such that it can no longer be attributed to a single data subject without the use of additional data, so long as said additional data stays separate to ensure non-attribution
Recipient
the entity to which the personal data are disclosed
Regulation
a binding legislative act that must be applied in its entirety across the Union
Representative
any person in the Union explicitly designated by the controller to be addressed by the supervisory authorities
Right to be Forgotten
also known as Data Erasure, it entitles the data subject to have the data controller erase his/her personal data, cease further dissemination of the data, and potentially have third parties cease processing of the data
Right to Access
also known as Subject Access Right, it entitles the data subject to have access to and information about the personal data that a controller has concerning them
Subject Access Right
also known as the Right to Access, it entitles the data subject to have access to and information about the personal data that a controller has concerning them
Supervisory Authority
a public authority which is established by a member state in accordance with article 46
Trialogue
informal negotiations between the European Commission, the European Parliament, and the Council of the European Union usually held following the first readings of proposed legislation in order to more quickly agree to a compromise text to be adopted.

Conclusion

I think the GDPR will continue to be a “hot” topic for quite a while. Just ask “What have you done to make your site GDPR Compliant?” To see a flurry of comments and opinions all different from each other.

From my point of view – which is not that of a lawyer or privacy expert – think that if you have always made a correct and transparent use of your users’ data, you have never given any third party an email and you respect the privacy of others as if it were yours, you have already done 90% of the work to make your business GDPR compliant.

Okay .. enough with boring legal stuff… I want to finish showing you something really geeky…

 

Click here 😉

Fixed Bar for Divi: how to improve conversions

Fixed Bar for Divi: how to improve conversions

TIPS & TRICKS, TUTORIAL

Fixed Bar for Divi:
how to improve conversions

Follow us on

Fabio Sarcona, Web Developer, Italy

22 March 2016

Many times when building a website, it makes one of the most serious mistakes to focus too much on design and less on what it really is imported: the conversions.

Yet in some cases small trick can help increase conversions with minimal effort, and that’s what I will do in this article where I’ll show you how to add a fixed bar to your website to improve conversions and even the user experience .

I almost forgot: all this without using any plugins 😉

Clicking the button below you can download the .zip package that contains three layouts and CSS code.

As always, you’ll need to add the JSON files to the library and the CSS code to the option panel or your child theme.

Fixed Bar with a single CTA

This is a very simple bar: I added a text to the left and a button to the right to push the user to make an action.

I chose to place the text on the left and the CTA on the right for a reason and this reason is called Visual Hierarchy a much used term when designing the UX of an interface and that is to place the interface elements following the normal human eye displacement, from top to bottom and from left to right (except for some countries).

So keeping in mind that “flow”, I’m going to place the text on the left and right button, so the user first reads our message and we attract his attention with a button that must always be clearly visible.

Fixed Bar with a double CTA

This bar, unlike the previous one, uses two call to action and useful when you have to give multiple options to the user. I use the pages of my store and you can see it in action by clicking the button below:

Fixed Bar Mobile App Style

By now we all know: the traffic generated by the mobile exceed that generated by desktop, this means that it is very important that each element and each page is fully optimized to provide users with a good user experience, even via mobile. That’s why I created this three layout that allows you to add 4 call to action in pure style Mobile App.

I in the example you can see by clicking the button below, I added:

  1. Maps button, great when you want to show the location of a shop or office quickly, for example in the case of a restaurant.
  2. Call button, a quick shortcut that allows you to make a call to the number you want, with just one click and without any waste of time.
  3. Contact Us button, to immediately open the email provider for fast communication.
  4. Support button, a button that you can use to target your users to the support page of your site.

Of course, you are just an example, but you can easily customize every call to action in a few minutes.

NOTE: This bar is only visible on Tablets and Smartphones.

Conclusion

So that’s all. But now I have a question for you: do you think you use this call to action in your site? Already use some tricks to increase conversions?

Write it in the comments.

How to create an animated sticky menu, with CSS3 and JS

How to create an animated sticky menu, with CSS3 and JS

TIPS & TRICKS, TUTORIAL

How to create an animated sticky
menu with CSS3 and JS

Follow us on

Fabio Sarcona, Web Developer, Italy

7 Oct 2016

In this new tutorial I will show you how you can add an animated sticky menus to your website and add shortcuts that can improve the user experience.

I know, there are are a few great plugins you can use, but I do not love so much plugins and when I can, I always prefer to find an “alternative route” as for this tuts where I will use circleMenu a simple and lightweight, dependency-free JavaScript library

I know you’re curious to see immediately what you will learn from this tutorial, so here is a live:

This tuts is divided into two parts:

This is a very simple bar: I added a text to the left and a button to the right to push the user to make an action.

I chose to place the text on the left and the CTA on the right for a reason and this reason is called Visual Hierarchy a much used term when designing the UX of an interface and that is to place the interface elements following the normal human eye displacement, from top to bottom and from left to right (except for some countries).

So keeping in mind that “flow”, I’m going to place the text on the left and right button, so the user first reads our message and we attract his attention with a button that must always be clearly visible.

Fixed Bar with a double CTA

The first thing you have to do is download the child theme that I have prepared, and which already contains the JS and CSS code needed to run properly the menu.

Then download the file and open the .zip package.

Inside the package you will find three files:

  1. Child Theme.zip, which is the child theme
  2. Circle-Menu-Layout.json, a “Code” module that contains the HTML code for the menu structure.
  3. structure-menu.html (of this file I’ll tell you at the end of the tutorial)

You have to do now is load the child theme in your WordPress and activate it.

NOTE: If you do not know how you do, do not worry, just follow these simple steps:

Go to Appearance > Themes > and click on the Add New Theme. 
After click on Upload Theme and install the child theme.

Import the JSON file in the library

Now only missing the last step, import the JSON file in the library and upload the page where you want to add your new menu. That’s all you need to do to add a submenu to your website.

If you already use a child theme..

If you already use a child theme then the steps are a little different but still very simple. Again I created a package that contains all the necessary files for each step, so you’ll first need to download this package:

Now you just need to follow these 5 simple steps:

Step 1: Log in to your child theme folder via FTP and add the JS files that you can find inside the package.

Step 2: Open the functions.php file and add this code:

NOTE: This code is used to load properly a js file in WordPress.

<?php
 function child_add_scripts() {
 
 wp_register_script('circleMenu', get_bloginfo('stylesheet_directory') . '/circleMenu.js');
 wp_enqueue_script( 'circleMenu' );
 }
 add_action( 'wp_enqueue_scripts', 'child_add_scripts' )
 ?>

Step 3: Now add this script to the footer.php file before closing body tag:

<script>
 var el = '.js-menu';
 var myMenu = cssCircleMenu(el);
 </script>

Step 4: Add the CSS code (which always are inside the .zip package) in your stylesheet.

Step 5: Import the JSON file in your library and add the new menu in the pages that you prefer.

Last Step: enjoy! 🙂

HTML Structure

Before concluding this tuts, I want to tell you about the menu HTML structure and how you can customize it. Look at this screenshot:

screenshot-backend-divi

Icons: I used Font Awesome for icons, so all you need to do and add icons of your choice.
Label: Here you can add a label that will be shown on mouse-over
New Items: You can add new items by copying the list item.

Note: inside the module “Code” the HTML code looks like this:

screenshot-backend-divi

as you can see the code is a single block and this makes customization definitely more difficult, so I thought I would add a further package in .zip files with HTML code that you can customize using your favorite editor. That way when you have applied your changes, you need only copy and paste the code inside the module.

Conclusion

Finally I thought I’d give you some ideas to make the most of this new menu, for example, you could use it to open messenger, how? it’s very simple!

Use this link https://m.me/XYZ and all you have to do is replace “XYZ” with your Facebook vanity username.
For example in my case it is: https://m.me/needyesterday

Another possible use that comes to mind is to create a trigger button to open a pop-up with a contact form or a form to subscribe to the newsletter using the plugin DIVI POP-UP MODAL.

But now it’s your time:

How do you plan to use these shortcuts in your projects? you have some ideas to share?

Write it in the comments ?

Next Tuts

In the next tutorial I’ll show you how to create a beautiful CTA bar with a Mobile App style. Do you want to preview it? Open the link below from your smartphone or tablet ;).

Divi Theme: How to customize the footer (2)

Divi Theme: How to customize the footer (2)

TIPS & TRICKS, TUTORIAL

Divi Theme:
How to customize the footer (2)

Follow us on

Fabio Sarcona, Web Developer, Italy

27 Aug 2016

As promised, here is the second part of the tutorial “How to customize the footer” I promised you two weeks ago.

I know, I told you that would be available last Friday but unexpectedly blocked me for a few days and then I had to postpone the second part of the tutorial.

In this second part, I show how to use two layouts (3-4 View Demo) that are constructed with two different sections.

NOTE: These two layouts are only for newsletter subscribers.

Do you anticipate that it will be much shorter than the previous tutorial because the steps are nearly identical to those already seen in the previous tutorial, but with a small difference that I will show you in a video to make things even easier.

First, be sure to:

1. You must have installed and activated the plugin Divi Widget Builder
2. Import the JSON file (Footer Custom 3 and Footer Custom 4)
3. To add the CSS code (found inside the package .zip – Footer Custom 2.0) in the options panel or in your child theme.

If you have already completed these three simple steps, then you’re ready to check out this short video:

Footer Divi Pre-Made Sections

On Needyesterday you will find 10 ready-to-use layouts for your Footer. You do not need any plugins and like all our pre-made section, they are all compatible with the latest version of Divi and 100% Responsive.

Conclusion

That’s all. As you see you can create a footer that uses multiple sections, this allows you to be able to really give rein to your creativity without limits.

For this week it is all about, as always I wait in the comments to know your opinion or to answer your questions.

Have a nice weekend!

Divi Theme: How to customize the footer

Divi Theme: How to customize the footer

TIPS & TRICKS, TUTORIAL

Divi Theme:
How to customize the footer
to improve conversions

Follow us on

Fabio Sarcona, Web Developer, Italy

12 Aug 2016

In all my projects I always love to add the details that can make only the end result of my work, and something what I can not live without.

Sometimes I happen to “pause a project” to find the right inspiration to create an item, a layout, a combination of colors, font, that is original and special I call it “my signature” and the same the approach used to create some new layouts that you can use to make more attractive the footer of your website. In fact, in this article I show you how to customize the footer of Divi in a few easy steps.

As always, before we left I show you the end result. (Note: For this tutorial I will use the #1-layout).

Footer Divi Pre-Made Sections

On Needyesterday you will find 10 ready-to-use layouts for your Footer. You do not need any plugins and like all our pre-made section, they are all compatible with the latest version of Divi and 100% Responsive.

1. Step: Download the Divi Widget Builder

The Divi Widget Builder It is a plugin (premium) developed by SJ James of Divi.space that allows you to turn any item stored in the library for a widget and that will be useful for this tutorial. If you’ve read my previous tutorial where I showed you how to customize the header of Divi then you have already installed this plugin then you can move immediately to the next step.

2. Step: Build your footer

Now all you have to do is build your own footer layout with the Divi Builder you save the result in the library, but remember to turn on the “Make this a global item” option that will make it quick and easy for future customizations. To learn more about the advanced settings of the module you should read the official documentation.

If you instead want to use the layout seen in the demo, you can download the template by clicking on the button.

Inside the .zip package are two files:

1. JSON File: Import the json file in your library using the import & export tool;
2. File CSS: open this file and copy and paste the CSS code in the options panel or in your child theme.

3. Step: Add a widget to your footer

Now go to Appearance > Widgets and drag & drop the widget “Divi PB Widget” within the Footer Area #1. Now select the items that you created or if you have imported the pre-made layout, select the item “Footer Custom 1 (CCT)“.

Note: remember to disable the option: “Display Library Item Title“.

4 Step: Change the footer layout from Customizer

Now open the Customizer settings, and go to Footer > Layout and select from the drop down menu the single column and the background color that you give to your footer. Save the settings and enjoy your new footer ?.

The tutorial is over here but below I have added a CSS code snippet that you will need if you want to create your own custom layouts to be used for the footer.

What this code is very simple, because it customizes the width of the widget but to do so you will need to add the class custom: footer_custom for the Section, and the class: row_custom_footer for each Row you add in the section.

Below I added a screenshot that makes it easier to understand where you need to add custom classes.

/**** ---------- For Custom Items ----------- ****/

/**** Add to section the custom class: footer_custom ****/
/**** Add to row the custom class: row_custom_footer ****/

.footer_custom.et_pb_section {
    padding: 0 !important;
}

/**** Row Widget Custom ****/
.footer-widget .fwidget {
    min-width: 100% !important;
}

#footer-widgets {
    padding: 3% 0 0 !important;
}

#footer-widgets .footer-widget li:before {
    content: none !important;
}

#footer-widgets .footer-widget li {
    padding-left: 0px !important;
}
/*** Row Custom Width***/
.row_custom_footer.et_pb_row {
    width: 100% !important;
    max-width: 1280px !important;
}


Edit Page ‹ Creative tutorial — WordPress

Conclusion

One thing I did not tell you at the beginning of this tutorial, and there will be a second part where I show you how to use the layout 3 and 4 seen in the demo. These two layouts need a dedicated tutorial so I decided to create a second part where there will also be a video that will make everything easier.

Now it’s your turn:

what do you think of this hack? Will you use it or do you prefer the default layout?

NOTE: the 2-3-4-5 layout that you can view the Demo they are reserved to the members of the newsletter.

5 steps to make the Divi Header Cooler

5 steps to make the Divi Header Cooler

TIPS & TRICKS, TUTORIAL

5 steps to make
the Divi Header Cooler

Follow us on

Fabio Sarcona, Web Developer, Italy

29 Jul 2016

Have you ever had that moment when you turn on a light bulb in the head and suddenly you think of an idea? It is what has happened to me before you think of this trick which will show you how to customize the header of Divi for a completely new look and cool.

I know you’re curious to see immediately what you will learn from this tutorial, so here is a live demo:

but I guarantee that at the end of this tutorial you’ll know to create your own personal layout in a few minutes!

Note: If you have just started to use the Divi or you are a total beginner, maybe you could find this article a little more advanced, but if you follow all the steps in a careful will become easy for you.

Latest update

I wrote this tutorial in July 2016 and until a few months ago, it was not possible to get a custom menu without a hack like the one described in this tutorial. Now on Needyesterday you can find 10 Header Navigation pre-made Layouts that allow you to get a custom menu with a few and simple clicks. Check out our Amazing pre-made layouts now!

https://gyazo.com/51079ff8f0eedc5277b33309f8368c3c

Tools essential to build our custom header

  • Set the Header style to centered mode;
  • A child theme with inside the header.php file;
  • The Divi Widget Builder plugin by SJ James Divi.space;
  • A bit of creativity and a bit of patience to grammar mistakes you’ll find in this article ?

1. Step: Header Centered Style

First you have to set the header layout centered, then with CSS code move the logo and menu on the left.

To set the Centered layout go to Theme Customizer > Header & Navigation > Header Format > Header Style.

Social Icons for Menu

In the demo you will have seen that I have added icons for social networks, to add them I used Font Awesome you just add to your menu as shown in the screenshot you can see below. But beware, if you want to place on the right of the menu you add custom class: social_header.

Great, the first step is completed!

STEP 2: Create a child theme

Maybe you already use a child theme, perhaps one of those available in my store, or perhaps not, but for this tutorial I strongly suggest you to use one and not necessarily a child theme premium but also a neutral child theme that allows you to add customizations to your site without worrying about compromising the main theme. I will not tell you about the benefits of using a child theme, but if you want to know more you can read this excellent article:

The In’s & Out’s of Child Themes & Premium Divi Child Themes

That’s enough talk and we go to practice…

To create a child theme you can use these two excellent tools:

  1. DIVI CHILD THEME BUILDER
  2. DIVI CHILD THEME MAKER

to automatically create a child theme, but both do not automatically create the header.php, essential for this tutorial, so after you’ve generated your child theme, look and open the parent folder of the Divi theme, here you will find the header.php file that you must copy and paste into your new child theme folder.

That done, you will need to copy the file to the child theme folder you created previously, in this way you will have successfully created your first child theme :).

Now open the header.php file with your favorite editor, and around line 217 you should see the text </a> which is the closing of the tag that allows you to add your logo to the header, under this tag you must add this line of code:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('widget_header_custom') ) : endif; ?>

Great, the first step is completed!

as shown in this screenshot:

STEP 3: We create the elements for the header

The hardest part is over, now from here on and all downhill fact what we now need to do is just use the Divi Builder to create a section with items you want to display in your header and save it in the library, because we need this next step.

I’ll give you some examples: Want to show your contacts and a button with a call to action? Well, then it creates a section in three columns and add two blurb for contacts and a button for the call to action.

Want another idea? Take the case where you’ve created an offer with a deadline, you can add a module text with a short description, a countdown module and a button.

As you see, nothing you do not already know :).

Tip: when you create your section keep in mind that you will have a small space for the items and must all be on the same line, then you should not use module as a Contact Form, Tabs, Accordion etc …

Another tip is to set padding:0; on both the section and also on the row, as shown in this screenshot:

STEP 4: Use the Divi Widget Builder

Now you will need to download and install Divi Widget Builder, a free plugin (NOTE: when I wrote this tutorial the plugin was free now it costs $7 for single site.) developed by SJ James Divi Space really very useful and smart, because it allows you to turn any item stored in the library in a widget, and it’s just fantastic.

After installation you will need to activate the plugin and go to Widgets page (Appearance > Widgets), here you will find a new Widget called “Divi PB Widget”.

The next step is to create a new widget area and guess where will the new widget area? That’s right, the header.

Create a new widget area is easy, you just have to give a name to the new area in this box:

Usually you can give any name to the new Widget Area, but for this tutorial we will call widget_header_custom, then you will need to give this name to the new area. If you paid attention, you’ll notice that it is the same name used in the header.php file to bring up the new widget area. After you must click on the Create button and the new widget area will be displayed at the top.

Note: if you do not immediately see the new widget area, you just have to do a page refresh.

You Should now see a new widget on your screen area, now you need to do a drag and drop and add the widget “DIVI PB WIDGET” within the new area widget.

https://gyazo.com/fe36ee50d0755f5b4f788976a091deea

 

Now download the template that I created for you and import the JSON file in your library.

DOWNLOAD TEMPLATE

After importing the template, return to the widget area you created earlier and select from the drop-down menu the layout / item Header-Custom-CTA.

Uncheck the “Display Library Item Title?” and then click on save. We’re almost there, just missing the last step, the CSS code.

STEP 5: Add CSS Code

STEP 5: Add CSS Code

We’re almost there, just missing the last step, the CSS code.

Now go into the Divi options panel or in your child theme of the style.css file, copy and paste the code found below.

Of course, this code allows you to operate the specific layout shown in the demo, so if you create a new layout will probably have to customize this code.

@media only screen and (min-width: 981px) {
/**** Logo and Menu Left ****/
  .logo_container {
    text-align: left !important;
    margin: 0 5%;
  }
  #et-top-navigation {
    text-align: left !important;
  }
 /**** Header ****/
  #top-menu-nav {
    margin: 0 5%;
  }
  .et_header_style_centered #main-header .container {
    width: 100% !important;
    max-width: 100% !important;
  }
  /**** Header Centered Border ****/
  .et_header_style_centered #main-header div#et-top-navigation {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
  }
 /**** Header Centered Link Padding ****/
  .et_header_style_centered #top-menu > li > a {
    padding-bottom: 1.5em;
    padding-top: 1.5em !important;
  }
  /**** Position adjustment icon drop-down menu ****/
  #top-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after {
    line-height: 3.4em !important;
  }
  #main-header {
    -webkit-box-shadow: none !important;
    box-shadow: none  !important;
  }
  /**** Adjustment Bar Search ****/
  #et_top_search {
    position: absolute;
    top: 30px;
    right: 5%;
  }
  span.et_close_search_field {
    right: 5%;
  }
  .et-search-form input {
    right: 5%;
    width: 46%;
  }
  /**** Divi Widget ****/
  #divi_pb_widget-8 {   /**** <---- Replace the final number with that of your widget ****/
    float: none !important;
    width: 60%;
    position: absolute;
    top: 20%;
    right: 0;
  }
  /**** Row Custom ****/
  .header_custom_cta.et_pb_row {
    position: absolute;
    right: 5%;
  }
}
/**** Position Social Header ****/
@media only screen and (min-width: 981px) and (min-width: 1440px) and (max-width: 1600px) {
  .social_header {
    position: absolute;
    left: 58%;
  }
}

In the CSS code you can see that there is an ID #divi_pb_widget-8 which refers to the widget used for the header. You probably have to change the number you see at the end with one that matches your Widget that you have created, and to do that you have to open the tools to developers, to enable the inspector and find the class .logo_container click on it and then immediately find the ID of your widget with its identification number of which you will need to add in the CSS code.

divi-widget-code

Bonus

For all subscribers to the newsletter I reserved 2 Bonus.

The first is a template that allows you to add an optin-form header, the second template adds a secondary menu.

Conclusion

So that’s all. As you see you can now easily create your own custom header, you’ll only have to test your creativity to create your perfect header.

Stay tuned because for the next week I have another tutorial that adds another weapon to your arsenal ?

As always I wait for you in the comments!

Have a nice weekend!

Source Code PHP: David Elster.