如何将 Elementor 中的 Columns 或 Section 设置为可点击状态

小渔 on 2022-03-22

首先解释下这个标题,其实在英文状态下很好理解,就是:How to Make columns and sections clickable in Elementor,但是中文解释起来就比较拗口了,后面发现好的说法再来更改吧。

牵出这个问题是今天有个需求,将一张图片加上链接然后跳转到某个固定页面,见下图:

Requirement

但是Astra Pro主题下,这种图片是直接在 Columns 或者 Section 上添加的背景图片(Background)或者背景叠加(Background Overlay),是没有办法直接在图片上链接的,也就是套一个 <a> 标签。

OK,要么重设计一个样式,要么另辟蹊径。查阅官方文档得出解决方案如下。

第一步:安装 Elementor Pro,启用其 Custom Code 功能,并点击左上角“Add New”添加一段全局 JS 代码。

Custom Code

在其中添加如下 JS 代码。

JS Code

第二步:从 Elementor 的页面编辑区进入 Site Settings。

Site Settings

进入“Custom CSS”设置区域。

Custom CSS

添加一段 CSS 代码。

CSS Code

代码如下:

  • .pointer {cursor: pointer;}

第三步:确保该 Columns 或者 Section 上有且只有一个 Link,这点很重要,两个链接的情况下会报错。

One Link

第四步:这是最后一步,就是要加 Columns 或者 Section 上加上“CSS Classes”。

  • # 设置 CSS 属性
  • click-child pointer
CSS Classes

OK,保存好功能就实现了。

但是,有没有更优化的方案呢?毕竟需要安装 Elementor Pro 插件,这并不便宜。所以后续的新方案只需要解决第一步就好,也就是将一段 JS 代码部署到网站的全部页面即可。

第一种也就是用 Google Tag Management 将这一段代码部署到网站即可,太简单了就不写了。

第二种就是使用 Astra Pro 的自定义布局将代码部署到网站,首先激活 Custom Layouts。

Custom Layouts

然后新增一个布局,将 JS 代码部署其中。

Custom Layouts

发布这个布局即可实现同样功能,还能省下买 Elementor Pro 的钱。

获取我的流量秘籍

订阅我的邮件,第一时间获取精选技巧、真实案例和独家心得!

通过提交您同意我们的隐私政策

小渔聊独立站

小渔聊独立站

独立站运营过程中的经验与教训

我是小渔,一名技术起家的营销探索者,多年深耕独立站运营、流量增长与收益最大化,分享实用策略与经验教训,助力打造可持续的被动收入体系。

© 2025 小渔聊独立站 | 版权所有