如何使用 Elementor 和 HappyAddons 创建律师网站

无论您是一名律师还是律师,今天如果没有网站,您就无法前进。美国律师协会在一份报告中透露,大约四分之三的律师事务所维护着官方网站。因为64% 的人喜欢在网上寻找合适的律师或律师事务所

律师始终站在解决从商业到家庭问题的各种法律事务的最前沿。2012年,苹果公司向律师支付了6000万美元,以赢得对三星的诉讼。几乎每天都有大量类似类型的诉讼提起。

拥有网站可以帮助您展示您的服务、突出律师简介、吸引潜在客户并定期发布内容。本文将介绍如何使用 Elementor 和 HappyAddons 从头开始​​创建律师网站。它甚至不需要您编写一行代码。

律师网站必须具备哪些要素

律师网站上必须具备的元素

所有律师网站上都必须包含几个关键元素,无论其设计和布局如何。在进入教程部分之前,您必须详细了解它们。让我们详细探讨它们,以便您可以为这些元素准备内容。

A。主页

主页是网站的主要登陆页面。它充当网站上可用内容的导航网关。一个好的登陆页面可以立即给人留下积极的印象,吸引读者的注意力,并将他们吸引到不同页面和部分上发布的信息。

一个好的主页可以快速介绍您的服务并帮助他们确定这些服务是否适合他们的需求。以下是您必须在主页上包含的内容。

  • 对您的服务和实践领域的清晰简洁的描述。
  • 导航菜单,包括页眉和页脚。
  • 专业且高品质的图像。
  • 推荐和社会证明。
  • 联系表和用于预约咨询的 CTA 按钮。

b. 关于页面

关于页面必须能够在访问者中建立对律师专业知识和专业精神的信任。详细展示您的律师事务所的历史,包括其愿景和目标。如果它获得了任何奖项和认可,请务必在此页面上发布。

C。律师简介

您可以在“关于”页面上添加律师个人资料。但如果您为它们创建一个单独的页面,效果会更好。确保页面上有每位律师的专业头像、传记、教育背景、执业领域、专业会员资格和社交渠道链接。

d. 服务页面

律师事务所通常处理各种诉讼。例如,滥用知识产权、医疗事故、歧视、家庭暴力、违约等。仅在特定部分展示贵公司提供的诉讼服务,以展示您的专业知识。

和。感言

推荐起到社会证明的作用。据 Attorney Sluice 称,80% 寻求在线聘请律师的人倾向于先阅读评论。在主页上创建特定的推荐部分并通过幻灯片展示它们。切勿发布虚假推荐。

律师网站上的推荐部分

F。联系我们页面(预约咨询)

此页面必须提供访问者可以与您的律师事务所取得联系的信息。您必须在此页面上包含电话号码、WhatsApp、社交渠道链接和电子邮件地址。添加地图以指向您的实际办公位置。

如今,大多数律师事务所允许客户参加在线会议。如果您也想提供这项服务,请在描述办公时间的页面上添加“预约咨询”部分。如果您在表格中描述办公时间会更好。

G。博客文章

博客文章可让您分享您的知识、专业知识和有关法律事务的最新动态。此外,它还有许多 SEO 好处。定期发布相关关键字的博客可以使您的网站在搜索引擎上有机排名,并为您带来许多潜在客户。

创建律师网站的先决条件

希望现在您知道律师网站上必须具备的要素。但在建立网站之前需要解决一些技术先决条件。这条规则也适用于律师网站。看看下面的内容。

1. 获取域名

网站域名和托管

域名是网站的唯一地址,相当于物理地址。它包括名称和扩展名(例如 .com、.org 和 .net)。吸引人的域名是那些简短、有意义、易于记忆并代表公司名称的域名。

有很多地方可以购买域名。但其中最好的是 Namecheap、BlueHost、Hostinger、Dreamhost 和 HostGator。

2.购买虚拟主机套餐

网络托管是一种将您的网络文件和数据存储在在线空间中的服务。购买托管计划意味着租用在线空间,这与实体店相同。确保您的托管提供商提供一流的支持、安全性、99% 的正常运行时间和友好的控制面板。

顶级网络托管提供商包括 Hostinger、Kinsta、Cloudways、Namecheap 和 Exonhost。探索他们的网站并购买您需要的计划。

3.安装WordPress

WordPress 是一个适合初学者且易于使用的内容管理系统 (CMS)。您可以使用此 CMS 创建和设计几乎任何网站。

  • 从托管提供商获得访问权限后,请登录 cPanel。
  • 找到Softaculous Apps Installer并单击它。
找到 Softaculous Apps Installer 并单击它

  • 您将找到所有流行的内容管理系统。
  • 滚动它们直到找到 WordPress。
  • 点击WordPress 下的安装按钮。
  • 这可能需要您执行几个简单的步骤。
  • 将它们一一完成。
安装WordPress

如果您从不同的公司购买了域名和托管计划,则必须解决一些更多的技术问题,例如名称服务器设置。如果您不想承担这些麻烦,请询问托管提供商。他们会代表您做这些事情。

4. 安装主题并创建页面

  • 转到外观 > 主题
  • 单击顶部的添加新按钮。
  • 在搜索框中输入Hello Elementor 。
  • 将鼠标悬停在主题上将出现“安装”按钮。
  • 单击“安装”按钮,然后激活它。
安装你好元素

如果没有页面,您就无法在网站上发布信息。

  • 导航到 WP 仪表板 > 页面。
  • 您可以通过单击添加新按钮来创建任意数量的页面。
创建页面

律师网站设计分步指南

我们现在正处于本文的设计部分。在这里,我们将介绍使用 Elementor 和 HappyAddons 设计律师网站的分步教程。Elementor 是一个功能强大的页面构建器插件,您可以通过它设计网站的每个部分,而无需编写任何代码。

HappyAddons 是一个插件,可以通过更多令人兴奋的功能和小部件进一步增强 Elementor 的能力。通过下面的链接将这些插件安装在您的网站上。

安装完成后,请开始执行以下步骤。

步骤01:为网站创建标题

HappyAddons 有一个强大的主题生成器,您可以通过它创建令人惊叹的页眉和页脚。

  • 导航到HappyAddons > 主题生成器 > 标题
  • 单击添加新按钮。
  • 这将打开一个简单的弹出窗口。
  • 完成它。
从主题生成器转到标题

  • Elementor Canvas 将在您的屏幕上打开。
  • 单击加号 (+)图标并选择小部件区域的列数。
选择小部件区域的列数

  • 您可以为背景添加颜色。
  • 单击顶部的六点图标。
  • 转到样式部分。
  • 您会看到颜色选项下降了一点。
  • 设置您想要的颜色。
为背景添加颜色

  • 使用“内部部分”小部件,您可以在单个列内添加更多列。
  • 这将为您提供更多选项来将元素添加到标题部分。
使用内部部分小部件添加更多元素

  • 拖放图标小部件。
  • 这将向该部分添加默认图标。
  • 但您可以更改它并自定义其样式。

  • 使用文本编辑器小部件,您可以将文本添加到该区域。
  • 您可以按照上面显示的相同指南对文本进行样式化。
您可以对文本进行样式化

  • 使用相同的小部件和公式添加图标和文本,如下图所示。
  • 您可以使用按钮小部件在该部分上创建按钮。
添加按钮

  • 按照相同的方式,您可以创建具有首选列数的新区域。
  • 使用图像小部件添加徽标。
  • 使用快乐菜单小部件添加标题菜单。
  • 如果您的品味改变,您可以更改背景颜色
  • 你可以看到我们改变了顶层的背景颜色。
  • 完成后,按 Elementor 面板底部的“发布”按钮。
添加标题菜单

注意:如果快乐菜单小部件不起作用,则说明您尚未在后端配置菜单。

  • 转到外观 > 菜单
  • 按照下面所附的视频配置菜单。
  • 快乐菜单小部件将在此之后工作。

步骤02:设计律师网站主页

  • 转到WP 仪表板 > 页面
  • 选择主页。
  • 使用 Elementor 打开页面。
使用 Elementor 打开页面

页面打开后,您将在顶部看到默认菜单栏、页面名称和页脚。要清除此页面中的这些默认项目:

  • 按左下角的设置图标。
  • 单击“页面布局”旁边的下拉列表。
  • 从列表中选择选项Elementor 全宽度。
在 Elementor 全宽中打开页面

# 添加英雄部分

  • 选择英雄部分的列。
  • 从布局 > 高度 > 最小高度增加此部分的高度。
为英雄部分创建一个区域并自定义其高度

  • 转到样式>背景
  • 单击幻灯片图标。
  • 添加任意数量的图像。
  • 但请确保这些图像的高度和重量与您选择的高度相关。
将图像添加到英雄部分

  • 您可以向图像添加叠加颜色。
  • 向下滚动一点,您将找到“背景覆盖”选项。
  • 添加您想要的颜色。
添加背景叠加

  • 您可以像我们一样在英雄部分添加文本和按钮。
  • 为此,请使用标题、文本编辑器按钮小部件。
在英雄部分添加按钮、文本和其他元素

# 添加服务部分

  • 您可以使用现成的模板来创建服务部分。
  • 单击“快乐”图标转到模板库。
  • 选择您喜欢的模板并点击其插入按钮。
  • 该模板将在一分钟内导入您的页面。
  • 请参阅视频中的过程。

  • 添加代表您的服务的图像和合适的文本。
  • 您可以从“样式”选项卡添加图像并自定义“高度”和“宽度”
  • 希望你能自己做。
编辑服务部分

# 添加短视频

  • 如今,在首页添加短视频已成为一种趋势。
  • 拖放粘性视频小部件。
  • 它将为您提供将视频添加到主页的选项。
将视频添加到主页

  • 您可以链接来自 YouTube 或 Vimeo 的视频或从本地驱动器上传。
  • 您还可以启用其他几个选项,例如自动播放、静音、循环、开始时间、结束时间等。
视频选项

  • 为了更加风格化,您可以向视频添加叠加图像。
  • 您可以保留相同的图标或更改它。
  • 当访问者单击该图标时,视频将开始播放。
向图像添加叠加层

# 添加律师部分

  • 通过单击“快乐”图标,您可以选择一个模板来显示在您公司工作的律师。
  • 您不需要展示在公司工作的每位律师。
  • 但您可以展示最知名的律师。
选择用于显示团队成员的模板

  • 您可以看到,我们已经定制了此部分的标题。
  • 在该部分添加了律师。
  • 您可以从 Elementor 面板更改他们的姓名、职位和其他内容。
将律师添加到主页

# 显示您所在律师事务所工作经历的简要总结

展示您的工作简史可以向网络访问者展示您的专业知识。如果用数字来表示会更好。您可以创建与我们的设计类似的部分。

  • 创建一个新区域。
  • 将图像和背景叠加添加到该区域。
  • 使用文本编辑器小部件添加数字。
添加您所在律师事务所工作经历的简短摘要

# 添加推荐

我们已经说过,上述推荐可以作为社会证据。

  • 将“推荐轮播”小部件拖放到画布上。
  • 添加接受您审核的人员的图像、姓名和职位。
  • 您可以从“样式”部分进一步自定义它。
添加推荐

# 添加联系表格

添加联系表单可以帮助您收集潜在客户并建立电子邮件列表。

  • 您会在 Elementor 面板中找到大量联系表单。
  • 拖放您已在后端安装的那个。
  • 然后,自定义其颜色、字体、空间、按钮等。
添加联系表格

注意:同样,您可以创建其他页面。一篇博文不可能向你展示所有页面的设计过程。我们以主页为例。希望您能在其他页面上自己完成。

  • 您需要再次转到主题生成器
  • 因此,导航到HappyAddons > 主题生成器 > 页脚
  • 添加新按钮。
转到主题生成器添加页脚

  • 当您登陆 Elementor 画布时,单击“快乐”图标。
  • 在搜索栏中输入页脚以查找所有页脚模板。
  • 选择您喜欢的一项并单击其插入按钮。
选择页脚模板

  • 使用 Elementor 面板中的选项自定义页脚。
  • 您可以添加新菜单、社交渠道及其链接。
  • 最后点击“发布”按钮。
  • 页脚将显示在您的整个网站上。
发布页脚

步骤 04:使网页设计具有移动响应能力

如今,超过 50% 的网站流量是由移动设备产生的。因此,您不能不优化您的网站。当您使用 Elementor 设计网站时,您必须优化其中的每个部分和元素以实现移动响应能力。过程很简单。

  • 单击Elementor 面板下方的响应模式图标。
  • 它将在顶部打开不同的设备视图模式。
  • 切换到这些模式,您可以看到网页布局在不同屏幕尺寸上的显示效果。
使网站移动响应

  • 如果您发现任何部分或元素在特定屏幕上无法完美查看,请自定义其形状、字体大小、高度、空间等。
  • 这些更改将仅针对该设备进行修复。
  • 例如,移动设备的字体大小或形状更改不会影响桌面视图模式。

注意:不要删除任何小部件。在任何特定设备模式上删除小部件也会从其他模式中删除。

编辑 elementor 部分以使其具有移动响应能力

  • 但是,如果您不喜欢在任何特定设备上显示某个部分或小部件,则可以将其隐藏。
  • 例如,您在上图和下图上看不到手机号码部分。
  • 只需单击六点图标即可选择该部分。
  • 转到高级 > 响应式。
  • 切换您想要隐藏此部分的模式旁边的按钮。
  • 最后按“更新”按钮。
如何隐藏 Elementor 支持的网站上的小部件或部分

因此,您可以使整个网站具有移动响应能力,并完成律师事务所的网页设计。

总结之前

设计整个网站是一个长期的项目。几年前,人们必须编写数千行代码来设计每个页面。为此,人们必须依赖专业开发人员。但使用页面构建器,您无需编写一行代码即可创建整个网站。

您需要的是不断增长的设计感,以便您可以策划精彩的页面布局。一旦您的概念准备就绪,您就可以使用 Elementor 和 HappyAddons 连夜将设计可视化。在本文中,我们指导您如何使用这些工具创建律师网站。




如何使用免费 Elementor 网站模板

创建迷人的网站是任何网站设计师、所有者和开发人员的梦想。但如果您必须从头开始,这个过程可能会令人畏惧且耗时。

使用现成的模板可以让您免去麻烦。感谢 Elementor,它允许免费用户访问其库并以零成本使用许多现成的模板。但几年前,Elementor 限制了这种高级服务的使用。

不用担心!您仍然会发现许多 Elementor 插件,为您提供许多免费模板。本文将向您介绍流行的 Elementor 插件,并解释如何使用免费的 Elementor 网站模板。开始吧!

HappyAddons:带有免费 Elementor 网站模板的强大插件

如何使用模板

HappyAddons 通过广泛的功能、小部件和模板扩展了 Elementor 的功能。借助这些资源,您可以通过附加功能进一步增强您的网站并使其脱颖而出。

HappAddons 目前拥有 125 多个小部件和 20 多个功能。它拥有一个内容丰富的库,其中包含大量现成的套件和模板。最重要的是,您可以免费使用其中许多资源。

一旦您对免费版本感到满意,您可以随时升级到专业版本。在本文的以下部分中,我们将向您展示如何使用 HappyAddons 的免费 Elementor 网站模板。

分步指南:如何使用免费的 Elementor 网站模板

确保您的网站上安装并激活了以下插件。如果您已经安装了它们,则可以跳到教程步骤。

步骤01:打开新页面

  • 导航至WP 仪表板 > 页面 > 添加新内容
  • 使用Elementor打开新页面。
使用 Elementor 打开新页面

  • 使用Elementor Canvas打开页面。
  • 转到左下角的设置选项。
  • 按页面布局旁边的下拉菜单。
  • 选择Elementor 画布。
设置页面布局 Elementor Canvas

步骤02:从快乐图书馆选择合适的模板

  • 您将在 HappyAddons 的库中获得大量现成的模板。
  • 按画布上的HappyAddons 库图标。
HappyAddons 库

  • 您将在库中看到免费和付费模板。
  • 免费的不会有PRO这个词。
  • 将光标悬停在模板上将显示“插入”按钮。
  • 单击插入按钮。
插入元素模板

  • 该模板将导入到您的画布上。
  • 完成该过程可能需要几分钟的时间。
已导入 Elementor 模板

步骤 03:自定义模板并添加新部分

您可能无法在导入的模板中找到所有必需的元素。从上到下滚动模板并检查要编辑的位置。假设您要添加推荐

  • 单击要自定义的部分上的加号 (+)图标。
向 Elementor 模板添加新部分

  • 您可以再次从该部分导入模板。
  • 或者您可以使用相应的小部件创建此部分。
  • 我们将向您展示这两种方法。
  • 先去快乐图书馆
自定义 Elementor 模板

  • 转到部分。
  • 里面有 400 多个现成的块。
  • 滚动它们并找出您喜欢的那一个。
  • 单击其上的插入按钮。
导入推荐块

但如果你想使用小部件构建它:

  • 将推荐小部件拖放到您喜欢的画布区域。
  • 您将获得从 Elementor 面板向小部件添加文本、审阅者图像及其名称的选项。
拖放推荐小部件

以同样的方式,您可以将其他部分添加到模板中并根据需要进行设计。

步骤04:保存并发布模板

  • “发布”按钮上的下拉图标
  • 这将打开两个选项:保存草稿另存为模板
  • 使用您想要的那个。
  • 但如果您想发布模板,请点击“发布”按钮。
保存并发布模板

查看一些可以使用 HappyAddons 模板创建的网站类型的示例。

标题实际上是网站的顶部部分,包括为整个网站提供基本信息和导航的重要元素。标题通常包括网站徽标、网站名称、搜索栏、主菜单、社交菜单等。

另一方面,页脚位于网站的底部。它还包括重要的导航元素和页面链接,如站点地图、常见问题解答、关于、条款和条件、隐私政策等。没有页眉和页脚,网站是不完整的。

在 Elementor 中免费创建页眉和页脚

使用 Elementor 主题生成器,您可以轻松创建页眉和页脚。问题是您必须是高级用户才能访问主题生成器。但不用担心!HappyAddons 有一个免费的主题生成器,您可以通过它免费创建页眉和页脚。

# 为网站创建标题

然而,HappyAddons 没有任何现成的标题部分模板。很快,他们就会拿出一组很好的标题模板。然而,使用其主题生成器从头开始创建一个全新的标题只需几分钟。

  • 导航到HappyAddons > 主题生成器
  • 登陆“标题”选项卡。
  • 接下来,单击添加新按钮。
转到 HappyAddons 主题生成器

  • 为标题部分创建一个区域。
  • 选择您想要的列数。
选择列数

您可以通过多种方式对标题部分进行样式化。我们将在这里向您展示一种方法。

  • 点击创建的新区域顶部的六点图标。
  • 转到样式选项卡。
  • 选择部分背景的颜色。
风格化标题部分

  • 开始向标题栏部分添加合适的小部件。
  • 我们现在将“内部部分”小部件添加到第一列。
将小部件添加到标题以设计站点徽标

  • 拖放图标小部件。
  • 然后,从图标库中选择您想要的图标。

  • 以同样的方式,将文本编辑器小部件拖放到图标旁边。
  • 编写适合该图标的文字,并且您想与用户进行交流。
使用文本编辑器小部件将文本添加到标题部分

  • 观看下图。
  • 我们以同样的方式添加了一些其他文本和图标。
  • 您可以使用“按钮”小部件将 CTA 按钮添加到标题。
将按钮添加到标题部分

  • 按照上述相同的指南,将徽标添加到标题部分。
  • 拖放快乐菜单小部件以显示网站菜单。
添加标题菜单

  • 如果快乐菜单不起作用,您必须从后端进行配置。
  • 导航到外观 > 菜单
  • 按照下面附带的教程设置您的网站菜单。

# 为网站创建页脚

创建页脚比创建页眉的过程更容易。因为您可以使用 HappyAddons 库中任何合适的页脚模板。

  • 转到HappyAddons > 主题生成器 > 页脚
  • 单击添加新按钮。
创建一个新的页脚 HappyAddons 主题生成器

  • 单击 HappyAddons 图标打开库。
  • 在搜索框中输入页脚。
  • 您将看到下面显示的免费和专业页脚模板。
  • 导入免费的。
选择页脚模板

  • 自定义页脚菜单、页面链接和社交渠道。
  • 尽量避免在标题部分中提到的相同内容。
  • 完成编辑后,点击“发布”按钮。
发布页脚

因此,您可以使用 HappyAddons 的现成模板轻松创建整个网站。

# 探索 HappyAddons 主题生成器功能

参观 HappyAddons 主题生成器功能并探索您还可以用它做什么。

https://www.youtube.com/embed/QofKI8ZI_Kk?feature=oembed

常见问题解答 – 免费 Elementor 网站模板

这些是多年来人们提出的有关 Elementor 模板的最常见问题。

  • Elementor 有免费模板吗?Elementor 曾经向用户提供免费和付费模板。但免费模板不再可用。无论您寻找页面、页眉、页脚还是块模板,您都必须是高级用户才能访问其模板库。不过,您会在网上找到许多 Elementor 插件,例如 HappyAddons,附带大量现成模板。您可以使用其中任何一个在您的网站上导入免费模板。
  • Elementor 仍然免费吗?是的,Elementor 仍然有免费版本。您可以从wphive.comWordPress.org下载它。
  • Elementor 模板需要任何编码知识吗?不需要,免费的 Elementor 网站模板不需要任何编码知识。它们被设计为只需拖放即可轻松使用和自定义。
  • 我是否应该优化 Elementor 模板以使其具有移动响应能力?是的。强烈建议优化所有 Elementor 模板,以确保它们具有移动响应能力。因为有些元素在不同的屏幕尺寸下可能无法完美调整,可以通过优化来克服。
  • 我可以在任何 WordPress 主题上使用 Elementor 模板吗?Elementor 旨在与各种主题兼容。因此,您几乎不会发现某些主题无法与 Elementor 完美配合。

