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.

Responsive design is essential, and one of the most effective ways to achieve it is by using custom CSS breakpoints.

In this article, I will guide you through adding custom CSS breakpoints in WordPress and Elementor, helping you tailor your website’s appearance specifically for tablets, smartphones, and other screen sizes.

This method is beneficial when your theme or page builder doesn’t provide built-in options to adjust certain elements based on screen size.

Whether you want to change the color of your page titles, style links differently on mobile, or customize any other part of your site, adding your own CSS breakpoints gives you complete control.

Understanding Breakpoints and Responsive Design

Before diving into the practical steps, let’s clarify what breakpoints are and why they matter. In responsive web design, breakpoints refer to specific screen widths at which the layout or styling of a website changes to better suit the device. Standard breakpoints include widths for desktops, tablets, and smartphones.

Many WordPress themes and page builders, such as Elementor and Divi, provide default breakpoints and responsive controls. For example, you can adjust the logo, font, or margins for tablets or mobile phones. However, these built-in options can be limited, especially if you want to customize elements that aren’t directly accessible through the theme’s settings.

This is where custom CSS breakpoints come in handy. By writing your own CSS rules within media queries, you can target any screen size and style any element exactly how you want.

How to Add Custom CSS Breakpoints in WordPress

Let’s start with a simple example of a WordPress website. Imagine you want to change the color of your page title only on tablets or smaller devices, but your theme doesn’t offer a customization option for the title color at these screen sizes.

Here’s the process:

1. Open the Appearance Settings: In your WordPress dashboard, navigate to Appearance> Customize, where you can find various theme customization options.
2. Check Available Responsive Controls: Some themes allow you to change the size of body text or other properties based on screen size, but you may not find controls for specific elements, such as page titles.
3. Add Custom CSS with Breakpoints: If the option you want isn’t available, you can add custom CSS using media queries to target specific screen sizes.

Here’s an example of a CSS media query targeting screens smaller than 768 pixels wide (commonly tablets and smartphones):

@media only screen and (max-width: 768px) {
  /* Your CSS rules here */
}

Any CSS you write inside this block will only apply when the screen width is 768 pixels or less.

Example: Changing the Page Title Color on Mobile

Suppose you want the <h1> page title to turn blue on devices with a screen size of 768px or less. You might try this CSS:

@media only screen and (max-width: 768px) {
  h1 {
    color: blue;
  }
}

After adding and publishing this CSS, you might notice it doesn’t work as expected. This is because other CSS rules from your theme or page builder might be more specific and override your new style.

To fix this, inspect the page title element in your browser’s developer tools and find the exact class or ID assigned to the title. Then, update your CSS to be more specific. For example:

Replace h1 with your title element’s actual class or ID (.page-title-class). This specificity ensures your CSS rule takes precedence.

Once you publish and refresh your live site, resizing the browser window below 768px should change the title color to blue. Above that width, the title reverts to its default style.

Applying Custom CSS Breakpoints in Elementor

Elementor, one of the most popular WordPress page builders, offers built-in responsive controls for several elements. You can adjust font sizes, margins, and other styles for desktop, tablet, and mobile views.

However, some elements, such as tags or anchor links, may not have direct styling options for different screen sizes.

In this case, the same approach of using custom CSS breakpoints applies. Here’s how you can do it in Elementor:

1. Create or Select the Element: For example, add a link widget or create a link inside a text editor.
2. Check Elementor’s Responsive Options: Go to the Style tab and look for responsive controls. You might find options for font size or color for tablet and mobile, but sometimes these are limited.
3. Add Custom CSS: To fully customize the link’s Appearance based on screen size, navigate to the Advanced tab and then the Custom CSS section (available in Elementor Pro).
4. Write Your Media Query: Use a media query targeting your desired breakpoint and add CSS rules.

Example: Styling Links Differently on Very Small Screens

Let’s say you want your links to have a red underline only on tiny screens (under 400 pixels wide). You can add this CSS in Elementor’s Custom CSS field:

@media only screen and (max-width: 400px) {
  a {
    text-decoration: underline;
    color: red;
  }
}

After publishing, use the browser’s developer tool to resize your browser window below 400 pixels.

