[Enlace fácil] Personalice con un diseño discreto: si está afiliado
¿Qué es un enlace simple?
Affiliate Easy Links facilita la creación de enlaces a varios sitios de compras como Rinker y Kaeleva.
¿Qué es un enlace simple?
Es una función que le permite crear fácilmente un enlace de afiliado tipo tarjeta simple (receptivo). Ingrese la URL de la página del producto de Rakuten Ichiba o Amazon.co.jp o la palabra clave de búsqueda en el campo URL.
https://af.moshimo.com/af/shop/service/easy-link-card
Es muy conveniente porque está bien ingresar la URL de una página de producto, pero el valor predeterminado es un poco abrumador, o estaba un poco débil en el diseño grande.
Es largo verticalmente como este
Esta vez, lo personalicé con un diseño simple y discreto.
Donde cambié
- Nombre del producto: reduzca el tamaño de la fuente.Negrita.
- Tamaño del botón: Miniaturización.Los márgenes también se reducen.
- Debajo del botón: Se eliminaron los márgenes anchos.
- Botón: De naranja a crema.Se agregó un efecto tridimensional.
- Cuando se pasa el mouse: movimiento agregado para presionar el botón.
- Tamaño de imagen: reducido.
コ ー ド
Personalización de apariencia → Agregue el siguiente código al CSS.
/ * Si afiliado Fácil personalización del enlace * / / * --- Título del producto --- * / p.easyLink-info-name a {font-size: 16px! Important; font-weight: bold;} / * --- Tamaño del botón --- * / div.easyLink-box div.easyLink-info p.easyLink-info-btn a {padding: 1px! Important;} pantalla @media y (min-width: 704px) {div.easyLink-box div.easyLink-info p.easyLink-info-btn a {margin-bottom: 10px! Important;}} / * --- Quite el espacio en blanco debajo del botón --- * / div.easyLink-box {padding: 10px; } div.easyLink-box div.easyLink-info p.easyLink-info-btn a: last-child {margin-bottom: 0! important;} / * --- Color del botón --- * / 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: inserción 0 2px 0 rgba (255,255,255,0.2), 0 2px 2px rgba (0, 0, 0, 0.19);} / * --- Efecto 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)} / * --- Tamaño de la imagen --- * / 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 -ancho: 125 px! importante; altura máxima: 125 px! importante;}
El blog que usé como referencia
¡Personaliza los enlaces fáciles de tu afiliado!Color del botón, cambio de texto, etc.