立即使用免费的 Elementor 模板创建您的网站

在上述指南中,我们尝试演示如何使用并充分利用免费的 Elementor 网站模板。我们还纳入了有关如何使用 HappyAddons 主题生成器免费构建页眉和页脚的指南。




如何使用 HappyAddons 在 Elementor 免费中创建博客文章模板

使用 Elementor 创建博客文章模板意味着为您网站上的所有博客文章构建独特的布局。每当您在 WordPress 上安装主题时,您都会获得带有有限自定义选项的默认帖子布局。但默认布局可能不足以满足您的需求。

您可能想要个性化其结构、外观和内容风格。Elementor 是一个很棒的解决方案,您可以使用它的主题生成器从头开始完全做到这一点。但如果您至少了解 Elementor 几天,您一定知道它的主题生成器不是免费使用的。

但不用担心!今天,我们将向您介绍 Elementor 插件,为您提供免费的主题生成器,您可以通过它以零成本完成该过程。那么让我们来讨论如何在 Elementor 免费中创建博客文章模板。

博客页面和博客文章之间的区别

博客页面是一个静态页面,包括所有已发布的博客文章。帖子按时间顺序(无论是按字母顺序还是按日期)发布在博客页面上。博客页面通常会在顶部显示最新的帖子以及摘录。它不包括作者框、社交分享按钮和评论区。

博客文章是一篇单独的文章,涵盖特定主题的详细分析。它还包括其他几个元素,如目录、作者详细信息、社交共享按钮、号召性用语、评论区域、标签、相关帖子、常见问题解答、订阅表格等。

如何在 Elementor Free 中创建博客文章模板

如何在 Elementor Free 中创建博客文章模板

要使用 Elementor 创建自定义博客文章模板,您必须有权访问其主题生成器。但该功能不是免费的。您必须升级到高级版本才能使用该功能。但是,您仍然可以通过安装另一个名为HappyAddons的插件来免费使用此功能。

HappyAddons 实际上是一个 Elementor 插件。它配备了数十个附加功能和小部件,可为您的 Elementor 网站提供支持。HappyAddons 也有免费版和高级版。免费版本包括一个主题生成器,您可以通过它创建自定义博客文章模板。

从下面下载并安装您网站上的插件。

在您的网站上激活后,请跳至以下步骤。

步骤 01:从 HappyAddons 主题生成器打开单个模板

  • 导航到HappAddons > 主题生成器
  • 选择单个选项卡。
  • 单击添加新按钮。
使用 HappyAddons 主题生成器打开单个模板

  • 将打开一个弹出窗口。
  • 为模板命名。
  • 创建模板按钮。
选择模板类型

步骤02:通过拖放添加元素

网站上的元素通常会根据网页设计和内容风格而有所不同。但任何博客文章中都有一些必须具备的元素,无论其类型如何。它们是标题、特色图片、内容正文、作者姓名、发布日期、作者框、社交分享按钮、评论框等。

我们建议您创建线框。它将帮助您了解博客文章模板中应包含哪些元素。我们现在将它们一一添加到帖子中。

#添加帖子特色图片

  • 单击加号 (+)图标创建内容区域。
  • 选择与线框相符的列数。
  • 我们为本教程选择了三栏。
添加帖子特色图片

  • 您可以自定义列的大小和宽度。
  • 我们使中间的列变大,另外两列变窄。
  • 在搜索框中输入帖子特色图片。
  • 将其拖放到内容区域中。
添加帖子特色图像小部件

  • 您可以从 Elementor 面板的内容和样式选项卡自定义特色图像。
  • 您可以修改其大小、对齐方式、边距、填充、边框类型等。

注意:您只会看到一个图像部分,没有任何内容。不用担心!您只是创建一个布局。发布模板后,布局将应用于所有博客文章。您将在已发布的博客文章的前端看到更改。

自定义特色图像部分

# 添加帖子标题

  • 将帖子标题小部件拖放到特色图像下方。
  • 但如果您愿意,您可以将标题放置在特征图像部分上方。
将帖子标题添加到博客帖子模板

  • 接下来,从 Elementor 面板自定义帖子标题并使其风格化。
  • 确保将H1设置为博客文章标题。
自定义帖子标题

#添加帖子信息

  • 帖子信息小部件将允许您显示作者姓名、帖子发布时间、日期、评论和更多选项。
  • 在 Elementor 搜索框中输入小部件名称。
  • 一旦它出现在下面,将其拖放到标题部分下方。
添加帖子信息

  • 您可以通过单击“添加项目”按钮向该部分添加更多选项。
  • 然后转到“样式”选项卡以对其上的内容进行样式化。

注意:仅当您的博客文章收到任何评论时,评论元素才会出现

在帖子信息小部件中添加更多元素

#添加帖子内容

  • 帖子内容小部件涵盖了主要内容主体。
  • 它允许您在帖子中包含文本、图像、GIF 和视频。
  • 将小部件拖放到合适的位置并以相同的方式进行自定义。
添加帖子内容

# 添加联系表格

  • HappyAddons 与大多数流行的联系表单集成。
  • 只需在搜索框中输入“表单”一词即可。
  • 您将获得下面显示的所有流行表单小部件。
  • 希望您能在列表中找到联系表单插件的小部件。
  • 将其拖放到画布上。

注意:例如,如果您在后端使用 weForms,请将相同的小部件拖放到画布上。

将表单添加到博客文章模板

MailChimp 被认为是增长订阅者列表的绝佳平台。这也是一个受欢迎的电子邮件营销服务提供商。好消息是HappyAddons 有一个 MailChimp 小部件。如果您想扩大订阅者列表,您也可以使用此小部件而不是联系表单插件。

查看本指南,了解如何使用 HappyAddons 将 MailChimp 表单嵌入您的网站

MailChimp 的 HappyAddons 小部件

# 添加社交分享图标

  • 社交分享小部件将使用户能够将博客文章分享到他们的社交资料中。
  • 这可能是提高与读者和访客互动的好方法。
  • 在 Elementor 搜索框中输入社交共享。
  • 将其拖放到订阅表单下方。
拖放社交共享小部件

  • 按任何社交选项卡。
  • 您将获得粘贴社交链接并对其进行自定义的选项。
  • 对其他选项卡一一执行相同操作。
  • 单击“添加项目”可在页面上添加更多社交共享图标。
添加更多社交分享图标并自定义它们

# 添加作者框

  • 如今,人们喜欢在阅读帖子时了解作者。
  • 作者元小部件将允许您在帖子模板上创建作者部分。
  • 您可以展示作者的姓名、头像、简短的简历和书面帖子。
  • 在社交共享图标下方添加小部件。
拖放作者元框

  • 展开内容选项卡上的作者元部分。
  • 您可以决定展示作者的姓名、标签、头像等。
  • 您还可以更改图像位置、头像大小以及其他样式。
自定义作者元框

# 添加评论框

  • 评论部分允许访问者提交他们对博客文章的看法。
  • 将“帖子评论”小部件拖放到帖子模板的末尾。
添加评论框

  • 您可以在所有帖子或选择性帖子上显示评论部分。
  • 转到“源”选项,然后单击旁边的下拉图标。
  • 下拉列表包括两个选项:当前帖子自定义
  • 选择“自定义”选项将允许您在选定的帖子上显示此评论框。
设置评论框的来源

  • HappyAddons 的评论是一个独特的小部件。
  • 因为它允许您对评论后的布局进行风格化。
  • 但此风格化选项在 Elementor 中不可用。
  • 因此,通过 HappyAddons,您可以享受更灵活的定制。
使用 Elementor Free 对评论框进行风格化

# 显示相关帖子

相关帖子部分建议与当前博客帖子相关的其他内容和文章。它们通常是根据标签、关键词和类别来选择的。您可以使用 Post Carousal 小部件来创建此部分。但为此,您需要访问HappyAddons 的 Premium

  • 安装高级插件后,Post Carousel 小部件将被解锁。
  • 将其拖放到 Elementor 画布上。
  • 然后,从内容和样式选项卡对其进行自定义。
添加帖子轮播小部件

  • 转到内容 > 查询
  • 指定作者、术语或标签。
  • 因此,相关帖子将显示在每篇博客文章上。
添加查询以在博客文章模板上发布相关文章

步骤03:使模板具有移动响应能力

如今,超过 50% 的网络流量来自移动设备。因此,一旦将必要的元素添加到画布上,您必须检查它们是否在其他设备上完美对齐。

  • 单击Elementor 面板底部的响应模式图标。
  • 您会看到不同的设备模式出现在顶部。
  • 在它们之间切换,您可以检查小部件是否完美对齐。
使博客文章模板移动响应

步骤04:发布帖子模板

  • 发布/更新按钮或箭头符号
  • 单击“保存草稿”将此设计另存为草稿。
  • 如果您想稍后将此设计用作​​现成的模板,请单击“另存为模板”。
  • 单击“模板条件”以发布设计。
发布博客文章模板

  • 您在下图中看到的是您可以使用免费版本的 HappyAddons 设置的默认条件。
  • 您需要高级访问权限才能设置自定义条件。
  • 单击保存并关闭按钮。
设置条件

步骤04:预览单个博客文章模板

现在,转到任何已发布博客文章的预览模式。您将看到模板已应用于它们。如果您不喜欢该布局,请再次使用 Elementor 打开模板并根据您的喜好进行自定义。

预览单个博客文章模板

有关如何在 Elementor 中创建博客文章模板的常见问题解答

希望您喜欢本教程部分。除此之外,您还必须了解更多主题来增长博客文章设计的知识。我们将在常见问题解答部分介绍它们。

  • 自定义帖子类型和博客帖子有什么区别?博客文章是传统的文章或文章,涵盖任何特定产品、功能、主题或信息的详细文章。它不会动态展示主体内容。自定义帖子类型允许您修改内容结构,包括自定义字段、分类法和功能。它使用户能够灵活地动态过滤出他们想要的内容。
  • 博客文章和博客页面之间的主要区别是什么?博客文章是对给定主题进行详细分析的文章。一些流行的博客文章类型包括操作指南、清单、评论、案例研究、新闻文章、个人故事等。但是博客页面展示了已发布的博客文章的集合及其标题、功能、图像和摘录。
  • 博客文章的主要部分是什么?以下是博客文章的四个主要部分,无论任何类型:1. 引人注目的标题
    2. 引人入胜的正文内容
    3. 媒体文件(图像、视频剪辑和 GIF)
    4. 号召性用语
  • 如何提高博客文章的可读性?1. 使用清晰易懂的文本
    2. 将主要内容分成多个带标题的部分
    3. 添加视觉效果以消除单调
    4. 合并表格和项目符号进行分解
    5. 遵循 F 或 Z 格式编写文本
  • 是否可以在 Elementor 中管理多个单个帖子模板?是的,您可以管理多个单个帖子模板。但为此,您需要高级访问权限,无论是 Elementor 还是 HappyAddons。
  • 我可以使用 Elementor 风格化/自定义帖子评论部分吗?默认情况下,Elementor 不允许您自定义帖子评论部分。但通过安装 HappyAddons 插件,您可以启用 Elementor 来风格化和自定义帖子评论部分。

最后的要点!

如果您在任何流行的 WordPress 中使用默认的博客文章布局,您会发现成百上千的其他网络所有者使用相同的布局。这种副本布局可能会给您的网络读者和访问者带来无聊的用户体验。

在这种情况下,创建定制的博客文章模板可能是一个突破性的解决方案。这可以使您的博客部分比其他部分更加专业和独特。使用 HappyAddons 主题生成器,您可以为您的网站创建几乎像专业人士一样的单篇模板。




Elementor AI 简介 – 优点、用例以及如何使用它

人工智能(AI)的广泛应用不再是幻想。你不能再否认它的重要性了。领先的 WordPress 页面构建器 Elementor 也将人工智能集成到其核心功能中。事实上,它们是第一个执行此操作的在线页面构建工具。

Elementor AI 的作用是简化复杂的任务,而不需要额外的人力。所以从现在开始,您可以在网页设计中享受更高的生产力。在本文中,我们将向您介绍 Elementor AI,解释其主要优势、用例以及如何使用它。

什么是 Elementor AI 及其优势

Elementor AI 在其本机平台中融合了多种 AI 功能,您可以通过它来设计、创建内容和生成 CSS。以前,您必须手动探索各种选项才能向特定元素添加悬停、移动、颜色、渐变等效果。

但在 Elementor AI 的帮助下,您可以立即将这些效果添加到您的网站。如果您想向帖子和页面添加文本、段落和标题,也可以使用 Elementor AI。您所要做的就是命令正确的提示。

以下是您目前可以使用 Elementor AI 创建的内容列表:

  • 生成文本
  • 创建并添加自定义 CSS 代码
  • 在 HTML 小部件中创建代码
  • 生成图像
  • 简化语言
  • 使文本更长和更短
  • 修复拼写和语法
  • 更改语言语气
  • 翻译文本

在未来的日子里,Elementor 可能会带来更多的发明给我们带来惊喜。

如何使用 Elementor AI 生成文本

希望您已经对 ChatGPT、Jesper 和 Scalenut 等生成式 AI 工具有所了解。您可以使用这些工具为您的网站创建长到短的内容。您现在可以使用 Elementor AI 执行相同的操作。

  • 使用 Elementor 打开帖子或页面。选择一个小部件。转到内容选项卡。您会发现一个三星级图标悬停在该图标上,会出现“使用 AI 编写”。单击此图标。
  • 这将弹出一个带有搜索框的弹出窗口。在框中写下您的提示。您将在下面得到一些提示建议,您可以根据需要使用这些建议。提示准备好后,请按“生成文本”按钮。
如何使用 Elementor AI 生成文本和段落

  • 我们使用提示“为 SEO 服务编写一个吸引人的页面标题”并得到下图中的文本。
  • 您将在弹出窗口中看到其他几个选项。您可以简化生成的文本,使其更长或更短,修复拼写和语法错误,更改语气,并将其翻译成另一种语言。
  • 如果您对结果感到满意,请按按钮使用文本
修改AI生成的文本

下面是我们使用 Elementor AI 为其生成文本段落的另一个小部件的示例。我们在这里使用的小部件是文本编辑器。所以今天,你可以告别写作障碍了。

使用 Elementor AI 生成的文本示例

注意: ChatGPT 如今对于营销人员来说是一座金矿。如果您对该工具感到好奇,请浏览本指南,了解如何使用 ChatGPT 进行营销

如何使用 Elementor AI 创建和添加自定义 CSS

在 Elementor 的早期版本中,您可以为 Web 元素添加各种交互效果,例如悬停、旋转、浮动、遮蔽等。但是要添加高级效果,您需要在自定义 CSS 部分中进行编码。对于无代码用户来说这是一个大问题,因为他们不知道如何编码。

但你可以使用 Elementor AI 像魔法一样克服这个缺点。它可以根据您的提示为您的小部件和元素创建自定义 CSS 代码。

  • 选择一个小部件/元素。转到Elementor 面板上的高级选项卡 > 自定义 CSS 。像上面一样点击三星级图标。
  • 当新的弹出窗口出现时,在搜索框中输入提示。按生成代码按钮。
如何使用 Elementor AI 创建和添加自定义 CSS

  • 您将看到必要的 CSS 代码已创建。单击插入按钮。
将代码插入自定义 CSS 部分

  • 您会看到应用了您想要的效果。如果您不喜欢该效果或想要修改它,请打开 AI 弹出窗口并详细写下您的提示。
  • 您可以生成自定义 CSS 代码并以相同的方式将它们添加到您的小部件中。

如何使用 Elementor 生成图像

希望您已经了解 Midjourney、Bing 和其他可以创建基于提示的图像的 AI 工具。您也可以使用 Elementor AI 执行相同的操作。该功能在开发者模式中仍然受到限制,但很快就会发布。

您可以从两个位置在 Elementor 中创建图像。第一个是使用图像小部件。第二个是在任何小部件的背景上。了解如何使用 Elementor 生成图像。

方法01:使用图像小部件创建和添加图像

  • 拖放图像小部件。单击图像小部件旁边的三星级图标。
如何使用 Elementor 生成图像

  • 将像以前一样打开一个弹出窗口。在第一个框中写下您的提示。如果您的故事写作能力较弱,请单击框右下角的增强图标。这将改善您的种子提示。
写入图像提示

您可以在盒子上看到临时提示。接下来,将图像样式和纵横比更改为您喜欢的。单击最后的生成图像按钮。

写入图像提示

  • 您可以看到使用 Elementor AI 生成的图像。将光标悬停在您喜欢的图像上将显示“使用图像”选项。单击它,您可以将该图像插入到您的网页上。Elementor AI 允许您在插入图像之前进行轻微编辑。
使用 Elementor AI 生成的图像

方法02:在小部件背景上创建并添加图像

  • 这个过程也非常简单。将任何小部件拖放到画布上。例如,我们已将Spacer小部件添加到画布中。
拖放间隔小部件

  • 单击六点图标选择整个小部件区域。转到样式选项卡。按经典图标。之后将打开图像部分。单击“使用 AI 创建”图标。
使用 Elementor AI 从背景创建图像

  • 其余步骤与第一种方法相同。希望你能自己做。
根据提示生成图像

Elementor AI 的局限性

虽然 Elementor AI 可以简化您的内容创建过程,但它也有一些限制。这适用于任何人工智能工具。只有当您知道如何处理这些限制时,您才能从 Elementor AI 获得最佳结果。让我们快速浏览一下它们。

A。人工智能生成的代码可能经常出现错误

如果您想生成简单的代码,Elementor 将为您提供非常好的结果。但在复杂的情况下,Elementor 经常会产生一些错误。因此,我们强烈建议您在实施代码之前检查代码,并始终保留您的页面和网站的备份。

b. 支持有限数量的语言翻译

到目前为止,Elementor AI 可以让您将文本翻译成 25 种流行语言。尽管这个数字会随着时间的推移而增加,但不能保证 Elementor 会包含不太流行的语言。

C。订阅费

即使您是 Elementor Pro 用户,也必须购买 AI 包才能访问 Elementor AI。否则,您将只能获得有限的免费试用积分。

d. 图像权重

要保持 Elementor 网站快速流畅,必须使用轻量级图像。因此,在上传任何图像之前,我们建议人们使用tinypng.com或其他工具对其进行优化。但如果您直接导入人工智能生成的图像,则无法选择优化它们。

我们发现 Elementor AI 生成的图像稍重,但不多。通过使用任何图像优化插件,您可以从后端自动压缩图像。阅读这篇关于如何优化网站图像的文章。

Elementor AI 价格

截至目前,Elementor 有两个高级套餐。它们是 AI Starter 和 AI Power。以下是他们的定价和提到的积分数量。

AI Starter – 2.99 美元/月,每年为您提供 18,000 个积分。

AI Power – 每月 8.25 美元,每年为您提供 50,000 个积分。

查看Elementor AI 定价页面

Elementor AI 常见问题解答

希望您从上述讨论中了解了有关 Elementor AI 的所有必要的基本知识。在本节中,我们将介绍更多问题解答,以帮助您做出有关 Elementor AI 的决定。

  • Elementor AI 免费吗?不,Elementor AI 并非完全免费。一开始您将获得一些有限的免费积分。一旦过期,您必须升级到 Elementor AI 的任何高级套餐。
  • 尽管还有许多其他 AI 工具,为什么我应该使用 Elementor AI?首先,该 AI 原生集成到 Elementor 编辑器中。您不必每次都切换到其他工具来生成和收集新内容。其次,为特定元素创建自定义 CSS 代码并将其应用到网页并不简单。Elementor AI 具有一些预先设计的设置,允许您为各个元素生成代码并立即实施它们。
  • 我可以在多个网站上使用 Elementor AI 订阅吗?是的!Elementor AI 是个人订阅。您可以在您正在开发的任何网站上使用它。
  • 我可以用英语以外的其他语言编写提示吗?Elementor AI 目前支持 29 种语言,并且随着时间的推移,该语言的数量还会增加。您可以用所有这些语言编写提示。
  • 我可以在下一个订阅期使用未使用的积分吗?不可以,您不能将未使用的积分滚动到下一年的订阅期。它们将被自动删除。

Elementor AI 总结

Elementor 首次上市时就彻底改变了网页设计行业。我们对其特性和功能非常满意。随着时间的推移,即使是无代码用户也能成长为专业的网页设计师。

当设计和优质内容结合在一起时,网站就可以充分发挥其潜力。Elementor AI 将成为这方面的突破性解决方案。因此,Elementor 将成为设计师和市场的魔杖。希望您喜欢这篇文章!




如何逐步使用 Elementor Flexbox 容器

Flexbox 容器是著名的 Elementor 页面构建器插件的一项强大的新功能。它通过元素的精确对齐和完美分布简化了制作网页布局的过程,从而实现了设计的一致性。

此功能还使您能够克服策划高度响应、交互式和灵活布局的限制。因此希望 Flexbox Container 在不久的将来能够很快取代 Elementor 的传统设计流程。

在本文中,我们将详细分析如何使用 Elementor Flexbox Container、其优点、与基于部分的设计系统的功能差异等。立即开始,不再浪费任何时间!

什么是 Elementor Flexbox 容器?

Elementor Flexbox Container 使用 CSS Flexbox 布局模型概念来灵活地对齐和组织元素。它充当父框,因为它包含文本、图像和小部件等所有元素。另外,该框还控制其中元素的定位、分布和对齐。

在基于部分框的 Elementor 中,您无法在特定部分中创建任意数量的部分。另外,您无法在一开始就为页面创建映射。在继续下一个部分之前,您必须连续设计上述部分。

