首先解释下这个标题，其实在英文状态下很好理解，就是：How to Make columns and sections clickable in Elementor，但是中文解释起来就比较拗口了，后面发现好的说法再来更改吧。
牵出这个问题是今天有个需求，将一张图片加上链接然后跳转到某个固定页面，见下图：
但是Astra Pro主题下，这种图片是直接在 Columns 或者 Section 上添加的背景图片（Background）或者背景叠加（Background Overlay），是没有办法直接在图片上链接的，也就是套一个 <a> 标签。
OK，要么重设计一个样式，要么另辟蹊径。查阅官方文档得出解决方案如下。
第一步：安装 Elementor Pro，启用其 Custom Code 功能，并点击左上角“Add New”添加一段全局 JS 代码。
在其中添加如下 JS 代码。
第二步：从 Elementor 的页面编辑区进入 Site Settings。
进入“Custom CSS”设置区域。
添加一段 CSS 代码。
代码如下：
- .pointer {cursor: pointer;}
第三步：确保该 Columns 或者 Section 上有且只有一个 Link，这点很重要，两个链接的情况下会报错。
第四步：这是最后一步，就是要加 Columns 或者 Section 上加上“CSS Classes”。
- # 设置 CSS 属性
- click-child pointer
OK，保存好功能就实现了。
但是，有没有更优化的方案呢？毕竟需要安装 Elementor Pro 插件，这并不便宜。所以后续的新方案只需要解决第一步就好，也就是将一段 JS 代码部署到网站的全部页面即可。
第一种也就是用 Google Tag Management 将这一段代码部署到网站即可，太简单了就不写了。
第二种就是使用 Astra Pro 的自定义布局将代码部署到网站，首先激活 Custom Layouts。
然后新增一个布局，将 JS 代码部署其中。
发布这个布局即可实现同样功能，还能省下买 Elementor Pro 的钱。
