Comment utiliser différents éléments de page Web lors de la création de sites Web

Les éléments Web sont les composants essentiels de tout site Web utilisés pour créer la structure d'une page et présenter le contenu et les informations de différentes manières. Par exemple, vous pouvez utiliser Texte, Image, Lien hypertexte, Grille, Galerie et des dizaines d'autres éléments dans votre conception Web sans codage.
Comment utiliser différents éléments de page Web lors de la création de sites Web

Parcourir par catégories de fonctionnalités

Élément de grille

La grille est un élément conteneur que vous pouvez utiliser pour placer des éléments de page Web dans des cellules. Nous vous recommandons d'utiliser l'élément Grid, car il convient aux conceptions réactives, car les cellules se déplacent automatiquement les unes sous les autres sur des écrans plus petits.

Grille pour appareils mobiles
Grille pour appareils mobiles
Plus de 80 dispositions de grille
Plus de 80 dispositions de grille
Redimensionner les cellules de la grille
Déplacer les cellules de la grille
Espace entre les cellules de la grille
Modifier la disposition de la grille
Grille en boîte et large
Basculement de la disposition de la grille
Type d'arrière-plan de cellule de grille
Grille en modes réactifs
Passez le curseur sur une cellule de la grille

Élément de la galerie d'images

Ajoutez une collection de vos images préférées à vos conceptions Web à l'aide de l'élément Galerie. Ajoutez des titres de texte, appliquez des effets de survol et un style.

Écart de la galerie d'images
Modification de la disposition de la galerie
Lightbox de la galerie d'images
Style de texte de la galerie
Style de texte de la galerie
Animation de survol de l'image de la galerie
Animation de survol du texte de la galerie
Texte de l'image de la galerie
Rayon de l'image de la galerie

Élément de boîte

Contrairement au regroupement, vous pouvez utiliser l'élément Box pour ajouter l'arrière-plan et la bordure sous les éléments groupés. Vous pouvez également déplacer, redimensionner et ajouter un arrière-plan, une bordure et des effets autour de l'élément Boîte dans les panneaux Contexte et Propriété.

Faites glisser les éléments de la boîte ensemble
Convertir la boîte en répéteur de grille
Types d'arrière-plan de la boîte
Survoler l'animation sur la boîte
Animation de survol d'arrière-plan d'image de boîte
Curseur de boîte à survoler
Propriété de bordure de boîte

Élément de répéteur de grille

Concevez une colonne et le Grid Repeater répétera automatiquement votre conception sur d'autres colonnes, y compris un ensemble d'éléments, de style et de positionnement. Spécifiez du texte, des images dans chaque colonne pour finaliser votre conception. Cela vous fera gagner du temps et vous permettra de vous concentrer sur votre créativité.

Ajouter des colonnes au répéteur de grille
Ajouter des lignes au répéteur de grille
Propriétés des colonnes et des lignes
Écart d'élément de répéteur de grille
Multi-sélection au répéteur de grille
Couleurs des éléments du répéteur de grille
Grille Répéteur Au Carrousel
Animation de survol de boîte pour les éléments de répéteur de grille

Élément de curseur

Ajoutez Slider comme élément d'interaction essentiel à n'importe quel endroit de votre page Web. Vous pouvez définir une largeur différente pour vos diapositives, contrairement au curseur pleine largeur. Et vous pouvez utiliser différents ensembles d'éléments sur des diapositives pour ajouter de la variété à vos blocs Web.

Élément de vignettes de la galerie
Élément de curseur pleine largeur
Élément de légende de la galerie
Élément de curseur de galerie
Flèches du curseur
Indicateurs de curseur
Animation de curseur
Faites glisser pour les curseurs

Élément de formulaire de contact

Vous pouvez facilement créer la connexion, le contact, l'abonnement et d'autres types de formulaires avec l'élément Form Builder pour communiquer avec les visiteurs de votre site Web. Tous les formulaires sont entièrement réactifs et prêts à l'emploi.

Préréglages du formulaire de contact
Préréglages du formulaire de contact
Types de champs du formulaire de contact
Types de champs du formulaire de contact
Faites glisser et déposez les champs du formulaire de contact
Case à cocher Accepter les conditions
Case à cocher Accepter les conditions
Champ Google reCaptcha
Champ Google reCaptcha
Générateur de formulaire de contact
Générateur de formulaire de contact
Options d'envoi du formulaire de contact
Options d'envoi du formulaire de contact
Disposition du formulaire de contact
Déplacer les champs dans les formulaires de contact
Espacement des formulaires
Paramètres généraux du formulaire
Paramètres généraux du formulaire
Style d'entrée de formulaire
Style d'entrée de formulaire
Style d'étiquette de formulaire
Style d'étiquette de formulaire
Style des boutons de formulaire
Style des boutons de formulaire
Envoyer un e-mail pour l'hébergement Nicepage
Envoyer un e-mail pour l'hébergement Nicepage
Formulaire de contact
Formulaire de contact
Formules de calcul
Formules de calcul
Afficher ou masquer la condition de champ
Formulaire de contact en plusieurs étapes
Évaluation du formulaire de contact
Évaluation du formulaire de contact
Vérifications de la galerie d'images
Filtre anti-spam basé sur l'IA
Filtre anti-spam basé sur l'IA

Élément vidéo

Insérez des vidéos de la même manière que vous ajoutez des images et des icônes. Vous pouvez développer une vidéo pour créer un arrière-plan vidéo. Vous pouvez utiliser des liens vers YouTube, Vimeo et votre hébergement et télécharger des vidéos.