但使用 Elementor Flexbox Content,您可以为页面创建初始映射,然后一一添加小部件。您将感受到网站线框图。因此,Elementor Flexbox Container 将在几天内成为流行的功能。

使用 Elementor Flexbox 容器的好处

该功能在测试版中已经存在很长时间了。Elementor 开发团队在发布该插件之前进行了大量研究并逐渐提高了可用性。现在让我们快速了解一下 Elementor Flexbox 容器的主要优势。

  • Flexbox 可以减少使用太多列和内部部分的需要。
  • 这可以提高网站速度。
  • 它为您提供了对 Web 元素排序的高级控制。
  • 您可以在容器内添加任意数量的容器。
  • 您可以使用容器创建初始布局/骨架并开始设计。
  • 使网页响应变得非常容易。

传统部分和新 Elementor Flex 容器之间的主要区别

传统部分和新的 Elementor Flexbox 容器在技术、视觉、性能和对齐方面存在几个关键区别。请阅读下面的内容。

A。技术差异

传统的 Elementor中,您必须创建一个部分并将其分为几列,这意味着您必须定义一个网格。之后,您可以添加小部件和元素。但问题是您只能在一个部分中添加一个部分,这限制了您定义个性化网格的能力。

Flexbox 容器也像一个部分。但是您可以在一个容器内放置任意数量的容器。这使您可以在将小部件和元素添加到所需的帖子和页面之前创建个性化网格。

b. 易于对齐元素

传统的 Elementor提供有限的对齐选项:左对齐、居中对齐和右对齐。但Flexbox 容器提供了更多对齐选项。您可以水平和垂直对齐内容,以确保所有元素之间完美的空间分布。

使用“对齐内容”选项(开始、居中、结束、间距、周围间距和均匀间距)进行垂直对齐。使用“对齐项目”选项(开始、居中、结束和拉伸)进行水平对齐。

C。性能差异

由于在传统 Elementor中创建个性化网格并不容易,因此您必须依赖 z-index、边距和其他 CSS 编码等内容。这可能会导致coad膨胀,从而导致网站页面加载速度变慢。

但在Elementor Flexbox的情况下,您不必依赖相同的东西,使您的网站能够保持页面加载速度。如果您分别使用这两个功能创建两个复杂的网站,这些差异将会很明显。

如何使用 Elementor Flexbox 容器(分步指南)

使用 Flexbox 几乎与使用传统的基于部分的 Elementor 页面构建器类似。因此,您不需要花太多时间来了解此功能。在本部分中,我们将向您展示如何使用 Elementor Flexbox 容器的分步指南。

步骤01:在 Elementor 设置中激活 Flexbox 容器

进入您的 WordPress 仪表板。导航到Elementor > 设置 > 正在进行的实验。向下滚动页面即可获得 Flexbox 容器。激活Flexbox容器。

如果您想激活或停用任何其他功能,可以从此页面执行此操作。

在 Elementor 设置中激活 Flexbox 容器

步骤 02:在网页上使用 Elementor Flexbox 容器

从Pages > Add New中使用 Elementor 打开页面。希望您充分了解该过程。

您将在 Elementor 面板上所有小部件的顶部看到 Flexbox 容器。您可以将其拖放到 Elementor Canvas 上,就像处理其他小部件一样。

将 Flexbox 容器拖放到 Elementor 画布上

或者,您可以通过单击加号 (+) 图标来创建布局。您将获得两个选项:Flexbox 和 Grid。单击 Flexbox 选项,您可以创建一部分 Flexbox。

步骤03:自定义Flexbox容器

您可以将整个部分设置为盒装或全宽。之后,您可以设置您的首选宽度和最小高度。在弹性盒上添加内容和小部件后,触摸对齐部分。

自定义 Elementor Flexbox 容器

步骤 04:将小部件添加到 Flexbox 容器

将必要的小部件从 Elementor 面板拖放到 Flexboxes。此过程类似于基于部分的传统 Elementor。例如,我们在下图中使用了标题、图像和文本编辑器小部件。

将小部件添加到 Elementor Flexbox

步骤05:对齐网页元素

对齐网页元素

单击六点图标选择整个部分。接下来,按首选对齐选项。您在该区域中的元素将在一秒钟内对齐。您还可以一一选择弹性框并单独对齐其中的元素。

完成网页设计后发布页面。

如何将基于部分的 Elementor 页面转换为 Flexbox 容器

单击六点图标,选择您使用传统 Elementor 设计的部分。您将在 Elementor 面板的布局部分下看到一个转换按钮。单击转换按钮。完成该过程将需要几秒钟的时间。

转换完成后,您将看到该部分的另一个副本已创建。第二个(副本)部分是转换后的部分。因此,保留它并按十字 (x) 号删除第一部分。因此,继续一一转换页面上的所有其他部分。

加分点:将 HappyAddons 与 Elementor Flexbox 容器结合使用以获得更多设计机会

HappyAddons是 Elementor 页面构建器插件的流行附加组件。它包含广泛的特性和小部件集合,可通过更多特性和功能进一步增强您的 Elementor 站点。HappyAddons 目前拥有 125 多个小部件和 20 多个功能。

但 HappyAddons 最突出的是它的免费主题生成器和庞大的预先设计模板库。如果您正在寻找在没有 Elementor Pro 版本的情况下创建页眉、页脚和单个帖子模板的解决方案,则必须尝试 HappyAddons。

更重要的是!HappyAddons 版本提供了如此多的功能和小部件,您可以使用它们来创建不仅仅是基本级别的网站。当您开始需要高级功能时,您可以轻松升级到其高级版本。

探索 HappyAddons

有关如何使用 Elementor Flexbox 容器的常见问题解答

由于 Elementor Flexbox 容器是 Elementor 的新增功能,因此您可能对此有很多疑问。我们将在此常见问题解答部分回答有关 Flexbox 容器的一些最常见和好奇的问题。

Elementor Flexbox Container 是一项功能还是小部件?

Elementor Flexbox 容器是一项功能,但您会发现它位于 Elementor 面板上所有小部件的顶部。所以,从现在开始,不要再迷茫了。

Elementor Flexbox 容器可以免费使用吗?

是的,Elementor Flexbox 容器是一项免费功能,随 Elementor Lite 版本一起提供。

我可以将 Elementor Flexbox 容器与任何主题一起使用吗?

是的,Elementor Flexbox 容器与任何 WordPress 主题完全兼容。但我们建议您使用 Hello Elementor 主题来保持您的网站轻量级。

Elementor Flexbox 是 CSS 或 bootstrap 元素吗?

Elementor Flexbox 是一个 CSS 元素。它允许您包含许多根据视点大小自动排列的元素。

Elementor Flexbox 容器的最佳用例有哪些?

对于 Elementor Flexbox 容器在哪里可以使用、哪里不能使用,没有固定的规则。然而,在英雄部分、画廊、主题构建器模板、卡片布局等情况下使用它会更有效。

最后的要点!

对于所有希望让自己的网站更好优化、更快、对所有设备响应更完美的 WordPress 用户来说,Elementor Flexbox Container 无疑是一份值得称赞的礼物。该功能对于兼职 Web 开发人员也同样有益。

无论您想设计电子商务、代理、商业、摄影还是作品集网站,Flexbox 容器绝对可以为您节省大量时间。现在是您开始使用它的时候了。另外,不要忘记利用 HappyAddons 及其丰富的库。




如何使用 HappyAddons 在 Elementor 免费中创建博客文章模板

使用 Elementor 创建博客文章模板意味着为您网站上的所有博客文章构建独特的布局。每当您在 WordPress 上安装主题时,您都会获得带有有限自定义选项的默认帖子布局。但默认布局可能不足以满足您的需求。

您可能想要个性化其结构、外观和内容风格。Elementor 是一个很棒的解决方案,您可以使用它的主题生成器从头开始完全做到这一点。但如果您至少了解 Elementor 几天,您一定知道它的主题生成器不是免费使用的。

但不用担心!今天,我们将向您介绍 Elementor 插件,为您提供免费的主题生成器,您可以通过它以零成本完成该过程。那么让我们来讨论如何在 Elementor 免费中创建博客文章模板。

博客页面和博客文章之间的区别

博客页面是一个静态页面,包括所有已发布的博客文章。帖子按时间顺序(无论是按字母顺序还是按日期)发布在博客页面上。博客页面通常会在顶部显示最新的帖子以及摘录。它不包括作者框、社交分享按钮和评论区。

博客文章是一篇单独的文章,涵盖特定主题的详细分析。它还包括其他几个元素,如目录、作者详细信息、社交共享按钮、号召性用语、评论区域、标签、相关帖子、常见问题解答、订阅表格等。

如何在 Elementor Free 中创建博客文章模板

如何在 Elementor Free 中创建博客文章模板

要使用 Elementor 创建自定义博客文章模板,您必须有权访问其主题生成器。但该功能不是免费的。您必须升级到高级版本才能使用该功能。但是,您仍然可以通过安装另一个名为HappyAddons的插件来免费使用此功能。

HappyAddons 实际上是一个 Elementor 插件。它配备了数十个附加功能和小部件,可为您的 Elementor 网站提供支持。HappyAddons 也有免费版和高级版。免费版本包括一个主题生成器,您可以通过它创建自定义博客文章模板。

从下面下载并安装您网站上的插件。

在您的网站上激活后,请跳至以下步骤。

步骤 01:从 HappyAddons 主题生成器打开单个模板

  • 导航到HappAddons > 主题生成器
  • 选择单个选项卡。
  • 单击添加新按钮。
使用 HappyAddons 主题生成器打开单个模板

  • 将打开一个弹出窗口。
  • 为模板命名。
  • 创建模板按钮。
选择模板类型

步骤02:通过拖放添加元素

网站上的元素通常会根据网页设计和内容风格而有所不同。但任何博客文章中都有一些必须具备的元素,无论其类型如何。它们是标题、特色图片、内容正文、作者姓名、发布日期、作者框、社交分享按钮、评论框等。

我们建议您创建线框。它将帮助您了解博客文章模板中应包含哪些元素。我们现在将它们一一添加到帖子中。

#添加帖子特色图片

  • 单击加号 (+)图标创建内容区域。
  • 选择与线框相符的列数。
  • 我们为本教程选择了三栏。
添加帖子特色图片

  • 您可以自定义列的大小和宽度。
  • 我们使中间的列变大,另外两列变窄。
  • 在搜索框中输入帖子特色图片。
  • 将其拖放到内容区域中。
添加帖子特色图像小部件

  • 您可以从 Elementor 面板的内容和样式选项卡自定义特色图像。
  • 您可以修改其大小、对齐方式、边距、填充、边框类型等。

注意:您只会看到一个图像部分,没有任何内容。不用担心!您只是创建一个布局。发布模板后,布局将应用于所有博客文章。您将在已发布的博客文章的前端看到更改。

自定义特色图像部分

# 添加帖子标题

  • 将帖子标题小部件拖放到特色图像下方。
  • 但如果您愿意,您可以将标题放置在特征图像部分上方。
将帖子标题添加到博客帖子模板

  • 接下来,从 Elementor 面板自定义帖子标题并使其风格化。
  • 确保将H1设置为博客文章标题。
自定义帖子标题

#添加帖子信息

  • 帖子信息小部件将允许您显示作者姓名、帖子发布时间、日期、评论和更多选项。
  • 在 Elementor 搜索框中输入小部件名称。
  • 一旦它出现在下面,将其拖放到标题部分下方。
添加帖子信息

  • 您可以通过单击“添加项目”按钮向该部分添加更多选项。
  • 然后转到“样式”选项卡以对其上的内容进行样式化。

注意:仅当您的博客文章收到任何评论时,评论元素才会出现

在帖子信息小部件中添加更多元素

#添加帖子内容

  • 帖子内容小部件涵盖了主要内容主体。
  • 它允许您在帖子中包含文本、图像、GIF 和视频。
  • 将小部件拖放到合适的位置并以相同的方式进行自定义。
添加帖子内容

# 添加联系表格

  • HappyAddons 与大多数流行的联系表单集成。
  • 只需在搜索框中输入“表单”一词即可。
  • 您将获得下面显示的所有流行表单小部件。
  • 希望您能在列表中找到联系表单插件的小部件。
  • 将其拖放到画布上。

注意:例如,如果您在后端使用 weForms,请将相同的小部件拖放到画布上。

将表单添加到博客文章模板

MailChimp 被认为是增长订阅者列表的绝佳平台。这也是一个受欢迎的电子邮件营销服务提供商。好消息是HappyAddons 有一个 MailChimp 小部件。如果您想扩大订阅者列表,您也可以使用此小部件而不是联系表单插件。

查看本指南,了解如何使用 HappyAddons 将 MailChimp 表单嵌入您的网站

MailChimp 的 HappyAddons 小部件

# 添加社交分享图标

  • 社交分享小部件将使用户能够将博客文章分享到他们的社交资料中。
  • 这可能是提高与读者和访客互动的好方法。
  • 在 Elementor 搜索框中输入社交共享。
  • 将其拖放到订阅表单下方。
拖放社交共享小部件

  • 按任何社交选项卡。
  • 您将获得粘贴社交链接并对其进行自定义的选项。
  • 对其他选项卡一一执行相同操作。
  • 单击“添加项目”可在页面上添加更多社交共享图标。
添加更多社交分享图标并自定义它们

# 添加作者框

  • 如今,人们喜欢在阅读帖子时了解作者。
  • 作者元小部件将允许您在帖子模板上创建作者部分。
  • 您可以展示作者的姓名、头像、简短的简历和书面帖子。
  • 在社交共享图标下方添加小部件。
拖放作者元框

  • 展开内容选项卡上的作者元部分。
  • 您可以决定展示作者的姓名、标签、头像等。
  • 您还可以更改图像位置、头像大小以及其他样式。
自定义作者元框

# 添加评论框

  • 评论部分允许访问者提交他们对博客文章的看法。
  • 将“帖子评论”小部件拖放到帖子模板的末尾。
添加评论框

  • 您可以在所有帖子或选择性帖子上显示评论部分。
  • 转到“源”选项,然后单击旁边的下拉图标。
  • 下拉列表包括两个选项:当前帖子自定义
  • 选择“自定义”选项将允许您在选定的帖子上显示此评论框。
设置评论框的来源

  • HappyAddons 的评论是一个独特的小部件。
  • 因为它允许您对评论后的布局进行风格化。
  • 但此风格化选项在 Elementor 中不可用。
  • 因此,通过 HappyAddons,您可以享受更灵活的定制。
使用 Elementor Free 对评论框进行风格化

# 显示相关帖子

相关帖子部分建议与当前博客帖子相关的其他内容和文章。它们通常是根据标签、关键词和类别来选择的。您可以使用 Post Carousal 小部件来创建此部分。但为此,您需要访问HappyAddons 的 Premium

  • 安装高级插件后,Post Carousel 小部件将被解锁。
  • 将其拖放到 Elementor 画布上。
  • 然后,从内容和样式选项卡对其进行自定义。
添加帖子轮播小部件

  • 转到内容 > 查询
  • 指定作者、术语或标签。
  • 因此,相关帖子将显示在每篇博客文章上。
添加查询以在博客文章模板上发布相关文章

步骤03:使模板具有移动响应能力

如今,超过 50% 的网络流量来自移动设备。因此,一旦将必要的元素添加到画布上,您必须检查它们是否在其他设备上完美对齐。

  • 单击Elementor 面板底部的响应模式图标。
  • 您会看到不同的设备模式出现在顶部。
  • 在它们之间切换,您可以检查小部件是否完美对齐。
使博客文章模板移动响应

步骤04:发布帖子模板

  • 发布/更新按钮或箭头符号
  • 单击“保存草稿”将此设计另存为草稿。
  • 如果您想稍后将此设计用作​​现成的模板,请单击“另存为模板”。
  • 单击“模板条件”以发布设计。
发布博客文章模板

  • 您在下图中看到的是您可以使用免费版本的 HappyAddons 设置的默认条件。
  • 您需要高级访问权限才能设置自定义条件。
  • 单击保存并关闭按钮。
设置条件

步骤04:预览单个博客文章模板

现在,转到任何已发布博客文章的预览模式。您将看到模板已应用于它们。如果您不喜欢该布局,请再次使用 Elementor 打开模板并根据您的喜好进行自定义。

预览单个博客文章模板

有关如何在 Elementor 中创建博客文章模板的常见问题解答

希望您喜欢本教程部分。除此之外,您还必须了解更多主题来增长博客文章设计的知识。我们将在常见问题解答部分介绍它们。

  • 自定义帖子类型和博客帖子有什么区别?博客文章是传统的文章或文章,涵盖任何特定产品、功能、主题或信息的详细文章。它不会动态展示主体内容。自定义帖子类型允许您修改内容结构,包括自定义字段、分类法和功能。它使用户能够灵活地动态过滤出他们想要的内容。
  • 博客文章和博客页面之间的主要区别是什么?博客文章是对给定主题进行详细分析的文章。一些流行的博客文章类型包括操作指南、清单、评论、案例研究、新闻文章、个人故事等。但是博客页面展示了已发布的博客文章的集合及其标题、功能、图像和摘录。
  • 博客文章的主要部分是什么?以下是博客文章的四个主要部分,无论任何类型:1. 引人注目的标题
    2. 引人入胜的正文内容
    3. 媒体文件(图像、视频剪辑和 GIF)
    4. 号召性用语
  • 如何提高博客文章的可读性?1. 使用清晰易懂的文本
    2. 将主要内容分成多个带标题的部分
    3. 添加视觉效果以消除单调
    4. 合并表格和项目符号进行分解
    5. 遵循 F 或 Z 格式编写文本
  • 是否可以在 Elementor 中管理多个单个帖子模板?是的,您可以管理多个单个帖子模板。但为此,您需要高级访问权限,无论是 Elementor 还是 HappyAddons。
  • 我可以使用 Elementor 风格化/自定义帖子评论部分吗?默认情况下,Elementor 不允许您自定义帖子评论部分。但通过安装 HappyAddons 插件,您可以启用 Elementor 来风格化和自定义帖子评论部分。

最后的要点!

如果您在任何流行的 WordPress 中使用默认的博客文章布局,您会发现成百上千的其他网络所有者使用相同的布局。这种副本布局可能会给您的网络读者和访问者带来无聊的用户体验。

在这种情况下,创建定制的博客文章模板可能是一个突破性的解决方案。这可以使您的博客部分比其他部分更加专业和独特。使用 HappyAddons 主题生成器,您可以为您的网站创建几乎像专业人士一样的单篇模板。




如何通过拖放创建简历网站 (Elementor)

专业的简历网站可以成为建立自己在线品牌的有力方式。它可以帮助向潜在雇主展示您的技能、成就和经验。通过将影响力从本地市场扩展到国际市场,您可以让自己在全球范围内被找到。

如今的招聘人员不喜欢仅通过查看简历来决定候选人。他们也喜欢检查他的在线记录。Elementor 是一款出色且直观的工具,您只需通过拖放即可创建简历网站。

本文将向您展示如何在 Elementor 的帮助下通过拖放创建简历网站的全面指南。开始吧!

目录

如何创建简历网站:从头开始的指南

建立简历网站的过程涉及几个步骤。我们可以将其分为两个阶段:预设计和设计。预设计包括配置域、托管、CMS 和线框图。设计包括创建页面、部分和内容。

但请记住,一页简历网站比多页网站非常受欢迎。因此,本文将重点介绍如何创建一页简历网站,并在接下来的文章中涵盖所有步骤。

步骤 01:获取域名和虚拟主机

域名是网站的名称如果您使用自己的名字作为简历网站的域名,效果会更好。.com 和 .me 是简历网站的两个流行扩展名。我们的建议是您使用 .com 扩展名。您的域名可能类似于johndoe.com

从 Namecheap 获取域名和托管

Namecheap、GoDaddy、IONOS、NameSilo 等是寻找和购买域名的最佳域名注册商。如果您的域名已被采用,请尝试搜索新域名、修改缩写和标点符号。

托管将存储所有内容(图像、GIF、视频、文本、模板等)和您网站的数据库。IONOS、HostGator、BlueHost、DreamHost等,是最好的托管公司。尝试获取共享托管计划。因为它性价比高,适合简历网站。

步骤02:在cPanel上安装WordPress并配置域

每个托管公司都会为您提供一个 cPanel。它将允许您安装所需的 CMS 并配置域。我们将使用 WordPress,因为它是构建专业简历网站最简单的 CMS 之一。

获取您的 cPanel 访问权限并登录。导航到Softaculous 应用程序安装程序 > WordPress。单击 WordPress 并执行其余操作来安装它。这是一个简单的过程,您可以轻松执行。

在 cPanel 上安装 WordPress

安装 WordPress 后,您必须将您的域连接到 CMS。再次来到cPanel主页。转至 > 选项。您将在新页面上看到“创建新域”按钮。其余步骤将与 CMS 安装一样非常简单。

如果出现 DNS 名称服务器等任何问题,请向域名注册商寻求帮助。他们将指导您该怎么做。Namecheap、GoDaddy、IONOS 和 NameSilo 等域名注册商将通过实时聊天为您提供实时支持。

将域连接到 cPanel 和 WordPress

步骤03:创建线框

线框图是一个集思广益的阶段。在此步骤中,您将创建网站在设计结束时的外观的粗略布局。您必须指定页面布局、字体大小、页眉、页脚和创意元素。如果没有线框图,就不可能正确设计网站。

因为你不知道从哪里开始,从哪里结束。CanvaColorlib是很棒的平台,您可以在其中获得无数简历网站创意。观看下面视频中的简历模板。我们将尝试创建像这篇文章中那样的简历网站。

