[Link fácil] Personalize para um design discreto: Se afiliado
O que é um link simples?
O Affiliate Easy Links facilita a criação de links para vários sites de compras, como Rinker e Kaeleva.
O que é um link simples?
É uma função que permite criar facilmente um link de afiliado simples do tipo cartão (responsivo). Insira o URL da página do produto Rakuten Ichiba ou Amazon.co.jp ou a palavra-chave de pesquisa no campo URL.
https://af.moshimo.com/af/shop/service/easy-link-card
É muito conveniente porque não há problema em inserir o URL de uma página de produto, mas o padrão é um pouco complicado, ou eu era um pouco fraco no design grande.
É longo verticalmente assim
Desta vez, eu o personalizei para um design simples e discreto.
Onde eu mudei
- Nome do produto: Reduza o tamanho da fonte.Negrito.
- Tamanho do botão: miniaturização.As margens também são reduzidas.
- Abaixo do botão: margens largas removidas.
- Botão: De laranja a creme.Adicionado um efeito tridimensional.
- Ao passar o mouse: Adicionado movimento para pressionar o botão.
- Tamanho da imagem: Reduzido.
コ ー ド
Personalização de aparência → Adicione o seguinte código ao CSS.
/ * If Affiliate Easy Link Customization * / / * --- Product Title --- * / p.easyLink-info-name a {font-size: 16px! Importante; font-weight: bold;} / * --- Tamanho do botão --- * / div.easyLink-box div.easyLink-info p.easyLink-info-btn a {preenchimento: 1px! Importante;} tela @media e (largura mínima: 704px) {div.easyLink-box div.easyLink-info p.easyLink-info-btn a {margin-bottom: 10px! Importante;}} / * --- Remova o espaço em branco sob o botão --- * / div.easyLink-box {padding: 10px; } div.easyLink-box div.easyLink-info p.easyLink-info-btn a: last-child {margin-bottom: 0! important;} / * --- Cor do botão --- * / a.easyLink-info - btn-amazon, a.easyLink-info-btn-rakuten, a.easyLink-info-btn-yahoo {color: # 333333! important; background: # FFFDE7! important; border: 1.2px solid # 808080! important; box - sombra: inserção 0 2px 0 rgba (255,255,255,0.2), 0 2px 2px rgba (0, 0, 0, 0.19);} / * --- efeito de mouse sobre --- * / a: hover.easyLink-info- btn-amazon, a: hover.easyLink-info-btn-rakuten, a: hover.easyLink-info-btn-yahoo {transform: translateY (0.1em)} / * --- Tamanho da imagem --- * / div. easyLink-box di v.easyLink-img, div.easyLink-box div.easyLink-img p.easyLink-img-box, div.easyLink-box div.easyLink-img p.easyLink-img-box img.easyLink-img-pht {max -largura: 125px! importante; max-height: 125px! importante;}
O blog que usei como referência
Personalize os links fáceis de seu afiliado!Cor do botão, mudança de texto, etc.