The links will turn red and receive an underline, making them more visible and user-friendly on smaller mobile devices.

This example also demonstrates that you’re not limited to standard breakpoints, such as 768px for tablets or 480px for phones—you can use any screen width to target particular devices.

Tips for Using Custom CSS Breakpoints Effectively

• Be Specific with Selectors: Use unique classes or IDs to avoid overriding your CSS by theme or plugin styles.
• Test Across Devices: Always check your site’s appearance on multiple screen sizes and devices to ensure your breakpoints work as intended.
• Use Browser Developer Tools: Inspect elements and test CSS live in your browser to fine-tune your selectors and styles.
• Combine with Theme Options: Use your theme’s responsive controls whenever possible and supplement with custom CSS for more precise control.
• Keep CSS Organized: Comment your CSS code to indicate which screen sizes and elements you target for easier maintenance and modification.

Why Custom CSS Breakpoints Matter

Responsive design isn’t just about shrinking or expanding content; it’s about adapting to different screen sizes and resolutions. It’s about optimizing the user experience for every device. Sometimes, you want to:

• Make text more readable on small screens by adjusting font size or color.
• Adjust button sizes or styles to enhance tap targets on mobile devices.
• Hide or show certain elements based on the device to reduce clutter.
• Enhance navigation and links for touchscreen usability.

Custom CSS breakpoints can tailor these experiences exactly as you envision them, regardless of your theme or page builder’s default capabilities.

Getting Started: Where to Add Your Custom CSS

Depending on your setup, there are several places you can add custom CSS in WordPress and Elementor:

• WordPress Customizer: Go to Appearance > Customize > Additional CSS to add site-wide CSS.
• Theme or Child Theme Stylesheet: Add your CSS to your child theme’s style.css file for permanent changes.
• Elementor Custom CSS: To customize individual elements or sections, use Elementor Pro’s Custom CSS feature under the Advanced tab.
• Custom CSS Plugins: Use plugins designed to add custom CSS if you prefer a plugin-based approach.

Regardless of your chosen method, ensure that you test your CSS changes thoroughly and back up your site before making any extensive modifications.

Conclusion

Adding custom CSS breakpoints to your WordPress site and Elementor pages lets you precisely control how your website appears and functions across various devices. When default theme or page builder options don’t offer the flexibility you need, custom CSS media queries are your best friend.

This approach empowers you to create a seamless and professional responsive design, from changing title colors on tablets to styling links on tiny mobile screens. Remember to be specific with your CSS selectors, test thoroughly, and refine your styles using browser developer tools.

Explore the resources available from trusted providers to learn more about WordPress plugins, themes, and customization tips.

The post Add Custom CSS Breakpoints to WordPress and Elementor (for Mobile Devices) appeared first on PluginsForWP.

Elementor has partnered with Animatron, the team behind Lottie, to make it possible to easily add Lottie animation files to your Elementor pages directly from within the WordPress admin dashboard (no need to jump back and forth between programs).

This article will show you how to use and add Lottie animation files to the Elementor plugin.

What is Lottie?

Lottie is a library created by Airbnb and first released at the React Conf in 2017. It lets you create vector animations for React Native apps (and, soon, Android). It’s straightforward to get started, download the library, and create a JSON file with your animations. The JSON file can have any name as long as it ends in .json.

Each .json file represents an animation with three parts; you have a frames section. This JSON object contains all information about each frame (including its position), and finally, you can add an optional keyframes section.

The idea behind Lottie is to make it easy for developers who know nothing about design or animations. Therefore, we will not cover examples of creating your spirits from scratch. Still, we will look at how you can work with existing animation files and add them to Elementor.

Lottie vs LottieFiles

Lottie is an animation library from Airbnb design that allows vector animations to be rendered in the browser. So no matter how complex your animations are, they will always look smooth and crisp on any screen size or pixel density. LottieFiles is a free library of pre-made animations available in the public domain.

Other than that, there are no differences between using pre-made animations in your next Elementor project and creating your own. Moreover, using a pre-made Lottie file will save you valuable time from making it yourself from scratch.

How to Add Lottie Files to Elementor Pro

