002. OceanWP – 万能WP主题安装和设置

OceanWP主题介绍

OceanWP主题是一个轻量化可高度定制的主题,同时也是免费的。和Elementor结合是wordpress快速建站的绝佳组合。

  • 轻量化:即它的主题代码非常少,加载速度非常快,具有很好的用户体验
  • 高度定制化:即该主题可以对网页页面进行几乎任意需要的设置。

从wordpress主题市场popular流行度可以看到,这个主题仅次于wordpress程序自带的主题。可以说他是第三方主题中安装量最大的主题了。wordpress自带的主题实在不敢恭维。

一、OceanWP安装

和所有其他主题安装一样,点击theme – Add new – 直接查看popular排名即可看到该主题(排名可能会有变化),或者搜索OceanWP找到它,点击install安装,完成后Active激活。

安装完OceanWP主题后,建议删除其他主题,加快网站加载速度,减少安全漏洞。

安装完成后,访问网站前台,如果你感觉和自带的theme主题一样丑陋,正常反应,整个网站的美观度设计我们交给专业的elementor去做,theme主题只用于控制页面中最基础的部分,如页头和页脚,字体,颜色等。

二、Theme主题的作用区域

在进行主题的设置之前,我们有必要搞清楚主题可以控制的区域范围: 网页页面中共性的部分。如页面的logo,导航,侧边栏,页脚,字体,颜色等,即一个网站中每一个页面都共有的部分。

以dell英文官网为例,除body主体部分外,header和footer部位,不管跳转到哪个页面,都是不变的。这一部分就是需要由主题控制的部分。

三、OceanWP主题基础设置

点击菜单栏中的Customize定制,即可对主题进行快速设置。

Theme主题基础设置,主要有以下2个个方面:

    1. 网站默认Font字体
    2. 配色Color设置
A、默认字体设置

Typography字体,进入字体设置菜单,大部分网站设置以下4种即够用。

General通用 – 设置网站默认字体
Body正文 — 网站正文内容字体格式
Heading 1 — H1标签字体
Heading 2— H2标签字体

General通用设置,如果在网站在国内的服务器或者需要在国内访问,可以勾选 Disable google fonts, 禁用google字体,否则会导致网站打开很慢,原因是因为大部分字体都需要连接google的服务器,国内访问不了Google。

https://fonts.google.com/ 可以找到上千种字体,目前对中文字体的支持有限,但不影响显示。

如看到好的网站字体,可以用WhatFont插件查看网站对应的字符集和字体大小等设置,以Apple.com苹果官网为例,WhatFont可以快速查看苹果官网采用的是什么字体和weight等参数。如果对字符集设计没有感觉,直接拿来用即可。

在设计之前,可以先用elementor拖拽几个文本框进入网页内容中,分别设置为H1, H2, body,这样就可以实时看到字体设计的显示效果。

整个网站请尽量使用不超过2种字符集,大部分时候应该只采用一种字符集。

Tips技巧提示:正文不要用全黑,不要用全黑,不要用全黑。

B、颜色设置

配色是一门专业的学问,没有一定的时间积累和审美,普通人很难驾驭颜色的搭配。但开始颜色设置之前,我们必须有个最基本的颜色使用法则:一个网站不超过3种颜色(黑白灰不算)

这里提供两种方法给到大家:

  1.  “偷”。颜色是没有专利这一说法的,我们完全可以借鉴知名大品牌的网站颜色搭配,如apple,LV,gucci等大品牌官网的配色直接拿来用就可以了。Chrome中有个Colorzilla插件,可以快速获取颜色的值。
  2.  用专业的配色工具,如 colors.co 这样的网站将固定的颜色搭配组合显示出来了,直接拿来用即可。

Primary Color:主颜色
Hover color: 鼠标移动到该区域后的颜色
Background:背景颜色,默认白色

以上三个值影响的区域范围,大部分的颜色控制区域我们交给elementor。

发表评论

关闭菜单