给WP古腾堡区块添加CSS效果

继续分享wordpress建站教程。有时我们可能会在网站文章、产品中插入长图,但是这种长图直接插入会比较影响美观,内容就非常长,不利于其它信息的展示。我们可以使用切图的方法来插入,但这样太麻烦,所以今天悦然跨境出海给大家介绍另外一种方法,使用CSS来限制长图的高度,然后用户可以根据滑块或滚动来浏览长图。

一、安装插件

给WP古腾堡区块添加CSS效果-悦然跨境出海

这里我们会用到一个插件,插件blocks-css,大家可以直接在wordpress建站后台安装。不过据有些用户反应新版本的不太好用,所以你可以通过下面的链接下载老版本,然后手动上传安装。

https://downloads.wordpress.org/plugin/blocks-css.1.1.2.zip

二、插件的使用

blocks-css插件的使用非常简单,启用之后它会直接出现在古腾堡编辑器的右侧,当我们编辑文章内容时可以直接使用。

给WP古腾堡区块添加CSS效果-悦然跨境出海

如上图所示,我们添加了一张高度为2998px的长图片,我们可以使用blocks-css添加一个高度控制的CSS效果,步骤如下:

1.选中区块,然后在右侧找到Custom CSS选项。

2.然后在Custom CSS选项的代码框中输入正确的CSS代码,代码如下:

selector {
    cursor: pointer;
    height: 420px;
    width: calc(100% + 6px);
    overflow: hidden;
    overflow-y: scroll;
}

代码输入完成后直接就可以看到效果,上面的420表示高度,大家可以按需修改。

如果这篇内容对您有帮助,请给个五星哦!
[总计评分: 1 平均: 5]
购物车
优惠劵
搜索