最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】WordPress页面中参考实现POFO中feature box效果

效果 crifan 156浏览 0评论
折腾:
【记录】用POFO主题搭建xxx官网WordPress页面
然后继续去尝试拷贝过来:
http://wpdemos.themezaa.com/pofo/home-classic-corporate/
中的:
然后去参考导入的demo页面:
的源码:
找到对应的部分:
拷贝出来:
[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]
粘贴到新页面中合适的位置:
希望放到:
感觉是需要添加一个组件
也能找到自己想要的:
feature box
但是更好的还是直接粘贴对应源码
不过难点要找到合适的粘贴的位置:
知道是这一片
但是要找到准确的粘贴的位置,还是要仔细找找才行的
大概看懂了:
[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]
所以只需要插入上图选中之后的位置,或许就可以了。去试试:
看看效果如何
还真的基本上实现了要的 效果:
不过需要再去优化:
设置每个feature box的背景色是透明
-》之前是白色不好看
-》好像此处已经是透明了。。。
那抽空就是要去调节字体颜色了。
继续去改文字
微信及小程序
Cloud
互联网架构
微服务
敏捷交付
数据安全
系统集成
DevOps
不过要2行的8个,还要再去复制出额外4个:
继续修改文字:
结果效果不对了:
1行占据了2行的高度
删掉之前的第二行,再去clone this row:
然后再去修改文字:
这下基本对了:
但是:
需要增加2行之间的 间距:去增加一个空row,只是设置高度
还有需要更换第二行的图标

结果竟然死活都加不了中间一行为独立的row:
即使加了row:
也无法塞进去到两行中间:
感觉是:
原先的2行的feature box是个独立的row,没法塞入row级别的内容。

所以算了,给下面一行加个margin吧:
也算能起到基本的增加上下间距的效果:
然后再去改icon
icon都换了一下:
效果是:

转载请注明:在路上 » 【已解决】WordPress页面中参考实现POFO中feature box效果

与本文相关的文章

  • 暂无相关文章!
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
82 queries in 0.141 seconds, using 20.44MB memory