In this post, I will show you how to create a mailto link in HTML. This is generally known as an email link. If someone clicks the email link, it will take them to their default email client such as Gmail, Yahoo, Microsoft/Outlook, etc. And some of the fields such as “To, Subject, etc” will be pre-populated. This is what you’re going to build in this post. Also, I will show you some advanced customization options. Let’s get started. Create a mailto link in HTML To create a mailto link use the following HTML code: These two lines create links […]
Read More →
In this post, you will see how to create the hero banner image only using HTML & CSS. The hero banner image is generally known as the “Hero Section” on a web page. It’s normally the first section of a web page. And this hero section generally consists of a background image and a background overlay color, and on top of that, it contains a heading, paragraph & CTA (call to action). End of this post, I will give you the full source code & show you the live preview. Let’s see how we can create a hero section as […]
Read More →In this post, I will show you how to create a multi-page website in HTML. End of it, I will also give you the full source code to download. You will also learn how to upload this static HTML website to a live domain & hosting. As we go through, you will also learn some basic CSS to style the HTML web pages. Last but not least, you will also learn how to make it mobile-responsive. See the live preview that we’re going to build in this post. Let’s get started. How to create a multi-page website in HTML? To […]
Read More →
If the Elementor editor not loading on your website, this guideline will help you to fix the issue in just 3 minutes or so. I found hundreds of advice on the internet when I first time faced this issue. I was working on a client’s website and when I tried to edit a page with Elementor page builder, that kept loading sine-die & never finishes loading. After a sudden period, it was showing a message “There’s is a problem loading Elementor? Please enable safe mode to troubleshoot the problem.” I enabled the safe mode but it did not solve the […]
Read More →By default, your website sends emails from “[email protected].” To change this “Sender Email ID” or the “From Field” address on WordPress, you need to update the “wp_mail()” function, wp_mail_from (hook) & wp_mail_from_name (hook). However, you don’t need to be a guru to follow along with me. In this post, I will show you how to change the default sender email address & name easily. There are a couple of ways to do it. However, In this example, I will not use any plugin to do that. Instead, I will edit the functions.php in the theme. How to change the sender’s […]
Read More →
This will show you how to activate the “Maintenance” mode & create a coming soon page in Elementor. I will also give you two different downloadable templates to import into your website. Before I dive in, let’s see the two “Coming Soon” pages below. How to activate the “Coming Soon” mode in Elementor? On your WordPress admin dashboard, navigate to “Elementor – Tools – Maintenance Mode” And make the following changes: Option Value Choose Mode Coming Soon Who Can Access Custom Roles Administrator Choose Template Select a template And save your changes. However, if you do not already have an […]
Read More →
You can create a transparent header in the free version of Elementor in a different way than this post. However, in this post, I will show you how to make an Elementor transparent header in the premium version. Also, I will give you downloadable headers (JSON files) so you can import them to your website and make necessary edits. The final two products will look like the following screenshots. Let’s get started. After you create a custom header in your “Theme Builder” follow the steps below. How to create Elementor transparent header? In your WordPress admin dashboard, navigate to “Templates […]
Read More →
In Divi, to align the button to the bottom of the column, go to the “Row Settings” as you see below. Now go to each column’s settings, and the click on “Advanced” tab & then “Custom CSS.” And write the following two lines of CSS to the “Main Element” of each column. As mentioned, you have to do this for all your columns. In my example, I have 3 columns and did the same for all 3 columns. Only with the above two lines of CSS, the columns look like the screenshot below. Anyways, you are done with the column […]
Read More →By default columns in the Divi theme, starts from the top. In this post, I will show you how to align columns vertically centered & also how to align them from the bottom. How to align columns vertically center in Divi? To align columns vertically center in Divi, go to the “Row Settings” as you see in the screenshot below. Now click on the “Advanced” tab. Click on “Custom CSS” as you see below. Now write the following two lines of CSS in the “Main Element.” This will make all the columns vertically centered in the same row. With these […]
Read More →Divi uses Flexbox, so it’s very easy to equalize columns. To create equal-height columns in the Divi theme, click “Row Settings” as shown in the screenshot below. Next, click on the “Design” tab, as you can see below. Then click on the “Sizing” option, as shown in the below screenshot. Finally, enable the “Equalize Column Heights” as shown below. After you turned on, your columns will be equal in height. My example looks like the following screenshot. That’s it! And don’t forget to save the changes. If you like video instructions, watch the video below: A few Divi-related posts that […]
Read More →