Elementor——WordPress页面构建插件

转载自:https://themeforwp.net/archives/elementor/

Elementor是一款非常现代的页面编辑器,作为最流行的免费页面编辑插件,它改变了WordPress建站的方式,让我们可以无需代码便能自己构建网页

在本文中,我们将详细介绍Elementor及其使用方法,以帮助大家决定是否应该使用Elementor作为默认的WordPress页面构建工具

Elementor免费下载

为什么推荐使用Elementor

我曾经使用过很多款可视化的编辑器,比如WPBakeryVisual Composer等,其中,Elementor在很多方面都是更加优秀的一款

  • 现代、简洁的编辑方式
  • 免费版已经很好用
  • Elementor支持中文,支持任何WordPress主题
  • 轻量,即使Elementor Pro版本,安装包总大小仅3MB
  • 用户数量非常多,仅WordPress插件中心就有100万以上的活跃安装
  • 超过90%的五星好评
  • 专业的开发和售后团队

以上这些特点,已经足够说服我们使用Elementor,并且它还在不断的改进和增强,在WordPress中越来越流行

当然我们不能只根据这些外部因素判断,真正实用的功能才是最重要的,接下来让我们看一下Elementor有哪些特性和值得关注的地方

Elementor安装

Elementor是免费使用的,我们可以随时体验,不管是免费版还是Pro版本,都需要先安装Elementor,可直接在官网下载,Elementor免费下载,免费版本直接安装即可;如果你购买了Pro版本,需要先安装Elementor插件,然后再安装Elementor Pro插件,即使之前已有免费版也可以无缝切换到Pro版本

注意:安装Elementor的话一定要确保符合它的环境要求,否则可能会出现意外的错误

安装好之后我们就会在文章或者页面看到一个 “使用 Elementor 编辑” 的按钮,点击它就会进入到Elementor可视化编辑器

开启Elementor编辑器
elementor选择页面的模版

Elementor会为你准备2款模版,这里面有三种选择:

  • 默认模版:主题自带的模版,一般会带有主题的元素,常用在文章
  • Elementor全宽:将内容部分设置为100%宽度,保留原主题头部和底部
  • Elementor画布:纯Elementor的模版,不包含任何其他元素,适合做专题页面

注意布局要保存之后再开启Elementor才会生效

Elementor用户界面

Elementor用户界面

和大多数的可视化页面编辑器一样,Elementor同样采用了左侧编辑栏,右侧显示网页的布局,目前来说这种布局是最好的,容易编辑,也符合大多数用户的使用习惯

使用Elementor编辑器,无需准备空白的模版,Elementor已经为你准备好了,在页面布局中选择画布即可获得全新的页面,而且没有那么多主题或者插件的要求,你可以在任何类型的WordPress主题中使用Elementor

elementor空白模版

用Elementor制作页面时,你可以直接从头开始编辑,自己设置每个元素样式;或者调用模版,在模版基础上进行修改替换,这样完成页面也是一种非常高效的方式,Elementor提供了各种模块和100+的模版,不管是免费版还是Pro版本都可以调用演示,只不过Pro版本中可用模版更多

elementor列设置

多样化的列布局,你可以根据自己的需要选择列的数量和样式,然后拖拽元素填充到合适的位置,组成网站的页面设计。

你可以将任何Elementor中包含的元素拖动到列中,比如图片、文字段落、标题、列表、文章、按钮、客户评价、CTA、价格表等,每当你选择不同的元素,左侧都会自动切换成对应的选项,相比其他编辑器,Elementor元素的样式和选项都是非常不错的,不需要过多的设置便能设计出漂亮的页面

Elementor元素设置

Elementor编辑器功能以及体验

判断一个页面编辑器是否好用,选项和功能是最关键的地方,下面我么看一下Elementor的编辑选项

Elementor实时编辑

Elementor文字实时编辑

首先最重要的一点,就是文字实时编辑,这个特征可以用来判断一款页面编辑器是否现代,以及有效率。Elementor是支持行内实时编辑的,而且它为我们准备了WordPress经典编辑器,你可以通过把编辑栏拉宽获得更好的写作体验,就像在后台编辑一样,唯一让人有点不适应的就是如果你想在网页中实时编辑,需要点击2次才能把光标固定到聚焦在想要的位置

Elementor样式设置

Elementor样式设置

除了针对每个元素的关键选项外,Elementor还提供了高级样式设置,你可以设置元素的背景、边框、内外边距、响应式、自定义CSS等,当然,根据每个元素的特点会有不同的选项

Elementor在工具的分布上,采用了Tab和Toggle结合的形式,即使有再多的选项也能轻松容纳,这里的布局Elementor做的非常好,将有限的空间利用了起来,不像有些编辑器,体验非常差,以前用过一款 CornerStone,编辑器非常拥挤,经常找不到自己想要使用的元素

方便的右键菜单

Elementor右键菜单