Elementor Pro comes pre-loaded with a dedicated Lottie widget. We can use a Lottie file stored on your computer or grab the URL link from any Lottie library if you want to use a Lottie animation file hosted online.

Once you have saved the changes, visit the live page to ensure it’s working as expected.

Add Motion Effects to Lottie

An excellent design trick we can do with Elementor to Lottie animation files is to live it up with motion effects.

Motion effects will create the illusion that the element is moving on the screen and react to our scroll or mouse movement.

To do that, click Advanced and expand the Motion Effects tab to access its properties.

Then, choose the event to trigger the animation. It can be triggered by scrolling, a cursor, or both.

In our example, we want to launch the rocket when scrolling down the page. Therefore, we will turn on the Scrolling Effects option and set the direction to Up. Feel free to change the Speed and the Viewport values to match your design needs.

Finally, save the changes and test them once again on the live website to ensure it’s working as expected.

How to Add Lottie Files to Elementor Free

Although the native Lottie widget is part of the Elementor Pro plugin, the accessible version users of Elementor shouldn’t lose hope. You can still add Lottie files to Elementor free in several ways.

The first way is by using the Text Editor widget and the second way is by using an external Elementor library plugin called Premium Addons.

If you want to use the Text Editor widget method, grab the URL of the Lottie file, as I showed you at the beginning of the article.

Once grabbed, navigate to the LottieFiles web player generator tool and paste it inside the JSON URL field.

Leave or change the settings of the Lottie based on your needs. I recommend you uncheck the Controls box for a smoother presentation.

At last, click on the Copy Code button to copy the generated code to the clipboard; we will need to use it shortly.

Back in Elementor, paste the Lottie code inside the code editor screen of the text widget, and wait for the animation to load.

Although it’s less customizable than the Lottie widget itself, it’s still helpful to know how to add Lottie animation when using only Elementor by itself.

If you can’t compromise on the customization options and must control the fine details, you’ll need to install the Premium Addons plugin.

Add Lottie with Premium Addons Plugin

Premium Addons for Elementor is an external widgets library that expands and adds functionality to Elementor. The good news is that the Lottie Animations widget is included in their free version.

Navigate to Plugins -> Add New and install the Premium Addons for Elementor plugin.

Once activated, open the edit with Elementor screen and scroll down to the new Premium Addons section.

You’ll see all the extra added widgets marked with the PA letters in their top right corner.

Look for the Lottie Animations widget and add it to any section on the right.

The settings options of this widget are very similar to the ones provided with the Lottie widget of Elementor Pro.

You’ll need to upload a local Lottie file or use an external URL. Once chosen, keep modifying the rest of the settings options, such as loop, speed, viewport, etc.

Finally, save the changes and visit the live page to ensure it’s working as expected.

Conclusion

This article taught you how to easily add Lottie files to Elementor for free in a few different ways.

Lottie files are a great way to add lively animation elements to your WordPress website while keeping it light without compromising performance.

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

The post How to Use and Add Lottie Animation Files to Elementor Free and Pro appeared first on PluginsForWP.

Using WordPress, you probably know that finding the proper settings to change isn’t easy and often confusing.

This article will teach you how to change link color in WordPress.

Why to Change the Links’ Color

It will be very beneficial to match the various elements of your website with your brand’s colors.

When all the website elements match each other, it will improve brand recognition and, most importantly, increase the conversion rate.

You can read the article by Investopedia about how important is brand recognition for your business.

A website color can psychology affect the decision-making of your visitors. Therefore it should always match the color scheme and target toward acting.

Skip the section below if you already know your desired link’s color. Otherwise, keep reading and find out how to reveal the correct color code.

Finding The Right Color

To change the link color, we first must know which color we want.

While most popular colors can be referred to as blue, purple, yellow, etc., the rest combines letters and numbers, creating a hexadecimal value.

For example, the hexadecimal code of the color blue is #0000ff. The hexadecimal code of red is #ff0000.

To find the hex code of your desired color, navigate to Google and search for a color picker.

The color picker will be displayed at the top of the search result.

Move the slider left or right and the selector to the desired color and copy the Hex code.

Once finding the correct color code, move forward and learn how to change the link color.

Change Link Color In WordPress

