Build A Website Under 5 Mins. – Best Way To Make Money During COVID19

Majority of the people in the world are affected with corona virus pandemic. Well, it’s not yet end of your career, you can still make money by transitioning to digital.

How? There’s a lot of ways to generate income through website:

  • Affiliate Marketing – normally you can earn money by comission. A lot of merchant who are willing to pay percentage for every sales you put into the company. Let’s say you sign up as an affiliate marketer at Amazon.  You should able to get a unique url in order to market their website and if someone buy a product on Amazon using your link then you can earn a kickback from them.
  • B2B or B2c Selling – another way of making money is selling products and services to your website itself.
  • Adsense – You can start writing blogs related to your hobby and sign up to Google Adsense . If someone clicks an ads on your website, you will get a $$ depending on the geographical location of your audience.

So what is a website?

A website is generally use to find your brand, business online from search engines like Google, Yahoo (you name it!). Some business-savvy persons have already digital version of their brand to keep their online presence.

In this guide, I will walk you through how to create a website in just a few minutes. You don’t need to be a web developer, just follow the steps below :

1. Choose a domain

Domain is your official identity to get found on Google e.g bookwormhead.com. In order to own your preferred domain, you need to buy this from a legit domain providers and this requires minimal yearly payment.

Sign up to godaddy.com and choose a domain

 

2. Choose a host

In this case, I encourage to use Siteground for 24/7 support and no hidden fee services e.g:

  • You can have a secured website (https:) for FREE
  • You can setup your professional email address for FREE (info@mywebsite.com)
  • They have complimentary monthly backup
  • There tools to speed up your website is FREE to use.

The above features need extra fee in Godaddy that’s why I recommend to separate your hosting Provider.

If you’re ready to use Siteground, then simply signup here!

 

how to create a website

 

Note: After you finish the registration, make sure you point the nameserver of your domain to Siteground. Kindly check the above video for detailed guide.

 

 

3. Install A CMS Platform

Most of the hosting provider has already a built-in WordPress installation. Simply go to WordPress section, click the install and manage then choose a domain where you want to install the WordPress file.

4. Bonus: Create Your Professional Email Address

What I really like about Siteground is it doesn’t require you additional fee to create an professional email address. In order to do that, simply go to Email Section > Actions > Fill in your preferred email address and password then hit the Create orange button.

If you want to redirect your email address e.g info@example.com to your gmail, you can use POP3 and SMTP Port. I have wrote a tutorial on How To Forward Domain Email To Gmail Using Forwarding | SMTP | POP3

how to create email address in siteground

How To Change The Toggle Icon In Divi and Extra By Changing The Default Unicode

Toggle is one of the useful module in Divi for frequently asked content and other informative writeups but sometimes, the default (+plus) icon messed up your design. In this guide, I will walk you through how to change that according to your preferred taste

So there’s two options to do that:

For custom image, click the shop image

Using Unicode 
Sample for unicode

Magic Formula!

1.If you don’t have a toggle yet then simply insert a toggle module by clicking the grey(+) icon then search the module itself “toggle”. Otherwise, you can skip the process.
how to add toggle in divi extra

 

1.Open the Toggle Module > Go to Advanced Tab > Custom CSS >  Look for Toggle icon section.

change icon divi toggle module

 

So these are the default unicode of Divi and Extra themes. Simply use your preferred code to replace the default + icon.

divi unicode

Source: dividezigns.com

divi default unicode

 

 

How To Make Your Google Adsense Responsive In WordPress

Recently, I had an issue with google Adsense on how to make it responsive in all devices. Since I am starting to earn money on Adsense, I don’t want to remove it so dig in and luckily found the documentation from Google Adsense resource.

This tutorial basically cover how I interprent the tutorial provided by Google Adsense. I believed it will work on all ad units including display ads, in feed ads, in-article ads and even in link ads. 

Step 1: Insert a Custom class on your adsense script

Insert a custom class after the adsbygoogle class so we can overwrite the style of our ads. Kindly check the before and after below to see the difference.

BEFORE:


< ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-4299086769596754" data-ad-slot="6478502035">

AFTER:

< script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
< ins class="adsbygoogle responsive-adbanner" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-4299086769596754" data-full-width-responsive="true" data-ad-slot="6478502035">

< script>
(adsbygoogle = window.adsbygoogle || []).push({});

Now, copy/paste the code on theme options or style.css. Basically, this code will tell the browser to adjust the width of the adsense once it reach the declared viewport. The other css code generally normalize the styling and removing any scrolling styles on your adsense.

@media(max-width:23.436em){
.adsbygoogle.responsive-adbanner {
width:22em;
}}
@media(max-width:64.436em){
.adsbygoogle.responsive-adbanner {
width:63em;
}}
.adsbygoogle.responsive-adbanner {
width:95%;
overflow: hidden;
padding:0;
margin: 2rem 0;
}

If you don’t want to use custom css, adding a inline-style on the script will work but for best practices, it’s highly recommended to keep your code DRY (Don’t Repeat Yourself).

How To Put A Divi Module Inside The Divi Tab Layout

Putting a Divi module inside the tab menu is not available by default in Divi but in this blog, I will reveal the trick for you.

Add a tab module

add tab module in Divi

 

Create a sample post. As an example, I would like to put a blurb module inside the tab module. Let’s do the magic!

Configure your blurb and finalize the elements. Once done, it’s time to get the shortcode.

1. Hover the Builder button > right click to inspect the elements and remove the et_pb_hidden inside the class name.
trick to get the divi shortcode

2.
step 2 in getting the divi module shortcode

As an example, here’s the final shortcode for your blurb.

module

 

Result:

w

Menu 1

 

Now, you can put that shortcode on your tab module. Feel free to add classes to style your tab module or tab container e.g using grid classes inside the blurb module

 

 

How Create Mansory Divi Layout With Text Inside The Image Using CSS Grid

To have this kind of design, we will need to use custom classes and grid.

Please declare the grid-image custom class in the menu and add a class in the row called grid-container then duplicate the container two times to have 3 column image. Here’s the quick screen recording.

Please go to your WordPress Dashboard > Divi > Theme Options > Custom CSS and add the following:  Feel fre to change the font-size according to your liking.

.grid-container {
display: grid;
grid-template-columns: repeat(3,33%);
}

.grid-image p {
margin-top: -7em;
padding: 2%;
color: white;
font-size: .9em;
line-height: 1em;
}

 

How To Create Mansory Design In Divi Using Custom CSS Grid | WP

If you think the Divi columns features doesn’t support what you want in creating a mansonry grid layout either for your gallery, portfolio, images. This CSS grid will do the trick for you.

 

 

Basically, we will need to use 1 column and push all the elements vertically or horizontally depending of the design you wanted to create. In this example, we will create this kind of layout.

 

1.Open your page or post and create a one column row

divi column

 

2.Open the Row Settings by clicking the gear icon > Advanced tab > add a class name. As an example I use mygrid_column

divi row settings

 

3.Add a class on your inner module, As an example, I use lender_img

module settings advanced tab

 

Go to WordPress dashboard > Divi > Theme Customizer > Custom CSS and add the following code

div.et_pb_row.mygrid_column>.et_pb_column {
display: grid;
grid-template-columns: repeat(4,1fr);
align-self: center;
}

If you want to change the number of grids in mobile version, simply add this media query. Let’s say if viewed in mobile, images will turn into columns so that will be

@media (max-width: 414px) {div.et_pb_row.mygrid_column>.et_pb_column {
display: grid;
grid-template-columns: repeat(3,1fr);
align-self: center;
}}

Preview:mansory grid css sample divi