Text over an image is the ultimate element because it covers a perfect section’s visual and textual aspects. It’s more effective to show a product’s photo with written information about its benefits. 

This article will show you how to add text over images in the Elementor page builder plugin.

Why Position Text Over Images

Text and images are the two primary components of every website. While each of them can be very effective on its own, combining them can skyrocket your results.

Here are the main reasons why to place text over images:

• Hero slider – Many websites’ hero sections feature sliders with a call-to-action button atop a background image.
• Emphasize critical points – writing about a service or product isn’t always enough. Displaying an image with relevant text can deliver a more explicit message.
• Image with hotspots – This is very useful for highlighting the advantages of a particular product. The hotspots will be strategically placed on the image, and hovering over them will expose relevant information.
• Efficient design – Occasionally, placing images next to or below the text can use valuable space on your website that will go to waste. Placing the reader over the image is a better practice for using the maximum available space.

Whether it is one of the reasons listed above or to better match your design needs, it’s beneficial to know how to place text over an image.

This article presents four different methods for displaying text over an image. The first two methods can be accomplished using the free version of Elementor, while the last two require Elementor Pro.

Let’s start with the first method by using the image widget.

Method #1: Display Text Over the Image Widget

This is my preferred method for positioning text over an image, especially when using the basic version of Elementor.

Although it requires some CSS code, it shouldn’t discourage you from trying it, mainly because I will provide it for you.

First, click the “Edit with Elementor” button to open the visual editor screen.

Then, drag the image widget from the left sidebar to your desired section on the right.

Choose your image under the Content tab and change the Caption field to Custom. Once changed, enter the custom text you want to display over the image.

You can also use the Style tab to change the size and font family, as well as add a background color to the caption.

When satisfied with how it looks, navigate to the Advanced tab and assign the textOverImage class to the widget.

Once you have updated the changes, open the customization screen and enter the Additional CSS tab.

Then, paste the CSS code below and click Publish:

.textOverImage figcaption {
position: absolute;
margin: 0;
width: 100%;
top: 50%;
transform: translateY(-50%);
}

The provided CSS will position the caption in the center of the image. You can always re-edit the widget if you want to change the font size, color, or other settings.

Assigning a class to the image widget is only necessary if you are not using Elementor Pro. However, if you have the paid version, expand the Custom CSS tab and assign the code to the selector figcaption instead.

We will use the text widget with a background image in the following method.

Method #2: Text Widget with a Background Image

In our previous posts, I showed you how to set a background color or image to any page in Elementor. This method will use techniques we learned in the other article to accomplish similar results.

To start, drag either the Text editor or the Heading widget to the desired section on the canvas on the right.

After entering your custom text, center it and customize its properties, such as size and style.

Then, click on the Advanced tab, expand the background tab, and select the image to display behind the text.

For better results, set the image position to center-center, with no repeat and size to cover.

Then, expand the Layout tab and increase the padding values until you’re satisfied with the results.

Please remember to check the mobile view to ensure the style is consistent across all devices. You may need to adjust some of the properties for a better fit.

Up to this point, we used the accessible version of Elementor to display text over an image. The next couple of methods will show you how to do it with Elementor Pro (or you can get it from us for only $4.99).

Method #3: Text Over the Gallery Widget

The Gallery widget is a great way to combine images and text. It’s very similar to the first method I showed you above; however, we don’t need to use CSS this time.

First, drag the Gallery widget to the canvas on the right, and select the image you want to display.

Enter your custom text as the image’s caption, and then click the Insert Gallery button.

The gallery widget defaults to four columns, allowing each item to occupy 25% of the entire section. Therefore, change the column number to one and the image size to full.

Then, expand the Overlay tab and change the title field to caption. Once changed, hover the mouse cursor over the image to ensure the text is displayed.

Next, move on to the Style tab, expand the Overlay tab, and enter the Hover options. Here you can change the overlay background color or remove it altogether.