和其他页面编辑器不同,Elementor独有的支持了右键菜单,这是我非常喜欢的特性,用来选中什么多西非常方便

  • 删除元素更省事了,在没有右键功能前,需要手动到最右边找到小小的叉号,很费劲
  • 选择元素更方便了,当你点击右键时,在右键菜单中会显示当前选中的元素是Widget、列还是行,这样在进行编辑操作时就很难出错了
  • 样式拷贝,做类似设计时很有用

右键菜单真的是一个非常好的特性,如果说是什么让我选择Elementor,那右键菜单一定是非常重要的一项

Elementor快捷键

Elementor编辑器提供了非常多的快捷键,比如常用的复制、粘贴、历史记录,这些都可以在Elementor中快速使用,Elementor快捷键整理

响应式编辑

Elementor响应式编辑

在制作复杂页面时,可以使用Elementor的响应式编辑进行调整,包括PC、平板和手机端,三种设备的样式不会互相影响,可以针对每种设备进行单独优化

Elementor模版

为了让我们能够快速构建网页,Elementor提供了模版功能,可以进行各种调用

自带模块

elementor自带模块

模块模版,通常是一部分特定功能的部分,比如头部、底部、倒计时、联系表单、文章列表等,这些模块大部分都为黑白样式,容易搭配和修改,在主题编辑中很有用

页面模版

elementor页面模版

页面模版,整页的模版,大部分都是不同风格,各行各业的网页,可以直接修改,在Elementor中非常好的一点就是你可以同时加载多个页面,这些页面模版不会覆盖之前的内容,这样就可以通过删减的方法将多个页面的元素组合在一起

查看所有Elementor页面模版

自定义模版

elementor自定义模版

当我们自己制作了一些比较好的模版后,可以将其保存为自定义模版,当需要用到类似的模块时,可以直接调用,而且自定义模版支持导入和导出,分享起来很方便。另外,你还可以通过第三方获取Elementor模版,比如从Envato Elements的获取模版

全局元素

elementor全局元素

Elementor很智能,如果你想保存一个元素,比如按钮、文字,他会自动保存为全局元素

什么是Elementor全局元素呢? 它可以在所有的页面中使用,而且同一个元素的样式都是相同的,并且默认情况下全局元素会被锁定编辑,但是如果修改的话,所有的元素都会跟随变化

对于需要较多自定义页面的网站,全局元素在统一风格和一些重要数据的展示上非常有用

Elementor主题编辑(Theme Builder)

Elementor主题编辑

Elementor 2.0 新推出的主题编辑功能,让其不再仅仅是一款页面编辑器,而成为了主题构建器,使用Elementor你可以把主题完全更改,使用主题编辑功能,你会发现所有的操作都变得简单了。你可以轻松地修改网站的头部和底部、文章页面、分类页面、归档页面等,然后将这些修改应用到某些页面,甚至整个站点,无需任何代码知识,具体的设置方法可以查看 Elementor Theme Builder教程

其他特性

Elementor除了基本的页面编辑器功能外,还有很多非常有特色的功能

导航栏

Elementor导航栏

Elementor新加入的一个特性,这个导航最大的作用就是你可以在上边改变段的位置,避免了使用鼠标在页面上长距离滚动拖动

幻灯片

elementor幻灯片效果

Elementor Pro中提供了幻灯片工具,只需要简单设置便能开始使用,如果你不需要比较炫酷的效果的话,Slider RevolutionLayerSlider之类的插件基本可以卸载了

侧边栏小工具

Elementor内置了一个侧边栏调用小工具,你可以用它来制作自己的侧边栏小工具,Elementor制作侧边栏小工具教程

维护模式

设计好的维护模式模版

Elementor不仅可以一键开启维护模式,而且你可以使用Elementor定制自己的专属维护页面,Elementor开启维护模式教程

Elementor Pro

可能对于一般的页面设计需求,免费版本的Elementor功能已经完全足够了,那么我们有没有必要升级高级版本呢,我们看一下Elementor Pro主要增加了哪些功能

  • Pro模版,Elementor中很多内置模版需要Pro
  • 更多的可用元素,不得不说Pro模版中有许多实用的功能,比如 文章列表、portfolio列表、幻灯片、联系表单、客户评价、CTA等
  • 自定义CSS
  • 全局元素
  • 动态字段
  • WooCommerce定制
  • Elementor Theme Builder,让你能够制作主题模版

如果你需要上面列出的功能,那么我建议你购买Elementor Pro版本,使用起来非常方便,总体来说,提升还是非常大的,尤其是它的主题编辑功能,非常的强大,使用起来更简单

Elementor Pro价格

  • 单个站点授权,49美元
  • 3个站点授权,99美元
  • 1000站点授权,199美元

所有的套餐都包含一年的更新和支持,Elementor Pro续费的话有25%的折扣,当然也可以选择取消续费,插件还可以继续使用,只是没有更新和支持

和其他的页面编辑器相比,Elementor的使用范围更广,更加通用,不管你是普通的WordPress用户,还是做商业性质的网站,都可以在Elementor中找到自己需要的功能,而且使用起来也灵活,可以快速构建,也可以针对一个模块进行各种高级的设置以及自定义样式