URL de la vidéo
Téléchargement de vidéo
Ombrage vidéo
Ajustement vidéo
Options vidéo
Affiche vidéo

Élément de carrousel

Les carrousels sont très populaires et fonctionnent mieux dans de nombreux aspects de la conception Web. Vous pouvez faire référence à l'élément Carrousel pour tout contenu ayant subi une rotation circulaire, comme des images, des colonnes, etc., que vous pouvez utiliser comme curseur, diaporama ou galerie.

Élément de carrousel de galerie
Élément de carrousel répété
Largeur de l'image dans le carrousel de la galerie
Carrousel d'articles de blog
Produit de carrousel

Élément d'icônes sociales

Ajoutez des icônes avec des liens vers vos réseaux sociaux sur vos pages Web pour vous connecter avec votre public. Vous pouvez utiliser les icônes prédéfinies et également sélectionner les vôtres si nécessaire.

Changer la couleur des icônes sociales
Préréglages d'icônes sociales
Préréglages d'icônes sociales
Ajouter une icône aux icônes sociales
Conceptions d'icônes sociales
Conceptions d'icônes sociales
Ajouter une icône personnalisée aux icônes sociales
Personnalisation des icônes sociales
Animation pour les icônes sociales

Élément de langue

Créez des sites Web multilingues avec Nicepage en ajoutant l'élément Language. Il permet aux créateurs de sites Web de traduire des textes, des menus, des boutons, etc., dans d'autres langues et de changer de langue sur les sites Web en direct.

Élément audio

Utilisez l'élément audio pour insérer des fichiers audio dans les pages et les blocs de votre site Web. Les formats pris en charge dans l'élément audio sont MP3, WAV, FLAC, M4A, WMA, AAC, AIF et AIFF.

Élément d'accordéon

Ajoutez l'accordéon pour présenter les données à onglets sous la forme de panneaux en expansion et en réduction. Vous ne pouvez voir qu'un seul panneau de l'accordéon ouvert et vous ne pouvez développer qu'un seul panneau à la fois.

Conceptions de blocs d'accordéon
Conceptions de blocs d'accordéon
Onglets de gestion d'accordéon
Accordéon Ajouter des éléments
Style d'onglet en accordéon
Style d'onglet en accordéon
Personnaliser l'icône de l'onglet Accordéon
Couleurs des onglets en accordéon
Couleurs des onglets en accordéon

Élément d'onglets

Ajoutez l'accordéon pour présenter les données à onglets sous la forme de panneaux en expansion et en réduction. Vous ne pouvez voir qu'un seul panneau de l'accordéon ouvert et vous ne pouvez développer qu'un seul panneau à la fois.

Conceptions de blocs d'onglets
Conceptions de blocs d'onglets
Déplacer les onglets
Couleurs des onglets
Couleurs des onglets
Espacement des tabulations dans l'élément Tabs
Espacement des tabulations dans l'élément Tabs

Élément de tableau

Organisez vos données textuelles dans des tableaux. Contrairement à l'élément de grille, le tableau ne peut contenir que des textes et des icônes dans le texte. Vous pouvez utiliser l'élément Table pour créer des tables de tarification, des horaires, des horaires, etc.

Conceptions de bloc de table
Conceptions de bloc de table
Colonnes et lignes du tableau
Style de tableau
Style de tableau
Tableau Déplacer les colonnes et les lignes

Élément contextuel modal

Faites la promotion de vos offres avec la boîte de dialogue Modal Popup. Vous pouvez ajouter le lien à la boîte de dialogue contextuelle de la boîte de dialogue Lien hypertexte et bouton et le déclencher sur un événement.

Élément Google Maps

Permettez à vos visiteurs de trouver hors ligne plus rapidement et plus facilement. Vous pouvez spécifier l'emplacement exact de votre entreprise ou vous-même avec Google Maps.

Élément de compte à rebours

Le compte à rebours est un excellent élément pour montrer la dynamique des changements sur votre site Web pour vos visiteurs, qui verront un compte à rebours jusqu'à une date, une heure ou un numéro spécial, qui donnera plus d'informations sur la future vente, l'anniversaire, etc. Le compte à rebours Element vous permet de calculer automatiquement le temps et de le styliser pour vos besoins de conception Web.

Préréglages du compte à rebours dans le menu Ajouter
Préréglages du compte à rebours dans le menu Ajouter
Format de compte à rebours
Sens du compte à rebours
Séparateur de compte à rebours
Compte à rebours après action de comptage
Compte à rebours après action de comptage
Compte à rebours après message de comptage
Compte à rebours après message de comptage
Compte à rebours après le style de message de compte
Compte à rebours après le style de message de compte
Style de compte à rebours
Style de compte à rebours
Animation du compte à rebours
Minuterie de compte à rebours

Élément FAQ

Organisez vos questions et réponses avec l'élément FAQ dans une seule structure de questions fréquemment posées. Vos utilisateurs peuvent cliquer sur la ligne de la question pour la développer et la réduire afin de voir la réponse.

Gérer les onglets FAQ
Modifier le texte dans la FAQ
FAQ sur le style des onglets
FAQ sur le style des onglets
Couleurs des onglets FAQ
Couleurs des onglets FAQ
Icône de l'onglet FAQ

Contre-élément

Présentez vos réalisations personnelles et celles de votre site Web en chiffres et en chiffres. Vous pouvez améliorer l'établissement de relations de confiance avec vos visiteurs.

Retour en haut de la page

Permettez aux visiteurs et aux utilisateurs de votre site de revenir facilement en haut de la page. Il s'agit d'un détail mineur qui améliore l'expérience de navigation sur un site Web ou une longue page de destination.