该模板的一个特点是右侧边栏上的粘性菜单,为用户提供了出色的导航体验。

步骤04:安装Elementor和HappyAddons

希望您已按照上述步骤成功配置域名和托管。现在,您必须在 WordPress 上安装以下主题和插件。

HappyAddons 是 Elementor 强大的插件集合。它将为您提供许多附加功能和小部件,以进一步定制您的简历网站。选择 Hello Elementor 的原因是它是一个超快且非常轻量级的主题。

步骤05:使用 Elementor 打开页面

转到WP 仪表板 > 页面 > 添加新的。为页面命名,然后按“使用 Elementor编辑”按钮使用 Elementor打开它。

使用 Elementor 打开新页面

由于我们将创建一个一页简历网站,因此请使用 Elementor Canvas 打开该页面。导航到设置 > 页面布局 > Elementor Canvas。如果是多页面网站,我们可以选择其他选项。

使用 Elementor Canvas 打开页面

步骤 06:添加您的个人简历

现在,是时候创建用于添加内容的部分了。Elementor、HappyAddons 和 HappyAddons Pro 总共超过 150 个小部件。您可以使用这些小部件为您的简历网站创建与模板类似的所有必要部分。

如果您是 Elementor 新手,了解这些小部件的功能可能需要一些时间。但不要超过一两天。不过,现在请按照我们的指南进行操作。您必须首先选择一个部分布局。

# 选择一个部分布局结构

加号 (+)图标。选择您想要的部分布局。由于我们的演示模板有两个部分,因此我们选择两列布局。

选择您的部分结构

# 将内容添加到左侧边栏

