如何使用 Elementor 的 PDF 查看器

Blair Jersyer Mar 2, 2022

如果您正在寻找如何在 Elementor 上嵌入 PDF 文档,那么您来对地方了。 虽然我们已经分享了如何通过添加链接来做到这一点,但在这里我们将了解如何使用Elementor在您的 WordPress 博客上嵌入 PDF 文档。

在今天的教程中,我们将重点介绍一个可以完成这项工作的插件,名为“ PDF Viewer For Elementor ”。

让我们开始吧。

下载并安装 Elementor 的插件 PDF 查看器

第一步是从仪表板下载并安装插件。 您可以通过前往插件并使用名称“PDF Viewer For Elementor”直接从仪表板执行此任务。

创建令人惊叹的网站

使用最好的免费页面构建器 Elementor

现在开始

这是一个非常简单的插件,不需要配置。 无需提醒您应该在 WordPress 安装中激活Elementor

使用 Elementor 编辑/创建页面以嵌入 PDF

现在我们将使用 Elementor 创建或编辑现有页面。 启用 Elementor 的 PDF 查看器后,您将看到两个新组件添加到 Elementor 的基本元素中。

如您所见,该插件向 Elementor 添加了 2 个新元素,但您何时应该使用其中之一。 这就是我们将在下面弄清楚的。

何时使用 PDF 查看器元素

“PDF 查看器”元素允许您添加一个 iframe,该 iframe 使用 Google 文档预览器来使用指向您的 PDF 文档的链接。

您只需提供一个 URL 或将您的文件上传到您的媒体上。 您还可以配置预览器的大小和对齐方式。

虽然这个解决方案效果很好,但它有一些缺点:

  • 如果您的 WordPress 博客在本地托管,则它不起作用
  • 它依赖于可能停止工作的外部网站
  • 加载 PDF 可能会很慢

如果您可以使用外部服务来显示 PDF,那么此解决方案适合您。

何时使用 PDFjs 查看器

此插件添加的第二个元素是 PDFjs 查看器。 顾名思义,此解决方案依赖于使用 Javascript 嵌入您的 PDF 文档。 这些解决方案具有与前一个元素相同的设置,但具有在本地工作的优势。

在这里,您只能从媒体中选择文件以将其嵌入为 PDF。 该解决方案也有一些缺点:

  • 如果浏览器不执行 Javascript 将无法工作(大多数现代浏览器运行 Javascript)
  • 包括更多要下载的文件以及对服务器的更多请求。

PDF 预览示例

以下是 PDF Viewer for Elementor 添加的两个元素的预览效果。

使用 Element PDF 查看器进行预览

此预览是可以接受的,并且在底部的导航按钮中提供了对浏览页面很有用的导航按钮。

使用 PDFjs 查看器预览

“PDFjs 查看器”还提供导航按钮,但包含先前预览中缺少的搜索按钮。

在 WordPress 上嵌入 PDF 的其他插件

如果此插件不是您正在寻找的,那么以下插件可能是您正在寻找的解决方案。

WordPress 的 PDF 查看器

WordPress 的 PDF 查看器是 2014 年以来 CodeCanyonavailable 上用于 WordPress 的高级 PDF 阅读器插件。使用此插件,您可以使用现代 PDF 阅读器 & 动画书显示和嵌入 WordPress 网站的 PDF 文件。

主要特征

  • 启用/禁用社交分享
  • 启用/禁用打印选项
  • 启用/禁用下载选项
  • 启用/禁用演示模式
  • 启用/禁用查找选项
  • 启用/禁用徽标可调

  • 在任何帖子/页面上添加文本链接到您的 pdf 文件的简码
  • 完全响应的 PDF 查看器
  • 样式 & 自定义所有项目。
  • 兼容大多数浏览器
  • 快速 & 流畅的用户体验

PDF Embed - WordPress PDF 查看器插件

Elfsight PDF Embed 添加了一种简单的方法来在您的网站页面上显示 PDF 文件。 只需单击几下,您的文档就会发布在网站上,用户可以在其中查看和下载它们

主要特征

  • 本机小部件
  • 与高级主题兼容
  • 可用的简码
  • WordPress 古腾堡编辑器
  • 支持视觉作曲家

PDF 嵌入器

使用 PDF Embedded,您可以上传 PDF 并将它们直接嵌入到您的网站中,就像添加图像一样简单! PDF 将自动调整为自然大小和形状,或者如果它们太大,则填充可用的宽度。 或者,您可以设置宽度和高度将自动计算。 每当用户调整页面大小时,都会重新计算形状。

此插件附带具有更多功能的高级版本

概括

您将使用以下哪种解决方案?您有什么建议?请在评论中告诉我们。 不要忘记在我们的社交媒体帐户上关注我们:Facebook 和Twitter

Divi WordPress Theme