Finally, expand the Content tab, and style the text to fit your design expectations. Moreover, change the hover animation to none. That will ensure the reader is always displayed, even when the image is not being hovered over.

The Portfolio and the Posts widgets are similar to the Gallery widget, and you can achieve similar results by selecting any of them.

Method #4: The Hotspot Widget

The hotspot is a very cool widget often used to highlight key points of a product or a store locator indicator.

By default, the hotspot widget includes one hotspot in the middle of the image, but you can change its position and add as many as necessary.

After selecting the image, expand the Hotspot tab and change the properties of the first item.

Then, move on to the Position tab and adjust the vertically and horizontally offset values to the correct position.

You can then add additional text items to be displayed over the image and assign different values to each of them.

Once added, move on to the Tooltip tab if you want to change the tooltip’s position and trigger condition.

Of course, similar to any other Elementor widget, you can change any aspect of the widget’s look from under the Style tab.

When satisfied with the result, please save the changes and test them on the live site.

Conclusion

Showing text over images is an excellent feature every website owner should be familiar with. This article showed you how to position text over an image using Elementor in four ways.

Leave us a comment and tell us which of the methods above you used to achieve this task.

The post How to Add Text Over an Image in Elementor in Four Different Ways appeared first on PluginsForWP.

Our recent post showed you how to bypass the default behavior and download files upon clicking. However, are you looking to link an image to another page or an external website instead? It’s possible.

In this tutorial, you’ll learn how to link to an image in WordPress.

Why Link an Image

Images are drawing more attention than plain text. Therefore, attaching a link to an image can lead to more people clicking on it and reaching the destination.

Linking your website’s logo to your homepage is an excellent example of why you should know how to link an image. When doing so, your site visitors will have quick access to your website’s homepage, regardless of whatever page they’re on.

Another example is that many landing pages display their buy now button with an image format to increase their click-through rate and capture more sales.

Although you can create button elements and style them with CSS, many marketers still prefer to use images for better visual appearance.

We, for example, are using images in our sidebar to promote our Unlimited Download plans. Clicking on the sidebar’s image will navigate you to our membership page, where you can get more information about it.

Learning how to link an image is a must-have skill every web owner will need to use at some point.

In the next section, you’ll know how to link an image in WordPress.

How to Link an Image in WordPress

Wrapping an image in an <a> tag is a simple process regardless of which WordPress editor you use.

Once you have saved the change, please revisit the page and click on the image to ensure you’re being redirected to the link.

If, for some reason, you can’t use the visual editor but only the code view, read the following section.

Wrap an Image in a Link Tag

The visual editor is the simplest way to link an image in WordPress. However, it is not the only way; you should know how to do it when using the code editor.

Inside the code editor, look for the image you want to link, and position your selector to the left of the <img> tag.

If you wish to link the image to a different page or use it as an anchor, you’ll need to wrap it inside an <a> tag.

Make sure to add the closing </a> at the end of the image tag so that it won’t include the content after it as part of the link. The structure will look like that:

<a href="link-goes-here"><img></a>

The link in the href attribute of the <a> tag is the destination URL. You can also add the target="_blank" attribute if you want to open the link in a new window.

Once done, update the page and click on the image to verify you’re being redirected to the desired URL.

Bonus: Link an Image in Elementor

If you’re using Elementor as your page builder plugin, you’ll find that linking an image is a simple process similar to the default WordPress way.

First, add the image widget from the left sidebar to the canvas on the right and choose your desired image from your media library.

Then, change the link field to Custom URL and enter the link address.

If you want to add additional attributes to the link tag or open it in a new window, click on the setting icon and check the relevant boxes.

When done, update the changes and revisit the live site to ensure everything works as expected.

Conclusion

This article taught you how to link an image using the WordPress Gutenberg editor, the classic editor, or the Elementor page builder plugin.

