折腾:
【记录】用POFO主题搭建xxx官网WordPress页面
然后继续去尝试拷贝过来:
中的:
![](https://www.crifan.com/files/pic/uploads/2021/05/4e3e628a08794a158c64e4177aa25fce.jpg)
然后去参考导入的demo页面:
![](https://www.crifan.com/files/pic/uploads/2021/05/965add3a5a6941e8a1bf7772faf93ba7.jpg)
的源码:
找到对应的部分:
![](https://www.crifan.com/files/pic/uploads/2021/05/b674e976a12e46c48159e05b51907bf2.jpg)
拷贝出来:
[vc_row_inner equal_height="yes"][vc_column_inner pofo_column_animation_style="fadeInUp" width="1/2" desktop_alignment="text-center" pofo_enable_responsive_css="1" alignment_setting="1" pofo_hidden_markup_1506940400_2_98="" offset="vc_col-md-3 vc_col-xs-12" responsive_css="margin_bottom_tablet:30px"][pofo_feature_box pofo_feature_type="featurebox8" feature_box_preview_image="featurebox8" pofo_enable_icon_bg="1" pofo_box_hover_effect="0" pofo_enable_box_shadow="0" pofo_icon_size="icon-medium" content_desktop_width="width-75" pofo_hidden_markup_1507962379_2_4="" pofo_hidden_markup_1507193658_2_39="" pofo_hidden_markup_1507191613_2_5="" pofo_disable_box_hover_effect="1" pofo_hidden_markup_1506940400_2_3="" pofo_hidden_markup_1506939626_2_71="" pofo_feature_icon="1" pofo_hidden_markup_1500011440_2_11="" pofo_icon_list="icon-tools" pofo_feature_title="Pixel Perfect Design" css=".vc_custom_1510657045861{border-top-width: 1px !important;border-right-width: 1px !important;border-bottom-width: 1px !important;border-left-width: 1px !important;padding-top: 18% !important;padding-right: 0px !important;padding-bottom: 18% !important;padding-left: 0px !important;border-left-color: #dbdbdb !important;border-left-style: solid !important;border-right-color: #dbdbdb !important;border-right-style: solid !important;border-top-color: #dbdbdb !important;border-top-style: solid !important;border-bottom-color: #dbdbdb !important;border-bottom-style: solid !important;border-radius: 4px !important;}"]Lorem Ipsum is simply text of the printing and typesetting industry. Lorem Ipsum has been standard dummy.[/pofo_feature_box][/vc_column_inner][vc_column_inner pofo_column_animation_style="fadeInUp" width="1/2" desktop_alignment="text-center" pofo_enable_responsive_css="1" alignment_setting="1" pofo_hidden_markup_1506940400_2_98="" offset="vc_col-md-3 vc_col-xs-12" pofo_column_animation_delay="200" responsive_css="margin_bottom_tablet:30px"][pofo_feature_box pofo_feature_type="featurebox8" feature_box_preview_image="featurebox8" pofo_enable_icon_bg="1" pofo_box_hover_effect="0" pofo_enable_box_shadow="0" pofo_icon_size="icon-medium" content_desktop_width="width-75" pofo_hidden_markup_1507962379_2_4="" pofo_hidden_markup_1507193658_2_39="" pofo_disable_box_hover_effect="1" pofo_hidden_markup_1506940400_2_3="" pofo_hidden_markup_1506939626_2_71="" pofo_feature_icon="1" pofo_hidden_markup_1500011440_2_11="" pofo_icon_list="icon-layers" pofo_feature_title="Full Documentation" css=".vc_custom_1509687944504{border-top-width: 1px !important;border-right-width: 1px !important;border-bottom-width: 1px !important;border-left-width: 1px !important;padding-top: 18% !important;padding-right: 0px !important;padding-bottom: 18% !important;padding-left: 0px !important;border-left-color: #dbdbdb !important;border-left-style: solid !important;border-right-color: #dbdbdb !important;border-right-style: solid !important;border-top-color: #dbdbdb !important;border-top-style: solid !important;border-bottom-color: #dbdbdb !important;border-bottom-style: solid !important;border-radius: 4px !important;}"]Lorem Ipsum is simply text of the printing and typesetting industry. Lorem Ipsum has been standard dummy.[/pofo_feature_box][/vc_column_inner][vc_column_inner desktop_mini_clear_both="md-clear-both" pofo_column_animation_style="fadeInUp" width="1/2" desktop_alignment="text-center" pofo_enable_responsive_css="1" alignment_setting="1" pofo_hidden_markup_1506940400_2_98="" offset="vc_col-md-3 vc_col-xs-12" pofo_column_animation_delay="400" responsive_css="margin_bottom_mobile:30px"][pofo_feature_box pofo_feature_type="featurebox8" feature_box_preview_image="featurebox8" pofo_enable_icon_bg="1" pofo_box_hover_effect="0" pofo_enable_box_shadow="0" pofo_icon_size="icon-medium" content_desktop_width="width-75" pofo_hidden_markup_1507962379_2_4="" pofo_hidden_markup_1507193658_2_39="" pofo_disable_box_hover_effect="1" pofo_hidden_markup_1506940400_2_3="" pofo_hidden_markup_1506939626_2_71="" pofo_feature_icon="1" pofo_hidden_markup_1500011440_2_11="" pofo_icon_list="icon-scissors" pofo_feature_title="Reasonable Pricing" css=".vc_custom_1509687960239{border-top-width: 1px !important;border-right-width: 1px !important;border-bottom-width: 1px !important;border-left-width: 1px !important;padding-top: 18% !important;padding-right: 0px !important;padding-bottom: 18% !important;padding-left: 0px !important;border-left-color: #dbdbdb !important;border-left-style: solid !important;border-right-color: #dbdbdb !important;border-right-style: solid !important;border-top-color: #dbdbdb !important;border-top-style: solid !important;border-bottom-color: #dbdbdb !important;border-bottom-style: solid !important;border-radius: 4px !important;}"]Lorem Ipsum is simply text of the printing and typesetting industry. Lorem Ipsum has been standard dummy.[/pofo_feature_box][/vc_column_inner][vc_column_inner pofo_column_animation_style="fadeInUp" width="1/2" desktop_alignment="text-center" alignment_setting="1" offset="vc_col-md-3 vc_col-xs-12" pofo_column_animation_delay="600"][pofo_feature_box pofo_feature_type="featurebox8" feature_box_preview_image="featurebox8" pofo_enable_icon_bg="1" pofo_box_hover_effect="0" pofo_enable_box_shadow="0" pofo_icon_size="icon-medium" content_desktop_width="width-75" pofo_hidden_markup_1507962379_2_4="" pofo_hidden_markup_1507193658_2_39="" pofo_disable_box_hover_effect="1" pofo_hidden_markup_1506940400_2_3="" pofo_hidden_markup_1506939626_2_71="" pofo_feature_icon="1" pofo_hidden_markup_1500011440_2_11="" pofo_icon_list="icon-lock" pofo_feature_title="User-friendly Admin" css=".vc_custom_1509687974750{border-top-width: 1px !important;border-right-width: 1px !important;border-bottom-width: 1px !important;border-left-width: 1px !important;padding-top: 18% !important;padding-right: 0px !important;padding-bottom: 18% !important;padding-left: 0px !important;border-left-color: #dbdbdb !important;border-left-style: solid !important;border-right-color: #dbdbdb !important;border-right-style: solid !important;border-top-color: #dbdbdb !important;border-top-style: solid !important;border-bottom-color: #dbdbdb !important;border-bottom-style: solid !important;border-radius: 4px !important;}"]Lorem Ipsum is simply text of the printing and typesetting industry. Lorem Ipsum has been standard dummy.[/pofo_feature_box][/vc_column_inner][/vc_row_inner]
粘贴到新页面中合适的位置:
希望放到:
![](https://www.crifan.com/files/pic/uploads/2021/05/7718c98a11be4a3082f28eaa10b11cae.jpg)
感觉是需要添加一个组件
![](https://www.crifan.com/files/pic/uploads/2021/05/39e0d3a2dabe4f4583d085e81014b28a.jpg)
也能找到自己想要的:
feature box
但是更好的还是直接粘贴对应源码
不过难点要找到合适的粘贴的位置:
![](https://www.crifan.com/files/pic/uploads/2021/05/e73a27de639041e9aaf7c032961009af.jpg)
![](https://www.crifan.com/files/pic/uploads/2021/05/9eb53ddc71004aeeafa8fd7ec4c6bd4a.jpg)
知道是这一片
![](https://www.crifan.com/files/pic/uploads/2021/05/7fde90c3166a4544bc997bd26620648b.jpg)
但是要找到准确的粘贴的位置,还是要仔细找找才行的
大概看懂了:
![](https://www.crifan.com/files/pic/uploads/2021/05/7c2417016fbe42fd980d2f138ffb902f.jpg)
[vc_row full_width="stretch_row" ..."] [vc_column width="1/12" ...][/vc_column] [vc_column width="5/6" ... pofo_heading="我们的能力" ...][/vc_column] [vc_column width="1/12"...][/vc_column] [/vc_row]
所以只需要插入上图选中之后的位置,或许就可以了。去试试:
![](https://www.crifan.com/files/pic/uploads/2021/05/15a414a97dc746408bbd1eca6be19ac0.jpg)
看看效果如何
还真的基本上实现了要的 效果:
![](https://www.crifan.com/files/pic/uploads/2021/05/c1a24f859d564d0ba9fcbf2f740c423a.jpg)
不过需要再去优化:
设置每个feature box的背景色是透明
-》之前是白色不好看
-》好像此处已经是透明了。。。
那抽空就是要去调节字体颜色了。
继续去改文字
微信及小程序
Cloud
互联网架构
微服务
敏捷交付
数据安全
系统集成
DevOps
不过要2行的8个,还要再去复制出额外4个:
![](https://www.crifan.com/files/pic/uploads/2021/05/36576bf2a6ee40a0b08332e8af89a3a0.jpg)
![](https://www.crifan.com/files/pic/uploads/2021/05/00ea135959d141428e396815d032f531.jpg)
继续修改文字:
![](https://www.crifan.com/files/pic/uploads/2021/05/bbe756ae0c664af4aa73c12afdd09618.jpg)
结果效果不对了:
![](https://www.crifan.com/files/pic/uploads/2021/05/6eafecd8440c4747ac5e594938c61fc1.jpg)
1行占据了2行的高度
删掉之前的第二行,再去clone this row:
![](https://www.crifan.com/files/pic/uploads/2021/05/9458f5b2abb44e3f952b281aa9de45d0.jpg)
然后再去修改文字:
![](https://www.crifan.com/files/pic/uploads/2021/05/b5689eadd0994cf494e1734b723c9ab8.jpg)
这下基本对了:
![](https://www.crifan.com/files/pic/uploads/2021/05/809a4b82b2c34306a930a0604f90d72f.jpg)
但是:
需要增加2行之间的 间距:去增加一个空row,只是设置高度
还有需要更换第二行的图标
结果竟然死活都加不了中间一行为独立的row:
即使加了row:
![](https://www.crifan.com/files/pic/uploads/2021/05/108f5ee4f1d049bb91f75e3fe0bef88a.jpg)
也无法塞进去到两行中间:
![](https://www.crifan.com/files/pic/uploads/2021/05/f33617d6fcb8487ab314fdc07fdd26f8.jpg)
感觉是:
原先的2行的feature box是个独立的row,没法塞入row级别的内容。
所以算了,给下面一行加个margin吧:
![](https://www.crifan.com/files/pic/uploads/2021/05/edeb55a536934043b2755e31184f5bd3.jpg)
也算能起到基本的增加上下间距的效果:
![](https://www.crifan.com/files/pic/uploads/2021/05/49b1b6d42a2a41b89c6509465aeb5139.jpg)
然后再去改icon
![](https://www.crifan.com/files/pic/uploads/2021/05/95531ef056b847c3bb8d7b7900377968.jpg)
icon都换了一下:
![](https://www.crifan.com/files/pic/uploads/2021/05/aedb1d7537d846ab8a65010d50e53d69.jpg)
效果是:
![](https://www.crifan.com/files/pic/uploads/2021/05/151a6afe72f74686bece40dc7557f2ab.jpg)