Les équipes sont très importantes pour le succès de toute organisation. Ils rassemblent des personnes aux compétences, expertises et perspectives diverses, créant un environnement dynamique où les objectifs peuvent être atteints.
En utilisant la section Équipe de Pixpa, vous pouvez afficher les profils et les photos des membres de votre équipe, ainsi que leurs rôles et responsabilités respectifs
Dans cet article :
Ajouter une section Équipe à la page
- Pour ajouter une section, vous devez ajouter une page à votre site Web d'abord.
- Sur ta page, Cliquez sur le bleu + icône ajouter un Nouvelle section.
- Vous verrez maintenant le catégories de rubriques sur le côté gauche.
- Faites défiler les L’équipe (1) et cliquez dessus. Maintenant, un écran apparaîtra vous permettant de choisir parmi différentes mises en page de la Section Equipe (2).
- Choisissez n'importe quelle disposition de section et cliquez dessus pour l'ajouter à votre page.
Ajouter et modifier des éléments de liste
Ajouter un élément de liste
- Cliquez sur Modifier les équipes (1) pour ouvrir le panneau des éléments de liste.
- Cliquez sur le Ajouter un article (2) bouton pour ajouter un nouvel élément de liste.
- Vous pouvez choisir de Ddupliquer ou supprimer (3) les éléments de la liste.
Modifier l'élément de la liste
Cliquez sur l'élément de liste que vous souhaitez modifier. Il ouvrira les options d'édition d'éléments de liste particuliers.
De là, vous pouvez:
- Télécharger/Supprimer l'image principale et secondaire (1)
Vous pouvez télécharger un Image secondaire avec l' Image principale pour chaque élément de la liste. Lorsqu'un utilisateur passe la souris sur l'élément, l'image secondaire s'affiche, remplaçant l'image principale. De plus, vous pouvez définir le Couleur d'accentuation de l'image, qui s'affichera au survol de l'image. - Ajouter un Objet (2), Sous-titre (3), et Description (4) de l'élément de liste.
- Vous ne trouverez peut-être pas l'option de sous-titre et de description dans des éléments de liste particuliers en fonction de la mise en page que vous choisissez.
Avant d'ajouter la description, vérifiez ceci. .
5. Action au clic
Vous pouvez personnaliser le comportement au clic des différents éléments de la section Équipe . Voici les options disponibles :
- Accéder à un lien
La sélection de cette option ouvre la Créateur de liens, vous permettant d'ajouter un lien hypertexte vers cet élément. Le lien peut diriger les utilisateurs vers une autre page de votre site Web ou vers une URL externe. En savoir plus à propos Créateur de liens. - Ouvrir dans la Lightbox
Cette option affiche l'élément dans une version agrandie Visionneuse vue lorsque vous cliquez dessus. Dans ce mode, le Sous-titre et Description associé à l'élément n'apparaîtra pas dans la vue grille mais sera visible en mode Lightbox. - Pas d'action
Choisissez cette option pour rendre l'élément non cliquable. Lorsque cette option est sélectionnée, cliquer sur l'élément ne déclenchera aucune action.
6. Ouvrir le lien dans une nouvelle fenêtre : configurez l’ouverture du lien dans un nouvel onglet ou dans le même onglet. Cette option n’est visible que si l’option « Accéder au lien » est sélectionnée dans le menu « Action au clic » .
7. Boutons et liens : Ajoutez tout type de lien à l’élément de liste. Vous pouvez ajouter un bouton, un lien image, une icône de réseau social ou un lien texte. En savoir plus.
8. Remplacement du style de carte
Vous pouvez modifier les paramètres globaux de style des cartes dans les paramètres de style de la section et personnaliser individuellement chaque carte dans la section Liste d'images. Cela vous permet d'appliquer des styles uniques à différents éléments de la liste pour une personnalisation plus poussée.
Pour en savoir plus sur l'option Cartes, consultez la section dynamique.
9. Enregistrer : Après avoir effectué les personnalisations, enregistrez les modifications.
Pour personnaliser les cartes de chaque article individuellement, vous devez d'abord activer l' option Carte dans les Paramètres de style.
Éléments de la liste de séquencement
Vous pouvez facilement modifier l'ordre des éléments de la liste en les faisant glisser-déposer . Découvrez un exemple de réorganisation de la liste des éléments Teams :
Gérer les éléments de la section Équipe
La section Équipe comprend un onglet Éléments qui vous permet de gérer facilement la visibilité des différents éléments de la section.
À l’aide de simples interrupteurs à bascule, vous pouvez activer ou désactiver des éléments spécifiques sans avoir à supprimer ou modifier les éléments eux-mêmes.
- Cliquez sur le Éléments (1) onglet.
- Après avoir effectué les modifications, appuyez sur le bouton Enregistrer (2) bouton.
Options des sections
- Afficher le titre: Activez ou désactivez la visibilité du titre pour la section Équipe.
- Afficher les boutons: Contrôlez si les boutons sont affichés au niveau de la section.
Options des articles
- Afficher l'image: Basculer la visibilité des images.
- Montrer le titre: Contrôle si le titre est affiché.
- Afficher le sous-titre: Activer ou désactiver les sous-titres.
- Montrer la description: Gérer la visibilité des descriptions d'articles.
- Afficher les boutons:Décidez si les boutons des éléments individuels doivent être affichés.
Disposition des sections
-
- Cliquez sur le Modifier les équipes bouton pour ouvrir le panneau d'édition de section et choisir le Mise En Page languette.
-
- À partir de là, vous pouvez facilement modifier la mise en page de la section même après l'avoir ajoutée à la page.
Lors de la modification de la mise en page, vous verrez les mises en page liées aux sections en haut.
Outre ces options, vous pouvez également choisir une mise en page parmi d'autres sections sous l' en-tête « Plus de mises en page ».
Section des équipes de style
Vous pouvez personnaliser différents aspects de la section Équipes grâce à diverses options de style. Pour accéder aux options de style, cliquez sur le bouton Modifier les équipes (1).
- Choisissez le Style (2) onglet.
- Après avoir effectué les personnalisations, Enregistrer (3) les changements.
Vous aurez plusieurs options de style pour la section :
- Options d'affichage
- Affichage mobile
- Alignement
- Taille du texte
- espacement
- Titre de la section
- Options d'images
- Masque de forme
- Options de survol des images
- Bordure d'image
- Cartes
- Shadow
- Boutons et liens
Options d'affichage
- Choisissez d' Afficher les éléments in lignes et colonnes / carrousel / Vitrine
- Si vous avez choisi le lignes et colonnes option, les éléments de la liste seront disposés en lignes et en colonnes. Dans ce cas, vous devez spécifier le nombre de lignes et de colonnes.
- Si vous avez choisi le carrousel option, les éléments de la liste seront présentés sous forme de diaporama. En savoir plus.
-
Showcase propose une mise en page élégante et interactive de type carrousel pour afficher vos images une à une avec des transitions et des effets fluides. Cette mise en page confère à votre site une expérience moderne et immersive. En savoir plus.
- Mettez le Le nombre de colonnes pour la liste des images. Vous pouvez choisir de 1 à 10 colonnes.
- Spécifie le Espace entre les colonnes des éléments de la liste.
- Spécifie le Espace entre les lignes des éléments de la liste.
Si l'option Carrousel est sélectionnée à l'étape 1, vous verrez les options supplémentaires suivantes :
- Activer le défilement fluide:Permet le défilement continu des éléments dans le carrousel pour une expérience fluide et visuellement attrayante.
- Glissement automatique: Fait pivoter automatiquement les diapositives sans interaction de l'utilisateur.
- Afficher la progression de la lecture automatique: Affiche un indicateur de progression pendant que la lecture automatique est active pour une meilleure visibilité.
- Délai de lecture automatique: Définit l'intervalle de temps entre chaque transition de diapositive lorsque la lecture automatique est activée.
- Boucle du carrousel: Permet une boucle continue des diapositives, de sorte que le carrousel redémarre de manière transparente après la dernière diapositive.
- Commandes du carrousel: Choisir la Commandes de navigationVous pouvez choisir entre Aucun contrôle, Flèches – En bas au centre/En haut à droite/En bas à droite, Chevron, Points et Défilement horizontal.
- Bords estompés : Appliquez un effet de fondu subtil sur les bords du carrousel. Il améliore l'expérience utilisateur en mélangeant délicatement les images lorsqu'elles apparaissent ou disparaissent de la vue.
Si l’option Vitrine est sélectionnée à l’étape 1, vous verrez les options supplémentaires suivantes :
- Effets: Choisissez parmi cinq effets d'animation : Fondu, Retournement, Cartes, Coverflow (Incliné) ou Coverflow (Plat) pour contrôler la transition des images.
- Activer le défilement fluide : Permet le défilement continu des éléments dans la vitrine pour une expérience fluide et visuellement attrayante.
- Glissement automatique : Transition automatique entre les images sans intervention de l'utilisateur.
- Afficher la progression de la lecture automatique : Affiche un indicateur de progression pendant que la lecture automatique est active pour une meilleure visibilité.
- Délai de lecture automatique : Définissez le temps entre les diapositives lorsque la lecture automatique est active. Vous pouvez choisir une valeur comprise entre 1 et 10 secondes.
- Boucle de carrousel : Activez cette option pour boucler le carrousel à l'infini, permettant une lecture continue.
- Commandes du carrousel : Le paramètre Contrôles du carrousel vous permet de choisir la manière dont les utilisateurs naviguent dans les diapositives, avec des options telles que des flèches (en bas au centre, en haut à droite, en bas à droite), des points ou aucun contrôle du tout.
Affichage mobile
- Réglez le nombre de Colonnes de la grille pour les appareils mobiles. Vous pouvez le définir sur un maximum de 3 colonnes.
- Définir la espacement entre les grilles (en pixels).
Disposition des colonnes spécifique à l'appareil basée sur les paramètres du studio :
Alignement
- Aligner l'image horizontalement dans la section Équipe. Vous pouvez les aligner à gauche, à droite ou au centre.
- Aligner le texte horizontalement dans la section Équipe. Vous pouvez les aligner à gauche, à droite ou au centre.
- Aligner le contenu verticalement dans la liste des équipes. Vous pouvez les aligner en haut, au centre ou en bas.
- Choisissez le Ordre du contenu c'est-à-dire les images des éléments de la liste à afficher en premier ou le texte associé.
Titre de la section
- Aligner horizontalement le texte du titre de la section. Vous pouvez le définir à gauche, au centre et à droite.
- Activer/désactiver le Cloison entre le titre de la section et le contenu de la section.
- Mettez le épaisseur du diviseur (en px).
- Spécifie le Couleur du séparateur du sélecteur de couleurs.
- Choisissez un Style de séparation de la liste déroulante.
Taille du texte
- Cliquez sur le Modifier le style de texte bouton pour visiter le Design section et gérer vos tailles et styles de police.
- Mettez le Objet style de police pour les éléments de liste de la section.
- Mettez le Sous-titre style de police pour les éléments de liste de la section.
- Définir la valeur par défaut Description style de police pour les éléments de liste de la section.
- Activez cette option pour animer n'importe quels nombres Présent dans le Objet et Sous-titre Lorsque cette option est activée, les valeurs numériques s'affichent avec une animation de comptage dynamique, ce qui les rend plus attrayantes visuellement.
espacement
- Spécifie le Largeur de l'image pour les éléments de la liste.
- Spécifie le Largeur du contenu pour les éléments de la liste.
- Spécifie le Espace sous le titre de la section en px.
- Spécifie le Espace sous les images des éléments de la liste (en %).
- Spécifie le Espace sous les titres des éléments de la liste (en %).
- Spécifie le Espace sous les sous-titres des éléments de la liste (en %).
Titre de la section
- Aligner horizontalement le texte du titre de la section. Vous pouvez le définir à gauche, au centre et à droite.
- Activer/désactiver le Cloison entre le titre de la section et le contenu de la section.
- Mettez le épaisseur du diviseur (en px).
- Spécifie le Couleur du séparateur du sélecteur de couleurs.
- Choisissez un Style de séparation de la liste déroulante.
Images
- Choisissez le Image pour les éléments de la liste. Vous pouvez définir les images comme Carré, Cercle, Horizontal, Portrait et Original.
- Choisissez d'avoir un rayon d'angle commun ou un rayon d'angle différent pour chaque côté des éléments de la liste et définissez un nombre (en px) pour le CRayon du coin des images des éléments de la liste. En savoir plus.
Le champ « Rayon des coins » vous permet de créer des images de différentes formes pour les éléments de la liste. Si vous spécifiez 500 px, les images s’afficheront sous forme de cercle.
- Si vous avez choisi des coins divisés, vous pouvez définir un rayon de coin différent pour chaque coin.
Masque de forme
- Masque de forme : Activez cette option pour appliquer un masque de forme aux images de la section Équipes. Une fois activée, la forme sélectionnée s'ajustera visuellement à l'image.
- Sélectionnez la forme : Choisissez parmi différentes formes prédéfinies pour vos images. Vous pouvez ainsi personnaliser votre contenu de manière créative en affichant des images sous des formes uniques, comme arrondies, en losange, en goutte, etc.
- Étendue: Activez cette option pour étirer la forme sélectionnée afin qu'elle s'adapte mieux au conteneur d'image. Cela garantit que la forme remplit l'espace disponible de manière proportionnelle, améliorant ainsi l'alignement visuel sur différentes tailles d'écran.
- L'option Étirer dépend de la mise en page – Il se peut qu'il n'apparaisse pas dans certaines mises en page. Sur les mises en page où du texte comme un titre ou un sous-titre est affiché sur l'image, l'option Masque de forme entière peut ne pas être disponible.
- Le paramètre Stretch dépend de plusieurs facteurs - Y compris taille de l'image, alignement et paramètres de recadrage défini sous l'onglet Style.
- Si le recadrage de l'image est défini sur Original, les dimensions réelles de l'image détermineront si elle sera étirée verticalement ou horizontalement.
Survol de l'image
- Choisissez le Couleur de survol de l'image à l' couleur d'accentuation ou être spécifié. Si vous avez choisi le couleur d'accentuation, puis spécifiez le opacité. Vous pouvez spécifier la couleur d'accentuation pour chaque élément à partir de Modifier l'élément panneau.
- Si vous avez choisi le spécifier la couleur puis définissez l'option Couleur et opacité de superposition.
- Mettez le Couleur du texte superposé qui apparaît au survol.
- Choisissez d' Animer les images des éléments de liste au survol en cliquant sur Oui. Vérifiez cette fonctionnalité sur une page en direct.
- Choisissez un Style d'animation pour les images lorsque le curseur les survole.
- Choisissez si vous souhaitez autoriser le transition d'images en vol stationnaire ou non.
- Choisissez un Style de transition pour la transition de survol. Les options disponibles sont Fondu et Retournement.
Bordure d'image
- Activer/Désactiver la bordure autour des images en basculant la bascule.
- Choisissez d'avoir un frontière commune de tous les côtés des images ou vous pouvez spécifier le frontières séparément pour chaque côté.
- Spécifie le largeur de la frontière. S'il est défini sur 0, la bordure n'apparaîtra pas. Vous avez également la possibilité de définir la largeur de la bordure individuellement pour chaque côté de l'image.
- Sélectionnez le Couleur de la bordure du sélecteur de couleurs.
- Sélectionnez un préféré Style de bordure de la liste déroulante.
- Détermine le largeur de bordure pour mobile appareils, en l'alignant sur la largeur choisie pour le bureau.
Cartes
- L'entreprise pour gérer les cartes.
Shadow
- Écran – Choisissez d'afficher toujours l'ombre derrière les éléments de la liste ou uniquement au survol.
- Style – Choisissez parmi les préréglages existants ou créez une ombre personnalisée.
Si vous avez choisi l'option personnalisée, visitez ce Générateur d'ombre de boîte pour créer une ombre personnalisée. Enfin, copiez et collez le boîte ombre CSS. - Si vous avez choisi l'option de préréglages, alors Choisissez les styles d'ombre de la liste déroulante.
Boutons et liens
- L'entreprise gérer le style de Boutons et liens.
