{"id":4332,"date":"2019-04-09T04:05:07","date_gmt":"2019-04-09T02:05:07","guid":{"rendered":"https:\/\/www.allaboutiweb.com\/?p=4332"},"modified":"2019-04-16T15:13:01","modified_gmt":"2019-04-16T13:13:01","slug":"votre-premier-site-reactif-everweb-1-on-commence","status":"publish","type":"post","link":"https:\/\/www.allaboutiweb.com\/fr\/2019\/04\/votre-premier-site-reactif-everweb-1-on-commence\/","title":{"rendered":"Votre premier site web r\u00e9actif EverWeb 1\u00a0: On commence\u00a0!"},"content":{"rendered":"

EverWeb 2.8<\/a>, nouvellement sorti, apporte probablement la fonctionnalit\u00e9 la plus excitante et la plus demand\u00e9e \u00e0 ce jour : Le web design r\u00e9actif. Pour ceux qui connaissent EverWeb<\/a>, vous r\u00e9aliserez rapidement qu\u2019EverWeb a toujours la m\u00eame apparence et le m\u00eame fonctionnement qu\u2019il a toujours eu. Comment cr\u00e9er un site web r\u00e9actif avec EverWeb\u00a0? Cette s\u00e9rie d\u2019articles de blog vous guidera du d\u00e9but \u00e0 la fin. N\u00e9anmoins, avant de commencer, nous devons d’abord explorer les concepts de design r\u00e9actif et de design traditionnel avant de cr\u00e9er notre premier site web r\u00e9actif …<\/p>\n

Qu\u2019est-ce que le web design r\u00e9actif ?<\/strong>
\nEn un mot, le web design r\u00e9actif permet aux constructeurs de sites web de cr\u00e9er des pages web \u00e9volutives qui s\u2019adapteront automatiquement \u00e0 l\u2019appareil sur lequel la page est affich\u00e9e. Cela signifie que vous ne cr\u00e9ez qu’une seule page web r\u00e9active qui peut ensuite \u00eatre utilis\u00e9e sur un ordinateur de bureau, une tablette ou un appareil mobile.<\/p>\n

Alors, qu’est-ce que le web design traditionnel ?<\/strong>
\nAu d\u00e9but de l’\u00e8re Internet, la conception de sites web reposait sur des pages \u00e0 largeur fixe pour les appareils de bureau. Cela convenait, jusqu’\u00e0 ce que l\u2019arriv\u00e9e des smartphones conduise \u00e0 la n\u00e9cessit\u00e9 de pages web sp\u00e9cialement adapt\u00e9es \u00e0 la largeur et \u00e0 la forme des appareils mobiles. Le boom des smartphones a \u00e9galement conduit les moteurs de recherche, tels que Google, \u00e0 classer les pages mobiles plus haut que les pages de bureau dans les r\u00e9sultats de r\u00e9f\u00e9rencement.<\/p>\n

L\u2019approche \u00ab traditionnelle\u00a0\u00bb de la cr\u00e9ation de sites web signifie donc que vous devez cr\u00e9er une page web pour les appareils de bureau et les tablettes et la page web correspondante pour les appareils mobiles. Lorsque le site web est publi\u00e9, un code est ajout\u00e9 pour s’assurer que la page mobile est affich\u00e9e sur les appareils mobiles et que la page de bureau est affich\u00e9e sur les ordinateurs de bureau ou les tablettes.<\/p>\n

Alors pourquoi ne pas simplement utiliser le design r\u00e9actif ?<\/strong>
\nLe web design r\u00e9actif semble pr\u00e9senter de nombreux avantages, il existe en fait des avantages et des inconv\u00e9nients pour les deux m\u00e9thodologies de conception. Pour commencer, vous devrez apprendre les concepts de design r\u00e9actif et leur application dans EverWeb. Vous aurez peut-\u00eatre \u00e9galement \u00e0 repenser la conception future de vos sites web, par exemple. Si vous souhaitez remodeler un site web existant et le rendre r\u00e9actif, vous devrez in\u00e9vitablement faire quelques compromis en mati\u00e8re de conception et faire des choix. La solution \u00ab \u00e9volutive \u00bb d’une page de design r\u00e9actif est \u00e9galement structur\u00e9e. Obtenir une bonne conception peut prendre plus de temps. Ce que vous voyez sur un appareil de bureau peut sembler g\u00e9nial, mais qu\u2019en sera-t-il un appareil mobile ? In\u00e9vitablement, tester votre site et corriger tout probl\u00e8me de conception pour vous assurer qu’il fonctionne correctement dans tous les sc\u00e9narios prendra probablement plus de temps qu’auparavant.<\/p>\n

Voil\u00e0 le genre de consid\u00e9rations que vous devrez prendre en compte lorsque vous envisagez de recourir \u00e0 la conception r\u00e9active par rapport \u00e0 la conception traditionnelle. Avant de commencer, il convient de peser vos choix en mati\u00e8re de construction de votre premier site web.<\/p>\n

Fonctionnement de la conception Web r\u00e9active dans EverWeb<\/strong>
\nDans de nombreux cas, l’utilisation d’EverWeb sera aussi simple que d\u2019habitude. Cependant, la cr\u00e9ation d’un site web r\u00e9actif adoptera une approche diff\u00e9rente, car la conception de sites web r\u00e9actifs n\u00e9cessite une structure. Votre contenu est plac\u00e9 dans des \u00ab\u00a0conteneurs\u00a0\u00bb pleine largeur (\u00e9galement appel\u00e9s \u00ab\u00a0Sections\u00a0\u00bb) qui forment une ligne sur la page plut\u00f4t que la forme libre habituelle. Vous pouvez ajouter autant de lignes de largeur que vous le souhaitez sur la page. Chaque rang\u00e9e s\u2019allonge l\u2019une sous l\u2019autre, en partant du haut de la page. Lorsque vous redimensionnez la page, le contenu de la ligne est automatiquement redimensionn\u00e9 \u00e0 la largeur actuelle de la page. La hauteur de la ligne s’ajuste \u00e9galement automatiquement pour que tout ce qui reste dans la ligne reste dans la ligne.<\/p>\n

De nombreux types d’objet EverWeb tels que le texte, les images, les formes et les widgets peuvent \u00eatre soit leur largeur normale, soit leur largeur totale. Certains widgets, tels que le widget Responsive Row, ne peuvent avoir que la largeur totale, alors que d’autres ne peuvent jamais \u00eatre rendus en pleine largeur, tels que les widgets PayPal et Facebook. Dans le design r\u00e9actif, les widgets et les objets qui ne sont pas d\u00e9finis sur \u00ab\u00a0Largeur\u00a0\u00bb ??doivent \u00eatre plac\u00e9s dans le widget Responsive Row pour fonctionner correctement. Nous examinerons cela plus en d\u00e9tail dans un futur blog … Le concept de conteneurs pleine largeur est essentiel pour comprendre le design r\u00e9actif dans EverWeb. Pour le reste, EverWeb fonctionne de la m\u00eame mani\u00e8re que d’habitude.<\/p>\n

Cr\u00e9er un site web r\u00e9actif dans EverWeb<\/strong>
\nMaintenant que vous avez eu un aper\u00e7u rapide de la conception de sites web r\u00e9actifs dans EverWeb, commen\u00e7ons par cr\u00e9er un site web r\u00e9actif ! Il est pr\u00e9f\u00e9rable de commencer avec un projet test afin de pouvoir exp\u00e9rimenter avant de plonger dans un projet complet.<\/p>\n

    \n
  1. Lancez EverWeb et s\u00e9lectionnez \u00ab Create a new website \u00bb (Cr\u00e9er un nouveau site Web) dans la fen\u00eatre des Projets.<\/li>\n
  2. Vous verrez maintenant le s\u00e9lecteur de mod\u00e8le de th\u00e8me. Si vous avez mis \u00e0 niveau \u00e0 partir d\u2019une version pr\u00e9c\u00e9dente, vous remarquerez qu\u2019un menu d\u00e9roulant de filtres s\u2019affiche dans le coin sup\u00e9rieur gauche. Cela vous permet de s\u00e9lectionner \u00ab All Themes \u00bb (Tous les th\u00e8mes), \u00ab Fixed Width Themes \u00bb (Th\u00e8mes \u00e0 largeur fixe), \u00ab Responsive Themes \u00bb (Th\u00e8mes r\u00e9actifs) ou \u00ab New Themes \u00bb (Nouveaux th\u00e8mes). Pour le moment, laissez-le sur \u00ab All \u00bb (Tous).<\/li>\n
  3. Dans la colonne de gauche, vous verrez en haut de la liste le mod\u00e8le de th\u00e8me \u00ab Blank \u00bb (Vierge) qui comprend d\u00e9sormais une page \u00ab Responsive \u00bb (R\u00e9actif). Il existe \u00e9galement un nouveau mod\u00e8le de th\u00e8me \u00ab Blank Responsive \u00bb (R\u00e9actif Vierge) comprenant des pages vierges \u00ab Accueil \u00bb, \u00ab Vid\u00e9o \u00bb, \u00ab Image \u00bb et \u00ab Blog \u00bb. Cliquez sur la page \u00ab Accueil \u00bb puis sur \u00ab S\u00e9lectionner \u00bb.<\/li>\n
  4. La page r\u00e9active a \u00e9t\u00e9 ajout\u00e9e au projet de site web. Vous pouvez v\u00e9rifier que la page est r\u00e9active en consultant la section \u00ab Page Layout \u00bb (Mise en page) de l’onglet Param\u00e8tres de page dans la fen\u00eatre Inspecteur. Vous devriez voir \u00ab R\u00e9actif \u00bb \u00e0 c\u00f4t\u00e9 des mots \u00ab Mise en page \u00bb.<\/li>\n
  5. En regardant la section \u00ab Mise en page \u00bb, vous remarquerez \u00e9galement que les valeurs \u00ab Largeur du contenu \u00bb et \u00ab Hauteur de l’en-t\u00eate \u00bb sont gris\u00e9es, car elles ne sont pas utilis\u00e9es en web design r\u00e9actif. La conception web ainsi que les conteneurs pleine largeur sont utilis\u00e9s \u00e0 la place.<\/li>\n
  6. Faites d\u00e9filer vers le bas de la page. Vous verrez le pied de page. Il comprend, par d\u00e9faut, un widget Responsive Row plac\u00e9 dans celui-ci. \u00c0 l’int\u00e9rieur du widget se trouve l’image \u00ab Made with Love with EverWeb \u00bb (Con\u00e7u par amour avec EverWeb) qui comprend un lien vers le site web everwebapp.com. Comme l’image n’est pas d\u00e9finie sur \u00ab Largeur \u00bb, elle doit \u00eatre plac\u00e9e dans un widget Responsive Row.<\/li>\n<\/ol>\n

    La page est maintenant pr\u00eate \u00e0 \u00eatre ajout\u00e9e \u00e0 des objets pour cr\u00e9er une page r\u00e9active. Dans le prochain article de cette s\u00e9rie, nous examinerons les outils dont vous aurez besoin pour cr\u00e9er une excellente exp\u00e9rience de page r\u00e9active !<\/p>\n

    Si vous avez une question ou un commentaire \u00e0 propos de ce blog pour d\u00e9butants, veuillez-nous en informer dans la section Commentaires ci-dessous. Nous serons ravis de vous aider !<\/p>\n","protected":false},"excerpt":{"rendered":"

    EverWeb 2.8, nouvellement sorti, apporte probablement la fonctionnalit\u00e9 la plus excitante et la plus demand\u00e9e \u00e0 ce jour : Le web design r\u00e9actif. Pour ceux qui connaissent EverWeb, vous r\u00e9aliserez rapidement qu\u2019EverWeb a toujours la m\u00eame apparence et le m\u00eame fonctionnement qu\u2019il a toujours eu. Comment cr\u00e9er un site web r\u00e9actif avec EverWeb\u00a0? Cette s\u00e9rie d\u2019articles de blog vous guidera du d\u00e9but \u00e0 la fin. N\u00e9anmoins, avant de commencer, nous devons d’abord explorer les concepts de design r\u00e9actif et de design traditionnel avant de cr\u00e9er notre premier site web r\u00e9actif … Qu\u2019est-ce que le web design r\u00e9actif ? En un […]<\/p>\n","protected":false},"author":32825,"featured_media":4368,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[264,258,265,259,249,266,261],"tags":[],"class_list":["post-4332","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-didacticiels","category-everweb-fr","category-logiciel","category-site-web-reactif","category-trucs-et-astuces","category-web-design-fr","category-widgets-fr"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.allaboutiweb.com\/fr\/wp-json\/wp\/v2\/posts\/4332\/"}],"collection":[{"href":"https:\/\/www.allaboutiweb.com\/fr\/wp-json\/wp\/v2\/posts\/"}],"about":[{"href":"https:\/\/www.allaboutiweb.com\/fr\/wp-json\/wp\/v2\/types\/post\/"}],"author":[{"embeddable":true,"href":"https:\/\/www.allaboutiweb.com\/fr\/wp-json\/wp\/v2\/users\/32825\/"}],"replies":[{"embeddable":true,"href":"https:\/\/www.allaboutiweb.com\/fr\/wp-json\/wp\/v2\/comments\/?post=4332"}],"version-history":[{"count":7,"href":"https:\/\/www.allaboutiweb.com\/fr\/wp-json\/wp\/v2\/posts\/4332\/revisions\/"}],"predecessor-version":[{"id":4361,"href":"https:\/\/www.allaboutiweb.com\/fr\/wp-json\/wp\/v2\/posts\/4332\/revisions\/4361\/"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.allaboutiweb.com\/fr\/wp-json\/wp\/v2\/media\/4368\/"}],"wp:attachment":[{"href":"https:\/\/www.allaboutiweb.com\/fr\/wp-json\/wp\/v2\/media\/?parent=4332"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.allaboutiweb.com\/fr\/wp-json\/wp\/v2\/categories\/?post=4332"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.allaboutiweb.com\/fr\/wp-json\/wp\/v2\/tags\/?post=4332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}