如果使用得当,滑块可以使网站看起来更加生动活泼,同时又可以在有限的空间内提供更多信息。
Smart Slider 3概述
在深入学习本教程之前,让我简要概述一下该插件及其功能,以便您可以决定该插件是否具有所需的一切。
- 您创建的滑块将完全响应并针对SEO进行了优化,并且可以与所有WordPress主题配合使用。
- 您可以使用用户友好的界面编辑每张幻灯片,并实时查看实时预览。
- 只需一点创意,您就可以创建具有独特设计的自定义幻灯片。 您可以完全控制所有标题,文本,按钮等的外观。可以更改所有内容,从排版到边框宽度,背景色等。
- 滑块对移动设备友好。 它们将在所有屏幕尺寸的设备上看起来都不错。
- 不想从头开始的人可以使用提供的模板,并仅通过更改图像即可快速设置自己的滑块。
它提供了更多功能,可在插件页面上找到。 Smart Slider不仅限于图像和视频。 您可以使用它来创建帖子的滑块,等等。
编辑单个幻灯片
安装并激活插件后,仪表板应如下图所示。
![智能滑块欢迎屏幕](https://i-blog.csdnimg.cn/blog_migrate/e6acdb4c27395e6314f27eafc9c0c89f.png)
我们将使用预制模板创建第一个滑块。 要做到这一点,点击模板库 ,然后选择下页F上稀土元素 。 现在,转到第三个名为Image Slider的模板,然后单击Import 。 这会将滑块添加到您的仪表板。
![导入图像滑块](https://i-blog.csdnimg.cn/blog_migrate/10427e2050f31975665ff84f41bce2f7.png)
现在,在仪表板页面上,您可以将鼠标悬停在导入的模板上,然后单击“编辑”按钮以开始编辑滑块。
![编辑幻灯片](https://i-blog.csdnimg.cn/blog_migrate/18753f2ccb0f5f8ebc9fd7fc091d259b.png)
首先,我们将编辑幻灯片并更改图像和标题。 为此,将鼠标悬停在每张幻灯片上,然后单击出现的编辑按钮。 您还可以复制,删除或将特定图像设置为第一张幻灯片。
现在,您应该会看到类似于下图的内容。
![图片幻灯片正在编辑中](https://i-blog.csdnimg.cn/blog_migrate/e5943786dd206d3dd820f2653c8ac304.png)
单击背景按钮可以更改背景图像。 这将显示许多选项。 您可以将背景设为其他图像,也可以将其设置为纯色或渐变。
在上面的图像中打开叠加开关会以半透明的颜色或渐变叠加图像背景。 如果只想在特定的幻灯片上显示纯色或渐变色而不显示任何图像,只需单击“ 颜色”按钮,然后选择要用于渐变色的颜色。
![图像幻灯片背景选项](https://i-blog.csdnimg.cn/blog_migrate/f53e415dc7c7702d66d8d9996da57ab2.png)
更改图像后,可以通过单击轻松更改文本“ White Brown Cow” 。 这将为您提供几个选项,例如添加链接或更改背景颜色,字体样式,大小,颜色等。
![更改幻灯片文字](https://i-blog.csdnimg.cn/blog_migrate/b475acda7ba025384937977314408a3c.png)
尝试使用不同的值和选项,以查看基于不同设置的结果如何独特和不同。
![追踪字幕外观](https://i-blog.csdnimg.cn/blog_migrate/042d0494e41b8c6c556d9ae48934fbbe.png)
如上图所示,您可以完全控制字幕的外观。 您甚至可以单击“ 更多”按钮添加自定义CSS,以进一步自定义外观。
如果要在幻灯片上添加更多元素怎么办?
例如,假设我们想向读者介绍有关老虎的更多信息。 在这种情况下,您可以单击左上角的绿色加号按钮在幻灯片上添加更多元素,例如标题,文本和图像。
![扩展字幕](https://i-blog.csdnimg.cn/blog_migrate/1a8a242e41afe43bf7664d084e90cdc8.png)
完成所有更改后,您可以使用顶部的按钮立即预览幻灯片在不同设备上的外观。 顶部栏中还具有撤消和重做按钮,因此您可以撤消您不喜欢的任何更改。
对结果满意后,只需单击“ 保存”按钮将其永久保存。 您可以类似的方式更改所有其他幻灯片的内容和外观。
![幻灯片预览和保存按钮](https://i-blog.csdnimg.cn/blog_migrate/2b7ef23ed074526e76a992878ea3d2c9.png)
更改滑块设置
对单个幻灯片进行更改后,您可能还希望更改会影响整个滑块的设置。 为此,只需在仪表板页面上单击要编辑的滑块,然后向下滚动到“编辑”部分。 这是页面的屏幕截图,您可以在其中编辑所有滑块选项。
![滑块设置](https://i-blog.csdnimg.cn/blog_migrate/60aa1f9c1f426d586acb1804121fb24c.png)
让我们从更改箭头的外观和位置开始。 您可以选择不显示任何箭头,或选择有背景或无背景的箭头。 第一个选项将在箭头下方添加深色覆盖,以使其从图像背景中脱颖而出。 您可以从不同的图标形状中选择,并且仅当用户将鼠标悬停在幻灯片上时才通过打开“悬停显示”选项来显示它们。 您还可以从13个不同的预定义位置中选择箭头。
![更改智能滑块中的箭头](https://i-blog.csdnimg.cn/blog_migrate/1b91a5b875804a3f28312e1b5ba919ef.png)
您还可以在每个滑块上显示项目符号,以便用户可以直接跳到特定位置的图像。 您可以打开几个选项,例如仅在悬停时显示项目符号或随每个项目符号显示幻灯片缩略图。 在这种情况下,我已将其关闭,因为我们的滑块在每张幻灯片下方都会显示缩略图,从而使项目符号变得多余。
![在Smart Slider中更改幻灯片项目符号](https://i-blog.csdnimg.cn/blog_migrate/0f718cb756a99809a40acffd552dbde6.png)
您可以通过关闭“ 悬停显示”选项来永久显示缩略图。 缩略图的宽度和高度默认设置为100像素乘60像素。 通常看起来不错-缩略图不足以分散注意力,但足以显示快速预览。 您也可以将缩略图左对齐,居中或右对齐。
![在Smart Slider中更改缩略图](https://i-blog.csdnimg.cn/blog_migrate/f567fc227dece8b3af56470d3dbf91db.png)
更多滑块设置
您还可以更改其他一些常规设置,例如滑块的名称,其尺寸以及用户是否可以使用键盘浏览幻灯片。 您还可以为不同幻灯片之间的过渡设置动画,并指定动画持续时间。
![更改常规智能滑块设置](https://i-blog.csdnimg.cn/blog_migrate/aaaea4528e0431a065f672628c94705c.png)
您还可以更改其他一些设置,例如在台式机,平板电脑或移动设备上设置滑块大小并限制其宽度。
![更改滑块大小](https://i-blog.csdnimg.cn/blog_migrate/327375fe774cb9618c59f20af984668d.png)
最后,您可以使用三种不同方法之一发布滑块。
第一种是将简码直接添加到您的帖子和页面中。 插件提供的短代码已经包含嵌入其中的右侧滑块ID。 您所要做的就是将其复制并粘贴到所需的位置。
该插件还向内置的WordPress编辑器中添加了一个图标,可让您轻松地将滑块添加到任何页面或帖子。
最后,您可以使用PHP代码段将滑块集成到主题中,以发出滑块简码。
![发布滑块](https://i-blog.csdnimg.cn/blog_migrate/235439fec158a4eae12361d72dd41d18.png)
最后的想法
在本教程中,我们使用了免费的Smart Slider 3插件来创建图像滑块。 但是,您也可以使用它基于类别或标签为WordPress帖子创建滑块。 尝试使用该插件的所有功能,看看它是否符合您的需求。
另外,如果您想使用自定义插件,但又不习惯修改代码,而是希望有人为您完成所有操作,请考虑使用托管WordPress托管。 感谢Envato与SiteGround的合作关系,您可以获得高达60%的托管WordPress托管折扣 。
翻译自: https://code.tutsplus.com/tutorials/how-to-add-a-slider-to-wordpress-with-a-free-plugin--cms-33345