Comment créer une liste de messages sur WordPress wonderwall – pop – up
Pieds: 80px;
}
Définir le conteneur de description d’image
– Oui. Emballage BP. BP post details {
Position: absolue;
Largeur: 250px;
En haut: 0;
Couleur: # FFF;
Couleur de fond: rgb (17153105);
Couleur de fond: rgba (17153105, 0,9);
Hauteur: 250px;
Alignement du texte: centré;
Police: 14px Arial;
Remplissage: 0px;
Opacité: 0;
Indice Z: 10;
}
Démarrer l’animation en vol stationnaire
– Oui. Emballage BP. Détails du poste BP: vol stationnaire {
Opacité: 1;
Animation: rebondir 0,4 s vers l’intérieur et vers l’extérieur;
Animation webkit: rebondir 0,4s entrée \/ sortie facile;
Animation MOZ: rebondir 0,4 s en douceur;
MS Animation: rebond de 0,4 s vers l’intérieur et vers l’extérieur;
Animation de type O: rebondir 0,4 s vers l’intérieur et vers l’extérieur;
}
Animation timetime
Rebond de l’image clé webkit
0%
– transformation webkit: zoom (1);
}
50%
Opacité: 1;
– webkit change: Scale (1.1);
}
100%
– transformation webkit: zoom (1);
}
}
Rebond de l’image clé {
0%
– MOZ Transform: Scale (1);
}
50%
Opacité: 1;
– transformation MOZ: échelle (1.1);
}
100%
– MOZ Transform: Scale (1);
}
}
O rebond de l’image clé
0%
O transformation: échelle (1);
}
50%
Opacité: 1;
O transformation: échelle (1.1);
}
100%
O transformation: échelle (1);
}
}
Rebond de l’image clé
0%
Transformation: échelle (1);
}
50%
Opacité: 1;
Transformation: échelle (1.1);
}
100%
Transformation: échelle (1);
}
}
Vous devez définir la taille en fonction de la structure de la page. L’exemple CSS ci – dessus suppose une hauteur et une largeur de 250 Px, donc si vous voulez utiliser quelque chose de différent, assurez – vous d’entrer votre taille. Vous devez également changer la position du bouton.
Il convient également de noter l’instruction Transform: Scale (1.1). C’est la taille du \
Appelez get _ the Post thumbnail Click Crop parce que nous voulons nous assurer que l’image est toujours la taille que vous spécifiez cliquez sur valider
Une nouvelle taille d’image a été créée pour la fonction de reconstruction des vignettes. Assurez – vous que le nouveau nom de taille est sélectionné et que le message est sélectionné dans la liste des types de messages, puis cliquez sur reconstruire les vignettes. Ceci crée un nouvel ensemble de vignettes pour la taille de la vignette sélectionnée. Activez et essayez maintenant que vous êtes prêt. Activez le thème de votre enfant et allez à la page d’accueil. Maintenant, lorsque vous passez le curseur, vous devriez voir une liste de messages basés sur l’image fonctionnelle avec un effet de rebond pop – up.
Il y a donc trois façons différentes de générer un wonderwall qui est facile à mettre en œuvre et qui est visuellement plus accrocheur qu’une liste de texte standard. Je pense que ces technologies ont un véritable potentiel pour les utilisateurs de tablettes. Mais qu’en penses – tu? Je me soucie de ce que tu penses. La navigation basée sur l’image est – elle une tendance future ou simplement un gadget? Veuillez me le dire dans les commentaires ci – dessous. Code de crédit: Victor Ivanov