外贸网站产品上传_古腾堡编辑器使用教程

很多客户在了解我们的外贸建站服务的时候,经常会问我们做的网站上传产品的后台是什么样的? wordpress外贸网站上传产品是否有数量限制? 我们的外贸网站在上传图片的时候是否是不限制数量的?

针对所有外贸网站产品上传的问题,这篇文章做一个全面的介绍。

郑州白帽子外贸网站产品后台

郑州白帽子外贸网站产品后台
郑州白帽子外贸网站产品后台

 

外贸网站客户产品后台
外贸网站客户产品后台

 

外贸网站客户产品后台 2
外贸网站客户产品后台
外贸产品详情页
外贸产品详情页

郑州白帽子建站的外贸网站产品详情页和其他公司产品详情页有什么不同?

我们建站的外贸网站产品详情页的编辑器是基于Gutenberg 古腾堡编辑器,古腾堡编辑器与富文本类编辑器的不同之处就在于,它可以让你的产品详情页不再只有竖向编辑的功能,可以将横向展示分为为几列。

阿里国际站的产品后台详情是这种富文本的编辑器,如果你想在一行放几张图片,那么需要切换到代码模式进行编辑,十分不方便。

 

阿里国际站产品后台
阿里国际站产品后台

 

我们建站的外贸网站后台可以非常轻松地将一行分为一列,两列(不同宽度),三列(不同宽度)甚至更多。

古腾堡编辑器一行有多列
古腾堡编辑器一行有多列

如果想要在一行上展示3张图片,只需要插入3张图片即可。

古腾堡编辑器一行3列示意图
古腾堡编辑器一行3列示意图

 

接下来我们将具体的介绍外贸网站产品上传的具体步骤和古腾堡编辑器的一些基础操作。

什么是Wordpress古腾堡编辑器?

Wordpress古腾堡编辑器是wordpress官方开发的一款所见即所得的编辑器(WYSIWYG:what you see is what you get),它可以让你不用在前台打开网页就可以查看到实现的网页效果。现在的wordpress一般都内置古腾堡编辑器,除非你将古腾堡编辑器禁用,一般情况下wordpress的后台默认的是古腾堡编辑器的。

古腾堡编辑器也有一个wordpress插件,如下图:

https://wordpress.org/plugins/gutenberg/

古腾堡编辑器核心一直在迭代,这也是wordpress官方推行wordpress全站编辑Full site edit进行的一个必要的阶段。

因为wordpress团队为了让wordpress相对于其他建站工具如wix, shopify和其他saas建站工具更易用,让wordpress的每一处队可以让用户轻而易举的编辑,这是wordpress团队想要做的事。

guttenberg编辑器插件
guttenberg编辑器插件

目前比较好的wordpress古腾堡编辑器有哪些?

由于古腾堡编辑器的发展,有很多主题商或者插件开发者推出了基于wordpress block editor的主题或者插件。最近发展比较好的有blocksy主题,Generatepress主题,插件有 Astra主题开发团队开发的 Spectra(以前叫UAG: Ultimate Add Ons For Gutenberg )。

blocksy主题
blocksy主题

 

generatepress主题
generatepress主题

 

spectra blcok editor
spectra blcok editor

 

这篇文章我们主要以 Spectra 古腾堡编辑器来讲解如何在外贸网站后台发布产品。

古腾堡编辑器Spectra介绍

相对与wordpress官方的编辑器插件,Spectra编辑器提供了更多的工具,而这些工具在其他的编辑器或者主题里是收费的,如下图的截图:

spectra
Spectra 编辑器小工具

 

spectra
Spectra小工具2

 

在开始具体的外贸网站产品上传操作步骤之前,我们先了解一下这些小工具的具体用途。

Container-容器

在gutenberg编辑器里输入一个 /,然后就会让你选择需要添加什么元素,第一个就是container。

gutenberg 容器 container
gutenberg 容器 container

Container预设了一些样式,有单行多列,有多行多列,有多行不等宽列等,可以根据需要添加不同的样式。

container预设样式
container预设样式

 

Container与Column元素的不同点就是,Container内的不同column可以设置不同的高度,对齐方式可以不同,关于这个Flex对齐方式我们会有详细一篇文章。

Container样式不同
Container样式不同

 

Container常规设置里有以下几个:

Container Width就是这个容器的宽度,full width就是全宽,就是产品详情页占满从左到右的距离,左右两边没有空白的间距。

Container样式设置
Container样式设置
containe full width全宽
containe full width全宽

Boxed width两边会有一些间距padding,在boxed width下可以设置特定的宽度。

