粉丝3839获赞1.9万
我们设置好 airline motor 之后,我们还需要设置网站的一些样式,比如说字体啊,颜色啊,背景啊, logo 呀之类的一些信息。那这节课我们就来讲如何设置网站的全局颜色和全局字体。我们在 page 这个 项目中选择任何一个配置,点击 edit with elementor, 然后在选择这些元素。这个栏目中最左上角有个三条杠,我们点击进入,然后再点击 set settings 这个栏目,每个栏目我们都会去讲到。我们先来讲这个 design system, 也就是设计系统,设计系统下面它有 global colors 和 global function, 也就是 是全局颜色和全局字体,我们可以去修改全局颜色和全局字体来修改整个网站的。呃颜色和字体,我们先来看 global colors, 这里有个向导,我们点击看一下,他这里显示了我们目前正在使用的颜色和字体。 我们可以看到这里有四个系统自带的一个颜色,还有我自己添加了一个红色,当然我们需要添加其他颜色。我们可以点击 add colors, 在这里添加, 然后再保存, 如果你不想要的话,当然你可以删除掉,就是我们可以去增加我们想要的一些颜色, 然后我们这些颜色如何去使用呢?我们返回这个 page。 呃,我们再点击 editive with elemental。 为什么我重新打开一个页面呢?因为我们在这个 set setting 下,它是不能去编辑这些这些内容的。如果要编辑的话,我需要退出,比如说我退出点击保存, 你看退出之后才能去设置。然后如果我我要设置那个颜色,我又需要从这里进来 说一遍,麻烦说我重新打开个页面,我可以对这里进行编辑。好,我们来来看,这里是一个标题,我们如何去改变它的颜色呢?我们可以看到这里是 content, 然后这里有个 style, 这里有个 advanced, 我们我们点击这个 style, 在 style 这里它有个 text color, 也就是文字的颜色。我们点击这个小地球,然后去更改它的颜色,我们可以看到这里有一二三四五个颜色,这五个颜色就对应了我们这里设置的一二三四五五个 global colors。 我们来选择这个紫色,然后点击下预览, 你看这个标题就变成了紫色了。 如果我们在这个 set setting 这里更改这个 global colors, 比如说我们把这个紫色换成红色,点击保存, 我们再来刷新这个页面,你看他就变成红色了。也就是说我们可以 去更改 global colors 里面的颜色,然后任何使用的这个 global colors 里面颜色的它也会随着它而改变。 如果你不知道如何去选择自己网站的颜色,我推荐你去看看我网站上的一篇文章, 你可以在网站的搜索栏点搜索颜色,然后找到这篇文章。这篇文章不是我写的啊,它的英文版的原版来自于 element 的博客。 你可以了解到色彩的一些知识,比如说色轮呀,颜色关系呀,还有色纹呀,色彩系统呀, 还有色调和阴影啊。然后我再推荐你两个颜色的工具,一个是色轮,色轮的话,你可以看到这个口画就是 canva 的网址。 另外一个工具是调色板, 我们可以点击这里生成颜色。当你看到自己喜欢的颜色的时候,你可以把这个小锁点击一下,然后你再点击生成有小锁,这个颜色他就不会变了。 你有喜欢的颜色之后,你再点击这个锁, 我们再来看全局字体,我们返回 set setting, 点击返回保存,然后点击 global funds, 这个 global fonts 和 global colors, 它其实是一样的道理,我们可以去设置这个字体,点击这个小笔, 然后我们可以去选择 fami family, 就是字体的样式,它有很多谷歌字体啊,然后它可以选择它的大小,选择它的重量等等, 他有四个默认的在这里,然后我们可以添加我们想要的其他的字体, 然后用法跟颜色是一模一样的。那字体的话,我也有一篇文章,也是 elemental 上面的一篇博客,你可以在我的网站上通过搜索字体找到这篇文章。 嗯, 然后这里的话,我推荐你一个工具,就是放置点 google, 其实我们刚刚 在这个 sat city 里面选择的字体,其实很多都是谷歌字体, 可以看到这里有个 system, 就是我们常规的字体,然后还有一个 google, 这股骨以下的都是骨骼字体非常非常多,但是我们这里看不看不出它的一些样式,虽然说 他也有能看到样式,但是不算蛮明显。我们可以去五哥的网站上去看,放肆点咕咕点 com, 当然你需要去魔法上网才能去进入这个网页啊,我们可以通过, 这是趋势,我们可以看到这个字体还不错啊。 robert 耶,返回, 然后这个 open sense 还可以啊,这个 mount syrup, 这个也还行,这个 later 也行,然后看最流行的, 嗯, robert 挺流行的, open sens 也挺流行的,看到喜欢的你可以记下名字,然后回到这里去选择 字体。建议一个网站不要错过三种,我们还可以通过另外一个网站 font joy 点 com, 我们去来组合我们想要的字体,我们点击这个 generate, 它可以生成一些字体组合, 这边这个标题它是左边这个字体,然后它这个负标题它是这个 字体,然后这个文本是这个字体啊,如果不是你想要的话,你可以点击 generat 去不停点击 generat 去生成新的一些组合, 他这里也有锁,这个锁的话就是如果你觉得这个标题字体不错,你可以点击这个锁,对吧?然后再点击生成,然后这个标题他就不动了,跟我们刚刚使用的这个调色板是一个道理啊。 然后我们不停的去生成一些字体的组合,找到了之后我们把名字记下来,然后在这里去设置啊。
你有没有想过,为什么色彩和色彩搭配在网站设计中如此重要?今天我们将介绍如何修改 word plus 中的字体颜色,让我们的网站也能成为一件易触品。 这里不止聊科技,更能探索新天地。大家好,欢迎来到潮趣科技一本。在上个教程替换完背景图后,可以发现文字和背景图颜色不搭,所以我们现在来更改文字的颜色。 我们先点击一下要更改颜色的文字,然后继续点击这里的样式选项卡进入,这时我们就可以在这里更改文本颜色。我们要做的是选择合适的颜色,这个方法适用于 word price 的任何文本。 我们选中副标题,进入样式选项卡,在这里更改文本颜色。这时候我们的字就看起来更清晰了。我们也可以对按钮采用相同的方法。我们同样点击一下按钮,然后还是转到样式选项卡下面。这里的背景类型我们选择克拉斯,然后在颜色这栏里我们来更改按钮颜色。 如果我们想更改按钮内部的文本颜色,只需点击上面的文本颜色,然后我们继续选择并更改颜色。我们还可以更改按钮边缘的圆度, 这就是更改按钮边缘的圆角半径。所以如果我们现在输入一个数值进去,这时候按钮边缘就会变得圆滑。我们还可以更改按钮悬停时的颜色。当我们的鼠标悬停在按钮上时,他就会自动改变颜色,以便访客知道这就是一个按钮。所以我们点击这里的哈喽。对于背景,我们同样选择克拉斯。对于悬停时的按钮颜色, 我们可以让他的颜色稍微有点变化,我们选择一个不一样的颜色,我们就可以看到按钮的细微变化。以上就是今天更改字体颜色的教程,如果你还有任何问题,我将非常乐意为你解答。感谢您的观看,我们下期再见。
哈喽,今天是第四期,这次我们要做的呢是产品页面,不过在开始之前呢,我们要去一下联系方式,因为在上一个视频呢,我是忘记放那个歌单了, 我们进到里面的里面去在这里找风。首先这个我们下载的这个表单插件,它是自带这个小工具的,我们把它拖进来,然后选到我们的表格就可以了。 然后我们下载的这个 aron 呢,它也是有这个小工具的, 在这个上面有个 h t 把它拖进来,它这个自带能能给你设置的选项比较少,它只有这个显示 这个名称和描述这两个选项,而这个 along 自带的呢,它是有更多的,除了跟他说这两个呢,我们来到样式,我们可以选择他的对齐方式,颜色, 这就是根据你自己的喜好来调,就没什么好说的,一样的操作做好了之后呢,你点这个更新就可以了 啊,这个表层的话我之前是有说过的, amino 呢,它是自己就可以发那个邮件的,因为它有一个功能叫做 hpm, 它是用那个 里面要 p h p 发的,不过它有时候呢是出错的,所以我们就需要下载一个 s m t b, 我们来到这里点安装这个,然后去设置一些东西就可以了。现在我们开始做产品,我们去到文章, 然后这里有些人呢是用悟空美来做产品的,虽然弊端网站他是不需要购买功能的,不过你只要把那个产品的价格隐藏掉,放一个巡盘按钮就可以了。不过这次呢我们就用文章来做,因为一个弊端网站其实他没有必要安装污垢美。首先我们假设我们的产品有 分类,我们创造分类,分类一、分类二和分类 回到我们的文章点,我们上面的写文章,这里是产品名字, 然后文章这里 分类。当然这个分类的话是你的产品,如果有分类的话,如果没有的话,你跳过就可以了,我选比如分类一,然后这个特色照片呢?是我们的产品图片,有这个,这个, 嗯,这个吧。然后讨论了,我们把评论关掉,然后来了把这个设置和页面一样, 这个根据你的自己需求,我就把它全关掉了。 email 关掉,然后发布,我们再用 amino 来编辑它 这个名字,你可以直接在这里下面的设置来把它隐藏掉,不过他隐藏的只是这个 文章名字啊,他这下面这个他是隐藏表的,因为这个是阿斯达自带的,他不是里面都可以关掉的,所以我们要取到外观自定义 博客当篇文章,把这个文章关掉,好刷新一下, 他就去掉了。然后这个呢,就是开始根据你自己的感觉,你自己的需求来见就可以了。比如说为了一致,我就把这个复制过来, 然后产品验了,最常见的方法就是用两个栏,左边放图片,然后右边放信息嘛,我们标题这里我们就改这个产品的名字,然后可能还会有产品介绍, 然后像一些产品的特征、颜色、尺寸大小这些我们可以用,比如说这个 做对齐,然后像颜色的话这样写,有黑色啊,黄色、红色这样,然后把它复制一下,像尺寸啦, 还有什么呢?像中央那设置一下,然后这个就是产品介绍嘛, 简单的写一下, 对,然后图片呢,这里就用到我们这个下载的 alone, 他带的这个所列图的 internet 退出之后呢,我们只需要在这里选我们的产品照片就可以了,我就放这个,然后复制一下再选,再复制再选。 然后他这里呢有不同的这个数列图的位置,有上下左右,根据你自己的需求来就可以了。最常见的就是放下面,放下面的话或者是放上面我们要去把这个这里 图设置这个水先关掉, 然后这里的一些颜色大小啊、描边什么的就根据自己的喜欢去改就可以了,在样式这里, 然后这里还要注意,就是这个图片大小他一定要保持一致,比如说他这是三百九十,那其他的图片就都得是三百九的。比如说我们放一个小一点的图片,像这个 他这个图片是会变形的,也不是变形,就是他不是应该的大小。 再比如说我们放一张大一点的,看这个一千九百二, 它里面这样子了,所以这个产品图片呢一定要保持一致, 证明真的把它删掉就可以了。 然后呢就是我们的表单,表单呢其实有很多方法,比如说就像我们刚才那样子,直接把它拖进来,放在这也是可以的,或是你把它放在下面, 这就可以了。然后或者比如说 你用手风琴或者是切换这两个都可以,我们去把这个代码复制过来, 装到这里 更新, 好我们一点 跳出来了,这样也可以。又或者呢是我们用这个 alone 带的一个小工具叫做 off 钢板, 我们点呢还是会出来,这个我们可以要选也是上下左右,比如说下面, 然后它这里面的内容呢,我们得去这个外观小工具这里, 比如说也叫这个位置,我们给他放一个代码进去, 把这个特码 t n g 更新, 然后我们这个页面要更新一下, 再选到我们刚刚做的那个区域,他又出来这个表单了,我们把它拉高一点, 然后就在样式里面调就可以了, 这差不多是这样子的效果,我们看一下 还可以啊, 然后呢就是很重要的响应模式,我们看一下平板 匹马,还好,这个 手机 就这样子调一下就可以了,按的有对齐, 这可能太多了啊,小一点,比如说二十 丧失 上手就可以,然后这个数列图我们来到这里,最下面这个一点,我们给他选大一点就可以了, 那这样子呢,一个产品里面就做好了,做好了之后呢, 然后这里有个很重要的点还是要说一下的,就是如果你是只有 element 免费版的话,每一个产品都是要单独设置的,你只需要做一个产品,然后点这个复制, 把它这个产品名字改一下就可以了,然后连接你也改一下,因为这个如果你是用这个 iron 自己带的这个复制文章的功能的话,这个连接它是不会把你自动改的, 所以你这个连接的话,你得自己手动改一下,如果你嫌麻烦的话,你去下载一个额外的复制文章的插件就可以了。 改好之后呢,我们点发布,然后再进到里面的页面去改他的图片标题介绍就可以了,现在我们去产品页展示我们的产品,去页面 产品需要两面的编辑, 进来之后呢,我们这里也是这个阿东的小工具,我们选这个,他这个很多啊,你可以每个都试试看,你喜欢哪个就用哪个,比如说这个 posk, 他这个呢一共是有五个样式,我们可以多看一看, 然后呢根据自己的需求摆一些有的没的框架就可以了, 这样就可以了。 好的,我们先来看一下 他这个上面我保持一致啊,把这个复制过来, 把它拉上去, 然后有两个小细节, 一个是点击下面都会出现一条下滑线,这个是用 element 编辑不了的,因为他是阿斯特自带的,我们要去到这个自定义 全局字体样式最下面,这里下滑线内容连接,我们把它关掉。然后还有个细节就是 我们点连接的时候呢,他会出来一条蚂蚁线,我们看一下这条蚂蚁线,我们来到自定义最下面的额外 css, 他这条蚂蚁竟然消失了,那这个视频就到这里了,拜拜。
这里不止聊科技,更能探索新天地。大家好,欢迎来到曹趣科技一本,在今天的教程中,我们将继续上个教程的内容,教你如何更改 wordpos 的主题风格。废话不多说, 我们马上发车。为什么我们要更改主题风格呢?因为这样子我们的网站才会有一致的字体和颜色,让我们的网站显得更加专业。其实在初始化主题的时候也可以设置,但如果后期我们还想要再次修改,应该怎么办呢?其实这很简单,我们只需要点击菜单栏这里的自定义按钮, 然后点击这里的全局按钮,我们继续点击这里的排版选项,其实这也就是我们要更改的字体。我们向下滚动左侧栏,我们就会看到标题字体, 这里的大文本就是这里的标题,看这里的标题文本,我们还可以修改正文字体,就是这里的所有文本,甚至是选项栏上的这些都是。所以如果我们想要更改标题字体,我们只需点击它, 这里将有非常多的字体可供选择,所以我们可以随意更改它,我们可以看到它已经发生改变了,我们可以再次更改它,我们可以看到它会再次改变。 我们可以看到所有的标题字体都会发生改变。个人感觉默认字体还不错,我们先回到默认字体,对于正文字体的话基本上是一样的,我们只需要点击这里的按钮进行修改即可,我们可以看到这里会有改变, 而且顶部这里也会发生改变。但我还是会选择回到默认字体,因为相对于我来说,我比较喜欢罗伯特这款字体。至于主题颜色的话, 我们需返回一下并点击颜色。我们可以在这里更改主题到不同的颜色系中去。这些只是整个 word plus 网站上的一般颜色,所以我们可以在这里通过拖动来更改这些颜色。而我们需要做的是不断的尝试这些颜色来观察他们的变化。如果我们想要将颜色统治回到初始状态的颜色的 话,只需点击这里的重置即可。我们也可以在每个不同的页面上单独的进行更改喜欢的颜色。如果你只想要这个按钮与整个网站上的一般颜色不同的话, 我们都可以单独的对这个页面进行更改。只要更改完想要的颜色,我们就可以点击这里的发布按钮,然后点击这里退出页面即可。而以上就是今天的教程,这就是如何更改整个网站的所有颜色和字体的全过程。 如果你还有任何问题,我将非常乐意为你解答。感谢您的观看,我们下期再见。
你是否想让文本更加引人注目呢?那有什么方法来提高网站的视觉度呢?其实我们不仅可以改变文本颜色,还可以调整亮度,更或者设置合适的字号汉行高,从而提升我们网站的阅读体验。 这里不止聊科技,更能探索新天地。大家好,欢迎来到潮趣科技一本。上一次我们已经在文本编辑器中粘贴输入了一段文字进去, 但是这样子看来,我觉得这个文本的颜色有点深,所以我们去样式选项卡中找到文字颜色,然后改变一下颜色,我们可以在颜色框中点击并拖动来更改成想要的颜色, 现在看起来亮度比刚才稍微好了一些,我们还可以把字体的字号改大一点,所以去排版设置这里面,直接拖动这里的滑块就可以修改字体的大小了。假设我们就设置成十八号大小,直接手动输入数值也行。我们看到现在的行高也有点不合适,如果我们想要每一行之间的间距更大或者更小一些的话, 我们就应该再次进去排版设置里找到这里的函高设置选项,假设我们就把函高设置成三十五左右好了, 这样子看起来整体的文本就好多了。但是如果我们是全屏预览的情况下,我们会发现这一段文本是横跨整个屏幕的, 这样子就会使得阅读起来有点困难。如果是让他只从这里到这里而已的话,就像我们在参照网站上看到的那样,段落前后之间的宽度要多一些的留白,才不会让文本横跨整个屏幕,而且我们能发现顶部有一些填充的间距,而且左右两边也同样都是留有一定的间距的。 所以我们回到我们网站的管理后台,点击这里展开左侧栏,点击选中整个区块。在这里我用一种相对来说比较简单的方法,那就是直接调整区块的宽度,设置成大约在九六零左右,那你知道为什么是九六零左右吗?现在我们可以看到他不再横跨整个屏幕,这个时候在左右两边就有一些留白了,但顶部的 填充还不够,所以我们继续来调整一下。我们再次选中整个区块,然后进入高级设置,我们要取消掉这个填充数字的链接,因为我们现在只想在顶部有填充,所以我们就只要顶部这个框内填入要填充的数字即可。现在我们的文本看起来好多了, 并且在文本的周围已经有了足够的留白空间,这就是为什么我想掩饰设置间距的原因,因为间距也是网站文本中很重要的一部分。以上就是如何设置文本编辑器的全过程, 如果你还有任何问题,我将非常乐意为你解答。感谢您的观看,我们下期再见。
这节课我们来讲如何设置 button, 也就是按钮的样式。我们来到这个 themstyle, 下面有个 buttons, 我们点击进入 这个 typography, 就是设置它按钮里面的字,文字的字体, 文字的厌世,我们来选择,比如说我们选择我们之前设置好的全局的字体,我们选择,我们选择这个 primary, 然后他就把他的厌世使用上去了,这个 text shower 就是他文字的阴影。我们来设置一下啊, 这里颜色我们来选择,比如说红色,那 blur 我们选择二十四啊,我们这里设置一个值,比如说是零和零, 哎,红色没选上去好,选上去了,我们可以看到他这个字,他就有个红色的阴影了,这两个值他就是他的水平的平移和垂直的一个,呃, 就是偏移,比如说我们来滑动一下,可以看到他红色的阴影的位置在发生变化,对吧?水平和垂直方向, 我们再往下看它这个 normal, 也就是它正常的状态下的一个样式。 这个 text color 它现在是紫色的,我们把它设置成,比如说,比如说白色, 然后它的背景背景,我们把它设置成,比如说我们选这个颜色啊,选,选择蓝色,它这里有一个 greetingt, 是什么呢? greeting 它就是可以用两种颜色的一个组合, 我们现在设置的是一个他的纯色背景,比如说我们来选择这个 gradient, 我们可以选择两种颜色,你看我们第一个颜色是这个蓝色,第二个颜色是红色,他就显示成这种效果。 当然我们还可以设置成它的一个嗯, angle is 角度,我们来选择零,它就变成左左右 啊,零是上就是颠倒了,对吧?一百八的话,它就是蓝色在上面,红色在下面。好了,我们返回这个, 嗯,我们返回这个经典的,也就是选择它的纯色的背景啊,我们选择蓝色作为背景, 然后它的一个 box shower, box shower 也就是它的一个按钮,它的一个阴影。我们刚刚设置的是 text shower, 也就是它的字体的阴影,我们现在来设置它的按钮的阴影,我们来点击,比如说设成换个颜色吧, 换个绿色,比如说,然后我们再把这个紫色成,比如说零, 然后把这个 blue 设置成五十。 嗯,怎么没效果啊? 怎么这么晚才反应出来,我还以为失效了呢? 我们这个是水平的偏移啊,然后这个是垂直的偏移,然后这个是他的一个模糊度,数值越低的话他就扩散的越小。你发现没有,有时候零的时候他这个他绿色已经就是不模糊了, 然后它的一个扩展延伸,等于说,是啊,延伸的话数字越大,它延延伸的越宽。这个 position 的话啊,它是设置它是在它这个 shallow 是在 button 的里面还是外面?我们一般会选择外面啊,比如说我们选择 insect, 就是它内部,你看内部变成绿色了。 好了,我们再往下看,这个拨了他一步,也就是他的一个边框,边框默认的话他是没有的,他默认的话他就是那,比如说我们选择这个 sorry, sorry, 他他就是实体,实体,比如说我们这里现在是五,现在是五啊,五的话他就是 有这个五的一个绿色的边框,这里是他的绿色,比如说我们设置成这个,这个这个紫色啊,他边框就变成紫色了。比如说我们设置成十五,他就变宽了,对吧?然后这个 bother radios burried 是,也就是它的一个呃,倒角,我们可以看到这个 button, 它是 button, 它是一个矩形的,对吧?矩形的话它是有直角的。比如说我们设置这里设成二十啊,它这里就有一个倒角, 然后我们来设置一下它的一个 hover, hover 也就是我们当我们鼠标悬浮上去的时候它的一个样式啊, 比如说我们设置它的颜色,对吧?我们把它的颜色变一下,背景颜色我们变成变成灰色,比如说我们把鼠标放上来,你看他就变成灰色了。 当然我们不只可以设置一个值,比如说我们可以显示他的一个文字颜色变成绿色。比如说我们把鼠标放下来,你看他背景和他的,他的背景色和他的文字颜色一起变了。比如说我们把这个,呃, 我们鼠标悬浮的时候,我们再设置一个 border, 比如说我们设置成一点一点的啊,我们再 试一下,你看他一悬浮的时候,他那个 border 也就是边框,他变成了一个一点一点的了。请,这就是那个设置 button 的一个样式,你喜欢什么样子的,多去操作一下就可以了。 我们刚刚讲了如何去设置它的一些厌食,但是真实的情况我们不是不需要去设置这么多厌食,我们只需要设置它的 hover 的背景颜色的变化就可以了。我们先把所有的值返回默认的状态, 我们把这个 hover 也改成 morning 的状态。 好,我们希望他这个 button 变大一点,里面的字 我们设置一下这个 robot 五十啊,可以,然后的话我们把它的这个 button 的颜色变成蓝色,没问题啊。然后我们一般来说我们会把它的 hover 的一个状态颜色加深, 我们还是选择蓝色,然后在这里把颜色加深, 这种效果就是 hover 上去的时候它的蓝色变得更深了,这样的话就给人一种这个按键被按下去的感觉,然后这个文字是紫色和绿色,我们也可以设置一下,比如说我们把它都设置成白色, 这样就可以了。
大家好,今天来分享一下如何为我们的 word plus 外贸网站的标题修改不同的颜色,就是我们希望呢同一个标题里边不同的词语或者不同的字段呢出现不同的颜色,因为这样呢可以突出我们某一个词语啊,或者是让我们的网页呢看起来更加有设计感 啊,这呢也是我们的客户啊经常问到的一个问题,那这个方法呢,也我觉得也可以用于阿里巴巴国际战,呃内容的修改或者标题的修改, 那么大家可以看到哈,就是图中所示,嗯,大胡说呢,是一种颜色,跨境呢是一种颜色,那么我们是如何来实现呢?首先呢,我们在古铜宝编辑器里边 呃写一个标题,然后呢这个标题呢?呃之后呢我们呃点这个区块,点右边的这个三个点,然后选择那 用 html 格式来进行编辑,之后呢我们加入为你,如果你想,比如说我们的跨境,那么我们选择这个跨境呢?呃给他加上一个 spa 标签,大家可以看到这个代码里面呢有颜色, 颜色的部分呢我们可以修改,通过修改这里呢就为我们的这个标题能够显示不同的颜色啊,今天分享到这里。
欢迎来到 woodpress 独立站搭建教程,我是 draco, 相信经过之前几集的学习,大家对于我们的 woodpress 已经有了一定基础的设置,现在我们来学习一下如何使用 oxygen 来对我们的模板进行修改。 首先我们要对我们的首页模板进行一个修改,我们点击左边彩蛋蓝的 pages, 在 pace 这里头我们要来修改我们的 home 首页模板,我们可以看到这里有个 dash front page, 这个意思是因为我们经过之前在塞天斯的设置,将这个页面设置为了我们首页,所以它会在这里显示,意思就是这个页面目前是我们的首页,也就是我们又直接访问我们的域名,比如说现在我们直接访问,这样,这样不 wpt 到炕,我们会直接跳到 这个页面里。 ok, 我们先来开始对他进行一个修改,我们点击左下角的 addit, 在点击完 at it 之后,我们会进入到 wordpress 默认的一个编辑区,这个编辑区大体上分为三个板块,第一个板块是顶部菜单栏以及他的侧边栏。第二个板块是 他的内容编辑区,也就是中间白了这一块。第三个版块是他的插件区,我们的插件在这里显示的就是 oxygen, 侧边的菜单栏是通过右上角这个像齿轮一样的按钮进行打开和关闭的。在这个里头我们可以看到现在是配置,也就是我们对我们目前的这个页面进行一个基础的设置。 我们可以看到在这里他会显示出我们现在当前的一个状态,比如说这个页面是已发布还是未发布?目前是他是 public, 就是已发布,然后他的发布时间以及他的一个 url, 然后我们还能看到他的创建者是谁。在这里,如果我们网站有多个用户,我们可以在这里进行一个勾选,指定他的。呃,创建者是谁? 接下来是两个。我们之前装了 uce duplicate 那个插件,写给我们显示的一个功能就是复制, 把这个页面进行一个复制,然后就是删除这个页面。接下来 fham 之的意思就是我们需要在这里对我们的网,嗯,对我们的当前的这个页面进行一个手图的设置。嗯,在有一些模板里头,我们是不需要进行这个设置的。而在 之后的产品以及不到的页面里,我们每一个页面都需要呃独自对当前的那个页面进行一个一位置呃,非确一面纸的设置。 接下来是 discussion, discussion 的意思就是是否允许讨论。由于我们这是首页,我们都是取消狗选的,然后 page attrabus, 在这里我们都不需要对他进行任何的修改,所以我们把他 合上就行了,包括底下的一个 nice beat options, 也就这是我们一个网,网间网站的缓存插件,我们也不需要对他进行任何的修改啊,是保持他的默认状态就行。 接下来我们看一下左边的内容区。嗯,由于我们整个网站的内容都是通过 oxy 针搭建并且设计的,所以在我们的大部分页面里头,我们都不会去使用这个内容。去大家可以看到这一本很 got annual edit with oxygen, 我们通过这个按钮点击之后进入到 oxygen 的编辑区,在那里对我们的网站以及模板进行一个修改。嗯,现在我们点击 edited with oxygen, 进入到 oxygen 的编辑区。 现在我们就算进入到 xc 镇的编辑区了。这个编辑区大体上也是分为这么三个板块, 第一个是顶部的一个菜单栏,在这里我们会有一些基础的设置操作,左边呢是我一一个选项区,在这里如果我们勾选特定的 不同的模块,不同的 vjt, 它会显示不同的一个设置选项。嗯,一般我建议大家再打开 oxi 转编辑器的 时候,我都建议大家把这个顶部菜单栏的 structure 这个按钮点一下,把它打开。 structure 就是结构的意思,顾名思义,嗯,他会展现一个我们当前网页的一个结构。 嗯,我给大家所制作的这个模模板是模块化的模板,什么意思呢?就是,嗯,一个页面相当于是一个盒子,而在这个盒子的又是由我们一个个不同的小盒子组成的,像搭积木一样,他就是一个积木块,这就是一个模块化模板的意思。 所以我建议大家都点击。每次在打开这个 oxa 镇编辑区的时候,都把 structure 这个按钮啊点击一下,把它打开,这样方便我们清晰明了地知道我们目前在修改哪一个模块,以及模块中的 哪一个更小的部件。我们的这个教程是由浅入深,循序渐进的,所以今天我们先开始学习四个比较基础的操作,第一个是文字,第二个是颜色,第三个是图片,第四个是视频。 现在我们来学习一下如何修改文字,修改文字非常的简单,当我们看到页面中某一个某一段文字,我们需要个性把它替换成我们自己想要的内容时,我们只需要双击, 现在就是一个选中的状态,然后我们可以切换光标,当我们选中他或者当我们看到光标的时候,我们就可以就像正常修改文字一样把它删除,然后打字进行一个文字的修改。 你说这里我打 better template, better thought。 当我们修改完成之后,我们只需要鼠标点击其他部分即可修改完成。同理,当我们想要修改一个 button, 也就是这个按钮上的文字,我们也只需要去双击, 当我们看到顶部顶部菜单栏出现了这样的一个文字的选项的时候,我们即可也对他进行一个修改。我们将光标停到我们想要修改的地方,删除 our, 鼠标点击其他地方即可完成修改。以上就是如何修改 文字的方式,接下来我们看一下如何修改颜色。当我们需要比如说修改这个 botton 颜色的时候,我们可以点击这个 botton, 我们在左边菜单栏能够看到 有 button color, 紫阳,这个就代表着我们这个 button 的颜色,我们可以点击颜色 选择一个我之前为大家预设好的这样 wpt 的颜色,当我们选择绿色,绿色的时候,大家可以看到这个 boss 的颜色就变成了一个绿色, 当我们选择黑色的时候,他也就变成了一个黑色。同时大家也可以删除之前预设置的一个颜色,进行一个自己在这里进行一个任何的一个颜色的一个调整和修改,也可以输入像这样的一个颜色代码。 右边 button hovercolor 的意思就是当我们鼠标停留在这个 button 上,他会展示的一个颜色。同样我们也你也可以根据自己的想法去对他进行一个任何而已 对它进行一个任何的修改。比如说我们现在把它现在显示的是一个蓝色,当我们鼠标悬浮上去的时候,它就会变成一个绿色。 同样,如果当我们想要修改底下这个模块的红色的时候,我们选中这个最外层的这个底模块,然后将向上看,我们能看到一个 background color, 在这个 background color 里头,我们可以点击对它进行一个任何颜色的一个修改。 ok, 以上就是如何 修改颜色的方式,接下来我们来看一下如何修改图片。首先假如我们要修改首页的这个轮播图的一个图片, 我们点击这个轮播图,我们再点击左边的 advanced, 然后看到第一个 background, 在 background 这里头的第二栏是 background image, 我们的轮播图的图片就是从这里设置的。 如果我们想要替换成自己的一个图片,大家可以看到我的这个轮播图的底色给大家写的是一九二零乘八百。如果大家制作这个尺寸图片,就能在网站前端获得一个比较好的一个表现。 如何修改 style 的这个图片呢?我们点击左边菜单栏的 advanced, 然后点击第一个 background, 在 background 里头我们能看到这里有个 background image 这个选项。我们有两种添加图片的方式,目前我给大家使用的是一种加载外部资源的图片,也就是加载一个外部图片的一个 url 就能显示出来。另一种呢则是我们平常更多使用的, 我们点击这个菜单栏中不知道按钮,在不知道按钮里头,我们将会看到我们网站媒体库的一个图片, 这个图片是我之前上传上去的,如果你打开你的媒体库没有一张图片的话,你点击左边的 upload files, 选择点击 select, 选择你本地的一个图片上传,然后再对它插入到网页之中。现在的话我们就插入。现在我们点击选择选中这张小锤子的照片, 然后点击他,选择将他插入至我们的一个模板。由于我们的这个锤子尺寸不一致,不是我所设置的一九二零乘八百,所以大家能看到他的并没有显示一个完成完整, 如果大家都按照一九二零乘八版这个尺寸比例去制作的话,将会完整的展示在这里。 ok, 这个就是如何修改图片的一个方式,接下来我们看一下如何修改这种类型的图片。我们点击这个图片, 这时候我们能在左边菜单栏里直接看到 media library 和 imageui url 两个选项。现在呢,我同样是加载了一个外部资源的图片,如果我们需要使用自己网站内部的图片,我们需要点击这个 media library, 在 media library 里头继续点击 bros, 同样我们还是选择之前这个正方形的小锤子图片,选择之后他将被正常的插入进去。 ok, 以上就是修改两种不同类型图片的方式,接下来我们看一下如何修改视频资源,我们将首页往下拉,我们能看到左边这里是有个 youtube 视频的, 我们单击这个模块,在左边的菜单栏这里头的第一栏我们能看到一个 youtube uiao, 这时候我们进入到自己 channel 的一个视频里头,比如说这个就是我们自己公司 channel 的一个视频,我们打开这个视频之后,点击 share, 在 share 的这个弹框里头,我们能看到这样一个短链接,我们点击敲屏, 将这个 url 完整的 copy 复制到这里,我们就已经完成了这对这个视频的一个个性化的修改。 ok, 这就是如何修改一个视频模块。文字、颜色、图片和视频是构成网站的主要四个因素,像这里的这些文字,同理我们都是可以通过双击,然后在光标出现之后对他进行一个修改的。 接下来就教给大家先去对首页模板进行一个修改,在大家完成了所有的修改之后,我们点击右右上方的这个保存按钮, safe changes, 在单机保存之后,我们的所有的更改设置就已经完成了, 我们就可以关闭这个页面。在保存完成之后,我们也可以点击保存按钮左边的这个按钮,在这里一个我们能看到是回答我们的 waterpress 默认编辑器的页面,另一个呢是到我们的前端, 这时候我们可以点击前端 francand 来查看一个我们刚刚对我们的网站做的一个设计。
您是否想让商店可以按属性过滤产品?他允许购物者根据不同的属性缩小搜索范围,包括颜色、价格范围、面料尺寸等属性。用户无需浏览整个产品集合,只需浏览他们感兴趣的产品即可。 接下来,我们将向您展示如何在商店中设置过滤器。首先,您需要安装并激活 y i t h v commerce age x 产品过滤器插件。激活后,从 ver press 管理侧边栏前往 y i t h ajx 产品过滤器页面。从这里单机 create a new preset 按钮开始创建过滤器。预设之后,您需要在预设名称框中输入过滤器的名称。接下来只需选择水平作为预设布局。然后单击底部的 add a new filter 按钮就可以为您的产品创建 过滤器。首先,您需要在过滤器名称选项旁边输入过滤器名称。接下来您可以从过滤器下拉菜单中选择过滤器的参数。 随后您必须在选择条款部分中输入网站上的所有产品类别。之后您可以从过滤器类型下拉菜单中选择过滤器在商店前端的显示方式。接下来,如果您想在下拉菜单中启用搜索框, 则需要切换显示搜索自断开关。您还可以通过激活显示为切换开关将您创建的过滤器显示为切换。然后客户将能够打开和关闭过滤器。完成此操作后, 只需从排序依据下拉菜单中为过滤条件选择默认顺序即可。最后,单击底部的保存过滤器按钮以保存过滤器。要将您刚刚创建的过滤器添加 到乌 commerce 产品页面。您需要从顶部切换到过滤器预设选项卡,然后复制您刚刚创建的过滤器预设的短代码。接下来在产品页面添加减码块,然后将您复制的过滤器预设短代码粘贴到短代码块中即可。 最后单机发布或更新按钮保存更改。图中所示就是过滤唔 commerce 产品的实际效果。