Gutenberg is the brand new WordPress editor which rolled out in the latest WordPress 5.0 update, replacing the previous “Classic Editor”. Even though there was a lot of fuss and worry about Gutenberg, it turned out to be pretty awesome for me. But using some parts of Gutenberg is still a mystery to some users. In this blog, I am going to cover how to add a link to an image in Gutenberg and make sure that it opens up the link in a new tab “on click”.
It is extremely important to know how to add a link to an image. If you are into affiliate marketing, you would definitely want to embed a nice-looking banner of your affiliate product in your blog. Also make sure that it opens up the link in a new tab when someone clicks on it because obviously, you would not want the visitor to leave your site completely!
Another thing I would like to add. Building a website using the default WordPress Gutenberg editor is extremely good for SEO. Pages or blogs made with Gutenberg get great Google page speed insights scores. So if you are looking to make a website then it might be better for you to use a ready-made Gutenberg theme. Using a ready-made theme will save your time, you will just need to replace the texts and images with your own. You can check out this impressive Gutenberg theme called Carrino – An Exciting Gutenberg Blog Theme. Also if you need excellent WordPress hosting then you can check out WP Engine, it is very fast and reliable.
Step 1: Add the image
Hover over the block above which you want to add the image. A small plus icon will appear. Click on the plus icon.
Step 2: Choose the image block
After you have clicked on the plus icon, you will be provided with several options. From that option choose the image block.
Step 3: Upload the image from your computer
Step 4: Click on the Image
After the image is uploaded, please click on the image to select it. This would provide you with options.
Step 5: Click on the dropdown “Link To”
After you have click on the image, you will get several options/settings for this block in the right hand side. After you have scrolled down a little, you will see an option or drop-down called “Link To”. Click on that.
Step 6: Choose “Custom URL”
From the dropdown, choose the option called “custom URL”. After choosing this option from the drop-down, you will see more fields appear.
Step 7: Insert your URL/Link
Insert your link in the following field as shown below. Also make sure to toggle on the button “Open in New Tab”, this would make sure that the link opens up in a new tab, keeping the visitor in your website.
After you have added the link and toggled the following option. Your interface should look like the following below.
Please make sure to update or save the changes after you are done for changes to take effect. Also clear your cache for good measure.
If you are still confused and need some help, then please CLICK HERE to contact me now.
| Recommended WordPress Resource | Benefits of using it |
|---|---|
| Bluehost | Bluehost is the best WordPress hosting in the market right now. Not only it provides superior performance but also easy to get started for a newbie with a fair price. They provide effective Managed WordPress hosting which will allow you to install WordPress in seconds, and easily log in to your WordPress from your Bluehost account. Regular full website backups depending on the package you use, 24/7 support. |
| The WordPress Security Handbook: Protecting Your Site from Attacks | The WordPress Security Handbook is a comprehensive guide that covers all aspects of securing a WordPress site. With 30 chapters, it covers everything from an introduction to WordPress security, to understand the different threats that can affect your site, to implementing best practices for managing user accounts and passwords. |
| Elementor Pro | The most powerful, easiest to use, and lightweight WordPress page builder in the market. Currently, it is the number 1 WordPress page builder. Used in theme demos in the ThemeForest themes. |
| Element Pack | This is a useful Elementor addon plugin that adds around 60 addon elements to your Elementor page builder. Useful elements such as the Instagram gallery, table, document viewer, iframe, and much more. |
| WP Engine | Reliable WordPress hosting. Super fast, regular automatic backups, built-in CDN for faster content delivery, top-notch security, and more! |
| Jupiter Multipurpose WordPress theme for Elementor | Import among many 450 ready-made websites made with Elementor and customize them according to your needs. Advanced WooCommerce checkout options optimized for better conversions. |
| WP Rocket | A magical WordPress plugin that will reduce the load time of your website to less than a second. It is an all-in-one speed optimization tool. It will also improve your Google Page Insights score. As the pages load quicker your website bounce rate will decrease, and average pages on time will increase. Eventually, you will get more traffic. |
| Slider Revolution | The most powerful and advanced WordPress slider plugin ever. Over 200+ ready eye candy slider templates to wow your website visitors. Advanced animations, parallax effects, and interactive features. |
| Duplicator Pro | This plugin will save you from disaster. It keeps regular backups of your WordPress sites. In case you break your site you can easily recover it. Using this plugin you can also easily migrate your WordPress sites. It can also keep cloud backups such as Dropbox, Google Drive, One Drive, etc. |
| Themeforest | Buy any type of beautiful WordPress theme from here such as blogging, WooCommerce, Real Estate, etc. Ability to import any demo site. Chose any type of page builder such as Elementor, WP Bakery, Muffin builder, etc. |
| Envira Gallery | Best WordPress image and video gallery plugin. Easy to use with powerful and advanced features. If your WordPress page builder does not have a good enough gallery element then check this one out! – Completely responsive on mobile – Social Media Integration – Slideshow & Fullscreen – Drag & Drop Builder |
| Ithemes Security Pro | It is a powerful WordPress security plugin. It will protect your website from bots trying to hack into your site through a brute force attack. It can also scan your website and remove malware. |
| Getty Images | Get premium stock images from here. Using high-quality and premium stock images on your site will make your site look professional. Visitors will be impressed and quickly turn into paying customers. |
| WP Forms | One of the most popular WordPress form plugins ever. Easily build advanced contact, payment, donation, survey, and newsletter forms with zero coding. Embed your forms on posts/pages using a shortcode. Built-in Recaptcha to prevent spam. The information of people submitting the form will be stored as leads directly on the website. |
| Namecheap | Buy any type of domain name at a very low price. The renewal rates are also reasonable. I use namecheap domain names on all of my websites. |