Elementor设计产品详情页时,B2B产品参数如何实现
问题: 对于B2B产品,尤其是电压器相关的产品,不同的产品参数不尽一样(例如:电压,容量,冷却,安装过程),有的产品参数特别多,没有办法设置为统一固定的字段,对于下面的产品列表中产品参数应该如何设计,才能实现动态多参数的要求?

方案:在产品详情页后台添加一个Device Parameter字段,以插入表格的方式,实现设备动态参数/值。安装Advanced Editor Tools插件,实现自定义字段,可插入表格功能。如下图所示,插入指定几行几列自定义表格


2.前端Elementor产品列表中,产品显示模板如下:动态读取自定义Device Parameter字段中的表格,Text Editor元素默认宽度设置为Width(100%)占满整个模板宽度



样式代码如下:
.device-params table, .device-params td, .device-params th {
border-width: unset!important;
margin: unset!important;
padding: unset!important;
border:unset!important;
}
.device-params table tr td:first-child {
color: #5A5A5A!important;
width: 1%!important; /* 技巧:设置极小宽度,强迫它仅撑开到内容的最小宽度 */
white-space: nowrap!important; /* 关键:防止第一个 td 里的文本折行 */
}
.device-params table tr td:not(:first-child) {
color: #000000!important;
width: auto!important; /* 吸纳剩余的所有宽度 */
text-align: right!important; /* 右对齐文本 */
/*line-height: 1;*/
}