Leave us a comment and tell us which one of the methods you chose to achieve this task.

The post How to Easily Link Images in WordPress appeared first on PluginsForWP.

A beautiful website won’t only be more enjoyable to visit, but it will convert much better than a standard one.

In this article, I’ll show you how to set a background image or color to any page in Elementor.

Different Ways to Set the Background

There are two different ways to set a background image or color to a page using the Elementor page builder.

First, we will assign the desired style to the entire website, and second, we will set the background to the <body> tag of a specific page.

If you set a background color or image globally to the entire website, it can still be overwritten by settings applied on a specific page.

If you’re looking for different sources for high-quality images, read how to add images to the WordPress header article to get the complete list.

How to Set a Background Image or Color with Elementor

Setting up the background is easy, and you can do it from inside the Elementor visual editor.

As mentioned above, there are two ways to set up the background image. First, let’s start by assigning the appearance or color to a specific page.

Set background for specific pages

To set the background to a specific page, click on edit with Elementor and click on the settings icon in the bottom left corner.

Then, move to the Style tab and select the background type you want, classic or gradient.

If you choose the classic type, you’ll be able to set a solid color or an image that will cover the entire page.

After choosing a background image, options related to the image settings will be added, such as position, size, etc.

However, if you choose the gradient option, you’ll assign two different colors that will blend.

When you’re happy with the results, save the changes.

This method will only affect the specific page you’re editing and not any other page.

If you want to set up a background image or color for all the pages at once, follow the steps below.

Set background to the entire website

To set a background pattern to the body tag of the entire website, one that will be applied to all the pages, follow the steps below.

Step #1: Open Elementor visual editor

First, open the Elementor screen of any page. Then, click on the burger menu icon from the top left corner to open the global site settings.

Then, click on the Site Settings option.

Inside the global site settings options, navigate to the Background tab.

Step #2: Choose the background type

Choose between a classic (solid color or image) to the gradient option inside the background tab.

If you choose the classic option, set up a solid color using the pallet or upload a photo to the library.

Alternatively, you can also use a color HEX code. Read our how-to-change link color in the WordPress article to learn how to get the hex code.

However, if you choose the gradient option, set two different colors that will blend.

When done, make sure to save the changes.

Step #3: Test and verify

Once saved, navigate to a different page and verify that the new background also appears.

Related Articles

• Make a transparent header with Elementor.
• How to remove page title with Elementor.
• Create a user registration form using Elementor.
• Create timeline content with Elementor.

Conclusion

This tutorial taught you how to set a background image to a specific page or the entire website with Elementor.

Leave us a comment and tell us which method you used and where you got your images.

The post How to Set a Background Image or Color to Any Page in Elementor appeared first on PluginsForWP.

That is correct. A beautiful photo can deliver the right message better than just plain text.

This article will show you how to add a header image in WordPress.

Why Adding an Image to the Header

In most cases, there are two main reasons to set a header image (or a hero section image):

• The first reason is to grab the visitors’ attention.
• The second reason is to encourage them to act.

A good image can differentiate between a low rate converting website and a good one.

Take a look at the SnowboardAddiction website, for example. The hero section is just a big image with a call to action button at the bottom.

When you land on their page, you know exactly what to click on, there is a prominent call to action button, and you better jump into it before it’s over.

Now that you know why images are crucial for your website, I would like to show you where to find them.

Images for WordPress Header

To use any image for any part of your website, the image MUST be royalty-free and not copywriter protected.

Royalty-free images mean that you have or buy the rights to use the photos.

Searching for the right image and finding it on Google images does not give you the right to use it. Using the pictures without proper permission exposes yourself to getting sued by their owner, which should be avoided.

However, it would help if you didn’t lose hope. Many royalty-free images websites will let you download beautiful high-resolution quality images for totally free or for a small fee.

Royalty-free images (free)

Here is an excellent list of websites where you can download images for your WordPress website.

