\n Krav f\u00f6r denna handledning
\n<\/h5>\n
\n Du m\u00e5ste ladda ner vissa bilder, vektorer och typsnitt f\u00f6r att skapa den h\u00e4r webbplatsen. Men du kan fortfarande f\u00f6lja med utan dessa tillg\u00e5ngar. F\u00f6r att organisera inneh\u00e5llet p\u00e5 r\u00e4tt s\u00e4tt, skapa en separat mapp f\u00f6r din webbplats.\n<\/p>\n
- \n
- \n
\n G\u00e5 till pexels.com<\/a> och ladda ner:\n <\/p>\n
- \n
- \n
\n 4 bilder i storleken 1160 x 480 f\u00f6r bildspel. H\u00e4r \u00e4r en sk\u00e4rmdump fr\u00e5n pexels. Du kan l\u00e4gga denna storlek i rutan ”anpassad storlek” p\u00e5 denna webbplats.\n <\/p>\n<\/li>\n
- \n
\n 6 bilder i storleken 271 x 208 f\u00f6r avsnittet ”tj\u00e4nster”.\n <\/p>\n<\/li>\n
- \n
\n 1 bild i storleken 1160 x 692 f\u00f6r avsnittet ”Kontakta oss”.\n <\/p>\n<\/li>\n<\/ul>\n<\/li>\n
- \n
\n G\u00e5 till freepik.com<\/a> och ladda ner:\n <\/p>\n
- \n
- En korsikon (du kan redigera den h\u00e4r ikonen i illustrator eller bara ladda ner png-filen fr\u00e5n feepik).\n <\/li>\n
- 6 ansiktsbilder f\u00f6r avsnittet ”Vitnesm\u00e5l”.\n <\/li>\n<\/ul>\n<\/li>\n
- \n
\n G\u00e5 till subtlepatterns.com<\/a> och ladda ner ”brickwall”-m\u00f6nstret f\u00f6r ”Testimonials”-sektionen.\n <\/p>\n<\/li>\n
- \n
\n N\u00e4r du forts\u00e4tter med den h\u00e4r handledningen kommer jag att ber\u00e4tta hur du laddar ner de n\u00f6dv\u00e4ndiga typsnitten (det kan g\u00f6ras i Muse).\n <\/p>\n<\/li>\n
- \n
\n Anv\u00e4nd dummytexten fr\u00e5n lipsum.com<\/a>.\n <\/p>\n<\/li>\n<\/ul>\n
\n L\u00c5T OSS B\u00d6RJA!\n<\/p>\n
\n F\u00f6rbereder arbetsutrymme och s\u00e4tter upp rubriken\n<\/p>\n
\n 1 Skapa en ny webbplats genom att g\u00e5 till Arkiv > Ny webbplats (Ctrl+N) och ange v\u00e4rdena enligt nedan. Gl\u00f6m inte att markera kryssrutan som s\u00e4ger ”Sticky Footer”. Klicka p\u00e5 OK s\u00e5 f\u00e5r du PLAN-l\u00e4get. Dubbelklicka p\u00e5 A-Master l\u00e4ngst ner i ett gr\u00e5tt omr\u00e5de. Du kommer att skapa allt p\u00e5 denna huvudsida.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235b3f0862.webp\")
<\/a><\/p>\n\n 2 V\u00e4lj textverktyg fr\u00e5n verktygsl\u00e5dan som finns till v\u00e4nster i programf\u00f6nstret. Klicka och dra p\u00e5 duken eller sidan f\u00f6r att skapa en textruta. G\u00e5 till textpanelen (Ctrl+T), under rullgardinsmenyn teckensnitt, leta efter webbteckensnitt och v\u00e4lj ”L\u00e4gg till webbteckensnitt” och ladda ner f\u00f6ljande typsnitt:\n<\/p>\n
- \n
- Rametto One\n <\/li>\n
- Chunk\n <\/li>\n
- Questrial\n <\/li>\n
- Raleway\n <\/li>\n
- \u00c4del\n <\/li>\n
- PT Utan\n <\/li>\n
- Ubuntu\n <\/li>\n
- Hummer\n <\/li>\n<\/ul>\n
\n N\u00e4r du har laddat ner dessa typsnitt, ta bort den h\u00e4r textrutan.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235b5afeaf.webp\")
<\/a><\/p>\n\n 3 G\u00e5 till panelen Lager p\u00e5 h\u00f6ger sida av programf\u00f6nstret. Om det inte finns d\u00e4r, g\u00e5 till F\u00f6nster-menyn > Lager. Du kommer att se ett lager som heter Layer 1 (bl\u00e5 f\u00e4rg). Detta \u00e4r standardlagret och allt du skapar eller placerar p\u00e5 duken g\u00e5r in d\u00e4r. Dubbelklicka p\u00e5 det h\u00e4r lagret och namnge det som ”Header”.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235b8cad84.webp\")
<\/a><\/p>\n\n 4 Inuti lagerpanelen klickar du p\u00e5 den lilla vikta pappersikonen i det nedre h\u00f6gra h\u00f6rnet. Genom att klicka p\u00e5 detta skapas ett nytt lager med r\u00f6d f\u00e4rg. \u00c5terigen, dubbelklicka p\u00e5 det h\u00e4r lagret och byt namn p\u00e5 det till ”Inneh\u00e5ll”.\n<\/p>\n
\n 5 Klicka och dra detta inneh\u00e5llslager och placera det under rubriklagret. Vi har gjort det h\u00e4r f\u00f6r att vi vill att v\u00e5r header ska vara p\u00e5 toppen av allt.\n<\/p>\n
\n 6 V\u00e4lj rubriklager och komprimera lagerpanelen.\n<\/p>\n
\n 7 V\u00e4lj rektangelverktyg fr\u00e5n verktygsl\u00e5dan eller tryck p\u00e5 'm' p\u00e5 tangentbordet.\n<\/p>\n
\n 8 Rita en liten rektangel p\u00e5 duken och se till att dess kantf\u00e4rg \u00e4r bl\u00e5, vilket indikerar att det h\u00e4r objektet \u00e4r inuti rubriklagret.\n<\/p>\n
\n 9 G\u00e5 till Transform-panelen l\u00e4ngst upp till h\u00f6ger i programf\u00f6nstret. L\u00e4mna bredd (W) och l\u00e4gg 50 inv\u00e4ndigt h\u00f6jd (H) f\u00e4lt och tryck enter. (Oroa dig inte f\u00f6r X- och Y-v\u00e4rden.)\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235bc3e592.webp\")
<\/a><\/p>\n\n 10 L\u00e4ngst upp p\u00e5 sidan ser du tv\u00e5 rader med bl\u00e5 f\u00e4rg (visas i sk\u00e4rmbilden nedan). Dessa kallas ”guider”. N\u00e4r du h\u00e5ller muspekaren \u00f6ver den f\u00f6rsta guiden st\u00e5r det ”\u00d6verst p\u00e5 sidan, dra f\u00f6r att justera utfyllnad ovanf\u00f6r sidan” och den andra s\u00e4ger ”Rubrik, dra f\u00f6r att justera position”. Det \u00e4r mycket viktigt att s\u00e4tta upp dessa guider i b\u00f6rjan.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235bf23e62.webp\")
<\/a><\/p>\n\n 11 Nu, n\u00e4r vi har skapat en rektangel med H=50, klicka, h\u00e5ll och dra guiden '\u00f6verst p\u00e5 sidan' tills rutan som visas nedan n\u00e4r du b\u00f6rjar dra kommer att s\u00e4ga Y=50.\n<\/p>\n
\n 12 P\u00e5 samma s\u00e4tt, dra rubrikguiden ovan till guiden \u00f6verst p\u00e5 sidan tills det st\u00e5r Y=0. Vi har gjort detta f\u00f6r att st\u00e4lla in v\u00e5rt rubrikomr\u00e5de. (Du kanske vill experimentera med att placera dessa guider p\u00e5 olika positioner f\u00f6r olika resultat, men det \u00e4r bra f\u00f6r nu.)\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235c2cc503.webp\")
<\/a><\/p>\n\n 13 V\u00e4lj rektangeln som vi just skapade, dra den till rubrikomr\u00e5det s\u00e5 att den passar ordentligt.\n<\/p>\n
\n 14 Nu m\u00e5ste vi \u00f6ka rektangelns bredd och g\u00f6ra den till 100 % s\u00e5 att rubriken ser perfekt ut p\u00e5 alla sk\u00e4rmstorlekar. Expandera rektangeln till b\u00e5da kanterna och se till att den sn\u00e4pper med kanterna. En orange guide kommer att visas som s\u00e4kerst\u00e4ller att objektet har kn\u00e4ppts. N\u00e4r du \u00f6kar rektangelns bredd kommer popup-f\u00f6nstret att s\u00e4ga W=100 % eller W=1160 n\u00e4r du n\u00e5r kanten.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235c5f0fa0.webp\")
<\/a><\/p>\n\n 15 Beh\u00e5ll rektangeln markerad, klicka p\u00e5 ordet Fyll under applikationsmenyn och st\u00e4ll in alternativen enligt f\u00f6ljande. V\u00e4lj den f\u00f6rsta f\u00e4rgen som Svart och den andra f\u00e4rgen: R=37, G=37, B=37.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235c90d279.webp\")
<\/a><\/p>\n\n 16 G\u00e5 till Arkiv > Spara webbplats. Spara din webbplats varje g\u00e5ng du g\u00f6r en \u00e4ndring.\n<\/p>\n
\n 17 Skapa en textruta och skriv in \u2013 'example.com' och \u00e4ndra dess formatering enligt nedan.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235cc3e77d.webp\")
<\/a><\/p>\n\n 18 Justera storleken p\u00e5 textrutan s\u00e5 att hela texten visas p\u00e5 en rad. Markera den h\u00e4r textrutan och dra den \u00f6ver den svarta rektangeln. Rikta in den mot rektangelns vertikala mitt (en bl\u00e5 linje talar om n\u00e4r den \u00e4r centrerad) och f\u00e4st den mot den v\u00e4nstra kanten som visas nedan.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235cebd543.webp\")
<\/a><\/p>\n\n 19 Skapa en textruta och skriv in \u2013 'Hem'. \u00c4ndra dess formatering enligt f\u00f6ljande. Justera textrutans bredd och h\u00f6jd d\u00e4refter. Du kan ocks\u00e5 g\u00f6ra detta fr\u00e5n transformpanelen. Min \u00e4r W=52, H=17.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235d124081.webp\")
<\/a><\/p>\n\n 20 Kopiera och klistra in den h\u00e4r textrutan och skriv 'Tj\u00e4nster' i den nya. Justera bredden. Dra och placera den h\u00e4r textrutan bredvid hemmet med mycket mindre skillnad mellan de tv\u00e5. \u00c5terigen kommer guiderna att hj\u00e4lpa dig i korrekt justering.\n<\/p>\n
\n 21 Kopiera och klistra in den h\u00e4r textrutan f\u00f6r fyra g\u00e5nger mer och skriv \u2013 Varf\u00f6r oss, Rekommendationer, Kontakta oss och Nyhetsbrev. Placera dessa textrutor en efter en med lika mellanrum bredvid ”tj\u00e4nster”.\n<\/p>\n
\n 22 Med markeringsverktyget valt och skifttangenten nedtryckt, markera alla dessa textrutor en efter en. G\u00e5 till textpanelen, \u00e4ndra f\u00e4rgen till vit. V\u00e4lj gruppen av dessa rutor och placera den \u00f6ver rubrikrektangeln. (Vertikalt centrerad och justerad med h\u00f6ger sidkant). Detta \u00e4r v\u00e5r meny.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235d30933a.webp\")
<\/a><\/p>\n\n 23 \u00c5terigen, med markeringsverktyget valt och skifttangenten nedtryckt, markera dessa textrutor, rektangeln och textrutan example.com. L\u00e4ngst upp till h\u00f6ger ser du ett alternativ som heter Pin. Klicka p\u00e5 den \u00f6vre mittrutan f\u00f6r att f\u00e4sta dessa objekt. Detta inneb\u00e4r att n\u00e4r anv\u00e4ndaren rullar igenom din webbplats kommer denna rubrik att f\u00f6rbli fixerad \u00f6verst. Det \u00e4r mycket anv\u00e4ndbart eftersom anv\u00e4ndaren inte beh\u00f6ver rulla hela v\u00e4gen upp bara f\u00f6r att v\u00e4lja ett annat alternativ.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235d5928ff.webp\")
<\/a><\/p>\n\n 24 G\u00e5 till panelen Lager och l\u00e5s rubriklagret. Detta kan g\u00f6ras genom att klicka i rutan till v\u00e4nster om lagernamnet. N\u00e4r du l\u00e5ser ett lager eller n\u00e5got objekt kommer det inte att p\u00e5verka dess utseende men du kommer inte att kunna v\u00e4lja dessa objekt om du inte l\u00e5ser upp. Vi har gjort detta f\u00f6r att helt eliminera chanserna att av misstag flytta f\u00f6rem\u00e5len.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235d843d05.webp\")
<\/a><\/p>\n\n 25 V\u00e4lj inneh\u00e5llslager och komprimera lagerpanelen.\n<\/p>\n
\n Uppr\u00e4tta bildspel
\n<\/h3>\n\n 26 G\u00e5 till widgetbiblioteket p\u00e5 h\u00f6ger sida av programf\u00f6nstret. Om det inte finns d\u00e4r, g\u00e5 till F\u00f6nster-menyn > v\u00e4lj Widgets-bibliotek. Expandera avsnittet ”bildspel” och v\u00e4lj ”Tom”. Klicka och dra objektet till duken. Ett svart f\u00f6nster med alternativ f\u00f6r bildspel dyker upp.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235db65202.webp\")
<\/a><\/p>\n\n 27 Se till att alternativen \u00e4r inst\u00e4llda enligt bilden nedan. Under delar l\u00e4ngst ner, avmarkera kryssrutorna som s\u00e4ger F\u00f6reg\u00e5ende, N\u00e4sta, Bildtexter och R\u00e4knare. Vi beh\u00f6ver inga av dessa.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235deacba4.webp\")
<\/a><\/p>\n\n 28 Klicka var som helst p\u00e5 arbetsytan f\u00f6r att f\u00e5 det h\u00e4r popup-f\u00f6nstret att f\u00f6rsvinna. Klicka nu f\u00f6rsiktigt inuti bildspelet. Genom att klicka p\u00e5 den en g\u00e5ng ser du att 'Bildspel' har skrivits i 'typ av aktuellt urvalsomr\u00e5de'. Den finns i det \u00f6vre v\u00e4nstra h\u00f6rnet under applikationsmenyn. Detta omr\u00e5de l\u00e5ter dig se vad du har valt. Det \u00e4r en mycket anv\u00e4ndbar funktion n\u00e4r layouten blir komplicerad. Klicka igen och du kommer att m\u00e4rka att beskrivningen s\u00e4ger ”Hj\u00e4ltebild”.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235e121ebd.webp\")
<\/a><\/p>\n\n 29 \u00d6ka bredden p\u00e5 hj\u00e4ltebilden manuellt genom att expandera den fr\u00e5n mitten. F\u00e4st den mot b\u00e5da kanterna p\u00e5 sidan (f\u00f6r att f\u00e5 den till 100 % bredd) och l\u00e4ngst ner p\u00e5 sidhuvudrektangeln som visas nedan.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235e337282.webp\")
<\/a><\/p>\n\n 30 G\u00e5 till transformpanelen och s\u00e4tt H=500.\n<\/p>\n
\n 31 \u00d6ppna bildspelsalternativen igen genom att klicka p\u00e5 den lilla bl\u00e5 cirkeln med vit rektangel inuti (den finns i det \u00f6vre h\u00f6gra h\u00f6rnet av bildspelet).\n<\/p>\n
\n 32 Klicka p\u00e5 mappikonen bredvid alternativet ”L\u00e4gg till bilder…”, bl\u00e4ddra efter bilderna som vi laddade ner f\u00f6r bildspel. V\u00e4lj alla fyra och klicka p\u00e5 \u00f6ppna.\n<\/p>\n
\n 33 G\u00e5 till Arkiv > v\u00e4lj ”F\u00f6rhandsgranska sida i webbl\u00e4sare” eller Ctrl+Skift+E och se hur ditt bildspel kommer att fungera n\u00e4r sidan \u00e4r live. Jag rekommenderar dig att memorera de kortkommandon som jag anv\u00e4nder i den h\u00e4r handledningen. Att g\u00f6ra detta hj\u00e4lper dig att p\u00e5skynda din designprocess.\n<\/p>\n
\n Skapar avsnittet ”Tj\u00e4nster”.
\n<\/h3>\n\n 34 Nu n\u00e4r vi har st\u00e4llt in v\u00e5r rubrik och bildspel \u00e4r det dags att skapa sektioner f\u00f6r varje objekt som vi lagt till i v\u00e5r meny. L\u00e5t oss komma ig\u00e5ng med ”tj\u00e4nster”. Skapa en textruta och skriv tj\u00e4nster i den (alla bokst\u00e4ver sm\u00e5) och \u00e4ndra dess formatering enligt f\u00f6ljande.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235e4de8f0.webp\")
<\/a><\/p>\n\n 35 Dubbelklicka i den h\u00e4r textrutan och v\u00e4lj bara bokstaven 'I'. \u00c4ndra dess teckensnitt till ”Chunk” och l\u00e4mna allt detsamma. Justera h\u00f6jden p\u00e5 denna textruta. N\u00e4r du minskar dess h\u00f6jd visas en streckad linje vid en viss punkt och rutan blir inte kortare. Minska inte storleken efter det. Detta \u00e4r den l\u00e4gsta m\u00f6jliga h\u00f6jden med denna teckenstorlek.\n<\/p>\n
\n 36 Med textrutan markerad, g\u00e5 till transformeringspanelen och st\u00e4ll in rotationsvinkeln till -90 grader (90 grader negativ).\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235e695d45.webp\")
<\/a><\/p>\n\n 37 Flytta textrutan till v\u00e4nster sida av duken som visas nedan.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235e88e04c.webp\")
<\/a><\/p>\n\n 38 Du kanske vill zooma ut lite f\u00f6r att se allt inneh\u00e5ll p\u00e5 en g\u00e5ng eller f\u00f6r att justera objekten ordentligt. F\u00f6r att g\u00f6ra detta, f\u00f6rs\u00f6k att skriva olika v\u00e4rden (mindre \u00e4n 100%) i zoomniv\u00e5sektionen h\u00f6gst upp. N\u00e4r du har skrivit in v\u00e4rdet trycker du p\u00e5 enter.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235eab2968.webp\")
<\/a><\/p>\n\n 39 G\u00e5 till Arkiv > v\u00e4lj 'Placera'. V\u00e4lj den f\u00f6rsta bilden som vi laddade ner f\u00f6r v\u00e5r tj\u00e4nstsektion. Klicka p\u00e5 \u00f6ppna.\n<\/p>\n
\n 40 Mark\u00f6ren kommer att \u00e4ndra sitt utseende till en platspistol laddad med en bild. Klicka p\u00e5 duken f\u00f6r att placera den. Flytta och placera den s\u00e5 att den ligger i linje med toppen av textrutan ”tj\u00e4nster”.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235ed9df42.webp\")
<\/a><\/p>\n\n 41 Kopiera den h\u00e4r bilden och klistra in den tv\u00e5 g\u00e5nger. V\u00e4lj dessa inklistrade bilder en efter en och rikta in dem p\u00e5 samma avst\u00e5nd som den f\u00f6rsta bilden.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235f1531ed.webp\")
<\/a><\/p>\n\n 42 V\u00e4lj den andra bilden, h\u00f6gerklicka p\u00e5 den och v\u00e4lj 'ers\u00e4tt bild' (det \u00e4r det sista alternativet). Bl\u00e4ddra efter den andra bilden och klicka p\u00e5 \u00f6ppna. Byt ut den tredje bilden ocks\u00e5.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235f44fa27.webp\")
<\/a><\/p>\n\n 43 Skapa textrutor f\u00f6r information om tj\u00e4nster och anv\u00e4nd formatering f\u00f6r rubriker och stycken enligt nedan. Guiderna hj\u00e4lper dig att rikta in dem korrekt.\n<\/p>\n
- \n
- \n F\u00f6r rubriker:<\/strong> Teckensnitt: Raleway Fet, Storlek=20, F\u00e4rg: Svart, V\u00e4nsterjusterad och 100 % ledande.\n <\/li>\n
- \n F\u00f6r stycken:<\/strong> Teckensnitt: Questrial, Storlek=15, F\u00e4rg: R=67 G=67 B=67, V\u00e4nsterjusterad och 120 % ledande.\n <\/li>\n<\/ul>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235f67e871.webp\")
<\/a><\/p>\n\n 44 Placera ytterligare tre bilder som vi gjorde i tidigare steg och skapa p\u00e5 samma s\u00e4tt beskrivningstext f\u00f6r dem. Du b\u00f6r ha f\u00f6ljande resultat.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235f8b3f61.webp\")
<\/a><\/p>\n\n Slutresultat av avsnittet ”Tj\u00e4nster”.
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235fb6b3b2.webp\")
<\/a><\/p>\n\n Skapa avsnittet ”Varf\u00f6r oss”.
\n<\/h3>\n\n 45 N\u00e4sta \u00e4r avsnittet ”Varf\u00f6r oss”. Den h\u00e4r \u00e4r lite komplicerad. Var noga med att v\u00e4lja objekt. Skapa f\u00f6rst en rektangel med 100 % bredd och H=996. Fyll den med en f\u00e4rg (R=47, G=48, B=55). H\u00f6gerklicka p\u00e5 den h\u00e4r rektangeln > Ordna > v\u00e4lj ”skicka bak\u00e5t” (inte skicka bak\u00e5t).\n<\/p>\n
\n 46 Ut\u00f6ka ditt arbetsomr\u00e5de genom att klicka och dra guiden 'botten p\u00e5 sidan' s\u00e5 att du har tillr\u00e4ckligt med utrymme f\u00f6r att skapa inneh\u00e5ll som kommer att placeras p\u00e5 den h\u00e4r rektangeln vi just skapade.\n<\/p>\n
\n 47 Scrolla ner till vitt tomt utrymme och g\u00f6r ytterligare en rektangel av W=351 och H=351. Fyll den med vit f\u00e4rg och inget streck.\n<\/p>\n
\n 48 G\u00e5 till alternativet 'h\u00f6rnradie' (det finns bredvid streck under applikationsmenyn). Klicka p\u00e5 alla h\u00f6rn f\u00f6r att g\u00f6ra dem runda och l\u00e4gg 500 i rutan bredvid.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235fd21bf3.webp\")
<\/a><\/p>\n\n 49 Du kommer att ha en cirkel. Dra denna cirkel till rektangeln och justera den enligt f\u00f6ljande. Bredvid h\u00f6rnradien finns ett alternativ som heter 'Opacitet'. Med cirkeln vald, l\u00e4gg 14 i denna ruta.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235ff30452.webp\")
<\/a><\/p>\n\n 50 Skapa en textruta och skriv in \u2013 varf\u00f6r vi (alla sm\u00e5). \u00c4ndra dess teckensnitt till Rammetto One, storlek=100, f\u00e4rg R=241 G=244 B=247, ledande 100 % och g\u00f6r det mittjusterat. Placera den h\u00e4r textrutan inuti cirkeln och justera den ordentligt.\n<\/p>\n
\n 51 Nu ska vi skapa de streckade linjerna. G\u00f6r en rektangel av W=9 och H=9, ingen fyllning. Klicka p\u00e5 ordet 'stroke' bredvid fyll. V\u00e4lj f\u00e4rg R=241 G=244 B=247. Klicka p\u00e5 kedjeikonen f\u00f6r att bryta den och s\u00e4tta ”1” i nedre slagvikt.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638236015d3b8.webp\")
<\/a><\/p>\n\n 52 Kopiera denna rektangel med ena sidan och klistra in den flera g\u00e5nger. Ordna dem p\u00e5 en rad (zooma in lite med zoomverktyget om du har sv\u00e5rt att se dessa rektanglar). N\u00e4r du har f\u00e5tt \u00f6nskad l\u00e4ngd p\u00e5 din streckade linje, v\u00e4lj alla dessa rektanglar, h\u00f6gerklicka och v\u00e4lj ”Grupp”. Kopiera och klistra in den h\u00e4r gruppen f\u00f6r andra streckade linjer.\n<\/p>\n
\n 53 F\u00f6r lutande streckade linjer, prova att s\u00e4tta olika rotationsvinklar i transformationspanelen. Jag har anv\u00e4nt 150 och 30 grader. Du m\u00e5ste ta bort n\u00e5gra rektanglar fr\u00e5n denna grupp f\u00f6r att f\u00e5 kortare l\u00e4ngder. Justera dessa linjer n\u00e4ra cirkeln som visas nedan.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823602da73a.webp\")
<\/a><\/p>\n\n 54 Nu ska vi l\u00e4gga till lite mer text f\u00f6r siffror, rubriker och beskrivningar. Anv\u00e4nd f\u00f6ljande inst\u00e4llningar f\u00f6r var och en av dem och justera dessa textrutor som visas nedan.\n<\/p>\n
- \n
- \n F\u00f6r siffror:<\/strong> Font=Rammetto One, F\u00e4rg: R=196 G=214 B=193, mittjusterad och 100 % ledande, storlek: 200 (f\u00f6r nummer '1'), 160 (f\u00f6r nummer '2' och '3') och 120 (f\u00f6r nummer '4' och '5').\n <\/li>\n
- \n F\u00f6r rubriker:<\/strong> Font=Raleway Fet, Storlek=18, F\u00e4rg:Vit, Centerjusterad och 100 % ledande.\n <\/li>\n
- \n F\u00f6r stycken:<\/strong> Font=Questrial, Storlek=16, F\u00e4rg: R=241 G=244 B=247, Centerjusterad och 120 % ledande.\n <\/li>\n<\/ul>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823605a97a7.webp\")
<\/a><\/p>\n\n Slutresultat av avsnittet ”Varf\u00f6r oss”.
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382360890068.webp\")
<\/a><\/p>\n\n Skapa avsnittet ”Vitnesm\u00e5l”.
\n<\/h3>\n\n 55 \u00c5terigen, skapa lite utrymme att arbeta genom att dra ner l\u00e4ngst ned p\u00e5 sidguiden. G\u00f6r en rektangel med 100 % bredd och H=486.\n<\/p>\n
\n 56 Med rektangeln vald, klicka p\u00e5 ordet ”Fyll” och klicka p\u00e5 ”L\u00e4gg till bild” bredvid bildalternativet. Bl\u00e4ddra efter tegelv\u00e4ggsm\u00f6nsterbild som vi laddade ner. Under alternativet Anpassning v\u00e4ljer du ”Kakel” f\u00f6r att fylla hela rektangeln med denna textur.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382360b46ae7.webp\")
<\/a><\/p>\n\n 57 Scrolla ner till tomt utrymme och g\u00f6r en textruta med storleken W=406, H=289 med hj\u00e4lp av transformpanelen. Skriv in \u2013 ”vad andra har att s\u00e4ga” (alla sm\u00e5). \u00c4ndra dess teckensnitt till Rammetto One, storlek=70, g\u00f6r det v\u00e4nsterjusterat, f\u00e4rgv\u00e4rdena R=37 G=37 B=37 och ledande=100%.\n<\/p>\n
\n 58 Med denna textruta markerad, klicka p\u00e5 ordet streck, anv\u00e4nd h\u00f6ger streck med vikt ett och svart f\u00e4rg p\u00e5 det. Dra den h\u00e4r textrutan och l\u00e4gg den \u00f6ver rektangeln med tegelv\u00e4ggsm\u00f6nster.\n<\/p>\n
\n 59 N\u00e4sta steg \u00e4r att l\u00e4gga till rekommendationer fr\u00e5n kunder. F\u00f6r detta kommer vi att anv\u00e4nda vektorbilderna med runda ansikten som vi laddade ner fr\u00e5n freepik.com. \u00c5terigen, kom ner till vitt tomt utrymme s\u00e5 att du kan anpassa din komposition ordentligt.\n<\/p>\n
\n 60 G\u00e5 till Widgets-biblioteket och dra 'Blank' fr\u00e5n kompositionsdelen till arbetsytan. Klicka p\u00e5 plustecknet f\u00f6r att l\u00e4gga till ytterligare tre utl\u00f6sare. V\u00e4lj f\u00f6rsiktigt den f\u00f6rsta triggern och s\u00e4kerst\u00e4ll ditt val med hj\u00e4lp av aktuellt urvalsomr\u00e5de som s\u00e4ger trigger. Och precis bredvid finns det ett alternativ som heter ”Aktiv”. Klicka p\u00e5 detta f\u00f6r att expandera. V\u00e4lj ”Normalt” tillst\u00e5nd och v\u00e4lj ”ingen fyllning” och ”ingen linje” f\u00f6r detta tillst\u00e5nd. Upprepa detta f\u00f6r varje tillst\u00e5nd som \u00e4r Rollover, Mouse Down och Active. G\u00e5 till transformpanelen med den f\u00f6rsta triggern vald och s\u00e4tt W=10, H=10.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382360de4579.webp\")
<\/a><\/p>\n\n 61 Upprepa f\u00f6reg\u00e5ende steg f\u00f6r varje trigger vi har. Detta inneb\u00e4r att du inte anv\u00e4nder n\u00e5gon fyllning och ingen linje f\u00f6r varje tillst\u00e5nd och omvandlar utl\u00f6sarna till storleken 10 x 10. Flytta avtryckarna n\u00e4rmare varandra.\n<\/p>\n
\n 62 Nu. Vi kommer att anpassa m\u00e5len f\u00f6r var och en av dessa utl\u00f6sare. Den stora rektangeln du ser \u00e4r m\u00e5let. V\u00e4lj f\u00f6rsta utl\u00f6saren och v\u00e4lj dess normala tillst\u00e5nd fr\u00e5n tillst\u00e5ndspanelen. D\u00e4refter v\u00e4ljer du m\u00e5let f\u00f6r denna utl\u00f6sare och till\u00e4mpar ingen fyllning och ingen linje f\u00f6r varje tillst\u00e5nd. G\u00e5 sedan till transformpanelen och g\u00f6r m\u00e5let W=360, H=370.\n<\/p>\n
\n 63 Upprepa f\u00f6reg\u00e5ende steg f\u00f6r varje m\u00e5l. Se bara till att du f\u00f6rst v\u00e4ljer utl\u00f6saren, g\u00f6r det till normalt tillst\u00e5nd, v\u00e4ljer sedan respektive m\u00e5l med normalt tillst\u00e5nd och applicerar sedan ingen fyllning och inget slag. Du beh\u00f6ver inte \u00e4ndra storleken p\u00e5 varje m\u00e5l. G\u00f6r det bara f\u00f6r en och det kommer att till\u00e4mpas p\u00e5 alla.\n<\/p>\n
\n 64 Nu b\u00f6rjar vi l\u00e4gga till inneh\u00e5ll till den h\u00e4r kompositionen. G\u00e5 till Arkiv > Placera och \u00f6ppna den f\u00f6rsta ansiktsbilden och placera den utanf\u00f6r kompositionen. Dra den h\u00e4r bilden och placera den i kompositionen nu. Du kommer att se att en bl\u00e5 cirkel visas i det \u00f6vre h\u00f6gra h\u00f6rnet som indikerar att den h\u00e4r bilden nu \u00e4r en del av kompositionen.\n<\/p>\n
\n 65 Skapa tre textrutor \u2013 en f\u00f6r personens namn, en f\u00f6r hans\/hennes beteckning och en f\u00f6r uttalandet eller recensionen. Anv\u00e4nd formateringen enligt nedan och placera dessa textrutor i kompositionen. Se bara till att var och en av dem har en bl\u00e5 cirkel i h\u00f6rnet.\n<\/p>\n
- \n
- \n F\u00f6r personens namn:<\/strong> Teckensnitt: Nobile Medium Kursiv, storlek=18, F\u00e4rg: R=37 G=37 B=37, mittjusterad och 100 % inledande.\n <\/li>\n
- \n F\u00f6r beteckning:<\/strong> Teckensnitt: Nobile, storlek=15, F\u00e4rg: R=37 G=37 B=37, mittjusterad och 100 % ledande.\n <\/li>\n
- \n F\u00f6r uttalanden (med inverterade kommatecken):<\/strong> Teckensnitt: PT Sans Italic, storlek=18, f\u00e4rg: R=69 G=64 B=68, mittjusterat och 100 % inledande.\n <\/li>\n<\/ul>\n
\n 66 Med ansiktsbilden vald, applicera viktdrag 4 p\u00e5 varje sida, f\u00e4rg: vit, runda alla h\u00f6rn och \u00f6ka radien tills den sveper runt bilden. Jag anv\u00e4nder 100 som h\u00f6rnradier.\n<\/p>\n
\n 67 G\u00e5 till 'Effekter' (finns bredvid alternativet f\u00f6r rundare h\u00f6rn) och markera kryssrutan 'skugga'. S\u00e4tt v\u00e4rdena som; F\u00e4rg=svart, opacitet=37%, osk\u00e4rpa=12, vinkel=78 och avst\u00e5nd=5.\n<\/p>\n
\n 68 Upprepa de f\u00f6reg\u00e5ende stegen (fr\u00e5n 64 till 67) f\u00f6r att l\u00e4gga till inneh\u00e5ll till varje m\u00e5l och spara \u00e4ndringarna (Ctrl+S). L\u00e4gg denna komposition \u00f6ver rektangeln med tegelv\u00e4ggsm\u00f6nster.\n<\/p>\n
\n 69 V\u00e4lj nu hela kompositionen (se till med aktuellt urvalsomr\u00e5de) och ut\u00f6ka dess alternativ genom att klicka p\u00e5 den lilla bl\u00e5 cirkeln. St\u00e4ll in alternativen enligt nedan. Tryck p\u00e5 Ctrl+Skift+E och se om det fungerar bra.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382361123532.webp\")
<\/a><\/p>\n\n 70 Du b\u00f6r f\u00e5 f\u00f6ljande resultat.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382361448e2e.webp\")
<\/a><\/p>\n\n Slutresultat av avsnittet ”Vitnesm\u00e5l”.
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823618421c8.webp\")
<\/a><\/p>\n\n Skapa avsnittet ”Kontakta oss”.
\n<\/h3>\n\n 71 N\u00e4sta avsnitt \u00e4r Kontakta oss. Vi l\u00e4gger till en bakgrundsbild, ett formul\u00e4r och n\u00e5gra textrutor i det h\u00e4r avsnittet. G\u00f6r f\u00f6rst en rektangel med 100 % bredd och H=692. Fyll den med en bild som vi laddade ner f\u00f6r det h\u00e4r avsnittet och v\u00e4lj ”skala att fylla” under Anpassning. \u00c4ndra dess opacitet till 72 %.\n<\/p>\n
\n 72 G\u00f6r ytterligare en rektangel med samma bredd och h\u00f6jd och fyll den med en gradient. S\u00e4tt gradientv\u00e4rdena som; Opacitet=90% till 46%, F\u00e4rg: Svart till R=69 G=64 B=68, Focal Point=66%, Riktning: Horisontell och Storlek: automatisk. S\u00e4tt den h\u00e4r rektangeln \u00f6ver bilden och se till att den sn\u00e4pper fast med varje kant.\n<\/p>\n
\n 73 G\u00e5 till widgetbiblioteket. Under formul\u00e4r, v\u00e4lj ”enkel kontakt” och dra den p\u00e5 duken. Ett f\u00f6nster med formul\u00e4ralternativ dyker upp. Ange formul\u00e4rets namn: Kontakta oss-formul\u00e4ret, e-posta till: l\u00e4gg din e-postadress d\u00e4r du vill ta emot information som bes\u00f6karna har angett, Efter s\u00e4ndning: v\u00e4lj 'h\u00e5ll dig p\u00e5 aktuell sida'. Det sista alternativet \u00e4r 'Redigera tillsammans'. Se till att det \u00e4r markerat. P\u00e5 s\u00e5 s\u00e4tt m\u00e5ste du bara g\u00f6ra \u00e4ndringar i ett f\u00e4lt och de kommer att till\u00e4mpas p\u00e5 alla. Klicka var som helst p\u00e5 duken f\u00f6r att f\u00e5 alternativrutan att f\u00f6rsvinna.\n<\/p>\n
\n 74 V\u00e4lj formul\u00e4ret. Klicka p\u00e5 etiketten ”Namn” och klicka p\u00e5 den igen tills du ser ”Etikett” skrivet i det aktuella urvalsomr\u00e5det. Tryck p\u00e5 radera. Upprepa detta f\u00f6r e-post- och meddelandeetiketter och ta bort dem.\n<\/p>\n
\n 75 V\u00e4lj formul\u00e4ret igen och v\u00e4lj det f\u00f6rsta formul\u00e4rf\u00e4ltet som s\u00e4ger 'Ange namn' tills du ser 'Textinmatning' i det aktuella urvalsomr\u00e5det. Applicera ingen fyllning och bottenstr\u00e4cka (vikt en och f\u00e4rg vit) f\u00f6r varje tillst\u00e5nd, det vill s\u00e4ga fr\u00e5n Tom till Fokus. F\u00f6r feltillst\u00e5ndet, v\u00e4lj ingen fyllning och nedre streck med r\u00f6d f\u00e4rg med vikt 1.\n<\/p>\n
\n 76 Efter det, med e-postf\u00e4ltet markerat > v\u00e4lj dess tomma tillst\u00e5nd igen och anpassa texttypsnittet och f\u00e4rgen f\u00f6r varje tillst\u00e5nd enligt nedan.\n<\/p>\n
- \n
- \n F\u00f6r tom, icke-tom och fokustillst\u00e5nd:<\/strong> Teckensnitt: Questrial, storlek=14, f\u00e4rg: vit, v\u00e4nsterjusterad, 100 % ledande och ingen kursiv stil.\n <\/li>\n
- \n F\u00f6r rollover-tillst\u00e5nd:<\/strong> \u00e4ndra bara textf\u00e4rgen till R=196 G=196 B=196 och ingen kursiv stil.\n <\/li>\n
- \n F\u00f6r feltillst\u00e5nd:<\/strong> \u00e4ndra textf\u00e4rgen till r\u00f6d och utan kursiv stil.\n <\/li>\n<\/ul>\n
\n 77 Klicka och v\u00e4lj Skicka-knappen. V\u00e4lj dess normala tillst\u00e5nd, runda alla h\u00f6rn med 40 radier och \u00f6ka dess bredd som visas i sk\u00e4rmdumpen nedan. \u00c4ndra dess teckensnitt till Raleway Bold, storlek=20, mittjusterad, f\u00e4rg: R=241 G=244 B=247, ledande: justera texten ”skicka” i mitten av knappen genom att \u00f6ka detta v\u00e4rde (jag har anv\u00e4nt 130%) .\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382361be815c.webp\")
<\/a><\/p>\n\n 78 \u00c4ndra streckf\u00e4rgen och textf\u00e4rgen till gr\u00e5tt (R=127 G=127 B=127) f\u00f6r dess roll-over- och mus ned-tillst\u00e5nd. \u00c4ndra slutligen streck och textf\u00e4rg till himmelsbl\u00e5 (R=41 G=171 B=226) f\u00f6r att det ska skickas p\u00e5g\u00e5r.\n<\/p>\n
\n 79 N\u00e4r du v\u00e4ljer ”skicka p\u00e5g\u00e5r” f\u00f6r den h\u00e4r inl\u00e4mningsknappen, ser du att det finns en annan textruta som s\u00e4ger ”skicka in formul\u00e4r…”. Markera den h\u00e4r rutan och v\u00e4lj dess status ”S\u00e4ndning p\u00e5g\u00e5r”. \u00c4ndra teckensnittet till Questrial, storlek=14, f\u00e4rg: gr\u00e5, mittjusterad och ingen kursiv. V\u00e4lj dess ”skicka framg\u00e5ng”-tillst\u00e5nd och \u00e4ndra textf\u00e4rgen till himmelsbl\u00e5 (ingen kursiv stil). V\u00e4lj dess ”skicka fel”-l\u00e4ge och \u00e4ndra textf\u00e4rgen till r\u00f6d (ingen kursiv stil). Kontaktformul\u00e4ret \u00e4r klart.\n<\/p>\n
\n 80 G\u00f6r tv\u00e5 textrutor. Skriv in \u2013 kontakta oss och p\u00e5 den andra raden skriver du ”alla f\u00e4lt \u00e4r obligatoriska”. F\u00f6r kontakttext, anv\u00e4nd typsnittet: Rammetto One, storlek=60, f\u00e4rg: R=241 G=244 B=247, ledande=100% och v\u00e4nsterjusterad. F\u00f6r ”alla f\u00e4lt \u00e4r obligatoriska” text, anv\u00e4nd teckensnittet: Nobile kursiv, storlek=26, f\u00e4rg: R=241 G=244 B=247, ledande=100 % och v\u00e4nsterjusterad. F\u00f6r denna textruta, anv\u00e4nd nedre streck med vikt 1 och f\u00e4rg vit.\n<\/p>\n
\n 81 Skriv ett stycke i den andra textrutan som vi skapade. Anv\u00e4nd teckensnitt: PT Sans Italic, storlek=14, f\u00e4rg: R=241 G=244 B=247, ledande=120 %, v\u00e4nsterjusterad och blanksteg f\u00f6re=15.\n<\/p>\n
\n 82 L\u00e4gg dessa textrutor och formul\u00e4ret p\u00e5 bilden som vi placerade. Justera dem enligt f\u00f6ljande.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382361dd708d.webp\")
<\/a><\/p>\n\n 83 Skapa ytterligare en textruta f\u00f6r viss kontaktinformation som kontorsadress, e-post och telefonnummer. S\u00e4tt den h\u00e4r textrutan p\u00e5 bilden. Du b\u00f6r ha f\u00f6ljande resultat.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382361fd3a10.webp\")
<\/a><\/p>\n\n Slutresultat av avsnittet ”Kontakta oss”.
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638236220ca76.webp\")
<\/a><\/p>\n\n Skapar sidfot
\n<\/h3>\n\n 84 Det sista avsnittet \u00e4r sidfot. Det finns tre guider l\u00e4ngst ner, n\u00e4mligen – l\u00e4ngst ner p\u00e5 sidan, sidfot och botten av webbl\u00e4saren. Vad du m\u00e5ste g\u00f6ra nu \u00e4r att se till att guiden ”botten p\u00e5 sidan” sn\u00e4pper ihop med botten av kontakta oss-sektionen och att ”sidfoten”-guiden sammanfaller med guiden ”botten p\u00e5 sidan”. Efter det kan du dra guiden l\u00e4ngst ner i webbl\u00e4saren f\u00f6r att justera det utrymme du beh\u00f6ver f\u00f6r sidfoten.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638236248fda2.webp\")
<\/a><\/p>\n\n 85 Skapa tv\u00e5 rektanglar med 100 % bredd och H=168 f\u00f6r den f\u00f6rsta och H=37 f\u00f6r den andra. \u00c4ndra fyllningsf\u00e4rgen f\u00f6r stor rektangel till vit och anv\u00e4nd R=47, G=48, B=55 f\u00f6r en kortare.\n<\/p>\n
\n 86 V\u00e4lj den f\u00f6rsta rektangeln och f\u00f6rs\u00f6k placera den i sidfotsomr\u00e5det. Det kommer inte att g\u00e5 dit. Ist\u00e4llet kommer guiden l\u00e4ngst ner p\u00e5 sidan att b\u00f6rja expandera ned\u00e5t. F\u00f6r att g\u00f6ra denna rektangel till ett sidfotsobjekt, markera kryssrutan 'Sidfot' som finns l\u00e4ngst upp till h\u00f6ger i programf\u00f6nstret. G\u00f6r det f\u00f6r andra rektangeln ocks\u00e5.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823626e43d3.webp\")
<\/a><\/p>\n\n 87 Placera nu dessa rektanglar i sidfotsomr\u00e5det och se till att den stora rektangeln \u00e4r n\u00e5got ovanf\u00f6r sidfotsguiden. Botten p\u00e5 f\u00e4rgad rektangel m\u00e5ste sn\u00e4ppa ihop med botten av webbl\u00e4sarguiden. Annars ser du en liten vit lucka efter sidfoten som inte ser snygg ut.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823629217b3.webp\")
<\/a><\/p>\n\n 88 Skapa textrutor f\u00f6r sidfot och skriv in vad du vill. Markera bara kryssrutan ”sidfot” f\u00f6r textrutorna du ska l\u00e4gga till. Jag har lagt till lite text som inneh\u00e5ller ansvarsfriskrivning och information om upphovsr\u00e4tt.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382362b623c3.webp\")
<\/a><\/p>\n\n 89 M\u00e4rket ”Made with Adobe Muse CC” kan l\u00e4ggas till fr\u00e5n widgetbiblioteket under social sektion. Du kan ocks\u00e5 l\u00e4gga till l\u00e4nkar till din facebooksida, twitter, google+, LinkedIn, Pinterest, YouTube-kanal eller vimeo-l\u00e4nk.\n<\/p>\n
\n 90 Upphovsr\u00e4ttssymbolen och m\u00e5nga andra symboler som du ser bredvid All rights reserved text kan l\u00e4ggas till fr\u00e5n panelen ”Glyfer” p\u00e5 h\u00f6ger sida av programf\u00f6nstret. Om det inte finns, g\u00e5 till F\u00f6nster-menyn > v\u00e4lj Tecken.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382362e4f736.webp\")
<\/a><\/p>\n\n Skapar avsnittet ”Nyhetsbrev”.
\n<\/h3>\n\n 91 Hittills har vi designat sektioner f\u00f6r alla menyalternativ utom en och det \u00e4r ”Nyhetsbrev”. L\u00e5t oss g\u00f6ra n\u00e5got intressant med det. Kom ih\u00e5g korssymbolen vi laddade ner, den kommer att anv\u00e4ndas h\u00e4r (det \u00e4r okej om du inte har laddat ner det, du kan fortfarande f\u00f6lja med). V\u00e4lj f\u00f6rst textrutan Nyhetsbrev och anteckna dess bredd och h\u00f6jd fr\u00e5n transformationspanelen. Min \u00e4r 81×17.\n<\/p>\n
\n 92 \u00d6ppna nu widgetbiblioteket och dra 'Lightbox Display' fr\u00e5n kompositionssektionen. Ta bort f\u00f6rsta tv\u00e5 utl\u00f6sare (finns l\u00e4ngst upp) och ta bort alla bildtexter (finns l\u00e4ngst ner). G\u00f6r storleken p\u00e5 den tredje utl\u00f6saren samma som nyhetsbrevstextrutan som \u00e4r 81 x 17. \u00c4ndra dess fyllning och streck till ingen f\u00f6r alla stater.\n<\/p>\n
\n 93 Dra nyhetsbrevets textruta och placera den inuti denna utl\u00f6sare p\u00e5 ett s\u00e5dant s\u00e4tt att alla kanter p\u00e5 textrutan sammanfaller med utl\u00f6sarens kanter. Dra nu denna grupp och placera den igen i menyn d\u00e4r den placerades tidigare. Vad vi har gjort \u00e4r att vi har anv\u00e4nt en l\u00e4nk till nyhetsbrevets textruta. N\u00e4r anv\u00e4ndaren klickar p\u00e5 det kommer webbplatsen att tona ut och m\u00e5let visas.\n<\/p>\n
\n 94 N\u00e4sta steg \u00e4r att anpassa v\u00e5rt m\u00e5l. V\u00e4lj det gr\u00e5 omr\u00e5det och se till att det aktuella urvalsomr\u00e5det s\u00e4ger ”Target”. Du m\u00e5ste klicka tre g\u00e5nger f\u00f6r att v\u00e4lja den. \u00c4ndra fyllningen och strecket till ingen f\u00f6r alla dess tillst\u00e5nd.\n<\/p>\n
\n 95 L\u00e4gg till tv\u00e5 textrutor och ett enkelt kontaktformul\u00e4r (ta bort namn- och meddelandef\u00e4lten och beh\u00e5ll endast e-postf\u00e4ltet). Dra dem inuti den h\u00e4r kompositionen och se till att alla har en bl\u00e5 cirkel i h\u00f6rnen.\n<\/p>\n
\n 96 Anpassa formul\u00e4ret som vi gjorde under kontakta oss. Du b\u00f6r ha f\u00f6ljande resultat. F\u00f6r textf\u00e4ltet 'H\u00e5ll kontakten', anv\u00e4nd teckensnitt: Hummer, storlek=40, f\u00e4rg:vit, mittjusterad och 100 % inledande. F\u00f6r beskrivningstext under den, anv\u00e4nd teckensnitt: Ubuntu Light Italic, storlek=14, f\u00e4rg: vit, mittjusterad och 120% ledande. \u00c4ndra texten p\u00e5 knappen Skicka till ”Prenumerera”.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823631ea47b.webp\")
<\/a><\/p>\n\n 97 V\u00e4lj nu st\u00e4ngningsknappen, flytta den och placera den i det \u00f6vre h\u00f6gra h\u00f6rnet av denna ljusbordssk\u00e4rm som visas nedan. Klicka inuti den tills du ser ”Etikett” skriven i det aktuella urvalsomr\u00e5det. Ta bort etiketten.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382363507e52.webp\")
<\/a><\/p>\n\n 98 \u00c4ndra fyllning och slag f\u00f6r denna st\u00e4ngningsknapp till ingen f\u00f6r alla tillst\u00e5nd och g\u00f6r dess W=40 och H=40. G\u00e5 till Fyll > l\u00e4gg till bild och bl\u00e4ddra efter korsbilden. V\u00e4lj ”skala f\u00f6r att passa” under passningsalternativ.\n<\/p>\n
\n 99 Klicka p\u00e5 Nyhetsbrev s\u00e5 ser du en bl\u00e5 cirkel i h\u00f6rnet. Klicka p\u00e5 den och se till att alternativen \u00e4r inst\u00e4llda enligt f\u00f6ljande.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638236383b97c.webp\")
<\/a><\/p>\n\n Slutresultat av avsnittet ”Nyhetsbrev”.
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382363ae64bc.webp\")
<\/a><\/p>\n\n Skapa hyperl\u00e4nkar
\n<\/h3>\n\n 100 Den sista uppgiften som \u00e5terst\u00e5r \u00e4r att l\u00e4gga till l\u00e4nkar till varje avsnitt. F\u00f6r att g\u00f6ra detta, v\u00e4lj alternativet ”l\u00e4nkankare” som finns l\u00e4ngst upp i mitten eller tryck p\u00e5 bokstaven ”a” p\u00e5 ditt tangentbord. Du kommer att se att mark\u00f6ren \u00e4ndrar sitt utseende till en platspistol laddad med ett l\u00e4nkankare.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382363d80277.webp\")
<\/a><\/p>\n\n 101 N\u00e4r du klickar p\u00e5 arbetsytan f\u00f6r att placera denna, dyker en dialogruta upp som l\u00e5ter dig byta namn p\u00e5 ett ankare.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382363feb1d6.webp\")
<\/a><\/p>\n\n 102 Skapa l\u00e4nkankare f\u00f6r varje sektion vi har designat, det vill s\u00e4ga Hem, Tj\u00e4nster, Varf\u00f6r oss, Rekommendationer och Kontakta oss. Placera ankarna \u00f6verst p\u00e5 varje sektion. Hemankare visas nedan som ett exempel. Att placera dessa ankare \u00e4r ett viktigt steg och b\u00f6r g\u00f6ras f\u00f6rsiktigt. N\u00e4r anv\u00e4ndaren klickar p\u00e5 en viss l\u00e4nk rullar webbplatsen till den position d\u00e4r ankaret har placerats.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823642ca0c4.webp\")
<\/a><\/p>\n\n 103 Nu ska vi till\u00e4mpa l\u00e4nkarna. F\u00f6r att g\u00f6ra detta, v\u00e4lj ”Hem” textrutan. G\u00e5 till alternativet ”Hyperl\u00e4nkar” (h\u00f6gst upp), klicka p\u00e5 den lilla ned\u00e5tpilen f\u00f6r att ut\u00f6ka listan. H\u00e4r kan du se alla ankare som vi just placerat. L\u00e4nka den till ”Hem”-ankare. Upprepa det h\u00e4r steget f\u00f6r andra textrutor utom Nyhetsbrev eftersom vi har anv\u00e4nt en ljusl\u00e5da p\u00e5 det.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382364694c80.webp\")
<\/a><\/p>\n\n Slutresultat efter att ha skapat hyperl\u00e4nkar
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382364a29ed4.webp\")
<\/a><\/p>\n\n Sista handen \u2013 \u00c4ndra sidegenskaper och l\u00e4gga till favicon
\n<\/h3>\n\n 104 Inuti planl\u00e4ge, h\u00f6gerklicka p\u00e5 startsidan och v\u00e4lj 'Sidegenskaper. En dialogruta kommer att dyka upp. V\u00e4lj fliken ”Alternativ” och under sidnamn, skriv – ”V\u00e4lkommen till exempel.com” och klicka p\u00e5 OK. Det h\u00e4r \u00e4r texten som visas h\u00f6gst upp i webbl\u00e4sarf\u00f6nstret.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382364d02485.webp\")
<\/a><\/p>\n\n 105 G\u00e5 till Arkiv > Webbplatsegenskaper. Under fliken Layout \u00e4r det sista alternativet ”Favicon”. N\u00e4r du h\u00e5ller muspekaren \u00f6ver den visas en popup som beskriver vad en favicon \u00e4r och vad den optimala storleken b\u00f6r vara. Det \u00e4r bra att l\u00e4gga till en favoritikon eftersom det hj\u00e4lper till att f\u00e5 ditt varum\u00e4rke att sticka ut och tj\u00e4nar \u00e4ven syftet att hj\u00e4lpa anv\u00e4ndarna att enkelt identifiera din webbplats om de har bokm\u00e4rkt den.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382364f684c8.webp\")
<\/a><\/p>\n\n Testa och exportera
\n<\/h3>\n\n 106 Testa din webbplats genom att g\u00e5 till Arkiv > F\u00f6rhandsgranska webbplats i webbl\u00e4saren eller Ctrl+Alt+E. V\u00e4lj inte ”F\u00f6rhandsgranska sida i webbl\u00e4sare” den h\u00e4r g\u00e5ngen eftersom l\u00e4nkarna inte fungerar i f\u00f6rhandsgranskning av sidan. Du kanske vill prova att placera ankarna p\u00e5 olika st\u00e4llen f\u00f6r att s\u00e4kerst\u00e4lla att n\u00e4r anv\u00e4ndaren klickar p\u00e5 en l\u00e4nk, rullar sajten till h\u00f6ger avsnitt och r\u00e4tt position.\n<\/p>\n
\n 107 \u00c4ntligen, g\u00e5 till Arkiv > Exportera som HTML (Ctrl+E). Ange ett namn som ”example.com” under webbplatsens URL och v\u00e4lj platsen. Klicka p\u00e5 OK. Hemsidan \u00e4r klar.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638236528be8c.webp\")
<\/a><\/p>\n\n Slutresultat p\u00e5 varje sida
\n<\/h3>\n\n Framsida
\n<\/h5>\n<\/a><\/p>\n\n Avsnittet 'Tj\u00e4nster'
\n<\/h5>\n<\/a><\/p>\n\n Avsnittet ”Varf\u00f6r oss”.
\n<\/h5>\n<\/a><\/p>\n\n Avsnittet ”Vitnesm\u00e5l”.
\n<\/h5>\n<\/a><\/p>\n\n 'Kontakta oss'
\n<\/h5>\n<\/a><\/p>\n\n Sidfot avsnitt
\n<\/h5>\n - \n F\u00f6r rollover-tillst\u00e5nd:<\/strong> \u00e4ndra bara textf\u00e4rgen till R=196 G=196 B=196 och ingen kursiv stil.\n <\/li>\n
- \n F\u00f6r beteckning:<\/strong> Teckensnitt: Nobile, storlek=15, F\u00e4rg: R=37 G=37 B=37, mittjusterad och 100 % ledande.\n <\/li>\n
- \n F\u00f6r rubriker:<\/strong> Font=Raleway Fet, Storlek=18, F\u00e4rg:Vit, Centerjusterad och 100 % ledande.\n <\/li>\n
- \n F\u00f6r stycken:<\/strong> Teckensnitt: Questrial, Storlek=15, F\u00e4rg: R=67 G=67 B=67, V\u00e4nsterjusterad och 120 % ledande.\n <\/li>\n<\/ul>\n
- \n F\u00f6r rubriker:<\/strong> Teckensnitt: Raleway Fet, Storlek=20, F\u00e4rg: Svart, V\u00e4nsterjusterad och 100 % ledande.\n <\/li>\n
- \n
- \n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382365f01860.webp\")
<\/a><\/p>\n