无论是免费版本还是Pro版本,Elementor都是非常强大的编辑器,它最大的作用是改变了WordPress的编辑习惯,有着多样的设置和人性化的编辑体验,不再需要专业和枯燥的代码来修改页面

转载自:https://themeforwp.net/archives/elementor/

wordpress——自动添加文章目录

经常在网上看到一些博客带有目录,将一篇文章分成几个主要的部分,顶部有整篇文章的目录,点击便会跳转到对应的区域,给人的体验感觉非常好,能帮助搜索到网页的人快速找到自己想要的答案。今天给大家介绍的就是这款目录自动生成插件TOC (Table of Contents Plus)

目录自动生成插件TOC

安装好之后便启用了,但是默认情况下只有页面起作用,文章是没有开启的

后台选择设置 – TOC – 自动插入把 Post勾选,这样就会在文章中插入目录

目录自动生成插件TOC 开启文章自动生成目录

可以看到我这里没有添加任何列表,只是用标题将文章分成了几段,注意要多设置几个标签,因为上边设置了有4个以上标题才会显示目录

TOC 设置标题

TOC 自动根据标题生成了目录,而且不同的H标签会分出层次,点击目录便会跳转到对应的标题区域

TOC 目录效果

一下就跳转到了标题那儿,确实是一下,因为确实太生硬了,没有任何的动画效果,我们继续设置,刚刚的设置下方有一个开启平滑滚动效果,将这个勾选,然后再刷新你就会发现平滑移动到目的区域了

TOC 开启平滑滚动

对了,还可以更换颜色,如果觉得灰色不好看,可以用调色板随意选择

TOC 更换样式

如果有吸顶效果的侧边栏,还可以将这个目录放到侧边栏,这样查找更方便

TOC 添加侧边栏目录

TOC 是一款非常好用的免费插件,自动生成目录对于懒人来说简直友好,我们都可以轻松的创建体验好的网站

转载自:https://www.anspoon.com/wordpress-plugin-recommended-directory-generated-toc-2093.html

wordpress建站——已登录的用户查看文章内容的实现方法。

转载原文:https://zhan.leiue.com/members-only-shortcodes.html

网站的注册用户是最有价值的访问者,这些人都是忠实的访客,我们应该奖励他们。其中一个奖励的措施,就是给注册用户分享最新的优质内容。也就是说,可以在某些文章中隐藏部分优质的内容,要求访问登录后才可以查看,这也是鼓励用户注册网站的方法之一。下面就来说说如何实现这个功能。

我们都知道,WordPress 有一个很棒的功能——简码(shortcode),我们可以利用简码来实现。关于简码,不熟悉的朋友可以先阅读。

下面就是我们的代码示例,你可以添加到一个插件中,或者添加到主题的 functions.php中


1
2
3
4
5
6
7
8
//WordPress 只允许已登录的用户查看文章内容
add_shortcode( 'members_only', 'members_only_shortcode' );
function members_only_shortcode( $atts, $content = null ){
    if ( is_user_logged_in() && !empty( $content ) && !is_feed() ){
        return $content;
    }
    return '<blockquote><p>温馨提示:本处有隐藏内容! <a href="'.wp_login_url( get_permalink() ).'">登录</a> 后即可查看!</p></blockquote>';//此处根据需要修改
}

在上面的代码中,我们注册了一个简码 【members_only】 ,在简码的函数中,我们使用了 is_user_logged_in() 函数来判断当前访问者是否登录,同时使用 !empty( $content ) 确保内容不为空,使用 !is_feed() 排除在RSS订阅中输出。

这样一来,我们可以在文章中使用简码添加内容:


1
2
3
[members_only]
这里的内容只为已登录的用户显示
[/members_only]

如果当前访问者没有登录,就显示“温馨提示:本处有隐藏内容!登录后即可查看!”,反之,则显示添加的内容“这里的内容只为已登录的用户显示”。

需要注意的是,你必须确保上面的函数代码不要被删除,否则所有简码包含的内容都会直接显示出来哦!

效果如下:

温馨提示:本处有隐藏内容! 登录 后即可查看!

WordPress建站(一)购买阿里云服务器并注册域名

1.1购买阿里云服务器

我们搭建网站首先要购买服务器。没有服务器是搭建不了网站的。

所以,首先我们要购买服务器。如何购买到便宜实惠的服务器呢?在阿里云购买学生机: 传送门

(注:学生机优惠为12~24岁才可享受)

具体购买过程和方法就不多说了。相信大家都很清楚。

在这里我买的是云服务器ECS

1核2G 1M带宽 40G云盘够用了。

地区和可用区随便选。选到支持学生机的地区和可用区即可。

1.2购买域名

首先,域名注册:域名注册流程

选好自己喜欢的域名,然后按照域名注册流程中的视频教程来购买域名。

1.3 网站备案

国内的网站需要进行网站备案。不备案的话,够买的域名将无法正常使用备案流程:首次备案

(注:备案前域名要实名认证)

以上就是今天的全部内容,文章还在持续更新,请继续关注。