• Pexels
• Pixabay
• Unsplash
• Burst
• Freeimages
• Kaboom
• Canva
• Gettyimages
• Flickr

To download the header’s image. Navigate to the Pexels website and search for your desired image. In our example, I’ll look for snow.

Once searched, you’ll have many photos to choose from related to the subject. Navigate between them all and enter the image you would like to display on your website.

Last, click on the arrow next to the download button to choose the correct dimension.

Please note that any size larger than medium will use many sources and slow down your website’s loading speed. Therefore, the recommended size for a header is medium.

If you can’t find the right image and look for more options, check the other websites listed below.

Royalty-free images (paid)

Here is an excellent list of websites where you can download images for your WordPress website for a small fee.

• Istock
• Shutterstock
• Storyblocks
• Adobe
• 123rf

Downloading images from paid websites is a similar process to the one above.

Please search for your desired image, pay, and download it to your computer.

Shutterstock is running a great promotion now where you can get ten images for totally free.

Once you have downloaded the right image to your website’s header, move forward and add it to its header.

Add an Image to Header in WordPress

After we downloaded the right image for our website, it’s a good time to upload it to our WordPress website and add it to the header.

In this section, I’ll show you how to add the image to the header using a page builder like Elementor and also straight into the header.php file.

Method #1: Add an image using a page builder

You would be in luck if you built your website with a page builder such as Elementor.

Elementor or Divi are both super easy to use, and they prevent you from dealing with core files.

Add images in Elementor

If you are using Elementor as your page builder, follow the steps below.

Navigate to your header template under the Templates tab and click on Edit With Elementor.

Inside the editor screen, drag the image widget to the desired location and upload the royalty-free image you just downloaded earlier.

After selecting the image, make sure to style the widget as you wish and click publish when you have done.

Add images in Divi

To add an image to a header with Divi, follow the steps below.

Edit your header template by navigating to Divi -> Theme Builder -> Global header.

Then, add an image widget and select your desired image.

Make sure to style the widget and click save when done.

Method #2: Add an image to the Header.php file

This section will show you how to add a photo to your header using the header.php file.

I highly recommend you backup your website before modifying the files and applying the changes to the child theme.

From your WordPress dashboard, navigate to Appearance -> Theme Editor and click on the header.php file from the list on the right.

You’ll need to decide on the location where you would like to display the image.

Match the HTML element class of the DOM to the one inside the PHP file.

For example, if you would like to add an image just before the inner section of the header, inspect the DOM element, and find the desired class.

In the photo below, we would like to add an image just before the header-inner inner section.

After finding a suitable class, we will go back and look for it in the header.php file and paste the code below:

<img src="image-url-goes-here">

Make sure to replace the ‘image-url-goes-here’ text with the actual URL of the image.

Then, save the changes and revisit your website to ensure the image is where you intended it to be.

Method #3: Add an image with the CSS rule

Often we would like to add a background image to a section and not count it as a stand-alone element.

We can add a background image to any element or section as soon as we know the CSS class of the component.

The first step is to inspect the desired element and find its class.

Right-click on any element and choose Inspect.

Look for the element class and write it down or copy it to the clipboard. We will need it in a second.

Then, click on Customize from the Admin menu bar.

Then, navigate to the Custom CSS option.

Here, you will need to paste the code below inside the Custom CSS screen:

.class-goes-here {
	background-image: url('image-url');
	background-size: cover;
	background-position: center;
}

Make sure to replace the class-goes-here with the actual class of the element and the ‘image-url’ with the exact URL of the image.

The final result should look like that:

Once adjusting the code, click publish and revisit your website to ensure it looks as expected.

Conclusion

In this article, you learned how to add an image to your website’s header in three different ways.

Leave us a comment and know which method you used to achieve this task.

The post How to Add a Header Image in WordPress – The Ultimate Guide appeared first on PluginsForWP.