Categories
Websites

OG Automotive Services

The OG Automotive Services WordPress redesign process:

The design team at Australian Outdoor Living has recently launched the new OG Automotive Services WordPress Website Redesign. This new website is a lot more modern. We made sure that the flow of the content are clearer and the call to actions are all consistent.

With this design we focused on mobile first, but also making sure that the user experience on desktop is still good.

We made use of the page builder called Elementor which speeds up the development process and from past experience the page builders creates bulky pages which slows it down, but not with Elementor. Elementor is lightweight, user friendly and SEO friendly.

I made use of the following technology:

PHP, HTML, WordPress, Elementor and jQuery.

Take a look at the new OG Automotive Services WordPress Website here.

Categories
Websites

Australian Outdoor Living WordPress Website Redesign

The Australian Outdoor Living WordPress redesign process:

The design team at Australian Outdoor Living has recently launched the new Australian Outdoor Living WordPress Website Redesign. This new website is a lot more modern and we focused a lot more on a User’s Experience learning from the previous website’s data. While going through the design process we got a lot of feedback from various users on the new design before we started the building process. We made sure that the flow of the content are a lot clearer and the call to actions are all consistent.

With this design we focused on mobile first, it was designed for mobile first and that is how I have built the website too.

Another factor was to make the creation and updating of content across multiple pages easier and faster. The technology I used made it possible to display true geo content per state which will help our users see the content specific to their state, not only users, but Google too.

I have implemented local business and product schema so that Google can understand our content better and help the website rank in its specific state.

I made use of the following technology:

PHP, HTML, SASS, Bootstrap 4, WordPress, geoip2 and jQuery.

Take a look at the new Australian Outdoor Living WordPress Website here.

Categories
Websites

Suntuf Website – WordPress Development

Suntuf was a project I worked on for Myadd in Adelaide. Suntuf is one of Myadd’s clients. Suntuf was looking for a website where they can easily display all their products with galleries and pdf downloads. This website also features their calculator.

In this project I used:

In this project, I used WordPress, WooCommerce, PHP, Underscores starter theme, Advanced Custom FieldsjQuery, Bootstrap, and SASS.

You can take a look at the live site here.

Categories
Coding

Create a cookie based Newsletter Sign-Up with jQuery and Gravity Forms

In this article, I will show you how I’ve created a fancy looking newsletter sign-up form which slides from the bottom right of a web page once a user scrolls halfway down the page.

I am sure there are many plugins available for WordPress but it’s always a good idea to code something of your own. So let’s see how it actually works!

The HTML

We will have a div container which is going to have a fixed position. Once a user reaches halfway down the page the sliding form will slide up using jQuery. Now let’s see how it is done.

<div class="slideout-form">
   <button class="close" type="button">
      <span aria-hidden="true">×</span>
   </button>
   <div class="slideout-form-header">
      <h3>Sign up to Newsletter</h3>
   </div>
   <div class="slideout-form-body">
      //Gravity Forms Shortcode will go here
   </div>
</div>

The CSS (SASS)

We have “slideout-form-header” and “slideout-form-body” divs inside the “slideout-form” div which is positioned fixed. The “slideout-form-body” div contains form the Gravity Forms shortcode, and the “button” will close the slider and drop a cookie on a users browser.

/*Slide out form*/
body{
   position:relative;
}
.slideout-form {
    position:fixed;
    right:0;
    bottom:0;
    display:none;
    text-align:left;
    background:#ffffff;
    color:#333333;
    padding:0;
    -webkit-border-top-left-radius: 0;
    -webkit-border-top-right-radius: 0;
    -moz-border-radius-topleft: 0;
    -moz-border-radius-topright: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-bottom:0;
    border-top:1px solid #333333;
    border-left:1px solid #333333;
    border-right:1px solid #333333;
    z-index:999;
    .slideoutform-header {        
        padding:15px 30px;
        h3 {
            padding:0;
            margin:0 0 15px 0;
            color:#333333;

        }
    }
    .close{
        right:10px;
        top:0;
        color:#ccc;
        font-size:30px;
        opacity:0.6;
        &:hover{
            opacity:1;
        }
    }    
}

The jQuery (JavaScript)

In the javascript below, you will notice some cookie script and also the slider effects.

Cookies are data, stored in small text files, on your computer. Cookies were invented to solve the problem “how to remember information about the user”:

  1. When a user visits a web page, his name can be stored in a cookie.
  2. Next time the user visits the page, the cookie “remembers” his name.
    Cookies are saved in name-value pairs like (username = John Doe).

