Comment (re) Construire la page iwd2020 d’Apple avec elementor

Le modèle de cette page et le charger dans l’installation de l’élément. Cela vous aidera à comprendre exactement comment nous obtenons cet effet. Voulez – vous installer le modèle json dans l’installation element (pro)? Prends – le ici. [acheter le lien Text = \
* conseil professionnel: Entrez 0,00 $pour obtenir gratuitement. Mais ne le dis à personne? Limites de l’élément lorsque nous discutons de la façon de construire une vraie page, nous nous concentrons sur les héros parce que c’est une partie complexe de la construction. Elementor pro a quelques limites à ce type de conception web. Le principal problème est qu’il est difficile de supprimer le contenu de la page et de l’apporter dans un viewport. Si vous accédez à la page d’atterrissage d’Apple ou à la version de notre modèle, vous verrez que lorsque vous déplacez la souris, le contenu en dehors de la fenêtre se déplace dans la fenêtre. Pour augmenter la profondeur, ce mouvement répond directement au mouvement du curseur de la souris.
En résumé, nous devons trouver un moyen de contourner la restriction du « contenu hors écran ». Comment créer Hero Creation maintenant, nous allons vous guider étape par étape dans la création de cette page. Nous commençons par le Centre, commençons par le texte original, ajoutons des images. Pour obtenir la structure de l’écran, il suffit de faire glisser 5 colonnes internes (chacune avec 5 colonnes internes) dans la toile de l’élément. Ceux – ci sont contenus dans une section pleine hauteur. La colonne du milieu contient du texte et l’image rayonne vers l’extérieur.
Ajoutez des images avec des éléments d’image ou des éléments et assombrissez l’image en réglant l’opacité par défaut à 0,5. En vol stationnaire, l’opacité augmente à 0,8. Placer l’image sur l’écran en utilisant la largeur en pourcentage
Et le remplissage des pixels et les marges. Nous utilisons également des marges pour déplacer toute la colonne contenant l’image sur la toile. Comme vous pouvez le voir, toutes les images sont contenues dans des lignes horizontales, mais sont décalées de sorte qu’elles semblent être placées au hasard sur la toile de page.
Un effet important de cette page est d’afficher la biographie de la femme lorsque vous passez le curseur sur l’image respective de la femme. Pour ce faire, nous utilisons d’abord des éléments de texte pour ajouter du contenu et le placer absolument dans la colonne. Avec CSS personnalisé, nous pouvons également définir la largeur de chaque élément de texte. La plupart des largeurs sont de 50% (par rapport aux colonnes), tandis que les autres sont de 60 à 80%. Utilisez l’index pour les placer au – dessus de l’image.
Nous devons également utiliser des CSS personnalisés pour afficher et masquer les biographies basées sur des images en vol stationnaire. C’est très simple, il suffit d’éditer des éléments d’image et de texte dans une classe CSS personnalisée. Ensuite, nous utilisons quelques CSS très simples pour faire l’opacité du texte à zéro par défaut et à un lorsque nous survolons l’image. . Des {opacité: 0;}. CAT IMG: Hover +. Des {opacité: 1; durée de conversion:.5s}. CAT IMG se réfère à l’image suivante. Des fait référence au texte de la biographie.
Cela couvre la plupart des structures de la section héros, et il est temps de combiner les effets de déplacement et de débordement. Comme vous pouvez le voir, notre écran actuel contient toutes les images possibles. La première priorité de la journée est de garder ces images hors du viewport. Pour ce faire, nous avons utilisé la propriété CSS Transform scale. Comme vous pouvez le voir, tout est
Est ce qui est affiché dans la deuxième partie de la page et sera discuté ci – dessous. Un autre problème est le contenu qui déplace les barres de défilement verticales et horizontales du navigateur. Pour résoudre ce problème, il suffit de définir overflow X et overflow y pour masquer en utilisant les CSS suivants: De plus, assurez – vous que l’indice Z de la partie II est supérieur à celui de la partie I. C’est ainsi que nous créons l’ensemble de l’Apple Hero iwc020 en utilisant elementor, rien d’autre qu’un simple CSS personnalisé. C’est un effet vraiment unique que vous pouvez utiliser dans de nombreuses constructions de site Web différentes. Vous n’avez pas besoin de copier complètement Apple, mais comprendre cette approche et cette technologie rendra certainement votre site plus intéressant. Si vous aimez cet effet, nous vous recommandons également de lire notre tutoriel sur les parallaxes multicouches. Mais attends, on n’a pas fini. La deuxième partie de la page contient plusieurs invitations à l’action et d’autres informations qui fournissent un contexte pour le seul héros ci – dessus. Tout ce que nous avons fait, c’est ajouter une section, un élément H2, une section interne avec deux colonnes, quelques photos, des blocs de texte et des boutons que nous avons appelés un jour. C’est notre fin: N’oubliez pas qu’il s’agit d’un agrandissement complet afin que vous puissiez voir toute la structure de la page et qu’elle semble très différente sur le navigateur. Conclusion: Nous avons décidé de relever ce défi et de (re) Construire la page d’atterrissage Apple en utilisant seulement elementor pro. Cela prouve que vous pouvez créer des sites Web incroyablement professionnels, en utilisant l’effet unique de cet outil, et rien d’autre. Si vous souhaitez en savoir plus sur la façon dont la structure de cette page produit cet effet, il est recommandé de télécharger le fichier modèle d’élément que vous pouvez télécharger à
Installer et décoder. Il faut se rappeler que nous n’avons rien fait pour rendre ce modèle réactif et qu’il est très original. Il s’agit simplement d’un test conceptuel qui vous montre comment vous pouvez faire quelque chose de similaire avec l’outil. De plus, toutes les images et le contenu du modèle sont copiés directement à partir du site Web d’Apple. Il a été conçu uniquement à des fins éducatives et si vous essayez de recréer complètement un site Web, il y aura probablement des poursuites contre vous (la propriété intellectuelle est réelle!). Si vous avez des questions, n’hésitez pas à nous contacter dans les commentaires ci – dessous.