网站搭建的经验

上篇文章最近二三事提到我在新建一个电商站,目前这个电商站已经上线了,接下来的工作就是上产品和内容等工作,之后的工作等网站有一些基础在弄了。

建网站是个辛苦工作,不管你是套模板还是自己用 Elementor 搭建,都需要花很多时间去搞,模板建站你需要去删除没有的页面和图片等等,最多的时间可能就是修改。自己建的花页眉页脚,网站的整体全部都要自己设计,有很大的自主性。

我现在推荐第二种方式,这种方式你能看到你自己搭建的网站一点一点的起来,稍微加上点设计,初看还是很不错的,当然套模板也有它的优势,第二种方式如果你熟悉的话,也是非常快的。特别是你搭建好你的模板网站,直接就是迁移,后续只需要往上面填充内容就可以。

这次搭建网站是用的 ElementorHello Elementor 搭建的,自己之前都是套模板,这次尝试之后发现 Elementor 真的很好用。如果你要搭建网站的话我会推荐你用这种方式,但是后续网站的优化也是很大的问题,Elementor 是重型编辑器,对网站的速度有很大的影响。

Hello Elementor 其实也是有子主题 Hello Elementor Child Theme 的,这也是我在看其他博主的博客上看到的。不然我直接上传主题之后就开始用了。

搭建的过程遇到的问题也是很多,最重要的就是英语的问题,虽然后台可以设置成中文,很多插件对中文其实没有很好的支持。这个过程就会拖慢自己的速度。当然也是有好处的,认识英文单词是其次的,主要的就是能让你知道这个功能你要怎么设置,在不切换中文的情况下,切换成中文意思差很多。

如果你确定好一个 niche 能做不要着急的去建站,要先去准备好素材,博客文章、图片、产品、文案等等,像我这样的话都是临时找的,很浪费时间。提前准备好,是个好习惯。我搭建的流程是页面标题→页眉→页脚→首页→其他页面,基本流程是这样,里面很多细节。

接入 PayPal 支付又遇到问题,单产品页面的加入购物车(Add to cart)和 PayPal 支付按钮粘在一起了,没有间隙,期间试过很多方法,都没有办法。去谷歌搜索YouTube上搜索,都没有相关的方法处理。最终还是问的 ChatGPT 搞定的。

最初我给的问题不是很准确,导致出来的代码有的有用有的没有用,有的有会将加入购物车(Add to cart)和选择数量的框不在同水平上。最后想到选择框和加入购物车是同一个位置上的元素,然后就输出了正确的代码,代码如下:

/* 将加入购物车按钮和数量框变为 block 元素,并添加底部间距 */
.single-product .single_add_to_cart_button,
.single-product .quantity {
    display: block !important;
    margin-bottom: 20px !important;
}

/* 添加 PayPal 支付按钮的顶部间距 */
.single-product .wc-proceed-to-checkout a.checkout-button {
    margin-top: 20px !important;
}

我填写的是下面这段优化之后的代码,如果你想自己修改间距的话,修改下面的 20px 就可以。

/* 将加入购物车按钮和数量框变为 block 元素,并添加底部间距 */
.single-product .single_add_to_cart_button,
.single-product .quantity {
    display: block;
    margin-bottom: 20px !important;
}

/* 添加 PayPal 支付按钮的顶部间距 */
.single-product .wc-proceed-to-checkout a.checkout-button {
    margin-top: 20px !important;
}

如果想优化出更好看的页面是需要代码知识的。如果是套模板是不会出现这样的问题的,模板在设计之初就优化好了。

如果你知道怎么用 Elemetor 设置 PayPal 这个按钮,或者是有其他的办法处理这个问题的话,欢迎在下面留言。

发表评论