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

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

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

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 代码。

How-to-Make-columns-and-sections-clickable-in-Elementor
Custom Code

在其中添加如下 JS 代码。

How-to-Make-columns-and-sections-clickable-in-Elementor
JS Code

代码如下:

<script>
	jQuery(document).ready(function() { jQuery("body").on("click", ".click-child", function() { var href = jQuery(this).find("a").attr('href'); window.location = href; }); });
</script>

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

How-to-Make-columns-and-sections-clickable-in-Elementor
Site Settings

进入“Custom CSS”设置区域。

How-to-Make-columns-and-sections-clickable-in-Elementor
Custom CSS

添加一段 CSS 代码。

How-to-Make-columns-and-sections-clickable-in-Elementor
CSS Code

代码如下:

.pointer {cursor: pointer;}

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

How-to-Make-columns-and-sections-clickable-in-Elementor
One Link

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

# 设置 CSS 属性
click-child pointer
How-to-Make-columns-and-sections-clickable-in-Elementor
CSS Classes

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

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

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

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

How-to-Make-columns-and-sections-clickable-in-Elementor
Custom Layouts

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

How-to-Make-columns-and-sections-clickable-in-Elementor
Custom Layouts

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

Share on facebook
Facebook
Share on twitter
Twitter
Share on pinterest
Pinterest
Share on linkedin
LinkedIn

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

Scroll to Top