[Collegamento facile] Personalizza con un design discreto: se affiliato
Cos'è un semplice collegamento?
Affiliate Easy Links semplifica la creazione di collegamenti a più siti di shopping come Rinker e Kaeleva.
Cos'è un semplice collegamento?
È una funzione che ti consente di creare facilmente un semplice link di affiliazione di tipo carta (reattivo). Inserisci l'URL della pagina del prodotto di Rakuten Ichiba o Amazon.co.jp o la parola chiave di ricerca nel campo URL.
https://af.moshimo.com/af/shop/service/easy-link-card
È molto comodo perché va bene inserire l'URL di una pagina di prodotto, ma l'impostazione predefinita è un po 'opprimente, oppure ero un po' debole con il grande design.
È lungo verticalmente come questo
Questa volta l'ho personalizzato con un design semplice e discreto.
Dove sono cambiato
- Nome prodotto: riduci la dimensione del carattere.Grassetto.
- Dimensione pulsante: miniaturizzazione.Anche i margini sono ridotti.
- Sotto il pulsante: ampi margini rimossi.
- Bottone: dall'arancia al panna.Aggiunto un effetto tridimensionale.
- Al passaggio del mouse: aggiunto movimento per premere il pulsante.
- Dimensione dell'immagine: ridotta.
codice
Personalizzazione dell'aspetto → Aggiungi il seguente codice al CSS.
/ * If Affiliate Easy Link Customization * / / * --- Product Title --- * / p.easyLink-info-name a {font-size: 16px! Importante; font-weight: bold;} / * --- Dimensione pulsante --- * / div.easyLink-box div.easyLink-info p.easyLink-info-btn a {padding: 1px! Important;} @media screen e (min-width: 704px) {div.easyLink-box div.easyLink-info p.easyLink-info-btn a {margin-bottom: 10px! Importante;}} / * --- Rimuovi lo spazio vuoto sotto il pulsante --- * / div.easyLink-box {padding: 10px; } div.easyLink-box div.easyLink-info p.easyLink-info-btn a: last-child {margin-bottom: 0! important;} / * --- Button color --- * / 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 - shadow: inset 0 2px 0 rgba (255,255,255,0.2), 0 2px 2px rgba (0, 0, 0, 0.19);} / * --- Effetto mouse over --- * / a: hover.easyLink-info- btn-amazon, a: hover.easyLink-info-btn-rakuten, a: hover.easyLink-info-btn-yahoo {transform: translateY (0.1em)} / * --- Dimensione immagine --- * / 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 -width: 125px! important; max-height: 125px! important;}
Il blog che ho usato come riferimento
Personalizza i link facili del tuo affiliato!Colore dei pulsanti, modifica del testo, ecc.