In this example, the cookie will be dropped if a user signs up or if the user clicks on the close button. This will make sure the user doesn’t see the slider of x amount of days, depending on how long you set the cookie for.

In the example, the cookie will expire in 30 days which will then slide up again once the user goes to your site again.

//Slider with Form Script

//Create the cookie
function setCookie(key, value) {
   var expires = new Date();
   expires.setTime(expires.getTime() + (value * 24 * 60 * 60 * 1000));
   document.cookie = key + '=' + value + ';expires=' + expires.toUTCString() + "; path=/";
}

//Get the cookie if it exists
function getCookie(key) {
   var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
   return keyValue ? keyValue[2] : null;
}

//Detect the user's scrolling on the page
$(window).scroll(function () {
   if ($(window).scrollTop() > $('body').height() / 2) {
     
      //Do a check if a cookie exists
      if (getCookie('slideHideGF')) {
         $('.slideout-form').hide();
      } else {
         $('.slideout-form').slideDown();
      }
   } else {
      if (getCookie('slideHideGF')) {
         $('.slideout-form').hide();
      } else {
         $('.slideout-form').slideUp();
      }
   }
});

//If cookie exists hide slider
if (getCookie('slideHideGF')) {
   $('.slideout-form').hide();
}
//Set the cookie on the close button for x amount of days, below it's set to 30
$('.slideout-form .close').on('click', function () {
   setCookie('slideHideGF', 30);
   $('.slideout-form').hide();
});

//Set the cookie on the submit button for x amount of days, below it's set to 30
$('.slideout-form .gform_button').on('click', function () {
   setCookie('slideHideGF', 30);
   $('.slideout-form').hide();
});

Gravity Forms Shortcode

All that is left now is to insert your shortcode for Gravity Forms. If you are not using Gravity Forms you can use any other form builders shortcode.

<?php 
   echo do_shortcode( '[gravityform id="your form id" title="false" description="false"]' );
?>

Download

You can download the code and play around with it, please click on the link.  jQuery Slide-Up with Form

That is it

The code above is purely an example and you may need to update the styling so that it works well with your theme. If you need any help with this or if you would like me to help you implement this on your website, feel free to contact me.

Categories
Websites

Lightfactory.online

Lightfactory.online was a project I worked on for Myadd in Adelaide. Lightfactory.online is one of Myadd’s clients. Lightfactory.online was looking for a site where they could easily upload and sell their products. Lightfactory.online required a customised homepage where new products could be featured and new events.

In this project I used:

In this project, I used WordPress, WooCommerce, PHP, Underscores starter theme, Advanced Custom FieldsjQuery, Bootstrap, and SASS.

You can take a look at the live site here.

Categories
Websites

Mission homes

I was asked by Uniting Communities to build a website for one of the Mission Homes for Children at Magill. Uniting communities required a private galllery section where people to ask to join to view these galleries. The people that would visit this site are the ones who stayed at the Mission Home.

In this project I used:

PhotoshopWordPress, PHP, Underscores starter theme, Advanced Custom Fields, jQuery, Bootstrap and SASS.

You can take a look at the live site here.

Categories
Websites

No Shock Energy – Website Redesign

I was asked by Uniting Communities for a website redesign. Uniting communities required a more business-like website design, which will also allow their users to easily navigate through the site, subscribe to newsletters and share articles on social media.

In this project I used PhotoshopWordPress, PHP, Underscores starter theme, Advanced Custom Fields, jQuery, Bootstrap and SASS.

You can take a look at the live site here.

Categories
Websites

AFL Masters

AFL Masters was a project I worked on for Myadd in Adelaide. AFL Masters is one of Myadd’s clients. AFL Masters was looking for a site where they could easily show upcoming event dates, have the ability to add footy clubs and display their details. Post latest news articles and more.

In this project, I used WordPress, PHP, Underscores starter theme, Advanced Custom FieldsjQuery, Bootstrap, and SASS.

You can take a look at the live site here.

Categories
Websites

Agix Linux

Agix Linux is a project I did for Paradox Marketing in Adelaide. Agix Linux is a client of Paradox Marketing. The client needed a new website which would let them show more content and have a space for Whitepaper downloads and ads.

In this project, I used WordPress, PHP, jQuery, and CSS.

You can take a look at the live site here.

Categories
Websites

Tech-Dry

Tech-Dry was a project I have done for Myadd in Adelaide. Tech-Dry is one of Myadd’s clients. Tech-Dry are the trusted professionals for Salt Damp treatments throughout South Australia.

In this project, I used WordPress, PHP, Underscores starter theme, Advanced Custom FieldsjQuery, Bootstrap, and SASS.

You can take a look at the live site here.