通过单击弹性容器图标选择左列。然后,导航至样式 > 背景类型 > 经典 > 颜色。应用您想要的颜色代码。我们使用了颜色代码(#F2F3F7)

设置侧边栏的背景颜色

# 添加您的图像

在搜索框中输入图像。小部件出现在下面后,将其拖放到左列中。

拖放图像小部件

您将可以选择添加图像。这里的图像是圆形的。因为我们已经在 Photoshop 中设计并上传到画布上。您可以从“图像大小”选项中设置图像的自定义大小并定义其对齐方式

添加图像并调整其大小

使用Spacer小部件在顶部边框和图像之间创建一个空间。如果您想创建间隙/空间以实现设计美感,您可以在任何地方使用此 Spacer 小部件。

在顶部边框和图像之间添加空间

使用标题文本编辑器小部件在图像下方写下您的姓名和职务。我们分别使用了 Playfair Display 和 Quicksand 字体。您可以从样式选项卡修改字体颜色。

写下您的姓名和职务

注意:您可以在演示文件中的图像和名称下方看到一个垂直菜单。准备好右栏中的内容部分后,我们将向您展示如何创建并将其添加到左侧边栏。因为如果不准备内容部分,您就无法正确创建菜单部分。

步骤 07:展示您的技能、作品集、教育背景和经验

大多数人喜欢在英雄部分添加动画滑块。将“高级滑块”小部件拖放到右列以创建相同的小部件。

拖放高级滑块小部件

在滑块部分下方,您可以选择添加任意数量的滑块。每个滑块将为您提供三个选项卡:背景、内容样式

背景可以设置图像、其位置、背景颜色和显示大小“内容”选项卡允许您将必要的文本添加到相应的字段。您可以保留这两个按钮,也可以根据需要从此处删除一个按钮。样式帮助您为内容添加风格。

希望你能独自完成这件事。如果我们展示每一个方面,这篇文章就会太长。

将您的内容添加到高级滑块

# 创建关于部分

拖放 Flexbox 容器以为“关于”部分创建一个新空间。每当创建新部分时,都必须再次使用容器。

添加新的 Flexbox 容器

使用标题文本编辑器小部件将必要的文本添加到“关于我”部分。我们在它们之间使用了Spacer小部件来创建一个空间。

从“样式”选项卡将颜色(#FEF7F7)应用到背景。从Advanced > Layouts > Padding添加了 Padding 35 。

为“关于我”部分撰写文字

您可以在“关于我”部分展示您的一些核心技能。我们使用信息框小部件在下图中添加了四个核心技能。在此之前,我们添加了四个 Flexbox 容器。

这意味着您可以在 Flexbox 容器内添加更多 Flexbox 容器并垂直或水平显示它们。它最大的优点是可以轻松对齐内容。

转到“高级”>“边框”,您可以为每个元素(信息框)添加边框和阴影。

简要介绍一下您的技能

注意:如果信息框文本看起来损坏或连线,请不要担心。它们在预览模式下看起来不错。请参阅下面所附的视频。

您可以看到列之间有一些不必要的间隙。单击左上角的三行图标。然后,转到站点设置 > 布局。设置容器填充 -1

如果您不断看到部分和元素之间有任何不必要的间隙,则必须通过将 0 设置为负 (-) 值来解决它们的填充问题。

# 告诉你已经完成的项目数量

使用Flexbox 容器、文本编辑器按钮小部件创建这样的横幅。这可能会促使客户看到您成功的项目管理技能而雇用您。

添加横幅

使用新的 Flexbox 容器。将图像添加到其背景。从附件部分将其设置为固定。即使您滚动页面,这也会使图像粘住。

您可以将文本编辑器小部件拖放到其上,并显示您已修复和处理的项目、客户、合作伙伴和错误的数量。这种图像粘性将为您的简历网站增添活力。

添加您处理过的客户和项目的数量

# 创建关于部分

您可以使用技能栏小部件创建一个部分来展示您的技能,如下图所示。对于其他文本,我们使用了标题文本编辑器小部件。

使用技能栏展示您的技能

# 显示工作经验

使用时间轴小部件创建一个部分来展示您以前的工作经历。为每个字段添加引人注目的描述和准确的日期。

显示工作经验

# 展示你的教育背景

使用高级手风琴小部件创建与下图类似的部分,以展示您的教育背景。您可以添加证书的图像,尽管我们通常不会看到这种情况。

显示您的教育背景

# 展示你的一些已完成的作品

通过展示您完成的一些作品,您可以在客户心目中营造出您的技能和专业知识的可信度。因此,我们建议您创建一个单独的部分并添加一些表现最好的作品。

您可以使用 Elementor 面板中任何合适的小部件。但下面,我们使用了图像悬停效果按钮小部件。您可以将项目链接添加到特色图像,并允许用户通过单击附加按钮探索更多内容。

展示您的一些已完成的作品

# 显示您最近的博客文章

高质量的博客文章可以为您的网站带来宝贵的流量。它可以帮助您的网站在搜索引擎结果页面上排名并为您吸引感兴趣的客户。希望大家已经知道博客发布的重要性。

因此,如果您经常为简历网站撰写博客文章,则必须在主页上添加一个单独的部分来动态显示最近的帖子。

只需将存档帖子小部件拖放到您想要的合适位置即可。您最近的帖子将自动显示。您可以通过小部件设置自定义要显示的内容量。

显示您的博客文章

# 添加联系表格

联系表格部分必须提供客户和雇主可以联系您的所有可能方式。此部分通常包括简历撰写者的电话号码、电子邮件地址、位置和联系表格。

我们首先添加您的联系信息和本地地址。我们使用图标框小部件添加电话号码、电子邮件 ID 和本地地址。您可以从小部件附带的综合图标库中为相应信息选择所需的图标。

添加您的联系信息

接下来,您必须添加联系表单,以便人们可以直接向您的网站发送消息。HappyAddons 与数十个联系表单插件集成。搜索并选择您已在后端安装的插件。

例如,我们在网站后端安装了Contact Form 7插件。因此,我们已将小部件拖放到画布上。Contact Form 7 是一个永久免费的表单插件。

为了利用电子邮件 ID 和位置下方的间隙,我们使用图像小部件添加图像以进一步美化该部分。

添加联系表 7

步骤08:将导航菜单添加到右侧边栏

我们留下了左侧栏未完成的部分,并承诺在设计完右侧栏后完成它。现在,是时候向右侧边栏添加一个导航菜单,列出您在右侧创建的所有部分。这部分有点棘手。所以请大家仔细关注。

# 在你的后端创建一个菜单列表

转到您的WP 仪表板。导航到外观 > 菜单。为菜单指定标题,然后按“创建菜单”按钮。

为简历网站创建菜单

转到简历网站并检查您创建的总部分及其内容。我们创建了这些部分:

  • 关于我
  • 我的技能
  • 工作经历
  • 教育
  • 我最近的作品
  • 最近的博客文章
  • 联络我

我们将相应地创建菜单。由于这是一个单页简历网站,菜单创建和导航过程将与多页网站略有不同。打开“快乐菜单”并转到“自定义链接”。您将看到两个框:URLLink Text

URL 框中,为每个菜单项添加自定义链接。

>> 公式为页面 url/# 部分名称。假设fuadalazad.com是我发布上述所有内容的页面。要创建“关于”菜单,请输入:http://fuadalazad.com/#About

“链接文本”框中,仅键入部分名称,例如“关于”。按添加到菜单按钮。观看下面的视频以获取进一步说明。

对所有部分一一执行此操作。完成后,再次来到 elementor 画布。

# 在前端添加导航菜单

将导航菜单小部件拖放到您的姓名和职务下方的左侧边栏中。您将获得一个选项来选择您在后端创建的菜单。

要垂直显示菜单,请转到“样式”选项卡并修改“水平填充”值。然后,自定义字体样式和悬停效果。

添加导航菜单

# 将菜单链接到各自的部分

选择与菜单相关的每个部分,然后将它们的名称一一输入到 CSS ID 框中。每当您单击菜单列表上的特定项目时,这将立即带您进入该部分。我们已经在下面演示了该过程。最后你会看到魔法。

确保您在相应部分的导航菜单中使用的单词完全相同。任何拼写错误都可能毁掉整个功能。

版权免责声明可以保护您的内容免遭他人盗窃或滥用。通过版权声明,您可以向 Google 表明您是该内容的原始所有者。如果有人试图抄袭您的内容,您将有权要求 Google 对他们采取行动。

将版权添加到一页简历网站的页脚

第10步:使左侧边栏粘性

由于我们使用了大量 Flexbox 容器来创建部分,因此您可能很难找到左侧边栏的母容器,右侧边栏也是如此。如果您单击元素或面板底部的导航器图标,效果会更好。

它将显示所有使用的母层和子层。选择左侧边栏的母容器。然后,导航至“高级” 选项卡 >“位置”并选择“固定”

使右侧边栏粘性

但这可能会导致右栏移动到右侧边栏。不用担心!

选择右列的母容器。转到“高级”选项卡。取消选择保证金链接在“左”框中设置合适的值,直到对齐完美为止。

使用“高级”选项卡中的边距对齐 Web 元素

第11步:预览设计

转到网站的预览模式。单击菜单项,可以看到右栏滚动,而左侧边栏/导航菜单保持固定。这不是一个很棒的简历网站吗?

第 12 步:使一页简历网站具有移动响应能力

到目前为止,我们设计的网站布局仅适合桌面视图。但许多客户可能会通过平板电脑和手机访问该网站。所以你需要针对其他设备进行优化,这也是很耗时的。

单击响应模式图标。这将打开一个附加栏,包括画布顶部的不同设备模式。在它们之间切换,您可以在选项卡和手机上查看所有这些元素的当前状态。

您可能会发现它们分散在其他显示器上,并且必须重新组织它们。您将无法显示桌面上显示的所有元素。所以你需要为其他设备做单独的线框图。

检查移动响应能力

我们计划撰写另一篇有关如何使简历网站具有移动响应能力的详细文章。如果您喜欢有关此主题的博客文章,请订阅我们并发表您的意见。

有关如何创建简历网站的常见问题解答

希望您有一个简历网站或计划创建一个。但不知道如何充分利用它。我们将在本节中与您分享一些重要的建议。

  • 简历网站必须具备哪些要素?关于部门、专业经验、技能、教育、已完成的项目、作品集、感言、联系信息、可下载的简历 PDF 等。
  • 如何推广您的简历网站以吸引潜在客户和流量?1. 将网站链接到求职门户
    2. 在社交媒体上分享网站
    3. 将网站链接到自我推销平台
    4. 将网站链接到公共论坛
  • 简历和作品集网站有什么区别?简历网站主要展示专业背景、工作经历、教育程度、技能和成就。这只不过是传统简历的在线版本。作品集网站侧重于展示创意作品、项目、艺术品样本等,以解释您的技能和经验。
  • 如何使一页简历网站模板轻量级且快速加载?由于一页简历网站模板必须涵盖大量内容,因此它往往会变得很重。以下提示可以帮助您使模板变得轻量级和快速加载:1. 上传前优化和压缩图像
    2. 最小化 CSS 和 JavaScript
    3. 使用轻量级主题
    4. 安装缓存插件
    5. 启用延迟加载
    6. 使用内容交付网络 (CDN)
    7. 选择快速托管服务器
  • 一页简历网站是否需要页眉和页脚?这实际上取决于你的设计。我们在本文中设计的网站不需要传统的页眉和页脚。但其他类型的设计可能需要它们。只需探索 Canva、Dribble 和 Colorlib。您将获得一页简历网站模板的无数设计灵感。

最后的话!

简历网站不仅仅是一个在线页面。这是一张画布,展示了您的旅程、技能、教育背景和专业经验。它为您提供了一个激发灵感并与数字世界中的众多人建立联系的机会。

我们已尽力向您展示有关使用 Elementor 创建简历网站的指南。实际上,创建网站是一个长期且持续的过程。您可能不会一夜之间习惯使用 Elementor 和 HappyAddons。




10+ 个适用于 Elementor 和 WordPress 的最佳预订插件

在线预订的兴起为各行业创造了广阔的商机。例如,在线旅游在线食品预订行业的市场规模目前分别超过519 美元2200 亿美元

这种预订趋势也蔓延到医疗保健、餐厅和沙龙等其他行业。有大量在线预订插件,您可以借助强大的 Elementor 在 WordPress 上无缝创建预订网站。

如果您正在寻找与 Elementor 集成的 WordPress 预订插件,本文将为您介绍。我们将在这篇文章中向您介绍一些适用于 Elementor 和 WordPress 的最佳预订插件,以便您可以为您的网站选择最合适的一个。开始吧!

什么是预订插件?

预订插件使网站能够接受和管理预约、预订和在线预订。它为访客提供了一个用户友好的界面,以便他们可以选择时间、日期和服务来安排预约。

作为管理员,您可以从后端设置预订规则、通知期限和取消政策。一些预订插件​​包括附加功能,如可定制的预订表格、付款处理、自动通知和电子邮件营销集成。

预订插件必须注意的事项

您会发现数十个与 Elementor 集成的预订插件。但并非所有这些都同样完美。预订插件中必须存在一些强制性功能和元素才能创建理想的预订网站。

我们已将它们列在下面的要点中。浏览一下。

  • 具有直观界面的强大管理面板
  • 日历可显示可供预订的日期和时间
  • 支付集成允许客户进行付款
  • 灵活的预订规则,包括通知时间和取消政策
  • 多语言支持,覆盖不同国籍人群
  • 与Elementor 等页面构建器集成
  • 移动响应能力和可定制的样式
  • 自动电子邮件通知和预订提醒
  • 如有需要,提供支持和更新

Elementor 的最佳预订插件

本节将讨论 Elementor 和 WordPress 的一些最流行和最好的预订插件。我们将重点介绍它们的主要功能、定价和其他一些重要方面,以便您可以有效地决定合适的插件。快速拍摄它们的快照。

插入 销售或主动安装 评级
阿米莉亚 50,000+ 4.50
书本味 70,000+ 4.25
轻松安排预约 20,000+ 5.00
已预订 16,000+ 4.10
书刊 8,100+ 4.93
预订新闻 7,000+ 4.80
晚点 5,700+ 4.85
韦巴预订 2,000+ 5.00
沙龙预订 1,100+ 4.33
Jet预约

在下面的讨论中了解他们的详细信息。

1.阿米莉亚

阿米莉亚预订插件

Amelia是一款出色的 WordPress 预订插件,旨在为您提供企业级预订体验。它包含一系列功能和工具包,用于自动管理预订、付款、服务安排和位置。

因此,您无需花费太多时间通过电话、电子邮件和聊天来接收和确认预订。其智能预订系统与流行的日历平台同步,将所有预约整合到一个集中中心。

您可以设置自动提醒和通知,以便客户和服务提供商都不会错过即将到来的约会。除了预订系统之外,Amelia 还包含强大的分析功能,可以提供高级报告以及对您的业务有价值的见解。

Amelia 插件的主要功能

  • 提供多种演示内容以快速准备您的网站
  • 自动电子邮件和短信通知
  • 轻松管理多个地点和员工
  • 让您为预订表单创建自定义字段
  • 允许添加折扣和优惠券用于营销目的
  • 与 WooCommerce、Elementor、Zoom、Google Meet 等集成
  • 按小时、休息时间和个别团队成员定制的服务安排
  • 支持 PayPal、Stripe 和移动支付网关

Amelia 插件的价格

Amelia 在 WordPress.org 上提供免费版本。其高级版本起价为79 美元/年,并提供15 天退款政策

2. 书本

Bookly WordPress 预订插件

Bookly是 Elementor 的另一个功能丰富的 WordPress 预订插件。该插件可让您找到创建功能齐全的预订网站所需的几乎所有内容。Bookly 是所有类型企业的完美解决方案,例如餐厅、诊所、水疗中心、健身、租赁服务、律师事务所等。

Bookly 为您提供顶级的服务管理灵活性。您可以轻松自定义服务持续时间、能力、容量和定价。您可以根据您的技能、团队成员和要求为客户定制服务。

您将通过该插件获得一些演示内容,因此您可以从头开始准备您的预订网站。它可以帮助您实现时尚的 UI 设计、选择精彩的配色方案、在货币之间切换以及设置灵活的调度选项。

Bookly 插件的主要功能

  • 具有用户友好界面的综合管理区域
  • 直观管理和可定制的预订表格
  • 能够创建无限的预订表格
  • 允许您在 50 多种货币之间切换
  • 支持17+支付网关
  • 轻松设置自动通知和提醒
  • 与 WooCommerce 集成可让您销售产品和服务
  • 让您将员工日程安排与日历同步

Bookly 插件的价格

Bookly 在 WordPress.org 上有免费版本。其高级版本终身收费 89 美元。它没有其他可用的保费计划。

查看如何创建旅游网站

3. 简单地安排预约

简单安排约会预订插件

Simply Schedule Appointments拥有适合初学者的界面和大量令人兴奋的功能,因此您可以轻松提供不同的预订服务。它简化了客户和客户根据他们的首选日期和时间预订产品或服务的流程。

与 Elementor 集成可让您使用自定义字体、颜色、对齐方式、填充和 CSS 自定义预订日历。该插件还包括一些内置功能,可以使用颜色和自定义字段自定义预订表单,以便您可以将其与您的企业品牌相匹配。

Simply Schedule Appointments 与多个流行的支付网关集成。这使客户能够使用他们想要的支付系统完成支付。

Simply Schedule Appointments 插件的主要功能

  • 高级自定义功能自定义字段和样式
  • 轻松与 Google 日历同步
  • 与所有流行的页面构建器集成
  • 一键联系客户支持
  • 让您按日期、时间和其他因素显示您的空闲时间
  • 发送时间触发的通知
  • 同一时间段内多次预订
  • 转化跟踪系统有助于了解您的预订渠道

Simply Schedule Appointments 插件的价格

Simply Schedule Appointments 在 WordPress.org 上提供免费版本。其高级版本起价为99 美元/年,并提供30 天退款政策

4. 预约时间预约

预约时间 预约

Appointment Hour Booking是一款适用于 Elementor 和 WordPress 的易于使用的预订插件。您可以使用该插件创建无限的表单来预订约会。此外,您还可以展示在特定日期您可以使用特定服务的时间。

这将允许客户随时从您的可用列表中选择与您预约。该插件还可以帮助您为不同的服务创建多个预订表格。您可以从后端指定一次可以为您预订的人数以及每项服务的收费标准。

您可以选择将预订表格链接到付款处理。预约时间预订插件与许多支付网关集成。因此您可以轻松链接客户所需的支付网关。

预约时间预订插件的主要功能

  • 内置日历可让您显示工作日、日期、时间、假期和特殊日期
  • 允许定义多种服务及其各自的价格和持续时间
  • 自动管理可用时间以防止重复预订
  • 为用户和管理员设置电子邮件通知
  • 手动和自动生成约会和预订的 CSV 报告
  • 与 WooCommerce、Zoom、MailChimp、SalesForce 等集成
  • 用于管理服务、设置和约会的专用管理仪表板
  • 提供详细的操作方法文档

预约时间预订插件的价格

预约时间预订在 WordPress.org 上提供免费版本。其高级版本起价为 6.99 美元/月,并有条件退款政策。

5. 已预订

WordPress 预约

Booked是 WordPress 最受欢迎的高级预订插件之一。它为客户和顾客提供直观的设计,只需点击几下即可简化预订流程。该插件包括一个可在所有设备上响应地工作的日历。

客户可以使用日历预订特定日期的服务。您可以使用自定义字段(例如文本、段落、下拉列表、复选框和按钮字段)创建多个日历。一旦日历准备好必要的字段,您就可以在 Elementor 中将其显示为小部件或短代码。

客户可以使用自己的照片创建个人资料。这将使他们能够从个人资料中检查待处理和已批准的约会。

Booked 插件的主要功能

  • 强大的后端界面来管理预订和约会
  • 无限制的颜色定制和易于更改的日历颜色
  • 用于定义假期和关闭时间的自定义时间段
  • ‘为客户添加到 Google 日历按钮
  • 使用 WooCommerce 进行付款和结账处理
  • 发送给管理员和用户的定制通知电子邮件
  • 与 Google 日历、iCalendar 和 Outlook 集成

预订插件的价格

Bookinged 没有可用的免费版本。普通许可证收费29 美元。该许可证为您提供来自开发人员的六个月支持。

6. 书本

Booknetic - 用于预约安排的 WordPress 预订插件

Booknetic是另一个很棒的高级插件,用于使用 WordPress 创建预订网站。它可以帮助您创建各种预订网站,并在一个页面上处理预订、会面、付款、通知和销售。

其直观的用户界面 (UI) 允许客户通过台式机和移动电话预订和安排约会。电源管理面板和详细的报告系统将使您保持领先。您可以检查收入流、探索客户源并评估员工绩效。

Booknetic 插件非常适合律师事务所、水疗沙龙、租赁企业、美发沙龙和健身房。与支付网关的集成可以简化支付处理系统。

Booknetic 插件的主要功能

  • 能够创建自定义预订表格
  • 向客户发送提醒电子邮件
  • 多次预订可让客户在一次会话中预订多项服务
  • 与 PayPal、Stripe、Mollie、Square、Razorpay 等集成
  • 优惠券系统帮助您获得更多客户的预订
  • 允许您提供多地点服务
  • 具有多语言和 RLT 支持

Booknetic 插件的价格

Booknetic 没有免费插件。普通许可证收费79 美元。常规许可证提供开发人员为期六个月的支持。

7.预订新闻

BookingPress – 预约插件

BookingPress是 Elementor 和 WordPress 的免费增值预订插件。虽然它相对较新,但它获得了 TemplateMonster Award 2022。这意味着该插件具有巨大的潜力和光明的未来。它可以帮助您创建一个成熟的预订网站,满足您的大部分所需要求。

BookingPress 是美容美发、健身和健身房、医疗保健、牙科诊所、教育辅导、水疗业务、瑜伽课程、租赁商店等的良好解决方案。该插件包括功能丰富的工具集,可创建定制的预订表格和配色方案,维护您的品牌形象。

自动通知和提醒可以通过电子邮件、短信和 WhatsApp 发送给员工和客户。您可以启用其中的每一个或特定的一个。

BookingPress 插件的主要功能

  • 用于管理客户、付款和约会的便捷管理工具
  • 允许客户预订查看日历
  • 完全可调的预订表格向导
  • 支持古腾堡和 Elementor
  • 与超过 15 个支付网关无缝协作
  • 与 Zapier、Google Meet、Zoom、Outlook 和 WooCommerce 集成

BookingPress 插件的价格

BookingPress 在 WordPress.org 上提供免费版本。其高级版本起价为99 美元/年,并提供14 天退款政策

8. 晚点

LatePoint - WordPress 预约和预订插件

LatePoint是 CodeCanyon 中提供的功能丰富的 Elementor 高级预订插件。您会发现此插件中有许多令人惊叹的功能,可以帮助您的网站脱颖而出。它的设置向导将让您相对更快地配置您的网站。

设置向导将允许您创建代理、添加服务和设置工作时间。一切准备就绪后,您可以使用简码按钮将整个板发布到任何网页。LatePoint 有一个干净的管理仪表板,您可以在其中轻松监控报告和管理绩效。

LatePoint 插件的主要功能

  • 与 Google 日历集成可让您在一处管理所有约会
  • 自动为预订的约会创建 Zoom 会议
  • 支持各种支付系统,无需依赖 WooCommerce
  • 提供强大的座席个人仪表板
  • 内置聊天框方便您与客户聊天
  • 人们可以使用他们的社交网络登录

LatePoint 插件的价格

LatePoint 没有免费版本。普通许可证的收费为 129 美元。常规许可证为您提供六个月的开发人员支持。

9.Webba预订

Webba Booking- 约会和活动预订日历插件

我们精选的下一个插件是Webba Booking。该插件授权您创建响应式日历和预订表单,以允许客户在一个会话中进行团体和多个预订。高级定制是其突出特点。

Webba Booking 提供 79 多种设计呈现和 80 多种定制选项。因此,您可以为预订表格和日历设置所需的布局和外观。它的扩展功能一定会让您更喜欢。

Webba Booking 插件的主要功能

  • 灵活的日程安排使您能够在营业时间内展示无限的优惠
  • 响应能力让客户可以通过任何设备进行预约
  • 自动电子邮件和短信通知发送提醒
  • 支持100个支付网关
  • 与 Google 日历、Zoom、WooCommerce 等集成
  • 自动生成发票并计算税金

Webba Booking 插件的价格

Webba Booking 在 WordPress.org 上提供免费版本。其高级版本起价为89 美元/年,并提供30 天退款政策

10. 沙龙预约

沙龙预订 WordPress 插件

沙龙预订插件非常适合美容中心、男士沙龙、沙龙、美发店和类似类型的企业等商店。您可以使用该插件设置高级预订规则、定义假期并列出网站的封锁时间。

这大大减少了在错误日期预订服务的机会。即使在此之后,如果任何客户在错误的时段预订了您的短片或服务,您也可以轻松地从后端预订系统取消它,并要求客户通过电子邮件重新安排。

沙龙预订插件的主要功能

  • 自动提醒通过电子邮件和其他媒介(例如手机、Twilio、Plivo 和 1p1sms)发送
  • 与 Google 日历集成可帮助您从一个地方查看所有预订
  • 适用于多个支付网关
  • 所有个人作品的个人帐户页面
  • 先进的折扣系统鼓励更多客户预约
  • 轻松为助手创建目录

沙龙预订插件的价格

沙龙预订没有免费插件。普通许可证的收费为 69 美元/年。常规许可证提供开发人员为期六个月的支持。

11. JetAppointment

JetAppointment 预订插件

尽管我们在本文末尾介绍了JetAppointment插件,但这并不意味着该插件缺乏优质特性或功能。实际上,这也是一个功能丰富的插件,用于使用 Elementor 在 WordPress 上创建独立的预订网站。

它提供了多种自定义模板、约会布局和自定义字段类型,因此您可以创建令人惊叹的预订表格。您可以配置一个强大的日历来定义您的工作日和时间,以便客户可以明智地为您预订。

JetAppointment 插件的主要功能

  • 在可视日历上配置工作日、时间和休息日
  • 根据不同时段安排缓冲时间并设定价格
  • 约会自动创建 Zoom 会议链接
  • 配有干净的仪表板来管理约会
  • 与许多支付网关无缝协作

JetAppointment 插件的价格

JetAppointment 没有免费版本。它收费19 美元/年,并有30 天退款政策

有关 Elementor 和 WordPress 最佳预订插件的常见问题解答

有关 Elementor 和 WordPress 最佳预订插件的常见问题解答

到目前为止,您已经了解了 Elementor 和 WordPress 的最佳预订插件的主要特性和功能。现在,我们将回答 Facebook、Quora、Reddit 和其他有关预订插件的常见问题。继续阅读!

  • 如何使用 Eelementor 创建预订功能?您无法直接使用 Elementor 创建预订功能。您必须安装与 Elementor 集成的预订插件。此集成将在 Elementor 面板中创建一个小部件,您可以将其拖放到画布上并随后进行自定义。
  • 如何推广订票网站?1. 编写并发布有价值的 SEO 优化内容,以在搜索引擎上排名
    2. 在目录网站上列出您的网站和服务
    3. 与社会影响者合作
    4. 在特殊场合提供特别折扣和优惠券
    5. 利用会员卡系统留住客户常客
    6. 利用电子邮件营销的力量
  • 最适合小型企业的在线预订系统是什么?WordPress 可以成为小型企业开展在线预订业务的首选解决方案。它有大量超级令人兴奋的插件,包括免费的和专业的,可以在一夜之间准备好预订网站。以下是一些适用于小型企业的顶级 WordPress 预订插件/系统。1. Amelia
    2. Bookly
    3. 简单安排预约
    4. 预约时间预订
    5. 已预订
  • 在线预订业务面临的主要挑战是什么?1. 从一个平台管理多种预订服务
    2. 高峰时段的时段管理
    3. 解决出现的技术故障
    4. 克服时区差异
    5. 处理定价和折扣
  • 目前哪些预订业务最赚钱?1. 酒店预订
    2. 航班预订
    3. 汽车旅馆预订
    4. 汽车/设备预订
    5. 餐厅/中心预订
    6. 水疗和沙龙预订

关于 WordPress 预订插件的最后一句话!

WordPress 绝对是一种以尽可能低的成本创建理想预订网站的有效媒介。您在其他平台上永远找不到与 WordPress 相同的灵活性。您可能需要几个其他插件和扩展来增强网站的用户体验。




获得网页设计免费字体的最佳地点(10+ 网站)

字体是网站设计中不可缺少的一部分。它们是文本字符的特定样式或设计,包括字母、数字和符号。它们用于在网站上显示书面内容,以便人们可以阅读它们并找到所需的信息。

选择正确的字体可以维护您的品牌个性并给访问者留下持久的印象。然而,购买高质量字体可能非常昂贵,主要对于预算紧张的个人和小型企业而言。

幸运的是,您会在各种在线平台上找到大量免费字体。在本文中,我们将向您介绍一些获取用于网页设计的免费字体的最佳位置,以便您可以轻松找到它们。在此之前,我们将简要讨论不同类型的字体。

网页设计中使用的字体类型

网站设计中使用了多种类型的字体。每个都有独特的风格、目的和用例。如果您是网页设计行业的新手,您必须从一开始就了解主要类型。否则,您将无法完美地呈现网站上的文本内容。

网站设计中常用的字体有五种类型。从下面的讨论中看看它们。

字体类型

A。衬线字体

衬线字体在每个字符的末尾都有一个小的装饰笔划。Times New Roman、Georgia、Bodoni、Baskerville等都是流行的 Serif 字体。这些字体主要用于博客、作品集、艺术和活动网站。

访问这篇文章,了解网页设计中排版的基础知识

b. 无衬线字体

Sans-Serif 文本字母末尾没有笔划。流行的 Sans-Serif 字体有Helvetica、Arial、Verdana、RobotoOpen Sans。它们用于标题-副标题、正文、教育网站和简约网页设计。

C。等宽字体

等宽字体的所有字符之间的间距相等。此字体类型对于显示表格数据、编码行、数学符号和文档非常有用。Courier New、Consolas、DejaVu Sans Mono、Monaco、Source Code Pro等都是著名的等宽字体。

d. 显示字体

它们是装饰字体,特别是在那些试图创造艺术视觉效果的地方使用。显示字体的特点是引人注目的设计,包括精致、华丽和风格化的字体。Trajan Pro、Gothic、Rockwell、Univers等都是流行的显示字体。

探索如何在 WordPress 中更改字体

获取免费字体来设计网站的 10 多个最佳地点

寻找免费字体时,您永远不会失望。因为如果您知道如何挖掘它们,您将在网上找到数千种免费字体。因此,我们将在本节中向您介绍一些值得推荐的网站,您可以从那里下载无数用于网站设计的免费字体。

1.谷歌字体

Google Fonts是 Google 的官方网站。他们在该网站上提供了大量免费字体,人们可以将其用于网站设计和创意项目。一旦您登陆该网站,您将获得多个选项,例如搜索字体、输入内容、像素、类别、语言等。

他们将允许您浏览和预览网站上的字体。然后,您可以下载并将它们集成到您的网页设计项目中。Google Fonts 不仅为您提供英文字体。从语言选项中,您还可以检查和下载其他语言的字体。

免费谷歌字体

2.松鼠字体

Font Squirrel是一个宝贵的资源,可以为网页设计项目查找和下载高质量的免费字体。该网站的一个突出功能是字体标识符。它允许您上传包含文本的图像。标识符将尝试检测图像中使用的字体。

这有助于网页设计者追踪特定图形中使用的相似字体。Font Squirrel 使用标签、分类和其他列表选项来呈现字体。使用这些选项,您可以轻松缩小搜索结果范围以过滤出所需的字体。

松鼠字体

3. 字体空间

FontSpace拥有 110,000 多种不同类型的字体,是另一个寻找免费字体的绝佳集合。它已成为图形设计师、程序员和网络开发人员的流行资源,可以通过独特的排版来放大他们的创意作品。

您可以使用字体、样式和搜索栏等选项在平台上浏览和搜索所需的字体。字体生成器选项可让您在下载之前预览特定字体的文本。

FontSpace 还允许志愿者字体创建者将他们的字体上传到网站上,不断使其变得更加足智多谋。

字体空间

4. 大字体

DaFont是一个著名的在线不同类型免费字体集合。无论您是在寻找衬线字体、无衬线字体还是花式字体,您都可以在此网站上找到丰富的字体集合。在网站的一开始,您可以看到所有这些字体类型的类别列表。

单击类别列表将显示下面的特定字体。接下来,您必须探索结果,下载合适的字体,并将其集成到您的网站中。此外,如果您需要用于网站横幅、弹出窗口和徽标制作的精美字体创意,您可以在这里找到它们。

大字体

5. 字体结构

如果您正在寻找一个可以找到免费字体并根据需要创建新字体的网站,您必须访问Fontstruct网站。从顶部栏中转到FonStructor选项。创建帐户,登录网站,然后返回页面。

您将获得一个带有几何形状的简单编辑器。这些几何形状被称为“砖块”,允许您创建字母、数字和符号。字体准备好后,您可以免费下载各种格式的字体,以使其与您所需的软件兼容。

字体结构

6. 开放代工

Open Foundry是一个相对较新的免费字体开源平台。它们是根据开放字体许可证发布的。因此,您可以下载、修改和重新分发它们,而不会遇到任何版权问题。您可以以各种格式下载它们,例如 OTF、TTF 和 WOFF。

Open Foundry 字体对于网站和图形设计项目同样有用。它们提供了一个环境,排版设计师和字体爱好者可以在字体项目上合作、分享想法并为新字体的开发做出贡献。

开放式代工厂

7. 字体结构

Fontfabric拥有令人印象深刻的许多令人惊叹的字体集合。该网站由保加利亚设计师斯维托斯拉夫·西莫夫设计并推出。由于设计师是巴尔干人,因此该网站上的大部分字体都是西里尔文版本,这意味着它们用于俄语及相关语言。

然而,Fontfabric 并不是无条件免费的。尽管该平台提供了大量免费字体,但您还可以在那里找到高级字体。如果您让任何欧亚客户设计他的网站,您必须访问此网站以获取字体建议。

字体结构

8. 字体包

Font Bundles是另一个查找免费和高级字体的知名平台。在网站上创建帐户后,您可以过滤掉免费字体。您还可以注册新闻通讯,以便在网站添加新的免费字体时立即收到通知。

除了字体之外,该网站还提供广泛的图形设计资源,例如矢量图形、插图、模型、模板等。字体包经常举办促销活动,包括免费字体赠品和字体包折扣。

字体包

9. 我的字体

尽管MyFonts不是一个很好的免费字体平台,但您仍然可以在此网站上找到一些不错的免费字体。其广泛的字体集合涵盖了多种样式,包括衬线、无衬线、脚本、显示等。

MyFonts 允许铸造厂和独立字体设计师加入该平台并提交他们的字体。MyFonts 具有直观的搜索和浏览界面。您可以按照各种标准过滤网站上的字体,例如样式、排版、铸造厂、语言和价格。

我的字体

10.行为

如果您学习平面设计或网站开发哪怕只有几天,您一定至少听说过一次Behance 。它是一个在线平台,旨在分享和展示来自广泛创意和艺术学科的数字作品。

如果您是一位创意人士,已经完成了许多数字作品,您可以将它们作为作品集在 Behance 上分享。该平台还包含个人工作者上传的免费字体。只需在搜索栏中输入“免费字体”,您就会在平台上获得可用的免费字体。

行为

11. 1001种免费字体

虽然名字是1001,但你会在这个网站上找到10000多种字体。该网站的界面与DaFont非常相似,干净、简单。您将在此平台上找到大量供个人和商业用途的免费字体。

1001 Free Fonts包括几个用户友好的工具,用于搜索和浏览字体。您可以按类别、样式和字母顺序过滤它们。免费字体大多供个人使用,商业用途可能需要付费。

然而,1001 Free Fonts 有一个特殊的选项,允许您以 19 美元的价格下载单个包中的所有 10000 多种字体。95. 这可以节省你的时间

1001 种免费字体

如何为您的网站选择合适的免费字体

选择正确的字体是网页设计过程的关键部分。因为字体和版式在塑造网站的整体外观和感觉方面发挥着重要作用。因此,您必须考虑以下几点来为您的网站选择正确的字体。

A。定义您的品牌形象

您的字体选择应符合您的品牌个性、价值观和目标受众。考虑您的品牌是现代的、传统的、幽默的还是正式的。例如,如果您正在考虑建立一个科技网站,您将需要时尚且现代的字体。

b. 了解您的设计需求

您应该根据您的具体设计和内容类型选择合适的字体类型。例如,衬线字体通常更适合冗长的文章,而无衬线字体则适合标题、副标题和数字界面。

C。考虑屏幕和设备兼容性

如今,人们不仅通过桌面设备访问网站,还通过手机和平板电脑设备访问网站。因此,无论您选择什么字体,都必须在所有设备上都同样易于理解。此外,确保响应式设计原则,以便所选字体能够很好地适应不同的屏幕分辨率。

d. 可读性分数

可读性差的字体可能会造成令人眼花缭乱的环境,这可能会阻止访问者阅读您的内容。因此,测试不同大小、颜色和字母行间距的字体,以确定在可读性和美观性之间取得平衡的字体。

使用免费字体时,请仔细查看其许可条款。许多字体仅供个人免费使用。但你必须付费才能将它们用于商业用途。避免在商业项目中使用您无合法权利使用的字体。

有关如何获取免费字体的常见问题解答

我们在上面的讨论中提供了许多免费字体源。希望您在这些来源中找到了您想要的字体。我们现在将在本节中回答一些与字体相关的重要问题。继续阅读!

  • 可以下载免费字体吗?是的,可以下载并使用免费字体。但请务必检查其许可条款和条件。如果您错误地开始使用高级字体作为免费字体,您最终可能会遇到麻烦。
  • 在哪里可以获得免费的商业字体?Google 字体、Font Squirrel、DaFont 和 Adob​​e Font。
  • 什么是值得信赖的免费字体来源?Google 字体、Font Squirrel、Adobe Font 和 FontSpace。
  • 我如何知道字体是否已获得许可?有多种方法可以了解任何字体的许可信息。1. 检查下载字体时附带的 readme.txt 文件。
    2. 访问您获取字体的网站。
    3. 网上Google一下具体的字体。
  • 我什么时候应该购买高级字体?在以下情况下您可以考虑购买高级字体:1. 特定品牌需求
    2. 处理复杂项目
    3. 高端设计案例
    4. 独家授权

总结!

免费字体现在触手可及。您会在上述网站上找到如此多的免费字体,您可以使用它们完成几乎所有类型的项目工作。但如果您想发展品牌,您可以购买高级版或为此设计自定义字体。




2023 年如何向 Elementor 免费版和专业版添加自定义字体

当网页设计师在网页上放置文字时,字体样式和后期排列对于他们来说非常重要。选择正确的字体可以使设计更加清晰、有吸引力且易于访问网站的人阅读。据 Elementor 称,网站字体占设计的 90%

如果您的网站使用 WordPress,则您已经可以使用 800 多种默认字体。但是,当您想要添加自定义字体来为您的网站打造独特的外观时,事情就会变得困难。幸运的是,Elementor 有自定义字体功能。它允许您将自定义字体添加到您的网站。

本文将向您展示如何向 Elementor 免费版和专业版添加自定义字体的分步指南,因为这两个过程之间存在一些差异。在此之前,我们将简要讨论 Elementor 自定义字体功能以及在哪里获取自定义免费字体。

Elementor 自定义字体功能说明

将字体添加到 Elementor

“定制”一词是指为满足特定需求和偏好而制造的东西。同样,创建自定义 Elementor 字体是为了满足您的个人需求和偏好。允许您设计、修改和微调字体特征,超越标准默认字体所能实现的效果。

Elementor 允许您创建和使用五种类型的自定义字体格式。他们是:

  1. Web 开放字体格式 (WOFF)  – WOFF 是最推荐的格式,因为现代浏览器支持它
  2. Web 开放字体格式 (WOFF 2.0)  – WOFF 2.0 支持 TrueType 或 OpenType 字体,提供比 WOFF 1.0 更好的压缩
  3. TrueType 字体 (TTF)  – 该字体由 Apple 和 Microsoft 于 20 世纪 80 年代末开发
  4. SVG 字体/形状 – SVG 字体允许 SVG 在显示文本时用作字形。确保使用此格式来支持旧版本的 iPhone
  5. 嵌入式 OpenType 字体 (EOT)  – 此字体文件适用于 IE,但不适用于其他浏览器。确保使用此格式来支持早期版本的 IE

注意:欧盟正在向 GDPR 添加新规则。任何在其网站上使用直接托管的 Google 字体的人都会违反 GDPR 规则。谷歌将对该网站处以 100 欧元的罚款。因此,如果您有 Google Fonts,则它必须在本地托管,或者您可以使用自己的自定义字体。

不过,您还可以使用Perfmatters 插件管理网站的 Google 字体。查看有关如何在 WordPress 中本地托管 Google Fonts 的文档。

哪里可以获取用于网页设计的自定义免费字体

从头开始创建和开发自定义字体需要多种技术技能。它们是排版、使用设计软件、编码、文件格式、字体许可、脚本和自动化。但如果您是无代码用户,您当然不应该具备这些技能。

在这种情况下,您应该使用预先设计的免费或高级字体。有许多可靠的在线网站,您可以在其中获得令人惊叹的自定义字体。Google Fonts、Font Squirrel、FontSpace、DaFont 和 Open Foundry 是一些值得一提的网站。

探索帖子获取免费字体的最佳位置,以了解有关这些网站的更多信息并访问链接。现在我们将向您展示如何从 DaFont 下载自定义字体

步骤 01:从 DaFont 网站下载字体

访问网站DaFont.com。您将在网站上的每种字体旁边看到一个下载按钮。浏览网站并决定您喜欢的字体,然后点击“下载”按钮。

从 DaFont.com 下载字体

步骤02:解压下载的文件

字体文件将以 ZIP 文件形式下载。请解压文件并进入文件夹。

注意:您无法在 Elementor 中使用 ZIP 文件。我们已经在上面向您展示了 Elementor 允许五种特定的字体格式。

解压下载的文件

步骤 03:找出合适的格式

您将在文件夹中找到下载的字体的多种格式。找出是否有一种格式与上面列表中的五种格式中的任何一种相匹配。确实,我们可以看到.ttf格式。把它记在心里。我们将在下面的教程中使用它。

找出ttf格式

以同样的方式,您可以探索和下载来自其他字体铸造厂的字体。

如何向 Elementor 免费版和专业版添加自定义字体:分步指南

将字体添加到 elementor

免费版和高级版 Elementor 中添加自定义字体的过程并不相同。真实的情况是,Elementor 自定义字体功能仅在您是高级用户时才有效。但如果您是免费用户,请不用担心。

您仍然可以使用附加插件以其他方式将自定义字体添加到 Elementor 免费版本。我们将在下面的教程方法中解释所有这些过程。

方法01:如何向Elementor免费版添加自定义字体

有许多插件可让您向 WordPress 网站添加自定义字体。自定义字体自定义 Typekit 字体是其中最好的两种。让我们使用自定义字体插件来完成它。

步骤01:安装并激活自定义字体插件

导航至插件 > 添加新插件。在搜索框中键入自定义字体。当插件出现在下面时,安装激活该插件。

安装并激活自定义字体插件

转到外观部分。您将看到其中创建了一个名为“自定义字体”的新菜单。转到菜单。按添加新字体按钮。

转到外观自定义字体部分

步骤02:上传字体并保存变体

首先选择本地字体选项卡。按“选择文件”按钮,从本地驱动器上传下载的字体文件。请记住上传.ttf格式。给字体命名。例如,我们为下图中的字体设置名称Sunday Grapes 。

您可以添加其他几个变体并在右侧查看预览。最后点击“保存字体”按钮。

上传您下载的字体

步骤 03:检查字体是否适用于 Elementor

使用 Elementor 打开帖子或页面。拖放标题文本编辑器小部件。向小部件添加一些文本。

转到样式选项卡并打开版式选项。打开“系列”旁边的下拉列表,然后按名称搜索您的字体。

您可以看到我们添加的字体Sunday Grapes就在列表中。所以,它运作良好。

检查该字体是否适用于 Elementor

因此,使用自定义字体插件,您可以免费向 Elementor 添加自定义字体。使用Custom Typkits Font插件的过程也几乎是一样的。

方法02:如何向 Elementor Pro 添加自定义字体

希望您已在网站上安装并激活 Elementor Premium 版本。正如我们刚才所说,只有在此之后,Elementor 自定义字体功能才会在您的网站上运行。现在让我们进入教程。

步骤 01:向您的网站添加自定义字体

首先,导航到Elementor > 自定义字体

转到 Elementor-> 自定义字体

在这里,您可以创建自定义字体。例如,单击“添加新”按钮来创建自定义字体结构。

导航自定义字体

为您的字体指定一个标题。然后单击“添加字体变体”

输入字体系列名称

步骤02:添加字体变体并上传字体文件

在这里,您可以向字体添加一些附加选项。例如字体粗细、样式和字体文件。

添加字体变化

让我们上传一个 TTF 自定义字体文件。为此,请单击上传按钮

如何向 Elementor 添加字体

从您的设备或找到的文件夹上传字体文件。

注意:在将您喜欢的字体文件上传到此处之前,请确保将您喜欢的字体文件保留在您的设备上!

选择字体

完成后,您可以从此处查看字体详细信息。

查看字体详细信息

按照相同的过程,继续每种格式的字体文件上传过程。让我们上传另一个字体变体。例如,单击“添加字体变体”按钮并设置字体粗细和样式。

将字体粗细设置为 100,然后再次单击上传按钮。

选择字体粗细

上传文件后,您可以从媒体库中添加它。

上传字体

步骤03:发布最终的自定义字体

执行相同的过程,向您的网站添加不同的字体变体。完成后,只需点击“发布”按钮即可。

发布字体

步骤 04:在 Elementor 设计中使用自定义字体

现在,您可能正在考虑如何使用这种自定义字体。正确的?让我们看看如何查找和使用此自定义字体,您需要在 Elementor 设计面板上打开任何 Elementor 页面。然后在面板上添加任何文本小部件。

标题小部件添加到 Elementor 编辑面板。

向 elementor 添加字体

添加文本小部件(标题)后,

  • 导航至样式部分
  • 单击版式
  • 在这里您可以找到您之前刚刚创建的字体(我的字体)。只需选择字体即可。

添加字体后,您就可以体验其他版式选项,以使您的文本或字体看起来更好、更有吸引力。例如字体大小、粗细、变换、样式、装饰、线宽等等!

选择我的字体

嗯,非凡的设计比简单的设计更能吸引客户的注意力。因此,如果您想让网页的标题更加智能和令人愉悦,那么下一部分就适合您。在这里,我们将向您展示如何使用 Happy Addons动画文本小部件来设计您的标题。

方法03:使用代码为Elementor添加字体

让我们看看如何按照手动流程将字体添加到 Elementor 网站。

  • 通过FTP 客户端或使用cPanel将新的“fonts”文件夹添加到主题文件夹中。新文件夹应位于wp-content/themes/fonts 中
  • 一旦添加了新的“fonts”文件夹,将所有字体文件添加到其中
  • 现在,打开主题的样式表(style.css)并向其中添加以下代码:
@font-face {
	
	src: url("/fonts/nameofnewfont.woff2") format("woff2"),
		 url("/fonts/nameofnewfont.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}

  • 通过将元素添加到同一样式表来配置将使用此字体的元素。 
  • 这种方法对于初学者来说可能会很痛苦。每当您想要添加“斜体”或“粗体”等配置时,您都必须执行相同的过程并添加这些参数。涉及大量编码。

对于那些不想处理此技术流程的人,您可以按照以下流程成功地将自定义字体添加到您的 Elementor 网站。

让我们学习如何设计自定义 Elementor 标头

使用快乐插件文本动画小部件来风格化您的字体

使用快乐插件文本动画小部件来风格化您的字体

动画文本小部件是 Happy Addons 的一项专业功能。使用这个很酷的小部件,您可以使您的文本变得如此有趣和吸引人。它有 10 种预先构建的设计布局,可以减少您的额外工作和困难。

因此,将其添加到 Elementor 设计面板后,您需要选择正确的设计布局并根据您的网页结构对其进行自定义。让我们实际看看如何在 WordPress 网站上使用动画文本小部件而不是普通文本或字体。

首先,您需要安装并激活这些插件:

  1. 元素免费
  2. 快乐插件免费和专业版

步骤01:添加动画文本小部件

首先,从小部件库中拖放小部件。

添加动画文本小部件

您将在屏幕上看到小部件的初始视图。

动画文本小部件的内容

使用您之前创建的自定义字体文本。要选择它,请点击样式按钮和版式,然后选择我的字体

选择您的自定义字体

步骤 02:为您的文本添加设计

现在再次点击内容部分。选择您最喜欢的设计。

预设

一旦确认了设计,就该调整动画风格了。为此,请单击“内容”并在那里找到“动画”类型。单独探索每种类型,以便为您的网站带来更好的输出。

选择动画类型

注意:动画延迟以毫秒为单位。最小 1000 最大 30000。

步骤 03:在网页上查看动画文本的最终输出

让我们看看在字体上自定义动画文本小部件后的最终输出。

自定义字体的最终外观

这就是 Happy Addons 的动画文本小部件如何帮助调整看起来无聊的字体或文本。但是,如果您想详细了解该小部件,可以查看该小部件的官方文档

或者,为了更好的可视化,您可以查看下面的动画文本视频教程。

https://www.youtube.com/embed/3iCq2Msj6So?feature=oembed

让我来看看所有独家快乐功能!

关于 Elementor 自定义字体的一些常见查询

如何将 Google 字体添加到 Elementor?

为此,请转到 Elementor > 设置 > 高级选项卡,然后将 Google 字体加载更改为选项之一。从下拉菜单中,选择以下加载选项。

默认 – 字体显示策略由浏览器定义。
阻止 – 隐藏文本,直到字体完全加载。
交换 – 使用后备字体进行显示,直到字体完全加载。
回退 – 将文本隐藏最短时间,并且仅在几秒钟内加载时才使用该字体。
可选 – 将文本隐藏最短时间,并将使用后备字体,除非字体已完全加载。

为什么字体在 Elementor 中不起作用?

大多数情况下,此事件仅发生在 Elementor 小部件上。但不是默认的小部件或菜单。如果您发现使用字体有任何异常,请将 Elementor 字体设置 为默认。所以排版设置可以采取主动。

如何手动添加字体到WordPress?

01. 首先,将您想要使用的字体下载到计算机上,然后解压 zip 文件
02. 之后,将您的字体文件上传到wp-content/themes/your-theme/fonts 目录
03.最后,按“更新文件”按钮保存更改

如何向 WordPress 添加 OTF 字体?

01. 将插件文件上传到/wp-content/plugins/custom-fonts 目录,或直接通过 WordPress 插件屏幕安装插件
02. 通过 WordPress 中的“插件”屏幕激活插件
03. 使用外观 ->自定义字体 -> 添加自定义字体名称、WOFF2、WOFF、TTF、EOT、OTF 和 SVG 文件

如何在没有插件的情况下向 WordPress 添加字体?

01.找到谷歌字体。所有 Google 字体均可搜索
02. 获取要插入网站的代码
03. 将第一段代码插入 <head>
04. 添加第二段 CSS 代码。

相关资源

准备好探索 Elementor 自定义字体功能了吗?

自定义字体有多种功能。从建立独特的品牌风格到获取更多客户,自定义字体始终为营销人员、设计师或网站所有者提供支持。除了使用常规的 Google 字体之外,自定义字体还可以帮助您的在线业务以其独特的风格和外观吸引更多客户。

因此,我们希望这篇Elementor 教程文章能够丰富您在 WordPress 网站上巧妙使用自定义字体的知识。另外,Happy Addons 的动画文本小部件将帮助您将文本修改到一个新的水平,并为整个网站设计添加额外的价值。




用于生成图像和网页设计元素的免费人工智能AI工具

图像和视觉效果对于吸引观众的注意力并向他们有效地传达信息至关重要。它们可以唤起情感并给用户留下持久的印象。然而,创造高质量的视觉效果需要强大的设计技能、无数的工作时间和大量的预算。

结果,企业和专业人士不得不花费大量资金来创建所需的视觉效果。然而,人工智能图像生成工具的最新进展已经显着改变了这一格局。现在,您可以使用这些强大的 AI 工具根据文本提示创建令人惊叹的图像和视觉效果。

在本文中,我们将向您介绍一些免费的人工智能工具来生成图像,并且在一定程度上不会向您收取任何费用。在此之前,我们将简短讨论一下为什么以及在哪里应该使用人工智能图像生成工具。开始吧!

什么是AI图像生成器?

AI 图像生成器是使用人工智能 (AI) 算法根据您的提示和给定输入生成图像的软件和 Web 应用程序。生成器分析输入文本,理解上下文,并创建与给定描述相符的图像。

AI图像生成工具在平面设计、艺术、广告、电子商务和个人项目等各个领域都有应用。您可以生成图像来支持您的故事讲述和创意,以便人们在阅读您的内容/概念之前就可以将其可视化。

为什么以及何时应该使用图像生成工具?

在很多情况下,人工智能图像生成工具都可以发挥很大作用。它们可以通过自动化图像创建过程来节省您的时间并减少额外的人力需求。让我们看一下您可能会考虑使用 AI 图像生成工具的一些关键场景。

为什么以及何时应该使用人工智能图像生成工具?

b. 探索新的设计理念

无论您是专业图形设计师还是季节性图形设计师,图像生成工具都可以帮助您集思广益新的设计理念。您可以将生成的图像结果作为建议,并从中获取灵感来创建更好的设计。

A。内容创作

您可以使用图像生成工具为各种类型的内容创建视觉效果,例如博客文章、演示文稿、营销和社交媒体帖子。它们可以通过增强内容可视化能力来帮助您生成相关图像来吸引受众。

探索如何个性化网站内容

C。数据可视化

假设您是一名数据科学家,手头有大量统计结果。使用图像生成工具,您可以通过多种方式可视化数据,例如饼图、条形图、热图、散点图、网络图等,还可以使您的演示更加轻松。

d. 营销和品牌

图像生成工具可用于创建强大的视觉效果,以支持您的品牌、营销和广告活动。当然,如果您能正确编写提示,您就可以生成有效向观众传达信息的图像。

e. 创建虚拟角色和插图

AI 图像生成工具非常适合创建游戏和动画中常用的虚拟角色和插图。如果您是动画制作者、漫画设计师甚至产品设计师,您可以充分利用这些工具。

从文本生成图像的最佳免费人工智能工具

您可以在线找到大量人工智能图像生成工具。但并非所有这些都包含免费套餐,因此您最终可能会感到沮丧。为了简化您的任务,我们将在本节中列出一些最好的 AI 图像生成工具以及免费软件包。继续阅读!

1.达尔-E 2

Dall-E 2 图像生成工具

Dall-E由 OpenAI 开发,于 2021 年 1 月首次发布。它使用深度学习和生成对抗网络 (GAN) 来生成新图像。Dall-E 依赖于在由文本图像对组成的海量数据集上进行训练的神经网络。

该数据集涵盖了广泛的多样化文本描述以及相应的图像。每当有人提交提示时,数据集都会尝试找出单词和视觉概念之间的关系。因此,该工具生成独特的图像。

Dall-E 2 是 Dall-E 的更新版本。它的名字是艺术家萨尔瓦多·达利和动画人物瓦力的组合。开发人员将在未来几天不断尝试对其进行更多开发。

Dall-E 2 图像生成工具的主要功能

  • 提供简单且用户友好的界面
  • 允许用户检查生成的图像的历史记录
  • 用户可以将自己喜欢的生成艺术作品保存在收藏中
  • 付费版本允许您使用 Dall E 训练自己的模型
  • 您可以通过移动浏览器使用该工具(官方还没有应用程序)
  • 用户可以上传自己的图像并使用 Dall E 进行自定义

Dall E 2 的定价

Dall E 有免费版本。免费积分结束后,您必须升级到高级版本才能购买新的积分。您可以生成大约 115 张图像,最低信用成本为 15 美元。

2.Bing图像创建器

必应图像创建器

Bing 是 Microsoft 产品,通常称为网络搜索引擎。Bing Image Creator于 2023 年 3 月集成到搜索引擎中。该图像生成工具由更高级版本的 Dall-E 提供支持。因此,与 Dall E 相比,它可以产生更好的结果。

这个人工智能工具的最大优点是您可以从同一个地方访问图像生成器和 Bing AI 聊天机器人。如果您有权访问人工智能聊天机器人,则可以通过从那里输入提示来生成图像。您无需为此打开新选项卡。

因此,如果您想创建具有所需视觉效果的长内容,您可以在同一个地方完成所有操作,从而节省宝贵的时间。

Bing Image Creator 的主要功能

  • 创造多种风格:卡通、动漫、水彩、赛博朋克等
  • 配备内置人工智能内容检查器
  • 用户可以上传图像并命令 Bing 从中获取灵感
  • 您可以应用各种滤镜和效果
  • 检查历史记录和下载选项
  • 与 Bing 和 Microsoft 帐户集成

Bing Image Creator 的定价

Bing Image Creator 可免费使用。每天,它都会为您的帐户更新 100 个积分,足以让任何人生成所有必要的视觉效果。

3.莱昂纳多人工智能

莱昂纳多·艾

在少数可以生成近乎真实图像的人工智能工具中,Leonardo AI就是其中之一。它使用预先训练的人工智能和机器学习模型来策划高质量的图像,使其成为艺术家、设计师和数字内容创作者的首选。

该工具的另一个突出功能是访问社区源。在提要中,您会看到其他 Leonardo AI 用户已经生成的无数图像。这对于增长设计灵感和想法非常有用。您还可以创建自己的数据集来训练所需的模型以获得更好的结果。

除了图像生成之外,Leonardo 最近还推出了另外两个工具:AI Canvas 和纹理生成。在未来的日子里,莱昂纳多将想出更多的东西来彻底改变人工智能图像生成行业。

莱昂纳多人工智能的主要特点

  • 通讯源向您显示其他用户生成的图像
  • 允许生成各种图像类型:风景、肖像、抽象艺术等。
  • 轻松设置长宽比并将图像混合在一起
  • 您可以微调自己的模型并训练数据集
  • 有一个提示生成器来改善您的提示
  • PhotoReal 功能可生成几乎与人类相似的图像

莱昂纳多人工智能的价格

Leonardo AI 每天为您免费提供 150 个代币,您可以通过这些代币生成数十张图像。高级版起价为 12 美元/月。

4.画布

画布人工智能

Canva是著名的图形设计平台。它是从头开始快速编辑或创建图像的首选。2022 年 9 月 15 日,Canva 推出了首个图像生成人工智能,该人工智能直接集成到 Canva 的设计仪表板中。

使用 Canva 的最大优势是该平台为您提供了大量的图形设计模板和元素库。生成图像后,您可以根据社交媒体、网站、文档和演示项目的需要在同一画布上进一步编辑它们。

这意味着您不必费力下载图像并将其上传到另一个平台进行编辑。您可以在多个平台上访问 Canva,包括网站和手机。

Canva AI 的主要特点

  • 魔法编辑让您只需点击一下即可自动增强图像质量
  • Magica 橡皮擦可立即消除任何不需要的干扰,无需手动触摸
  • 您可以应用多种艺术风格,如水彩、电影、霓虹灯、复古浪潮等。
  • 一键背景去除器可以立即去除您的图像背景
  • 您可以向图像添加文本、图标和图形

Canva AI 的价格

只要您愿意,您就可以享受 Canva 免费版本。但要享受高级功能,您必须升级到高级版本。Canva Pro 的价格从每年 54.99 美元起。

5. 梦想工作室

梦工作室人工智能

DreamStudio是知名Stability AI公司旗下的另一款颇具前景的AI艺术生成器。该软件还可以根据您的提示生成近乎真实的图像。您可以指定数字的数量及其长度、宽度、强度和对比度级别。

DreamStudio 维护一个专门的页面,定期介绍编写准确提示的基础知识。它打开了安全滤镜,可能会模糊图像的某些部分。您必须重新调整提示才能消除模糊。您无需为修改模糊图像付费。

DreamStudio 有一个否定提示字段。如果您希望在图像生成过程中不使用单词或短语,请在字段中指定它们。这可以使您的图像更加准确。

DreamStudio AI 的主要特点

  • 允许您将各种风格(电影、动漫、漫画、折纸等)应用于图像
  • 负面提示从图像生成过程中排除特定单词
  • 让您提高图像分辨率以获得更好的质量
  • 您可以通过上传到平台来编辑和增强现有照片
  • 提供第三方集成并免费访问教程

DreamStudio AI 的价格

注册后,DreamStudio AI 会提供 25 个免费积分。免费积分结束后,您必须升级到高级版本,至少花费 10 美元才能获得 1000 个积分。

6. 深度人工智能

深度人工智能

当然,人工智能工具有太多的选项,让新手用户感到困惑。他们必须投入最少的时间来探索所有选项并进入图像生成阶段。对于那些不想承担所有这些麻烦的人来说,DeepAI是一个很好的解决方案。

因为 DeepAI 是生成图像最简单的免费 AI 工具之一。只需创建一个帐户,输入提示,选择型号,然后指定您想要的风格。生成图像后,您可以下载它或使用神奇的“增强”按钮提高质量。

DeepAI的主要特点

  • 拥有简单直观的界面
  • 人工智能聊天机器人已准备好提供必要的帮助
  • 免费版本包括抽象、绘画、古老、幻想和赛博朋克等风格
  • 专业用户可以使用更多风格化选项
  • 让您轻松增强生成的图像

DeepAI的价格

免费版本开放,可以访问有限的功能和风格化选项。升级到高级版本将允许您使用高级语言模型来生成高质量的图像。高级版起价为 4.99 美元/月。

7.Craiyon人工智能

克雷扬人工智能

Craiyon是另一个简单的图像生成人工智能工具。最初,它以 Dall E 为基础开始了它的旅程。Craiyon 当时被称为 Dall E mini。但它不再隶属于 OpenAI 或 Dall-E。相反,它现在是一种开源替代方案。

Craiyon 使用 StyleGAN2 根据提示生成高质量图像,给您带来令人惊叹的感觉。该工具为您提供四种图像风格变体:艺术、绘画、照片和无。您还可以提及在图像生成过程中要避免的负面词语。

Craiyon 非常适合任何想要为社交媒体、营销活动、博客文章的内部图像等生成图像的人。

Craiyon AI 的主要特点

  • 拥有庞大的现有设计元素和图像库
  • 创建 9 个不同版本的图像
  • 只需一键即可轻松升级图像
  • 否定词可以防止图像中出现不需要的概念
  • 提供打印服务,根据您的订单将您的设计打印在 T 恤上

Craiyon AI 的价格

使用 Caiyon AI 生成免费图像尚无限制。但升级到高级版本将使您的图像保持私密并获得高优先级支持。

8. 星空AI

星空人工智能

Starry AI是一个简单的工具,您可以在桌面和移动设备上使用。所有其他人工智能工具都使用现有的艺术风格和随机图案,而 Starry AI 则以文森特·梵高的名画《星夜》为灵感。该工具还使用两个 AI 模型:AltairOrion

因此,人工智能算法会根据您的提示生成艺术作品。登录网站后,您必须先选择AI图像类型。之后指定画布大小和运行时间。最后点击“生成”按钮。几秒钟到一分钟内您就会看到魔法。

Starry AI的主要特点

  • 您可以选择多种型号、样式和长宽比
  • 在不同设备上提供无缝且愉快的体验
  • 允许您通过输入相应的单词来删除不需要的概念
  • 允许您上传和修饰现有图像

星空AI价格

Starry AI每天免费充值5个积分。他们对每个图像生成收取一个积分。高级版起价为 11.99 美元/月。

9.灵魂生成

SoulGen 图像生成工具

根据您的文字提示,SoulGen可以生成具有视觉吸引力的真实或动漫女孩肖像。不仅是角色,该工具也可以更改图像的背景。所以,如果你是一个动漫爱好者,想要在社交媒体上上传动画角色并且喜欢角色扮演,SoulGen可以是一个方便的工具。

SoulGen 还可以为数字艺术家提供帮助,他们必须为常规自我、代理和自由职业项目策划数字艺术作品、化身和角色。该工具可以为您在实际设计作品中实现提供可行的参考和灵感。

SoulGen 的主要特点:

  • 提供了一系列可以在提示中使用的提示标签
  • 允许您自定义宽高比
  • 您只需根据提示即可编辑准备好的图像或手机拍摄的图像
  • 让您指定每个命令中将生成的变体总数
  • 生成适合各种应用的高质量图像

SoulGen 的定价

免费用户每个命令只能生成一个图像变体。只有专业用户才能为每个命令生成多个变体。该工具的高级版本起价为 19.99 美元/月。

免费 AI 图像生成器常见问题解答

希望您享受探索所有上述免费人工智能图像生成器的乐趣。现在,我们将回答一些我们通常在免费人工智能图像生成器上在线遇到的热门问题。

  • AI图像合法吗?根据美国法律,由人工智能创建的、没有任何人为接触的艺术和图像被视为不受版权保护。
  • 我可以免费使用中途吗?Midjourney 没有为用户提供任何免费套餐。由于用户需求过多,他们几天前关闭了所有免费试用。
  • 销售人工智能生成的艺术品的最佳地点是哪些?Freepik、Adobe Stock、Redbubble 和 Etsy 是销售人工智能生成艺术的最佳场所。
  • 人工智能图像生成器会取代人类设计师吗?事实上,人工智能图像生成器已经彻底改变了设计行业,并将在未来几天继续如此。然而,它无法完全取代人类设计师。然而,他们可能有能力抢走初学者和半熟练设计师的饭碗。
  • 什么是最好的适合初学者的人工智能图像生成器?Canva、DeepAI、Craiyon 和 Starry AI 是最适合初学者的 AI 图像生成器。

最后的想法

用AI生成图像确实是一件有趣的事情。如果您刚刚开始探索人工智能艺术生成器,您会同时感到高兴和惊讶。您肯定会在网上找到许多人工智能生成器,但并非所有这些都会为您提供免费访问。在某一时刻,你可能会感到沮丧。




198个经典C#WinForm实例源码(超赞).rar

198个经典C#WinForm实例源码(超赞),适于初学者学习参考,包含窗体技巧、控件操作、图像操作、报表打印、系统操作、文件处理、网络操作、数据库操作、加密解密、硬件读写、游戏设计。
资源简介/截图:

所属分类:开发技术 > C#
文件大小:40.26 MB
上传日期:2019-09-04 00:51
MD5:86cbb95820************fc2525e49b



免费DataGridView打印控件5.8版.rar

datagridview打印控件(5.8版本),一款支持各种报表功能、数据统计等等的打印工具,为代码,直接可以集成到项目中WPF中打印测试,包含一个在WPF应用程序中使用VB2008Print组件进行打印预览和打印的实例,有源代码,需要此款工具的伙伴们就来下载使用吧。
资源简介/截图:

所属分类:开发技术 > C#
文件大小:22.31 MB
上传日期:2020-02-29 17:24
MD5:6e402cd821************2c3ffd98b2



Pro ASP.NET MVC 5 (精通ASP.NET MVC5框架) 中文+英文+配套源代码.zip

Pro ASP.NET MVC 5 (精通ASP.NET MVC5框架) 中文+英文+配套源代码,主要内容和三四差不多。路由,Ninject有新增。介绍了jquerymobile,api和knockout。
资源简介/截图:

所属分类:开发技术 > C#
文件大小:315.32 MB
上传日期:2020-04-13 20:56
MD5:5ef1adc248************069107301e



基于C#的图像处理、神经网络、遗传算法集.zip

在.NET编程中,由于GDI+的出现,使得对于图像的处理功能大大增强。在文通过一个简单黑白处理实例介绍在.NET中常见的图片处理方法和原理并比较各种方法的性能。更新了 imageprocessing 实现了神经网络、遗传算法在 .NET 编程平台的开发,是一份不错的文档。
资源简介/截图:

所属分类:开发技术 > C#
文件大小:714.61 KB
上传日期:2019-07-13 21:45
MD5:1e8a25ef3e************559d8a7c11



Aspose.dll 所有破解版( 已强签名 亲测可用).rar

Aspose.dll 所有破解版( 已强签名 亲测可用), aspose破解后的dll类库,用到words而找的,用着比office组件好用多了,最主要的是不用安装office就可以生成文档!
资源简介/截图:

所属分类:开发技术 > C#
文件大小:15.04 MB
上传日期:2019-07-13 17:07
MD5:e3a7038be3************39aed3a14f



c# 获得汉字拼音和声调.zip

c#程序开发,根据汉字可以获得一个汉字的拼音以及它的声调,支持简体字、繁体字等字体。
资源简介/截图:

所属分类:开发技术 > C#
文件大小:39.47 KB
上传日期:2019-07-13 21:42
MD5:f9970cbc75************0928a9e726



Aspose全家桶类库,无水印,直接使用.rar

c#版本的Aspose操作类库,里面包含了Word、PDF、Excel的操作,使用简单,无水印。
资源简介/截图:

所属分类:开发技术 > C#
文件大小:28.94 MB
上传日期:2019-08-04 16:13
MD5:5841da49ba************051c1cbfec



Aspose.PDF for .NET v19.1.0破解版.zip

Aspose.PDF for .NET v19.1.0最新版,无需安装Adobe Acrobat也可操作pdf文档,亲测完美破解。主要功能有:使用API创建新的PDF文件,转换XML和XSL-FO文档为PDF,将SVG文件转换成PDF格式,将图像文件转换成PDF格式,将HTML网面转换成PDF格式,生成PDF文件时添加生成表格和图形对象。
资源简介/截图:

所属分类:开发技术 > C#
文件大小:110.61 MB
上传日期:2019-07-13 21:41
MD5:fec273b09a************7219002e63



C#实现坐标转换,七参数之间进行数据转换.rar

C#实现坐标转换,七参数之间进行数据转换,地理编码,实现各个坐标系统之间的转换并实现数据导入与导出。解决因为各大坐标系的因参考椭球几何中心不同而产生的定位误差。
资源简介/截图:

所属分类:开发技术 > C#
文件大小:801.17 KB
上传日期:2019-07-13 16:57
MD5:ad6e982d37************6e6eb6d912



C#开发实战1200例(第1卷)源码.zip

C#开发实战1200例(第Ⅰ卷) 这本书籍附带的光盘源码,很有参考价值,内附一千多winform开发的教学实例,非常适合初学者用来学习,有兴趣的欢迎下载。
资源简介/截图:

所属分类:开发技术 > C#
文件大小:76.23 MB
上传日期:2019-07-09 09:50
MD5:5f94ee5250************4255db3a2c



如何设计具有出色万圣节登陆页面创意的万圣节网页

万圣节是一年一度的节日,各个年龄段的人们都拥抱超自然现象。他们喜欢穿幽灵般的服装,用幽灵主题装饰自己的家。由于这种强烈的受欢迎程度和需求,万圣节已成为商家销售各种产品的理想场合。

大多数电子商务和在线企业都会在这一天创建单独的万圣节网页,以便更有效地开展促销活动。本文将指导您如何从头开始或使用现成的模板设计具有出色万圣节网站创意的万圣节网页。

在此之前,我们将简要讨论万圣节是什么以及为什么它变得具有商业重要性。开始吧!

什么是万圣节?

每年的 10 月 31 日,也就是诸圣节的前一天晚上,人们都会庆祝万圣节。尽管这一天在历史上植根于凯尔特人和基督教传统,但现​​在其他文化和社区也在庆祝这一天。可以说,毫无疑问,它的接受度会随着时间的推移而提高。

这个节日最畅销的产品是面具、帽子、假发、化妆品、糖果、南瓜、渴望套件、派对用品、蜡烛、家居装饰、幽灵主题书籍、零食、饮料等。据《福布斯》报道,2021 年万圣节期间,消费者在产品上花费了约 101 亿美元

而这个数字在 2022 年就突破了 106 亿美元的门槛。现在让我们看看过去几年人们在庆祝万圣节上花了多少钱。

每年万圣节开支
资料来源:Statista

哪些元素可以为万圣节网页设计增添趣味?

没有一些元素,万圣节主题就永远不完整。如果您想为万圣节设计一个专用页面,则必须在其中包含这些元素。现在让我们来看看为万圣节网页设计增添趣味的元素。

A。可怕的背景

可怕的背景应该是任何万圣节网页设计的主题。使用阴森恐怖的背景配色方案,营造出令人难以忘怀的氛围。

b. 闹鬼的图标

蝙蝠、蜘蛛、头骨、扫帚、女巫和蜘蛛网等图标可以在整个网页设计中增强万圣节主题的视觉叙事。

C。克里字体

在页眉、页脚、横幅和内部文本中使用非常规且神秘的字体可以增强网页上的怪异感和主题感。

d. 幽灵插图

鬼屋、榕树上挂着的死人头骨、篝火、闪电南瓜等,都可以帮助你呈现鬼怪的插画。

e. 动画元素

漂浮的鬼魂、移动的女巫、跳舞的稻草人和闪烁的灯光等微妙的动画可以为您的网站增添额外的恐怖万圣节风味。

F。倒计时器

它将向顾客传达万圣节活动还剩多少时间结束。这可能会引发他们尽快完成购买的紧迫感。

如何设计万圣节网页:分步

如今创建网页不再困难。您会在网上找到很多工具来创建网页,而无需编写任何代码。但使用ElementorHappyAddons,您可以创建使用其他工具无法轻松实现的高度复杂的网页。

因此,请通过下面的链接在您的网站上安装并激活它们。之后,您可以跳入有关如何设计万圣节网页的教程步骤。

注意: HappyAddons 实际上是 Elementor 插件的一个插件。

步骤01:为您的万圣节网页创建线框

线框是页面设计后外观的蓝图或视觉表示。线框图定义了页眉、页脚、导航菜单、图像、文本内容、按钮、联系表单和其他组件等元素的放置。

因此,您(开发人员)可以安排网页上的内容,然后进入更详细的设计和开发阶段。除非您有线框,否则您将完全凭想象力设计页面,而您的客户最终可能不喜欢。

网站线框

在这种情况下,您必须浪费更多的时间和金钱来修改设计,直到您的客户满意为止。这就是为什么线框图如此重要。DribbleColorlib是两个很棒的平台,您可以在其中获得无数的万圣节网站线框图创意。

线框图完成后,请获得客户的批准。然后,进入最终的设计过程。以下视频显示了我们的万圣节页面的线框。我们将按照它来设计我们的万圣节网页。看看如何创建网站线框

步骤02:使用 Elementor 打开页面

在 WordPress 网站上打开一个新页面并为其命名。然后,按下“使用 Elementor编辑”按钮,使用 Elementor打开页面。

使用 Elementor 打开页面

单击左下角的设置图标。这将在左侧边栏上打开新选项。找到并打开“页面布局”选项旁边的下拉列表。选择Elementor 全宽。这将从 Elementor 画布中删除所有不必要的文本。

如果您在已建立/正在运行的网站上创建这个新的万圣节页面,您将看到其页眉和页脚出现在画布上。你不必担心他们。您在此处添加的内容将仅存储在万圣节页面。

此外,提供页眉和页脚将帮助您选择正确的配色方案来设计万圣节页面。

以 Elementor 全宽打开页面

步骤 03:使用模板或从头开始设计页面

HappyAddons 为您提供了一系列现成的万圣节模板。您可以使用这些模板设计登陆页面或从头开始一切。

您需要打开 HappyAddons 库来探索现成的模板。单击Elementor 画布上的Happy 图标。这将打开图书馆。

前往 HappyAddons 库

您可以在这里找到块模板和页面模板。首先,进入“块”“页面”选项卡。在搜索框中输入万圣节。屏幕上将出现相关模板。从这里,您可以在画布上插入合适的模板,然后进行自定义。

探索万圣节模板并插入您喜欢的模板

***注意:我们将向您展示如何从头开始设计万圣节登陆页面。因为这将使您有机会熟悉 Elementor 和 HappyAddons 的各种功能和小部件。

步骤04:使用倒计时器创建欢迎英雄部分

每当在着陆页上创建新部分时,您都需要选择列结构。点击加号 (+)图标。您会在那里看到各种可用的列结构。选择您需要的一个。我们将使用双柱结构来创建欢迎部分。

选择列结构

您必须在欢迎部分添加一个怪异的背景图像,以便访问者在跳转到页面后立即感受到万圣节的感觉。点击六点图标以选择整个部分。然后转到“样式”选项卡。

按背景类型旁边的经典画笔图标。您可以选择向该部分添加背景图像。从本地驱动器上传图像。

注意:您无法使用 Elementor 创建此类图像。但在 Dribble、Freepik 和 Canva 平台上您会非常喜欢这个。

将背景图片添加到 Helloween 欢迎部分

# 添加标题副本和文本

每个英雄部分都包含一些吸引人的精美副本。对于万圣节页面,您必须使用令人毛骨悚然的字体。一些最流行的恐怖 Google 字体包括 Jua、Creepster、Jolly Lodger、Emilys Candy、Mystery Quest 和 Metal Menia。

我们使用标题文本编辑器小部件在英雄部分添加副本和文本。使用的字体:Emilys CandyMetal MeniaJua

添加精美的标题副本和文本

倒计时器可以在顾客心中营造一种紧迫感和意识。因此,我们使用倒计时小部件来添加倒计时器。除此之外,我们还使用文本编辑器小部件添加了更多内容来描述销售活动的开始和结束时间。

添加倒计时器

步骤05:展示热销万圣节产品

从各种统计数据来看,我们发现超过 50% 的访问者最多在 3-4 秒内对某个页面做出决定。除非他们在这段时间内在页面上找到他们想要的内容,否则他们就会转移到其他地方。

这就是为什么如果您想通过万圣节页面销售任何产品或服务,则必须将其显示在第二部分。选择新的列结构以添加用于创建下一部分的空间。

创建一个新部分

由于我们正在为电子商务网站制作此万圣节页面,因此我们将在第二部分中显示最热销的商品以及折扣百分比。您需要从左侧边栏中选择合适的小部件来按照您想要的方式展示产品。

我们正在使用选项小部件。这是一个免费的 Elementor 小部件,允许您创建可切换选项卡以添加单独的产品类别。在此之前,我们使用标题和文本编辑器小部件添加了标题和小描述。

按选项卡小部件内的加号 (+)图标。

添加标签小部件

找到卡片小部件。将其拖放到列区域中。

拖放卡片小部件

您将获得添加产品图片、折扣百分比、产品名称和购买按钮的选项。您可以从“样式”选项卡自定义卡片的外观。

添加产品图片、折扣百分比和购买按钮

一旦您对第一个卡片设计的布局感到满意,您就可以复制它,这样您就不必拖放小部件来添加新图像。另外,复制卡片小部件可以按比例分配空间,以完美展示您的产品。

将光标悬停在“编辑容器”图标上并右键单击。它将打开一个列表,从中按“复制”选项。因此,您可以根据需要多次复制卡片布局。

复制卡

然后,更新其他卡片区域的照片和信息。按照相同的方法,在其他选项卡上继续一一添加产品图片。

更新照片和信息

步骤06:建立一个令人毛骨悚然的定价表

如果您仅销售电子商务产品,则不需要在万圣节页面上提供单独的定价表。因此,您可以避开此页面。但有许多电子商务企业销售附加服务和软件。创建定价表对他们来说是必须的。

假设您正在销售体育直播服务。您每月向客户收取这项服务的费用。我们现在将为它创建一个演示定价表。HappyAddons 有一个定价表小部件,您可以通过它快速完成,没有太多麻烦。

在此之前,我们使用标题文本编辑器小部件添加了标题文本和简短描述。

将定价表添加到万圣节页面

我们从“样式”“高级”选项卡自定义了表格。“样式”选项卡可让您自定义字体的颜色、大小、系列和对齐方式。

自定义定价表字体

转到“高级”选项卡以获取更多自定义选项。探索快乐工具提示、快乐功能、运动效果、变换、背景、背景覆盖和边框等选项。我们已从“背景”选项更改了定价表的背景。

定价表的更多定制选项

步骤 07:为在线比赛和活动创建邀请部分

在线竞赛和聚会已成为吸引网络访问者并将其转化为客户的好方法。万圣节在线竞赛的一些最受欢迎的类型是照片、视频、标题、复制、测验、设计、赠品、艺术、食谱和推荐竞赛。

然而,如果太多用户加入直播活动,可能会出现流媒体和技术问题。最好创建一个表单来收集感兴趣的参与者的电子邮件地址,并在活动开始前立即向他们发送邀请。

HappyAddons 表单小部件

HappyAddons 与所有流行的 WordPress 联系表单插件集成。将所需的表单小部件拖放到画布上。在此之前,在后端创建一个表单。我们使用Contact Form 7插件来创建我们的表单。

使用 Contact Form 7 插件创建表单

返回 Elementor 画布。找到联系表格 7小部件。将其拖放到您想要的部分。选择表单并对其进行自定义。我们将左侧保留为空白以添加更多内容。

使用 Elementor Canvas 上的联系表单 7 小组件

您可以将左侧的空白区域大写,添加文本和图像。使用小部件:图像文本编辑器。明智地选择字体大小,使该部分美观。

填写万圣节页面上的表格部分

一旦您对设计感到满意,请点击“发布”按钮使万圣节网页上线。

有关如何设计万圣节网页的常见问题解答

这样您的万圣节网页就准备好了。但如何推广并带来转化呢?我们现在将回答与本节主题相关的一些最常见问题。

  • 如何提高万圣节的在线销售额?1. 专注主题营销
    2. 提供限时折扣
    3. 创建相关产品捆绑包
    4. 改造万圣节网页
    5. 在社交媒体上分享您的优惠
  • 万圣节促销活动的最佳时间是什么时候?您必须在 10 月 31 日而不是之前进行万圣节促销活动。但您可以在 10 月初使用带有倒计时器的万圣节网页,指定活动日期。这将有利于客户参与和传播意识。
  • 万圣节活动的目标客户应该是哪些人?派对策划者、家居装饰者、孩子、爱好玩乐的人、礼品爱好者、在线产品和服务用户等。
  • 人们在万圣节网站设计中常犯哪些错误?1. 可读性差
    2. 动画过多
    3. 设计不一致
    4. 缺乏明确的号召性用语
    5. 与品牌形象不一致
  • 最适合万圣节网页设计的 Google 字体是什么?1. 爬行者
    2. Jua
    3. 快乐房客
    4. 艾米莉丝糖果
    5. 神秘任务
    6. 金属梅尼亚。

最后回顾

万圣节是一个全球性的节日,有超过 35 个国家/地区庆祝,特别是在美国、加拿大和英国。就人口而言,数以千计的人们怀着极大的喜悦和热情庆祝这一天。




Spire.Pdf 无水印项目直接引用.zip

pire.Pdf 无水印项目直接引用,用户word、excel 转pdf发布。
资源简介/截图:

所属分类:开发技术 > C#
文件大小:4.89 MB
上传日期:2019-10-13 20:39
MD5:793618bbf0************b2207942dc



破解版 Spire.pdf 4.8 ,使用无限制、无水印.zip

破解版 Spire.pdf 4.8 ,使用无限制、无水印。spire.pdf4.8.8,下载引用即可使用; Spire.License.dll 和 Spire.Pdf.dll都要引用,附件有给pdf添加图片的C#源码例子,自已测试过。无水印,无使用限制。测试环境 , C# VS 2010 ,目标框架 .net Framework 4。
资源简介/截图:

所属分类:开发技术 > C#
文件大小:4.1 MB
上传日期:2019-10-13 20:44
MD5:688abdb689************e6944dd4cc



spire.pdf.dll和spire.license.dll.zip

2018年下载的,所以保证无水印。可以生成PDF文件,在PDF中添加固定内容,自动打印PDF等。
资源简介/截图:

所属分类:开发技术 > C#
文件大小:4.74 MB
上传日期:2019-10-13 20:42
MD5:c640dd3118************9a2d09fac4



(2018.11最新破解版)Aspose.Words 18.11破解版(无水印).7z

(2018.11最新破解版)Aspose.Words 18.11破解版(无水印),无水印无文件大小限制,警告:请勿用于商业用途,仅供学习研究,如有任何版权纠纷,本人概不负责!
资源简介/截图:

所属分类:开发技术 > C#
文件大小:3.55 MB
上传日期:2019-10-16 15:16
MD5:633b9f503b************f58dbd778a



ASP.NET Core 技术书籍 PDF.zip

ASP.NET Core 技术书籍 PDF,详细的介绍了Core 应用技术及领域,ASP.NET Core 开发工具操作及使用、ASP.NET Core 原理和组件介绍、ASP.NET Core MVC 框架学习。
资源简介/截图:

所属分类:开发技术 > C#
文件大小:57.34 MB
上传日期:2022-07-28 10:54
MD5:825b837219************b6649b330a



Programming_ASP.NET_Core.zip

c# 经典入门教程,绝版教程。快速入门,使用Microsoft令人兴奋的新ASP.NET Core技术进行实际软件开发的权威指南。与主要关注ASP.NET Core的跨平台功能或仅关注较早版本的功能的竞争书籍不同,Esposito为希望构建生产解决方案的每个开发人员提供了完整的学习途径。 Esposito的专家报道包括:应用所有关键的ASP.NET Core组件,包括用于HTML生成的MVC,.NET Core,EF Core,ASP.NET Identity,依赖项注入等。将ASP.NET Core与领先的客户端框架(包括Bootstrap)集成,用于实现业务逻辑和数据转换的ASP.NET Core代码,处理配置,路由,控制器,视图和常见任务(包括发布表单和呈现数据),执行补充任务:错误处理,日志记录,应用程序设计,身份验证,本地化等。
资源简介/截图:

所属分类:开发技术 > C#
文件大小:40.37 MB
上传日期:2020-03-17 11:25
MD5:8a491073be************41691f4b8e



Professional C# 7 and .NET Core 2.0.pdf.7z

Professional C# 7 and .NET Core 2.0,本书首先简要介绍了C# 7 和 .NET Core 2.0的最新特性,然后继续解释如何使用面向对象的范例来实现C# 7。您将学习使用实体框架与关系数据一起工作,并了解如何实际使用ASP.NET核心。本书将向您展示.NET Core如何允许跨平台应用程序的创建。
资源简介/截图:

所属分类:开发技术 > C#
文件大小:19.01 MB
上传日期:2020-05-01 14:22
MD5:448cd0428d************49c3e8cb8a



asp.net core 3.1 源码分析.rar

微软最新的Asp.net core 3.1源码分析和帮助文件,用这个配合阅读源码非常好,让你深入了解asp.net core最新版的全部内容。
资源简介/截图:

所属分类:开发技术 > C#
文件大小:30.63 MB
上传日期:2020-04-25 22:47
MD5:2db0f0df44************a52199d723



如何使用 Elementor 在 WordPress 上创建登录页面

在 WordPress 上创建自定义登录页面是提高用户体验的有效方法。虽然 WordPress 提供默认登录页面,但由于其普通的外观,它可能与您的网站品牌不一致。创建自定义登录页面将允许您向页面添加各种风格和样式。

Elementor 是一款出色的拖放页面构建器插件,您可以通过它在 WordPress 上创建自定义登录页面,就像乐趣一样。如果您已经熟悉 Elementor,那就太好了。如果您是该插件的新手,完全没有问题。

本文将详细介绍如何使用 Elementor 在 WordPress 上创建登录页面。在此之前,我们将简要讨论默认登录页面的局限性以及您为什么可以考虑创建自定义登录页面。让我们开始吧!

WordPress 中的自定义登录页面是什么?

自定义登录页面是一个独特且个性化的登录界面,它取代了 WordPress 提供的默认登录页面。它向尝试登录 WordPress 网站的用户展示更具视觉吸引力和品牌元素。现在,查看下图中的默认 WordPress 登录页面。

它通常包括一个默认表单,其中包含用户名和密码字段,以及标准的 WordPress 徽标。尽管该页面功能良好,但缺乏自定义选项。它可能与相应网站的整体设计和品牌不一致。

WordPress 默认登录页面

另一方面,自定义登录页面允许网站所有者升级其品牌形象和设计美学。它提供了定制各种元素(如颜色、字体、徽标、背景和图标)的灵活性,使界面更加独特。

此外,您还可以添加一些安全功能(例如验证码)来防止机器人用户登录。

为什么应该使用 Elementor 创建自定义登录页面?

选择 Elementor 的最大原因之一是其极高的设计灵活性,它允许您创建所需的任何页面。另外,它还有一个单独的登录小部件。拖放小部件后,将立即创建一个登录界面,其中包含必填字段,例如用户名和密码。

之后,您可以自定义字段、添加新元素、更改颜色以及升级必要的功能。以下列出了您可以在登录页面上使用 Elementor 执行的一些其他操作。

  • 个性化字段:用户名、电子邮件和密码,包括它们的标签
  • 自定义登录按钮,更改其文本、大小、样式和对齐方式
  • 指定用户登录后重定向的页面
  • 编辑忘记密码并记住我选项
  • 使页面完美响应所有设备
  • 将相关插件集成到页面中

如何使用 Elementor 在 WordPress 上创建登录页面

登录是 Elementor 插件的高级小部件。您必须在您的网站上安装该插件的高级版本及其免费版本。您可以从下面的链接获取插件。

安装并激活插件后,请跳至教程部分。

步骤01:使用 Elementor 打开登录页面

进入您的 WordPress 仪表板。导航到页面 > 添加新页面后创建一个新页面。我们创建了一个名为 Login 的页面。之后,按“使用 Elementor 编辑”按钮。这将打开 Elementor Canvas 上的页面。

使用 Elementor 打开登录页面

步骤02:在画布上定义您想要的结构

使用 Elementor 打开页面后,您会在页面上看到许多不必要的内容,包括页眉和页脚。要删除不必要的内容,请转到“设置”>“页面布局”>“Elementor 全宽”。这将删除页面上除页眉和页脚之外的所有内容。

以 Elementor 全宽打开画布

按页面上的加号 (+)图标。这将允许您为页面选择合适的列结构。您可以在下图中看到我们为该部分选择了单列结构(布局)。我们将在其上放置登录小部件

选择放置小部件的结构

步骤 03:使用 Flexbox 容器创建合适的布局

将Flexbox容器拖放到列上。Flexbox 容器是创建具有极高灵活性的所需布局的最简单方法之一。您甚至可以将 Flexbox 容器放置在 Flexbox 中,创建父子关系。

拖放 Flexbox 容器

当前的弹性盒将是我们的父容器。我们将在其中放置更多块以创建布局。在此之前,我们需要明确方向。展开容器部分。选择“方向”选项旁边的向右箭头

设置 Flexbox 方向

拖放容器小部件以在父容器中添加更多弹性框。我们添加了三个弹性框来创建三列布局。您可以手动调整它们的大小。没问题!

添加更多 Flexbox 容器与父容器

步骤 04:拖放登录小部件

在 Elementor 面板的搜索框中输入Login 。登录小部件出现在下方后,将其拖放到 Elementor 画布上的合适列中。

拖放登录小部件

如果您觉得登录表单距离页眉和页脚太近,不用担心。您可以使用Spacer小部件在它们之间创建空间。

将Spacer小部件拖放到父 Flexbox 中,但位于我们刚才添加的三个子列的上方。同样,将另一个 Spacer 小部件添加到子列的底部。空间将自动创建。

使用 Spacer 小部件在画布上的各部分之间创建空间

步骤 05:自定义登录表单并使其风格化

单击表单右上角的铅笔图标选择登录表单。这将启用Elementor 面板上的内容、样式高级选项卡。您可以使用这些选项卡自定义登录表单的各个元素和选项。

自定义登录小部件

# 探索内容选项卡

展开“内容”选项卡下的“表单字段”选项。您可以通过打开/关闭“标签选项来决定显示/隐藏表单的标签。

如果您想调整表单框的大小,请单击“输入大小”旁边的下拉图标。下拉列表包括选项 –特小、小、中、大特大

编辑表单字段

展开按钮选项。您将获得自定义文本、大小对齐方式的选项。“按钮尺寸”选项允许您在“特小”、“小”、“中”、“大”“特大”之间进行选择。

自定义表单上的登录按钮布局

展开高级选项选项卡。您会找到重定向页面的选项。将所需页面复制粘贴到“登录后重定向”“注销后重定向”框中。之后,您可以更改标签。

设置重定向登录和注销页面

# 探索样式选项卡

之后跳到“样式”选项卡。接下来,展开“表单”选项。您可以使用行间隙在登录表单上的按钮和框之间添加空间。

在表单框之间添加空间

展开标签选项。您可以自定义表单上标签之间的间距,包括标签文本颜色和版式。

自定义标签间距和版式

接下来,进入“字段”部分。您可以对占位符排版、边框颜色、边框宽度和边框半径进行样式化。根据需要定制它们。

自定义字段标签和框边框

展开按钮选项。您将获得对表单上的按钮进行样式化的所有选项。您可以更改其排版、背景颜色、悬停效果、边框半径和文本填充。

风格化按钮

同样,探索Elementor 面板上的“已登录消息”选项和“高级”选项卡。它不需要太多的劳动力和时间。

步骤 06:如有必要,添加额外内容和风格化

如果您对白色背景感到厌倦,您可以通过应用任何特定的颜色代码或任何图像来改变其颜色。看一下如何应用背景颜色。

单击顶部的六点图标选择整个父级弹性盒。转到“样式”选项卡并展开“背景”部分。要添加背景颜色,请使用下图中指出的“颜色”旁边的选项。

为登录表单添加背景颜色

图像选项中,您可以添加图像作为表单的背景。Elementor Pro 已经集成了AI 图像生成器。您也可以使用此选项根据提示创建图像,然后将其添加为背景。

在背景中使用图像

步骤 07:使登录页面具有响应能力

按Elementor 面板底部的响应模式选项。Elementor 画布上将出现一个顶栏,其中包含在不同屏幕尺寸(台式机、平板电脑手机)之间切换页面的选项。

检查您的页面是否在所有屏幕尺寸上都能正常运行。如果任何特定设备出现问题,请调整框和按钮的高度和宽度,包括排版。您应用于特定设备页面的自定义将为其保留。

使登录页面具有响应能力

步骤08:发布并预览页面

希望您的设计已准备好。点击Elementor 面板底部的发布/更新按钮。该设计将上线。

发布登录页面设计

# 预览登录页面

您可以看到我们的页面运行良好。尝试使用有效的用户名/电子邮件地址和密码登录您的网站。

预览登录页面

# 问题

但您可能会在此页面上遇到问题。如果您错误地输入了错误的密码,您将被带到默认的 WordPress 登录页面。系统会要求您在默认页面上输入您的电子邮件地址以进行密码恢复。你可能会对此感到厌恶。

不过,这个问题也有解决办法。无论您输入错误密码多少次,您都将停留在自定义页面上。您需要安装一个插件来解决该问题。

默认 WordPress 登录页面

加分点:如何修复 WordPress 上的自定义登录表单问题

转到 WordPress 仪表板。导航至插件 > 添加新插件。在搜索框中键入前端重置密码。安装激活插件。

安装并激活前端重置密码插件

转到页面 > 添加新的。创建一个新页面。我们已将密码重置设置为页面的名称。发布它。您不需要向页面添加任何内容。

创建一个新页面用于密码重置

现在,导航到“设置”>“前端重置密码” >“设置”。复制我们在图像上标记的短代码[re​​set_password] 。

之后,点击下图中指出的下拉列表,然后选择密码重置。在您不久前创建密码重置页面后,此选项已出现在列表中。

走到页面末尾并点击“保存更改”按钮。如果您错过保存更改,则更新的配置将不起作用。

配置前端密码设置

将短代码粘贴到密码重置页面并在最后更新。现在,再次进入登录页面,然后按忘记/丢失密码选项。希望该页面保持不变。

将短代码粘贴到密码重置页面上

有关如何使用 Elementor 在 WordPress 上创建登录页面的常见问题解答

尽管这是一篇很长的教程,但我们希望您不会感到无聊。事实上,用有限的文字很难涵盖全面的主题。但是,如果您还很陌生,这里有一个常见问题解答部分,回答了一些最常见的在线问题。

  • 是否可以在登录页面添加动画图像?是的,您可以使用默认的图像 小部件将图像添加到登录页面。另外,您可以使用Elementor 的ShortcodeLottie 小部件添加 Lottie 动画。以下是如何在 Elementor 中添加 Lottie 动画
  • 我可以在登录页面添加自定义消息或说明吗?是的,您可以使用文本小部件或启用工具提示功能将自定义消息或指令添加到登录页面。
  • 我可以使用 Elementor 创建联系表单吗?是的,Elementor 目前有一个表单小部件,您可以通过它在网站上创建不同类型的表单。以下介绍了如何将 Elementor Form 与 weMail 电子邮件营销解决方案集成

结论

创建安全且美观的登录页面对于维护在线完整性和可信度至关重要。如果您是一名专业开发人员并为客户开发网站,那么创建这样的自定义登录页面可以帮助您在他们心目中产生吸引力。




如何在 WordPress 中显示最近的帖子

每当访问者或用户登陆您的博客文章时,您必须尝试一切可能的方式来吸引他们并吸引用户访问其他相关且有价值的内容。在 WordPress 上显示最近的帖子是一个很好的方法。

这是允许您实现内部链接的最基本的东西之一。最近的帖子可以显示在您网站的许多部分。您可以将它们显示在侧边栏、博客文章的末尾或页脚小部件区域中。

今天,我们将向您展示几种在 WordPress 中显示最近帖子的最简单方法,并提供详细的分步指南。开始吧!

为什么要在 WordPress 中显示最近的帖子?

如何在 WordPress 中显示最近的帖子

在 WordPress 中显示最近的帖子可以带来许多好处,可以立即增强用户体验和网站性能。让我们快速浏览一下在网站上显示最近帖子的一些主要好处。

A。提高用户参与度

大量研究表明,超过 55% 的人不喜欢在网络帖子上停留超过 15 秒。通过展示最近的帖子,您可以让访问者快速访问新鲜内容,鼓励他们进一步探索。

b. 提升用户体验

访问者在登陆网站后通常会寻找有关所需主题的最新信息。显示最近的帖子可以让他们轻松找到最新的相关内容,从而改善用户体验。

C。搜索引擎优化的好处

正如已经说过的,显示最近的帖子是在不同帖子之间创建内部链接的有用方法。这有利于利用 SEO 优势。它还向 Google 发出信号,表明您正在积极管理您的内容。

d. 建立权威

WordPress 允许您根据标签和类别展示最近的帖子。当用户看到您就同一主题发布了大量帖子时,这向他们表明您在特定领域拥有权威。

如何在 WordPress 中显示最近的帖子:6 种简单方法

显示最近的帖子

根据您想要在何处显示最近的帖子,有多种方法可以在 WordPress 网站上显示最近的帖子。然而,今天我们将讨论在网站上显示最近帖子的六种最简单的方法。这些方法将帮助您在网站上的几乎所有地方显示最近的帖子。

  1. 使用古腾堡块显示最近的帖子
  2. 使用 WordPress 最近的帖子小部件
  3. 使用插件显示最近的帖子
  4. 使用简码显示最近的帖子
  5. 使用 Elementor 帖子轮播小部件显示最近的帖子
  6. 使用 Getwid 的自定义最近帖子块

现在,让我们从第一种在您的网站上显示最近帖子的方法开始。

方法01:使用古腾堡块显示最近的帖子

古腾堡有一个内置块,名为“最新帖子”块,用于显示您网站上的最新帖子。借助该块,您可以在任何页面或帖子中显示最近的帖子。

为此,只需单击加号 (+)按钮插入一个块,然后搜索“最新帖子”。

添加古腾堡块

添加块后,有很多设置可以对其进行自定义。以下是您可以执行的一些操作。

  • 您可以只显示标题或里面的部分内容(您甚至可以设置要显示的字数)。
  • 您还可以显示作者姓名和发布日期。
  • 您还可以显示帖子的特色图片。
  • 您只能显示选定类别的帖子。
  • 最后但并非最不重要的一点是,您可以准确设置要显示的帖子数量。

显然,古腾堡易于使用的块本身有足够多的选项来满足您在显示最近的帖子时的需求。

使用 WordPress 最近的帖子小部件

让我们讨论一下在您的网站上显示最近帖子的另一种默认方式。我们现在要讨论的方式可能是在 WordPress 网站上显示最近帖子的最轻松的方式。是的,我们正在谈论最近帖子的 WordPress 小部件。

它允许您在侧边栏、页脚或 WordPress 允许您添加小部件的任何位置添加最近的帖子。该过程很简单,就像添加任何其他小部件一样。

要使用 WordPress 最近的帖子小部件,请按照以下流程操作 –

第 1 步:登录 WordPress 管理仪表板并导航至“外观”>“小部件”。

第 2 步:现在将“最近的帖子”小部件拖放到您想要的任何位置。

添加最近的帖子小部件

第 3 步:单击最近帖子小部件后,您将能够添加小部件的名称以及要显示的帖子数量。

自定义最近的帖子小部件

这几乎就是您使用默认的最近帖子小部件所能做的全部事情。因此,如果默认方式对您来说功能不够,您还可以选择第三方插件来显示最近的帖子。以下是您可以如何做到这一点。

方法03:使用插件显示最近的帖子

如果您认为需要替代默认方式来显示最近的帖子, WordPress 存储库上有足够多的插件会让您感到困惑。

然而,在我们的教程中,我们选择使用最好的插件之一来显示最近的帖子。该插件由 Kybernetic Services 开发,名为“Recent Posts Widget with Thumbnails”。有趣的是,这个插件是建立在默认的最近帖子小部件之上的,并且只是向其中添加了功能。现在让我们继续学习教程。

第 1 步:首先,登录 WordPress 管理仪表板并导航至插件 > 添加新插件

第 2 步:现在使用术语“最近的帖子”进行搜索。找到所需的插件后,请安装并激活它。

使用缩略图安装最近的帖子

第 3 步:激活插件后,导航至“外观”>“小部件”。在这里,您现在会找到一个名为“带有缩略图的最近帖子”的选项。

第 4 步:将小部件拖动到侧边栏、页脚或任何您需要的位置。现在点击它,您会发现很多选项来自定义您最近的帖子的显示方式和外观。

使用缩略图小部件添加最近的帖子

第四步:调整完选项后,单击“保存”。

虽然这个插件提供了很多选项,但它实际上并不能让您将小部件添加到任何您想要的地方。您只能将小部件添加到小部件的默认位置集。因此,您必须依靠古腾堡块来在您想要的任何地方显示最近的帖子

但是如果您不使用古腾堡而是使用经典编辑器怎么办?

下载带有缩略图的最近帖子小部件

方法04:使用简码显示最近的帖子

如果您(i)仍然使用经典编辑器(ii)但仍然需要像古腾堡的最新帖子块这样的选项,那么此方法适合您。

为此,我们还需要一个插件。在我们的例子中,我们将使用由 Iulia Cazan 开发的名为Last Post Shortcode 的插件。该插件允许您在帖子或页面中添加短代码以显示最近的帖子。让我们看看它是如何工作的。

第 1 步:按照我们上面提到的步骤安装插件。

安装最新帖子简码

第 2 步:创建新帖子/页面或输入任何已存在的帖子/页面。现在将以下行短代码粘贴到经典编辑器中。

[latest-selected-content limit="4" type="post" display="title,content-small" chrlimit="50" image="full" elements="0" css="two-columns" taxonomy="category" term="samples" orderby="dateA"]

您可以根据需要编辑代码。例如更改内容限制字符限制(类似于您要显示的字符数)、图像大小类别排序等。

您可以随时随地使用短代码。它的工作方式几乎与古腾堡最新帖子相似,但缺少一些功能。

下载最新帖子简码

方法 05:使用 Elementor Post Carousel 小部件显示最近的帖子

Elementor是一种流行的拖放页面构建器插件。如果您已经使用 WordPress 至少几个月,您可能至少听说过一次 Elementor。同样,您的网站可能已经使用 Elementor 设计。

现在,我们将向您展示如何使用该插件在博客文章中展示最近的帖子。您需要安装HappyAddons LiteHappyAddons Pro插件。将它们放在您的网站上后,请按照以下步骤操作。

步骤01:选择显示最近帖子的区域。

选择显示最近帖子的区域

步骤02:找到Post Carousel小部件。将其拖放到所需区域。

拖放帖子轮播小部件

步骤03:展开查询部分。选择选项“订购依据”旁边的“日期”。这将根据日期显示您最近的帖子。

按日期排序帖子

步骤04:打开选项“日期”旁边的下拉列表。您将在列表中看到七个选项。通过选择列表上的时间范围,您可以定义要向网络访问者显示的最近帖子的时间。

定义日期范围

方法06:使用Getwid的自定义最近帖子块

Getwid是一个古腾堡块插件。它具有 40 多个用于古腾堡编辑器的自定义块,您可以通过它们在网站上制作和显示交互式内容。Getwid 有一个最近的帖子块。首先安装并激活插件。然后,按照下面说明的步骤进行操作。

步骤 01:找到“最近的帖子”块并将其添加到您想要的帖子/页面。这将自动在您的网络屏幕上显示最近的几篇帖子。

查找并添加最近帖子块

步骤02:进入右侧边栏的“设置”部分。您可以以网格或列表格式显示帖子。设置部分将为您提供许多其他选项,如列、标题、标签、图像大小、显示日期、类别等。

根据需要配置它们。因此,您可以按照相同的方式在其他博客文章甚至页面上展示最近的帖子。

配置最近帖子设置

总结

在这篇文章中,我们介绍了六种在 WordPress 网站上显示最新帖子的简单方法。其中一些需要插件的帮助,而另一些则不需要。选择您认为最适合您的一个,它肯定会帮助您的受众继续关注您的网站。