How to remove link underline in elementor

When designing a website with Elementor, you might want to link a header or other elements without having an underline appear. Sometimes, even after trying various custom CSS solutions, the underline persists. Here’s a straightforward way to solve this issue by adjusting global settings.

Step-by-Step Guide to Remove Link Underlines in Elementor

Step 1: Access the Customizer

1. Log in to your WordPress Dashboard.
2. Navigate to Appearance -> Customize.
   • This will open the WordPress Customizer, where you can make global changes to your site’s appearance.

Step 2: Go to Global Typography Settings

3. In the Customizer, select Global -> Typography.
   • This section controls the global typography settings for your website.

Step 3: Adjust Link Underline Settings

4. Scroll down to the bottom of the Typography settings.
5. Find the option labeled “Underline Content Links.”
6. Unselect the “Underline Content Links” option.
   • This setting will remove the underline from all content links globally, including headers.

Step 4: Publish Your Changes

7. Click the “Publish” button.
   • This will save your changes and apply them to your website.

Why This Method Works

Changing the global settings ensures that all links across your site adhere to the same style rules, eliminating the need for custom CSS. This approach is efficient and reduces the chance of conflicting styles that might arise from different CSS rules.

Additional Tips

• Use Custom CSS Sparingly: If you still need to customize specific elements, add custom CSS sparingly to avoid conflicts. For instance, if you want to remove the underline from specific links only, use the following CSS:
  

  .your-custom-class a {
      text-decoration: none;
  }

  Add this to the “Additional CSS” section in the Customizer or within the Elementor custom CSS area for specific elements.
• Check for Theme Conflicts: Sometimes, the theme you are using might enforce certain styles. Make sure to check your theme’s documentation for any settings that might override your changes.

Conclusion

By following the steps above, you can easily remove underlines from links in Elementor by adjusting the global typography settings in WordPress. This method is effective and ensures a consistent look across your website without the need for extensive custom CSS.

Feel free to experiment with different settings to find the perfect look for your site. Happy designing!