wordpress图片大小设置

Wordpress建站教程:给图片添加CSS样式

作者:悦然wordpress建站(悦然建站)

(此处已添加小程序,请到今日头条客户端查看)

继续分享wordpress建站教程。今天给大家分享一下为图片添加CSS样式的方法。

相信现在很多使用wordpress建站的用户都已经习惯了使用古腾堡编辑器,但是不知道大家注意到没有,古腾堡编辑器的图像区块只提供的默认、圆角、尺寸大小等设置,没有办法给图片添加一些更显眼的效果。

下面悦然网络工作室就给大家分享一下给古腾堡图像区块添加CSS样式的方法,可以让你的内容更加出彩。

方法一:直接全局添加CSS样式

/* 添加阴影和边框 */.wp-block-image img {box-shadow: 15px 15px 0px #d6d6d6;border: 1px solid #d6d6d6;}

把上面的CSS样式代码添加到网站的CSS文件中即可。如果你使用的主题的提供CSS设置选项,那么添加会更方便,进入外观-自定义-额外CSS,把上面的代码添加进去就可以了。

方法二:为不同的图片添加不同的CSS样式

我们同样可以使用上面的方法来实现,只不过需要先在主题模板的CSS表中预设好样式,然后在图像区块的高级-额外的CSS类中添加对应的CSS类即可。不过这样相对麻烦一下,这里我们介绍使用插件的方法来实现。

其实悦然网络工作室之前的文章就已经给大家分享过类似的方法的,使用的插件名为blocks-css

blocks-css插件下载地址

?插件安装好后可以直接在古腾堡编辑器页面给对应的图片添加不同的CSS样式效果,如上图所示。

box-shadow: 15px 15px 0px #d3dce5;

阴影效果

box-shadow: 8px 8px 14px rgba(100, 100, 100, 0.5);

半透明阴影

border: 1px solid #445e79;border-radius: 10px;

实心边框

border-top: 10px solid #445e79;border-bottom: 10px solid #445e79;

上下边框

以上CSS效果大家可以随意修改里面的数值。

关于blocks-css插件的具体使用方法大家可以查看下面这篇文章。

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

WordPress的divi主题可视化图文标blurb模块教程(免费)

在使用WordPress做网站的时候,经常需要使用图文标来显示,模块可以放置在您创建的任何列中。

图文展示的信息模式是WordPress建站中最常用的样式之一。

很多新手不懂得如何在WordPress中创建图文模块。

在这篇文章中,

WP花园将教会大家如何使用divi主题中的blurb图文标模块创建丰富多彩的数据样式。

请确保自己正确安装了divi主题,

然后我们开始上课了!

什么是图文标模块

图文标是一个可以直观的显示技能和功能信息的板块,

是图像、图标和文本的组合搭配使用。

在图像和图标中只能选择其中一个

如果您为“使用图标”设置选择了“是”此选项将为您提供了配合使用的可用图标列表。

如果选择使用图像,那便将图像上传便可设置图像信息

真实案例需求

我们有个客户需求,创建一个PDF文件下载的模块,

让模块显示特定的图像和文件名,

整个模块大概长这个样子:

那么使用DIVI的图文标的模块,就能够非常轻松的解决这个问题。


divi的blurb图文标模块编辑步骤

接下来,

我将用使用图像加文字的模板来演示如何制作如下的模块

首先先在的页面中点击灰色+号按钮插入“图文标”

(此模块只能在行的内部添加)

添加模块成功之后将为您提供模块的选项

添加成功之后,

在文本的编辑页面可输入你想要的文字即可,

若不想要标题或正文可直接删除即可。

如果需要文件下载,

那么我们首先需要在媒体库上上传指定的文件,

点击“选择文件”上传所要的文件

上传成功后,点开文件,

将文件链接复制下来

将复制的链接复制到图文标—内容—链接(模块链接URL)中,

这样可在内面中查看文件内容。

接下来便是图像的使用,

先上传指定的图像,

后可在设计页面内图像和图标中设置调整位置。

在图像/图标的放置中选择靠左可将图像放在文字前面。

若要将文字与图片在一水平上可在文本设置中设置文本的行高设置,

可调整文字上下位置。

调整好位置之后可点击盒子阴影,

加入立体效果

(若是要调整字体与阴影的距离,可在间距内适当调整)

点击保存便可以在页面中看到这次的图文标设置展示效果,

之后点击文字便能跳转到文件内容之中。

WP花园结语

一个图文标的模块中便能设置出许多样式选择,

在页面设置文件的显示内容,

提供了我们浏览时能快速方便获取信息资讯。

也能够快速灵活的创建出丰富多彩的功能模块。

在使用divi主题的过程中,

如果你遇到各种问题,

欢迎给我们留言。