boxed width
boxed width

 

Container的样式设置:

Background可以设置容器的背景颜色;

Color可以设置容器里的文字颜色;

Border可以设置容器的边框颜色;

Shape dividers是可以设置容器的图形分界线;

Spacking 就是 容器的内边距,外边距;

Container样式设置 2
Container样式设置 2

 

容器的Margin(外边距),padding(内边距),Border(边框)的解释。

container padding margin
container padding margin

 

Container高级设置
Container高级设置

Container的高级设置可以设置该容器是否在桌面设备,平板和移动端进行显示。

鼠标放到container上,然后点击上面的3个点,会出现复制当前容器,以及删除容器的选择。

删除容器
复制、删除容器
添加元素
显示详情页用了哪些元素

 

添加元素
添加元素

想要把一个元素设置成为一行多列,就可以按以下步骤来操作:

首先选中这个元素,接下来点击上面的元素图标,最后点击 column栏目,

一行多列元素怎么设置
一行多列元素怎么设置

然后点击右边的栏目元素就可以将元素设置成多列了。

一行多列元素展示2
一行多列元素展示

 

其他任何元素都可以使用这个方法,首先先选中这个元素,然后点击上面的3个点,就可以打开相应的设置选项。

产品详情页其他设置
产品详情页其他设置

 

 

 

产品主图设置
产品主图设置
产品缩略图设置
产品缩略图设置
产品短描述设置
产品短描述和其他设置

注意:不同样式的产品详情页,网站后台需要填充的内容是有区别的,这个只是做一个参考,让你了解一下我们建站的外贸网站产品上传后台是什么样的。

对多种规格产品的详情页上传的时候有一些区别,产品会多一些属性,例如:颜色等。我们会针对具体的产品做具体的产品上传视频。

多种产品属性的产品上传 (2)
多种产品属性的产品上传
多种产品属性的产品上传
多种产品属性的产品上传

 

在领英上分享这篇文章
本篇文章内容
    Add a header to begin generating the table of contents

    联系我们

    郑州白帽子网络科技有限公司是一家专业做外贸网站建设,谷歌SEO优化、谷歌SEM推广公司。
    郑州白帽子网络科技微信图
    添加请说明需求
    郑州白帽子

    郑州白帽子

    郑州白帽子是一家提供外贸网站定制和白帽谷歌SEO优化的公司,我们会不定期的分享关于外贸的一些知识,以及如何进行外贸建站和谷歌SEO优化推广。我们的核心价值观是给客户提供价值,通过我们专业的服务让客户获得更多的询盘!了解更多关于外贸、外贸建站谷歌SEO优化推广的细节,欢迎联系我们!

    发表评论

    您的邮箱地址不会被公开。 必填项已用 * 标注

    更多文章
    yandex提交收录1
    Yandex独立站

    如何将独立站提交给Yandex搜索引擎收录?

    你是不是也在搞不懂怎么让自己的网站被Yandex收录?别急,这事儿其实没你想的那么复杂!这篇文章就是来给你当“导航”的,教你一步一步,先登录账号、验证网站,再上传站点地图,整个流程清清楚楚、简单明了,让你轻松搞定收录,直接通向俄罗斯市场!准备好了吗?我们马上开始!

    woocommercode1
    外贸建站

    26个WooCommerce 简码: 它们是什么以及如何使用它们

    WooCommerce 简码提供了一种灵活便捷的方式来扩展您网店的功能和用户体验。它们可以帮助您轻松添加和显示内容与功能,是任何 WooCommerce 商店的宝贵资产。它们还可用于为您的网店创建自定义布局和设计,因为您可以使用简码控制内容和功能的位置和外观。让我们阅读本文,进一步了解 WooCommerce 短代码。

    elementor网格容器
    外贸建站

    Elementor网格容器

    轻松实现网页布局对齐和对称设计!网格容器让你摆脱繁琐调整,在文章中学会从基础到进阶的实用方法,提升设计效率,打造专业效果。快速掌握网格容器,展现你的设计天赋,助你轻松打造精美网页!

    elementor-动态内容
    外贸建站

    Elementor动态标签

    Elementor的动态标签功能提供丰富多样的选项,可以从帖子、档案、网站、媒体、用户信息等不同数据源中提取内容,动态更新页面元素。通过动态标签,您可以轻松实现标题、图片、链接等内容的自动化更新,还支持WooCommerce产品数据和自定义字段,为电子商务、博客等场景带来更高效的个性化设计。

    滚动至顶部

    登陆

    注册