如何实现四两洞察小卡片的效果？ - 外贸B2B独立站建站及询盘转化率优化

四两金句小卡片的效果（https://4liang.com/bens-insights/）有下面的好处：

截图后可以在朋友圈中使用
方便别人转发（从而扩大自己的名气和权威度）
也算一种内容沉淀，对SEO挺好
创建和修改小卡片非常方便

如果你也想在自己的网站中插入类似页面中的小卡片，你可以使用我为大家准备的代码。

01
先上才艺

这个小卡片就是由下面的代码实现的了。

[任何你想使用的文字] 你应该尽早开始做iCRO（询盘转化率优化），就像当年那些最早做SEO（搜索引擎优化）并吃法红利的人一样。

如果你有一个外贸独立站，那么现在就是你在iCRO（询盘转化率优化）上投入的最好时机。你在转化率优化上的投资将会很快被放大N倍来回报你！

Ben – 4liang.com [替换名字和网站]

02
如何实现

1 第一步

在wordpress的Gutenberg或elementor拖出一个HTML组件，然后把下面的代码拷贝复制进去：

<style media="screen">
    .quote-wrap {
        max-width: 600px;
        margin: 150px auto;
        padding: 100px 80px;
        -moz-border-radius: 15px;
        -webkit-border-radius: 15px;
        border-radius: 15px;
        //定义阴影
        -moz-box-shadow: rgba(0,0,0,0.4) 0 5px 10px;
        -webkit-box-shadow: rgba(0,0,0,0.4) 0 5px 10px;
        box-shadow: rgba(0,0,0,0.4) 0 5px 10px;

        // 下面的代码来自： https://cssgradient.io/ ，你生成代码后替换下面的代码既可
        background: rgb(50,118,255);
        background: linear-gradient(0deg, rgba(50,118,255,1) 0%, rgba(204,243,171,1) 49%, rgba(255,228,79,1) 100%);
        // 上面的代码来自： https://cssgradient.io/
    }
    .quote-wrap .quote {
        background-color: rgba(255,255,255, 0.8);
        -moz-border-radius: 20px;
        -webkit-border-radius: 20px;
        border-radius: 20px;
        text-align: left;
        padding: 60px 40px;
        //定义阴影
        -moz-box-shadow: rgba(0,0,0,0.2) 0 20px 30px;
        -webkit-box-shadow: rgba(0,0,0,0.2) 0 20px 30px;
        box-shadow: rgba(0,0,0,0.2) 0 20px 30px;
    }
    .quote-wrap .quote p {
        font-size: 24px;
        line-height: 1.9em;
        color: black;
    }
    .quote-wrap .quote .quote__icon {
        opacity: .3;
    }
    .quote-wrap .quote .quote__avatar {
        margin-top: 40px;
        text-align: right;
        font-weight: bold;
        font-size: 18px;
    }
    .quote-wrap .quote .quote__avatar img {
        height: 50px;
        width: auto;
        display: inline-block;
        text-align: right;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
}
</style>

<div class="quote-wrap">
	<div class="quote">
		<div class="quote__icon">
			<svg width="36" height="28" viewBox="0 0 36 28" fill="#747474" xmlns="http://www.w3.org/2000/svg">
				<path
					d="M19.5 17.9783C19.5 10.0955 25.338 1.8492 34.5 0L35.976 3.25987C32.6535 4.5402 29.7315 8.9976 29.406 12.0704C33.1425 12.6715 36 15.9758 36 19.9655C36 24.8446 32.124 27.6 28.2015 27.6C23.679 27.6 19.5 24.0657 19.5 17.9783V17.9783ZM0 17.9783C0 10.0955 5.838 1.8492 15 0L16.476 3.25987C13.1535 4.5402 10.2315 8.9976 9.906 12.0704C13.6425 12.6715 16.5 15.9758 16.5 19.9655C16.5 24.8446 12.624 27.6 8.7015 27.6C4.179 27.6 0 24.0657 0 17.9783Z"
				></path>
			</svg>
		</div>
        <p>[任何你想使用的文字] 你应该尽早开始做iCRO（询盘转化率优化），就像当年那些最早做SEO（搜索引擎优化）并吃法红利的人一样。</p>
        <p>如果你有一个外贸独立站，那么现在就是你在iCRO（询盘转化率优化）上投入的最好时机。你在转化率优化上的投资将会很快被放大N倍来回报你！</p>
		<div class="quote__avatar">
            <img src="https://4liang.com/wp-content/uploads/ben-plus-logo.png" /><br>
            Ben - 4liang.com [替换名字和网站]
        </div>
	</div>
</div>