You can change the link’s color of your WordPress website in many different ways.

Some of the most popular ways are:

• With CSS.
• Theme customization.
• Using a plugin.
• Page builders.

In the following few sections, we will explore all of these ways. Feel free to choose the method you like the most or experience with them all.

Method #1: Use CSS

CSS (Cascade Style Sheet) is written with [Property] : [Value] pairs and commands the browser on how to style the elements of the document.

By default, the link color of any website is set to blue or in CSS rule:

a { color: #0000ff; }

The a is the property, and it means Anchor (or link) and #0000ff is the hex code (value) of the blue color.

If you want to change the color of the links, we will need to enter a new CSS rule.

First, click on Customize from the admin bar to access the customization screen.

Then, please navigate to the Additional CSS tab to enter the new rule.

On this screen, paste the code below.

a { 
color: hex code;
}

Make sure to replace the hex code with the actual color code you found on the last step and click Publish.

Now, revisit your website and make sure the link color was changed successfully.

In addition, you can also set different colors when hovering on the links and for visited links.

Add the CSS below to the code above and change the hex code.

a:hover {
	color: #ffc0cb;
}
a:visited {
	color: #ff0000;
}

In this example, I set the links’ color to purple, the hovering color to pink, and the visited color red.

CSS is my preferred way because it should work with all themes and websites.

However, if you don’t want to use CSS, we can change the colors for most themes from the customization screen.

Method #2: Theme customization

Many themes will have the option to change the link colors using their customization screen without using any plugin or CSS. Therefore, we should use this option when possible.

Usually, you can access the desired settings screen from the customization window.

This section will go through the most popular themes and learn how to access the right screen.

Most chances are that you can still change it for your theme even if you are not using one of the themes below.

OceanWP

First, access the customization screen by clicking on the customize link from the admin bar.

Then, click on the General Options tab.

Now, click on the General Styling tab and scroll to the bottom.

At the bottom of the sidebar, you’ll have the option to change the link and the link hover colors.

First, set your desired colors and click on publish afterward.

GeneratePress

Open the customization screen and click on the Colors tab.

On this screen, you’ll have the option to change the colors of the links for both normal state and hover. Select your desired color and save the changes.

Astra

For the Astra theme, launch the customization screen and click on Global.

Then, click on the Colors link and Base Colors.

There, you’ll have the option to change the link and the link hover colors. Make sure to save the changes when done.

We can still style the link colors with a plugin if you can’t find the right setting screen for your specific theme.

Divi

For Divi, navigate to the customization screen, and click on General Settings.

On this screen, click on the Typography option.

Then, select your desired color for the Body Link Color and click publish.

Method #3: Use a plugin

From the backend of your WordPress website, navigate to Plugins -> Add New, search, install and activate the SiteOrigin CSS plugin.

After activating the plugin, navigate to the new Appearance -> Custom CSS tab and click on the eye icon to launch the visual editor.

Here, click on any of the links to highlight it and notice that the selector was changed on the left top corner to a:hover meaning that you’re editing the settings for the hover state.

Style the hover state as you wish and set a color, bold, underline, etc.

To change the normal state of the link, click on the a attribute from the list at the bottom and verify that the selector on the left top corner changed accordingly.

Now, style this state as desired and click on the checkmark icon when finished.

After adding both CSS rules to the SiteOrigin plugin screen, click on the Save CSS button and revisit your website to verify that the new style was applied successfully.

If you’re already using a page builder with your WordPress website, you can change the global settings of the page builder and skip the steps above.

Method #4: Elementor page builder

All the popular page builders will enable you to change the global styling of various elements of your website.

This section will go through Elementor and discover how to access their global styling screen.

Launch the Elementor editor and click on the hamburger menu on the left top corner.

Then, click on the Site Settings option.

Now, click on the Typography tab under Theme Style.

On this screen, change the colors and styling of the link for normal and hover state and click on the update button when done.

Once you have published the changes, revisit your website and make sure the color of the links changed successfully.

Conclusion

In this article, you learned how to change the link color of your WordPress website in various ways.

Leave us a comment and let us know which methods you used.

The post How To Change Link Color In WordPress appeared first on PluginsForWP.