add file bolck to download image tumnail

WP教程 9 - 如何轻松添加文件下载功能以提升用户体验?

在浏览网页时,我们经常会看到提供文件、音频、视频下载的网站。

许多初学者可能会觉得在网页中设置文件下载功能比较复杂,或者认为需要一定的网页搭建技术。

我最初也有过同样的想法,但随着技术的进步,现在在网页中添加下载功能已经变得非常简单。

使用古腾堡编辑器的文件区块,就可以轻松在网页中实现下载功能。

在上一篇教程中,我们编写了一篇关于公司简介的文章。在本期教程中,我们将在文章的最后部分添加一个下载公司介绍PDF的操作。

1.添加文件block

首先,在文章的最后部分添加文件区块。

添加文件区块的步骤:

  1. 在文章编辑页面中的段落处点击”+”号,或者点击编辑页面左上方的”+”按钮打开区块库。
  2. 在区块库中寻找或收索”文件”区块。
  3. 点选导入到编辑页面。

导入后,就可以在编辑页面中添加了空白的文件区块。

2.上传供用户下载的文件

向文件区块上传文件有三种方法。

  • 方法1:点击上传按钮,上传电脑中的文件
  • 方法2:点击媒体库,从已上传的媒体资料中选择一个文件
  • 方法3:直接拖拽文件到区块上传

在本期教程中,我们将上传一个名为”Tomorrow Technology company info”的PDF文件。

上传的文件将保存在网站的媒体库中。文件区块将根据上传的文件名自动生成下载页面中的文件名以及下载按钮。访问网站的用户可以通过文本链接或下载按钮下载PDF文件。

3.调整区块样式

文件上传后,接下来就是进行内容显示样式的调整。

3-1 文件区块的工具栏

文件区块的工具栏包含以下设置选项:

  • 对齐:可调整文件区块的宽度,包括宽幅、全幅、左对齐、居中对齐和右对齐。
  • 文本样式:可调整文件名或下载文本的样式,如粗体、斜体和高亮等。
  • 替换:点击替换可重新选择或上传文件。
  • 复制URL:点击复制URL可获取文件的下载链接。
3-2 文件区块的样式设置

除了工具栏的设置,还可以对区块进行更详细的显示和样式设置。

点击文件区块,编辑画面的右侧将弹出区块的设置和样式标签

设置标签的设置项目如下:

  • 显示内联嵌入:选择是否在页面上直接显示文件内容,而非作为下载链接。
  • 连接至媒体文件:选择此项后,点击文件链接将直接打开或下载媒体文件,而非跳转至包含该文件的媒体页面。
  • 链接至附件页面:选择此项后,将把文件链接至WordPress中的附件页面,该页面是一个特殊的页面,用于展示媒体文件的详细信息和元数据。
  • 在新窗口打开:选择是否在新的浏览器窗口或标签页中打开文件链接。
  • 显示下载按钮:选择是否显示下载按钮,可以根据需要开启或关闭。

样式标签的设置项目如下:

  • 背景:可以设定文件区块的背景颜色。
  • 链接:可以设定文件名(即下载链接)的颜色。
  • 内边距:可以设定文件区块边框到按钮边框或文件名之间的间距。
  • 外边距:可以设定区块与区块之间以及区块与编辑页面边缘的间距。

4.要点总结

本篇教程主要讲解了如何使用Wordpress的文件区块,在网站上添加下载方式。不论是PDF还是其他常见的格式,都可以通过简单的拖放操作来实现文件的上传和下载。

此外,文件区块可通过工具栏以及侧边的设置,可对文件名和下载按钮进行更细致的调整和设置。

对于想要在网站上提供多种文档资料下载的网站运营者,WordPress的文件区块无疑是一个极具实用价值的工具。妥善使用它,可以大大提升网站的互动性和实用性,为访客带来更优质的浏览体验。

在使用文件区块时,可区分不同类型资料的重要程度,将更重要的内容以更突出的方式展示。

此外,定期检查失效的链接,及时更新过期的资料,这也是非常必要的。

最后,希望本篇内容能对您使用Wordpress有帮助。

用户评论
{{ reviewsTotal }}{{ options.labels.singularReviewCountLabel }}
{{ reviewsTotal }}{{ options.labels.pluralReviewCountLabel }}
{{ options.labels.newReviewButton }}
{{ userData.canReview.message }}
fuyeshidai

做点副业,为生活加点料

