WordPress之家 WordPress建站一站式服务平台

    WordPress排名第一的可视化页面编辑插件:Elementor

    2020年5月28日 by:

    45ce825e83f7818d0793

    Elementor是一款免费的wordpress可视化页面编辑器,只需要简单安装插件就可以使用它来可视化的编辑wordpress文章或者页面,而且现在已经支持中文,使用起来非常简单。

    elementor编辑器官网

    首先我们需要安装Elementor插件,直接在官网下载即可,Elementor免费下载,安装好之后我们就会在文章或者页面看到一个 “使用 Elementor 编辑” 的按钮,点击它就会进入到Elementor可视化编辑器。

    35007cdc8f901e2c4d6b-1

     

    但是默认情况下会沿用主题的布局,如果你想要定制的话,一般会使用Elementor的布局。

    0d4ea506c7496acc863c-1

     

    你可以在文章的右侧页面属性中设置,这里面有三种选择:

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

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

     

    Elementor界面元素

    在Elementor编辑器中,默认情况下在左侧是各种元素和设置项,有标题、图片、文字块、进度条、图文列表之类的元素,这些都是网页设计中常见的组件,我们将用这些元素拼成最终的网站页面。

    5fe33e98b82ee5fe381d-1

     

    右侧是网站的实际效果,基本上和真实的网页相差不大,每当添加或者改变一个元素,都是实时的展现,你可以通过最下方的按钮创建行和列,这里确定了你的网站页面结构。

    05f034d0b69d6f13174b-1

     

    把元素拖到右侧的列中,就可以详细的编辑元素了,不同的元素会有不同的选项,比如你添加了一个相册,那么对应的选项就是图片挑选、大小设置、灯箱效果等设置。

    85d19b679a20d21169b4-1

     

    但是选中一个文字或者标题,左侧则展现文字编辑框、链接、字体等设置。

    61093444ef0952590b90

     

    Elementor实用工具

    段和栏

    7

     

    段和栏就是网页的框架,如果你之前使用过Visual Composer的话,就会发现这就是原来的行和列,列包含在行中,所以在Elementor中,你只需要记住栏包含在段中就可以了,你可以用鼠标拖动改变它们的位置,通过不同的组合配置自己的网页。

    在栏和段中也有具体的编辑设置,用来设置边距等明显的位置,非常方便。

     

    Elementor右键菜单

    8

     

    和其他编辑器不同,Elementor将复制和删除2个重要的功能集成到了右键菜单中,这样极大的精简了工具条,避免了误操作,如果说是什么让我选择Elementor,那一定是右键菜单。

     

    Elementor实时编辑

    细心的朋友可能会发现,在Elementor中是可以实时编辑文字的,也就是你可以在右侧的预览界面直接修改文字,这样非常方便,极大的提高了页面构建的效率。

    a4ff3c10a531796abae3539daf0424ce

     

    不过有一点需要改进的就是点击文本元素之后,光标会默认显示在最后,需要点击2次才能到达想要修改的地方,当然了在左侧修改也是可以的。

     

     

    Elementor元素样式

    除了基本的设置外,还有很多其他的设置,比如样式,如果你选择的元素是图片,那么你可以通过样式面板调整图片的大小、透明、动画,而选择文字元素则有一些文字颜色、字体等选项,但是各种元素的高级选项里面都差不多的,主要是边距、背景、边框,这些个性化的设置让网页更加多样。

    10

     

     

    Elementor页面设置

    在Elementor的底部,是页面的全局设置,在这里你可以设置页面的样式,比如设置Fullwidth或者设置Elementor Canvas,那么整个网页都会使用Elementor编辑。

    然后第二个是响应式设计,你可以随时查看各个类型屏幕下网页的样式是否美观,第三个是历史记录,Elementor支持回退,避免了错误。

    11

     

    Elementor导入模板

    还有要说的一点就是导入模板功能,点击Add Template即可,能在原有的基础上继续添加,而且之前的不会被覆盖,当然他也支持自己保存,在工具条上有一个保存按钮,可以直接保存。

    12

     

    13

     

    总体来说,免费的软件能做出这样已经非常不错,Elementor给人的感觉是非常的轻量易用,压缩包下载下来只有不到2M的大小,而且制作页面的时候非常的快速,如果你的网站文章经常需要排版或者添加一些简单的元素的话,那么就尝试一下Elementor吧!

    WordPress完美响应式轻量级主题:GeneratePress

    marketer

    所有WordPress网站都离不开主题,除了默认主题外,我们还可以选择第三方主题来满足不同类型网站的需求。GeneratePress主题正是我们今天要推荐的一款功能强大的主题。

    marketer

    GeneratePress 是一个轻量级的 WordPress 主题,专注于速度和可用性。性能对我们很重要,这就是为什么新安装的 GeneratePress 会为您的页面大小增加不到15kb(gzipped)的原因。我们充分利用了新的块编辑器(Gutenberg),它可以让您更好地控制创建内容。如果您使用页面构建器,GeneratePress 是适合您的主题。它与所有主要页面构建器完全兼容,包括 Beaver Builder 和 Elementor。由于我们强调 WordPress 编码标准,我们可以完全兼容所有编码良好的插件,包括WooCommerce。 GeneratePress 完全响应式,使用有效的 HTML/CSS,并由我们惊人的用户社区翻译成超过 25 种语言。

    GeneratePress主题

    从事多年设计工作的我,在初次接触GeneratePress时,就惊叹它的代码简洁、规范,而且功能齐全。目前该主题已有20万+的安装量,并得到了近乎完美的5星好评。

    arctic article charge dev imprint seller spacious split

     

    https://generatepress.com/

    StrapPress

    9c498f9b04a245c5a0a4

    bootstrap wordpress framework 8

    starter主题已经集成在了所有的bootstrap 3 shortcodes中。其中还包含一些模板以及11种不同颜色的主题。

    http://bragthemes.com/theme/strappress-responsive-bootstrap-wordpress-theme/?affiliates=68

    Alienship

    e463b94e620b5536fefc

    bootstrap wordpress framework 7

    Alienship可能对一些人来说有些陌生,但它是bootstrap wordpress开发的试金石。其最新版本已经使用了bootstrap 3,所以这个框架是非常时髦。想了解其功能列表的话点击上面的链接阅读更多内容。

    Features

    Bootstart

    d7613539b363a0674956

    bootstrap wordpress framework 6

    Bootstart是一个Gabfire开发的框架,其目的是为其特性主题的发布提供支持。这就是bootstrap wordpress框架的强大的地方。它有许多迎合刚需的模板和shortcodes,能够很大地提高你的开发效率。

    Bootstrap 3 WordPress主题框架

    f8c9f2b9e52d40c14a9e

    bootstrap wordpress framework 5

    一个很好的wordpress模板,只需要上传到你的wordpress主题文件夹你就可以开始自定制啦。所有Shortcodes和模板设计已经包含在框架中,定制变得更简单了。

    Skematik

    8aed7929d6a0a4bc94bf

    bootstrap wordpress framework 4

    Skematik是一个强大的WP主题,它是一个名符其实的bootstrap wordpress框架,正如在它的关于部分中所陈述的:“Skematik是为开发者而生的”。Skematik是被开发用来扩展框架本身已经集成的许多bootstrap Shortcodes。唯一的缺点是它不免费,这也是为什么现在没给出它链接的原因。

    Roots

    e3854616cd583cbf57f6

    bootstrap wordpress framework 3

    Roots最吸引人的地方是它清理了很多wordpress相关的东西,这样你可以花更多的时间来写代码而不是处理WordPress的设置。这个bootstrap的WordPress框架基于HTML5 boilerplate,且包括bootstrap。当然你也可以移除bootstrap用其他CSS框架代替。

    WP-Bootstrap

    93b53a7016f197ce1968

    bootstrap wordpress framework 2-1

    WP-bootstrap是一个在Bootstrap 2基础上建立的免费WordPress主题。目前已经有基于它的像页面模板以及Shortcodes、主页走马等很酷的东西。值得下载试一下。

    BoilerStrap

    38236af613a41be56b80

    bootstrap wordpress framework 1

    Boilerstrap是一个WordPress的twenty twelve模板,其中已经包括了Boostrap。这减少了将bootstrap引入到WordPress的时间。唯一的缺点是其默认的CSS是twenty twelve的。所以,如果你想使用像twenty thirteen子主题等UI设计的话,你可能需要做一些额外工作。

    Scroll Up