-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathelementor.html
109 lines (108 loc) · 7.37 KB
/
elementor.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css"/>
<title>Questions sur Elementor</title>
</head>
<body>
<div class="interface">
<header><h1>Questions sur Elementor</h1></header>
<nav>
<ul>
<li><a href="index.html">Questions sur les thèmes</a></li>
<li class="courant"><a href="elementor.html">Questions sur Elementor</a></li>
</ul>
</nav>
<div class="body">
<h1>Préparation</h1>
<article>
<label class="icone" onclick="this.parentElement.classList.toggle('on')"></label>
<p class="libele">Reprendre le projet "<a href="index.html">Questions sur les thèmes"</a> ou bien prendre une nouvelle installation de WordPress et ajouter 5 pages FakerPress avec photos.</p>
<div class="solution">Bravo</div>
</article>
<article>
<label class="icone" onclick="this.parentElement.classList.toggle('on')"></label>
<p class="libele">Installer et activer l'extension <em>Elementor</em></p>
<div class="solution">Bravo</div>
</article>
<article>
<label class="icone" onclick="this.parentElement.classList.toggle('on')"></label>
<p class="libele">Aller modifier la page "Contact" et cliquer sur <code class="clic">Modifier avec Elementor</code>. On peut également créer une toute nouvelle page.</p>
<div class="solution">Bravo</div>
</article>
<h1>Premières sections</h1>
<img src="images/contact1.png" alt="" class="bloc">
<article>
<label class="icone" onclick="this.parentElement.classList.toggle('on')"></label>
<p class="libele">Créer 2 sections : une section avec deux colonnes et une section avec une seule colonne.</p>
<div class="solution">Bravo</div>
</article>
<article>
<label class="icone" onclick="this.parentElement.classList.toggle('on')"></label>
<p class="libele">Dans la première colonne, ajouter un bloc de texte dans lequel il n'y aura que l'image <a href="wordpress.png" download="wordpress.png">⭳<img class="inline" src="wordpress.png" alt="Wordpress"></a>.</p>
<div class="solution">Bravo</div>
</article>
<article>
<label class="icone" onclick="this.parentElement.classList.toggle('on')"></label>
<p class="libele">La première colonne <img src="images/btn_modifier_colonne.png" alt="Modifier colonne" class="inline"> a une série d'images en arrière-plan <img src="images/btn_diaporama.png" alt="Diaporama" class="inline"> qui changent à interval régulier. Ajouter 3 images de la médiathèque. Quel est l'interval en question ?</p>
<div class="solution">5000 millisecondes (c'est dans <code class="chemin">Modifier colonne ⇒ Style ⇒ Arrière-plan</code> )</div>
</article>
<article>
<label class="icone" onclick="this.parentElement.classList.toggle('on')"></label>
<p class="libele">La première colonne a également une bordure double et les coins arrondis. Où se trouve cette option?</p>
<div class="solution"><code class="chemin">Modifier colonne ⇒ Style ⇒ Bordure</code></div>
</article>
<article>
<label class="icone" onclick="this.parentElement.classList.toggle('on')"></label>
<p class="libele">La deuxième colonne contient une image et un bouton. Prendre n'importe quelle photo de la médiathèque. Le bouton est centré et a une icone. Peut-on mettre plusieurs blocs différents dans la même colonne?</p>
<div class="solution">Oui!</div>
</article>
<article>
<label class="icone" onclick="this.parentElement.classList.toggle('on')"></label>
<p class="libele">Pour le bouton, au survol de la souris, sa couleur devient "Principal" (couleur globale). S'amuser également à ajouter une "Animation au survol".</p>
<div class="solution"><code class="chemin">Modifier Bouton ⇒ Style ⇒ Survol ⇒ Couleur d'arrière-plan ⇒ <img class="inline" src="images/btn_global.png" alt=""></code></div>
</article>
<article>
<label class="icone" onclick="this.parentElement.classList.toggle('on')"></label>
<p class="libele">La section en-dessous, contient un bloc "Carrousel d'images". La couleur des flèches a été modifiée.</p>
<div class="solution"><code class="chemin">Modifier Bouton ⇒ Style ⇒ Survol ⇒ Couleur d'arrière-plan ⇒ La petite terre</code></div>
</article>
<h1>Deuxième partie</h1>
<img src="images/contact2.png" alt="" class="bloc">
<article>
<label class="icone" onclick="this.parentElement.classList.toggle('on')"></label>
<p class="libele">La 2e partie est composée de 3 sections. Créer tout de suite 3 sections de 1 colonne.</p>
<div class="solution">Bravo</div>
</article>
<article>
<label class="icone" onclick="this.parentElement.classList.toggle('on')"></label>
<p class="libele">L'arrière-plan de la 1re section <img src="images/btn_modifier_colonne.png" alt="Modifier colonne" class="inline"> est composé d'une image unique qui reste fixe lorsque l'on fait défiler la page. Choisir une image de la médiathèque. Pour agrandir la section, y mettre un bloc "Espacement" d'une hauteur de 150px.</p>
<div class="solution"><code class="chemin">Modifier Colonne ⇒ Style ⇒ Type d'arrière-plan ⇒ <img class="inline" src="images/btn_classique.png" alt=""></code></div>
</article>
<article>
<label class="icone" onclick="this.parentElement.classList.toggle('on')"></label>
<p class="libele">Dans la 2e section, mettre un titre et une zone de texte.La zone de texte doit être disposée en 2 colonnes.</p>
<div class="solution">Bravo</code></div>
</article>
<h1>Troisième partie</h1>
<img src="images/contact3.png" alt="" class="bloc">
<article>
<label class="icone" onclick="this.parentElement.classList.toggle('on')"></label>
<p class="libele">
Ajouter une seule section pour la troisième partie. On aura besoin des blocs suivants : Diviseur, Éditeur de texte, Image, Titre, Section interne et Menu de navigation. Remarquer les détails suivants :
<ul>
<li>Le menu est centré verticalement.</li>
<li>Il y a une ombre sur la boite de gauche.</li>
<li>Il y a 2 arrière-plans superposés dans la boite de gauche.</li>
<li>Il y a des icones dans les diviseurs.</li>
</ul>
</p>
<div class="solution">Bravo</code></div>
</article>
</div>
<footer>© Cégep de Saint-Jérôme</footer>
</div>
</body>
</html>