昨天看到一个悬停背景图片切换效果的教程，如上图这样，鼠标放到那个框框上就切换为对应的背景图片。但感觉看到的这个教程复杂了一些，又是CSS又是JS的，于是我自己折腾了一会，用CSS算基本实现了，这个方法适用于Elementor编辑器（含V4 Atomic编辑器）和古腾堡编辑器。接下来分享介绍。 CSS代码 本教程要用到的CSS代码如下，大家可以把它用到elementor编辑器或古腾堡编辑器中，里面的一些参数值可以自行按需修改。 重点：以上代码中main-bg-box作为主容器的CSS类，hover-item-1、hover-item-2、hover-item-3、hover-item-4作为子容…
继续分享wordpress外贸建站教程。之前遇到的那个特别麻烦的wordpress项目中，客户要求页眉导航的一部分实现滚动隐藏/显示效果。即页眉有两行，第一行显示LOGO，第二行显示菜单，第一行一直固定显示，当页面向下滚动时隐藏第2行菜单，但只要向上滚动，第二行立即显示。这个网站使用的是Blocksy主题，Blocksy主题页眉导航并不能完全实现这种效果。后来我也是折腾了好一会才搞定。 接下来分享实现步骤。 步骤一：设置Blocksy主题页眉固定 首选进入Blocksy主题的页眉设置，开启固定功能，选顶部和主行固定。 步骤二：添加JS 直接给出代码如下，大家可以直接复制使用。 添加可以添加到w…
继续分享wordpress外贸建站教程。近期有一个wordpress外贸建站目录需要自定义分类目录模板，一般情况下这种需求可以使用自定义分类代码，ACF插件，或者是Elementor主题生成器来实现。但是这个项目为了样式统一，我准备都使用Blocksy主题自带的短代码功能，不过需要扩展Blocksy主题短代码功能。 默认情况下Blocksy主题短代码是没办法自动获取当前分类文章的，只能指定分类或标签，所以我们需要通过以下代码给它加一个扩展。 上面的代码大家可以直接复制，也可以按需修改，比如limit后面的数量是默认的显示数量，这个需要和主题的自定义设置配置，要以那边设置多少，这里就填写多少。 …
最近接到一个woocommerce商城网站维护项目，协助改一些东西。其中有一个需求是在首页添加优惠倒计时模块。本来想装个插件的，但用户的服务器配置似乎不高，所以还是不装插件好，最终在AI协助下生成了一个简易的优惠券复制模块，如上图所示。 接下来分享一下如何制作。 步骤一：设置woocommerce优惠券 首选在网站后台，woocommerce的营销功能中添加优惠券，设置需要的折扣，然后根据需要设置优惠券限期。 步骤二：制作倒计时+优惠券复制模块 这里倒计时和优惠券是分开做的。（客户的网站使用的是elementor编辑器） 1.打开首页，进入Elementor编辑模式。在需要的地方添加一个容器，…
最近的一个wordpress外贸建站项目中，客户需要很多产品分类，层级也有点多。当我准备编辑后面菜单时发现很多有些产品分类没有体现出层级关系，都平级显示了，这样编辑就很麻烦，容易搞错。这其实是Wordpress后台菜单分类层级显示BUG，当分类超过50且有二级或以上分类时，它就可能会这样，左边的分类列表被分页显示了，所以导致层级关系被破坏，所有分类都平级展示。 解决方法：安装Preserve Taxonomy Hierarchy插件 一般情况下，我们可能不会遇到这种问题，因为普通网站的分类不会要搞这么多。 如果遇到了这种问题，解决方法也很简单，直接安装并激活Preserve Taxonomy …
继续分享wordpress建站教程。最近的一个wordpress外贸建站项目中，有个表单功能需求，需要添加国家选项。而Elementor默认的表单没有这个功能，要么安装扩展插件，要么用其它表单插件代替。好在客户对此功能的要求并不复杂，最终我还是使用Elementor自带的Form表单功能来做的。 步骤一：获取国家列表 可以搜索一下找到全球主要国家的列表，也可以直接问AI，让AI帮你生成，然后直接复制就可以了。 步骤二：创建表单 在Elementor编辑器中添加Form模块，然后按需创建表单，其中国家下拉选择模块需要用到【Select】字段，把前面获取的国家列表粘贴到Options就可以了。 注…
继续分享wordpress网站维护教程。今天在给一个客户修改网站时发现了一个比较奇怪的问题——Wordpress部分文章段落文字不能自动换行，有一篇文章的标题和一个段落在卡片列表和前端正文显示时都有这个问题。 如上图所示，在文章目录页，它的标题和下面的摘要文本换行不正常，右边显示溢出了。只有这一篇这样，其它的都正常。 打开这篇文章后发现，它的正文显示也有问题。如上图所示，文字没有自动换行，向右边溢出显示了。这样就挺难看。 其实这种问题悦然wordpress建站是遇到过的，所以第一时间就猜测可能是这段文字本身有问题，可能存在一些特殊的空格或代码，虽然表面上看不出来，但是在html代码中是可以看到…
继续分享wordpresss外贸建站教程。最近卖出一个YRWP系列的Elementor成品网站模板，有个客户是做SEO的，对网站的标签系统比较在意，所以想给文章和产品详情页添加标签显示。 标签功能本身是自带有的，只是没让它直接显示出来。接下来就分享一下如何显示并给Elementor的Tag标签添加样式，这里以YRWP006模板为例。 步骤一：添加Post Info调用标签 YRWP系列模板是在Elementor编辑器基础上做的，所以首选打开文章或产品详情页模板，进入Elementor编辑页面，然后添加一个Post Info模块，Type这里选Terms，然后下面选标签（如果是YRWP的产品详情…
继续分享wordpress外贸独立站建站教程 —— 页面结构分析拆解 。 今天我们开始这个系列的第9篇教程。 今天我们以上面这个网站截图为例。这是一个网站的BANNER部分，一般可以用到首页或其它专题页面，它的整体设计网格偏博客风格，大家可能在一些新闻或旅游博客上见的比较多。 接下来我们看看它的这个页面设计如何实现。 分析 它的整体设计就是一个大的容器，里面再添加两个子容器，分别放到左右，添加对应的内容。 另外我们可以注意到，它的导航栏是全透明的，叠加在整个页面上方，这种情况下我们在制作时一定要注意容器的整体颜色和导航上LOGO、字体的颜色不能太接近，否则会看不清。如果下面容器背景偏亮，那导航…
© Copyright 2020~2026. 悦然网络工作室/悦然wordpress建站 专注中小企业wordpress建站 All Rights Reserved.网站地图
本站图片来源为Pexels、Pixabay、Freepik、Unsplash等图片库的免费许可，CC0协议;还有部分为自己手绘或AI生成，版权碰瓷请自重！法律服务：law@yueranseo.com
蜀ICP备20016391号-1
川公网安备 51011502000367号
