Tips for converting an Elementor section into a clickable button

Question

Tips for converting an Elementor section into a clickable button

Link:

I have a section on my website that I want to turn into clickable buttons. Using WordPress with the Elementor plugin, I have already added some custom CSS to make it appear clickable, but now I need to add the actual functionality. I know that JavaScript is required for this, but I am hesitant as I lack the skill and knowledge in coding. I don't want to risk messing up the site by adding code randomly.

If anyone familiar with Elementor can assist me, here's where I'm stuck: Where should I add the JavaScript? There doesn't seem to be a specific place like there is for CSS. Should I use the Customizer (Appearance --> Customize --> Custom CSS/JS) or install a plugin for custom JavaScript? I have assigned each element a custom class which could be used for attaching JS.

After giving it more thought, I believe adding the JS in the Customizer might not be the best approach. My understanding is that any CSS/JS added there should only affect the topbar, header, and footer sections since they appear consistently on all pages. This leaves me considering using a JS plugin. Is this the most effective solution?

I'm seeking advice on the best method to achieve what I need. Understanding the Elementor Developer Docs is beyond my current level of expertise, so I'm turning to the community for assistance.

Thank you in advance for any help.

javascript css wordpress elementor

Answer 1

Answer №1

If you're familiar with JavaScript, one way to achieve this is by dragging and dropping an HTML widget and inserting your script between the script tags.

I suggest placing the HTML in your footer (created with Elementor) so that the script will be accessible throughout the entire site.

Answer 2

If you're familiar with JavaScript, one way to achieve this is by dragging and dropping an HTML widget and inserting your script between the script tags.

I suggest placing the HTML in your footer (created with Elementor) so that the script will be accessible throughout the entire site.

Answer 3

Answer №2

I've discovered a clever method to achieve this using only CSS, without the need for any plugins or JavaScript:

To begin, we must establish a minimum height for our Section/Column (I have chosen 50vh);

Next, we need to insert an element that contains a link or anchor tag (such as the Title Widget) and assign a CSS class to it (in my case, .mhdizmni_title);

Then, we can apply the following CSS code:

.mhdizmni_title a:after {
content: "";
display: block !IMPORTANT;
position: absolute;
height: 50vh;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
}

Answer 4

I've discovered a clever method to achieve this using only CSS, without the need for any plugins or JavaScript:

To begin, we must establish a minimum height for our Section/Column (I have chosen 50vh);

Next, we need to insert an element that contains a link or anchor tag (such as the Title Widget) and assign a CSS class to it (in my case, .mhdizmni_title);

Then, we can apply the following CSS code:

.mhdizmni_title a:after {
content: "";
display: block !IMPORTANT;
position: absolute;
height: 50vh;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
}

Answer 5

Answer №3

After stumbling upon this method, I believe I have found a solution that doesn't rely on any plugins and only requires minimal CSS code. Let me share the details below...

I managed to transform a simple column into a button-like element using borders and margins, then applied some CSS for a hover effect. Here's the code snippet:

selector:hover > .elementor-widget-wrap {
background-color: #d3d3d3;
}

selector:hover {
transform: translateY(-5px);
transition: transform 0.3s ease-out;
}

selector {
transition: transform 0.3s ease-in;
}

selector:not(:hover) {
transform: translateY(0);
}

To customize the hover effect, simply change the hex color at the beginning and adjust the transition values for the lift effect. Remember to add this custom CSS to the COLUMN widget, not its content (such as text or emojis).

In my case, I used a heading widget within an inner section of the column to create the button appearance. However, the link was clickable only when hovering over the text. To make the entire box clickable, apply the following CSS to the HEADER widget instead:

selector {
cursor: pointer;
}
selector a {
display: block;
height: 100%;
width: 100%;
}

If you encounter formatting issues, I have shared the properly formatted code in a Google Doc here: Google Doc Link

I've also created a YouTube video explaining this technique in detail. Feel free to watch it for a more visual explanation: YouTube Video Link

Answer 6

After stumbling upon this method, I believe I have found a solution that doesn't rely on any plugins and only requires minimal CSS code. Let me share the details below...

I managed to transform a simple column into a button-like element using borders and margins, then applied some CSS for a hover effect. Here's the code snippet:

selector:hover > .elementor-widget-wrap {
background-color: #d3d3d3;
}

selector:hover {
transform: translateY(-5px);
transition: transform 0.3s ease-out;
}

selector {
transition: transform 0.3s ease-in;
}

selector:not(:hover) {
transform: translateY(0);
}

To customize the hover effect, simply change the hex color at the beginning and adjust the transition values for the lift effect. Remember to add this custom CSS to the COLUMN widget, not its content (such as text or emojis).

In my case, I used a heading widget within an inner section of the column to create the button appearance. However, the link was clickable only when hovering over the text. To make the entire box clickable, apply the following CSS to the HEADER widget instead:

selector {
cursor: pointer;
}
selector a {
display: block;
height: 100%;
width: 100%;
}

If you encounter formatting issues, I have shared the properly formatted code in a Google Doc here: Google Doc Link

I've also created a YouTube video explaining this technique in detail. Feel free to watch it for a more visual explanation: YouTube Video Link

Tips for converting an Elementor section into a clickable button

Answer №1

Answer №2

Answer №3

Similar questions

I am facing an issue with my react-app where it compiles successfully without any errors, but it is not rendering any elements

What is the most efficient way to submit a form without reloading the page, all while accounting for the PHP script

Adjustment to website design when decreasing browser size

Press the button located within the canvas element

Clicking a button opens a new window, except when using the .onclick() method

Unlocking the Potential of Checkbox Values in AngularJS

Is there a way for me to prevent a particular file from being cached by web browsers?

Error in JSON format detected in cross-origin request

Unlocking the secrets of parsing JSON within a script tag using Laravel and AngularJS

Use a swipe gesture to move through the slideshow on a touchscreen device

arrange according to a specific sequence

Troubles with Flex wrap in CSS3 on iOS 10.3.2 browsers (Chrome and Safari)

Sorting a list based on user-defined criteria in Ionic 3

Using 'interface' declarations from TypeScript is unsupported in JS for React Native testing purposes

"Experiencing a problem with Next.js 13 where the User Context is not functioning properly outside of _app

Tips for effectively utilizing innerHTML in this particular scenario

The website functions properly in Chrome, but encounters issues in IE

Merge ReactCssTransitionGroup with React-route's Link to create smooth page transitions

The contents of my div extend beyond the border-radius

What is the most efficient way to implement OR conditions in JavaScript for shorter code