Resolving Elementor Hyperlink Issues.
Resolving Elementor Hyperlink Issues. If you’ve been using Elementor for your WordPress site, you might have encountered an annoying issue with disappearing hyperlinks. This common problem affects many Elementor users, but there are solutions to ensure your hyperlinks stay intact when your posts are published.
The Disappearing Hyperlink Problem
Elementor users often face an issue where the HTML code for hyperlinks disappears in published documents. This problem also affects paragraphs created using Elementor, causing the HTML tags <p> and </p> to vanish. To address this issue, you can use a class called keep-link for your hyperlinks and apply custom CSS. Here’s how you can fix it:
Adding the keep-link Class to Your Hyperlinks
By adding the keep-link class to your hyperlinks, you can preserve them when the page is published. Follow these steps to add the class:
- Open your WordPress Dashboard.
- Navigate to Appearance > Customize.
- Click on Additional CSS.
- Copy and paste the following CSS code into the text area:
.keep-link {
all: initial;
all: unset;
}
- Click on the Publish button to save the changes.
Once you’ve added the CSS code, add the keep-link class to your hyperlinks as follows:
<a href="YOUR_URL" class="keep-link">YOUR_TEXT</a>
For example:
At the easternmost point of Australia, the <a href="https://www.nationalparks.nsw.gov.au/things-to-do/historic-buildings-places/cape-byron-lighthouse" class="keep-link">Cape Byron Lighthouse</a> offers breathtaking views of the Pacific Ocean.Applying Custom CSS Globally. Resolving Elementor Hyperlink Issues
If you frequently add hyperlinks and want a more global solution, you can add custom CSS to target all hyperlinks in your content. This method ensures that all hyperlinks on your site maintain their attributes:
- Navigate to Appearance > Customize.
- Click on Additional CSS.
- Add the following CSS code:
a.keep-link {
all: initial;
all: unset;
}
- Publish the changes.
The CSS code will apply styles globally to all <a> tags on your site, helping to preserve their attributes. However, be mindful that applying CSS globally will affect all hyperlinks on your site. Ensure this aligns with your overall design and functionality goals.
For more detailed information, refer to Elementor’s .
Ensuring Site Backup Before Proceeding. Resolving Elementor Hyperlink Issues.
Before making any changes to your site’s CSS or adding classes, it’s crucial to back up your site. This precautionary step ensures that you can revert to the previous state if anything goes wrong.
Enjoying Your Stay at Jim's Beach House
If you’re planning a visit to Byron Bay, and looking for comfortable accommodation, check out . Choose from the cozy 2-bedroom or the spacious 3-bedroom options for a relaxing stay.