NEED HELP - how to make an excerpt of the post clickable?

Question

I am working in Wordpress, and I am using Elementor. Elementor has a native feature for the title of the posts and images to link to the post.

But if I add an excerpt text, it doesn't link to the post. It is not clickable. The read more button does, but not the excerpt of the post.

I am trying to create something like this: greatist.com Every post on their website is clickable - the excerpt, the title, and the image.

My excerpts are really short like on that website, and I would really like them to be clickable. I have absolutely no idea how to do this and I'm beginning to think it's not possible. I am using Hello Elementor theme.

I would deeply appreciate anyone's help. I just registered to ask this question.

Answer 1

You can always try to save text as an photo and make it clickable or make a full section clickable.To do this try to use plugin called "Make Column Clickable Elementor".

Answer 2

Add this code to your website:

const postExcerpts = document.querySelectorAll('.elementor-posts .elementor-post .elementor-post__excerpt');

postExcerpts.forEach(postExcerpt => {
    const postUrl = postExcerpt.parentNode.querySelector('.elementor-post__title a').href;
    postExcerpt.addEventListener('click', () => {
        window.location.href = postUrl;
    });
});

This can be added using a script tag. Choose from the following options:

1. Add this code as a script tag in your functions.php file, to be rendered at the end of the page (wp_footer action hook).
2. If you have Elementor Pro, use its built-in Custom Code feature to add the code in a script tag to the end of the body tag.

It's recommended to add a pointer cursor so the user will know the excerpt is a link. This can be achieved by adding the following CSS to your style.css file.

.elementor-posts .elementor-post .elementor-post__excerpt {
   cursor: pointer;
}