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.

Checklist WordPress: what to check before launching a website

Checklist WordPress: what to check before launching a website

TIPS & TRICKS, TUTORIAL

Checklist WordPress:
what to check before launching a website

Follow us on

Fabio Sarcona, Web Developer, Italy

24 Jun 2016

Before launching a website it is essential to make sure that it is fully functional and that every request of the customer has been developed.

But it can happen that carelessness or lack of methodology, you do encounter errors (in some cases, even very serious) that are not good for their professional image.

In this article, you will find a checklist useful to avoid any errors in the design phase and to establish an audit methodology that will save you time and most importantly, the disappointments .

Of course, it is not a definitive list of control because each project may require specific controls, but it certainly will give you a basis on which to rely for an independent evaluation of the reliability of the site.

1. Complete all customer requirements

  • Verification of requests: if the customer has agreed on a list of features of the site or graphic to be developed, make sure you have completed all tasks including any required changes during development.
  • Create a document (example: pdf / excel / word) with the data for access to WordPress Hosting account and domain (if purchased separately).
  • Account test: If you have created some accounts for testing, remember to delete them..
  • Copyright: Check for copyright and / or Credits: as photo credits or snippet code.
  • Text test: If you have the filler text (Lorem ipsum), be sure to delete it and replace it with the final content.
  • Customizations test administration: If you customized the WordPress administration panel, make sure that this works for all user roles used by the customer. If uses the Divi Roles, make sure you’ve given to each role the right privileges.
  • Test third-party services: if you added some third-party services or insured plugins that work properly and are updated to the latest version (you may need to place a new control even after migration).

2. Compatibility and structure

  • Browser Test: Test your website in all popular browsers and also in their previous versions (It may be useful to ask the client browser type used to avoid annoying incompatibilities). These controls is recommended carried out during processing but it is crucial run them before putting the site online.
  • Responsive Design Test: Test your site on all popular mobile device. Make sure everything is working properly and that there is the presence of graphical elements that overlap. (For example the text or in the buttons). Currency also, the ability to streamline the mobile version of unnecessary items. With Divi it is also very easy because you can hide section, row or just module with a click. To make your tests you can use these tools: Responsivator or Resizer.
  • Test navigation and links: in particular, any redirects.
  • Permalinks: Make sure permalinks work well for all content: you may need to reconfigure them.
  • Users roles: test the site (front-end and admin) using all the WordPress user roles that your client will be using.
  • Contact forms: head all the contact form, trying to send some email, and make sure that all fields generate the correct information.
  • Ecommerce Checkout: in the case of an e-commerce you will need to test the entire sales process. If you’re using Woocommerce can use the PayPal Sandbox feature for testing online payments.
  • Alt tags: make sure that all images have the Alt tag, useful for SEO but also to improve the accessibility.
  • Optimize images and videos: optimizes all images with tools like Imagify or Compressor.io that reduce weight without losing image quality.

NOTE. This article has listed the best tools to optimize images: https://aspengrovestudios.com/8-effective-tools-to-optimize-images/

3. Safety and updates

  • Basic SEO: titles and meta descriptions should already be prepared and optimized by theme or added using a plugin like SEO by Yoast. You may have to configure the plugin to suit the needs of your customers.
  • Redirect 301: if you worked on the redesign of a website, you probably need to set some redirect 301 to indicate to the search engine of the new link location.
  • Search Engine Visibility: if you chose to make invisible the site to search engines, then you need to remember to remove the block.
  • Backup: undoubtedly is the most important check of this list, I’m talking about the backup. Make a backup of the files and the database at the time of the launch.
  • Set up an automatic backup system: for the theme, the plugin files and database. Determine how it will be managed in accordance with agreements made with the customer. You can use the backup service offered by some hosting or you can use some plugins like Backup Buddy (Premium) or free as iThemesecurity that allow both to secure the entire site you set up automatic backups.
  • Configure the site to Google Analytics: either using a plugin or adding the tracking code to the theme.
  • Updates and optimizations: Agree on a timetable to evaluate the efficiency of the site, once launched a website, and a good idea to monitor its performance. So it’s good to take a deal with the customer to determine how often you will need to monitor site performance.
  • Assistance: Make sure you give your customers all your contacts to be easily contacted in case of need for further site developments or for technical support.

4. Final checks

Get money! I’m sure that you remember surely 😀.

via GIPHY

Conclusion

This list is not a final list for all the WordPress developers, but a useful resource not to make mistakes or to deliver incomplete jobs.

You may want to customize this list according to your works and create your own Check Template. You’ll see that will help you speed up and optimize the time in the launch phase, and to identify any problems before the site goes online.

Now it’s your time!
what do you think of this list? there are some basic controls to be added to this list? Write it in the comments 😉