相关 文章
how to manage post list image tumnail
WP教程 14 - 如何在文章概览中快速编辑和管理文章?
Elementor pro Review widget
Elementor 专业教程 17 - Review小工具的设置和使用方法
Elementor General 81 gaojibiaoqian.webp
Elementor 通用教程 4 - 高级标签的设置和使用方法
Elementor pro Share Buttons widget .webp
Elementor 专业教程 20 - Share Buttons小工具的设置和使用方法
Elementor basic 26 jianma.webp
Elementor 基础教程 26 - 简码小工具的设置和使用方法
add future image futuer
WP教程 11 - 想让文章更出彩?特色图片是关键!
understanding-wordpress-comment-function tumnail
WP教程 28 - 如何有效使用WP评论功能,提高博客的互动性!
Elementor22-社交图标
Elementor 基础教程 23 - 社交媒体小工具的设置和使用方法
Elementor General 80 yangshibiaoqian.webp
Elementor 专业教程 2 - Post小工具的设置和使用方法 样式标签篇
Elementor pro Table Of Content widget .webp
Elementor 专业教程 18 - Table Of Content小工具的设置和使用方法
快速 搜索
站长 推荐
Elementor PR image

Elementor

建站必备插件推荐
Elementor是一款WordPress平台上的可视化页面构建器插件,无需编程即可设计网页

访问官网
Astra PR image

Astra Theme

建站主题推荐
Astra Theme是一个快速、轻量级且高度可定制的WordPress主题,适合各种网站

访问官网
Crocoblock PR image

Crocoblock

建站功能插件推荐
Crocoblock是一系列高功能的Elementor附加插件,用于创建动态内容和专业级网站

访问官网
elementor basic promotion image-2

Elementor Free Widget

Elementor 免费版小工具
是设计网页时所需的基础类工具。
大约包含30多个小工具

访问课程页
elementor pro promotion image-2

Elementor Pro Widget

Elementor 专业版小工具
是面向专业熟练用户的高级设计套件。
大约包含30多个小工具

访问课程页
已阅读 文章
您还没有阅读任何文章
AI Tools Post
YYP-2023-11-25-10-02-07
RTILA - 网络自动化工具,数据抓取、监控、货币化,高效提升工作效率,实现网络智能化
YYP-2024-06-13-06-59-34
Baidu Comate - 百度小编陪伴创作无界限,提升十倍编程乐趣!
YYP-2023-11-29-09-17-01
OnSite - 个性化网站通知工具,提高客户参与度和转化率,增强用户黏性
YYP-2024-06-23-08-20-30
Wujie AI - 在这里,您将成为艺术创作界的下一个"毕加索",展现无尽才华!
YYP-2024-05-28-13-26-12
x-design - 美图秀秀AI设计平台,海量素材一键生成设计,快速出图
YYP-2024-05-26-12-34-59
PicWonderful - 在线智能修图专家,还原照片本真魅力
Canva Post
canva magic studio info
Canva 相关教程 1 - 未来的设计在这里!Canva「Magic Studio」AI工具包大揭秘!
canva-beginner-tutorial-text-box thumbnail
Canva新手指南1 - 全面解析Canva文本框的基本功能!
how-to-use-canva-docs-tutorial thumbnail
Canva新手指南5 - 掌握Docs的功能和技巧,使文档创作更简单!
Complete-Guide-to-Canva-Design tumnail
Canva 相关教程 3 - 设计初体验!用Canva打造你的第一个创意作品
how-to-use-canva-make-short-video thumbnail
Canva新手指南6 - 无需专业软件!用Canva制作高质量动态视频
how-to-use-canva-make-a-ppt-tutorial thumbnail
Canva新手指南4 – 告别平庸!用Canva打造与众不同PPT演示文稿
Smm Post
Youtube Account and video up tunmail
【Youtube】从零到一!创建YouTube频道并上传视频的全流程
sn post youtube premium
【Youtube】一文读懂YouTube Premium会员权益!让你不再犹豫
sn post youtube 20240606
【Youtube】YouTube运营全攻略:从零到一打造你的油管频道
SN Post tumnail Youtube zhuanqianmijue
【Youtube】将爱好转为事业!通过YouTube频道赚钱的秘诀
comprehensive-guide-youtube-video-editing tumnail
【Youtube】如何正确选择一款适合自己的视频编辑软件?
Mastering-YouTube-Video-Advertising-Strategy Tumnail
新手必看!解锁YouTube视频广告投放优化技巧,提升转化率
AI工具 分类筛选
AI Main Category checkbox