Hvernig á að bæta við sérsniðnu HTML efni í WordPress eyðublöðum

Eyðublöð eru ekki bara innsláttarreitir. Stundum þarftu að útskýra eitthvað, skipta köflum, sýna mynd eða bæta við samhengi milli spurninga. Sérsniðið HTML efni breytir kyrrstæðum eyðublöðum í leiðsögn. Svona bætirðu við ríkulegu efni í WordPress eyðublöðin þín.

Hvað er HTML-blokkin?

skilgreining

HTML-blokkin er sérstakt formþáttur sem birtir efni án þess að safna inntaki. Hún birtir HTML á milli formsreitanna og gerir þér kleift að bæta við texta, myndum, myndböndum, skilrúmum og fleiru.

HTML-blokk vs. venjulegir reitir

Af hverju að nota HTML blokkir?

1. Leiðbeiningar og leiðbeiningar

Hjálpaðu notendum að skilja hvað þeir eiga að gera:

• Útskýrðu flóknar spurningar
• Gefðu samhengi
• Kröfur um lista
• Leiðbeiningar í gegnum kafla

2. Sjónræn skipulagning

Brjótið upp löng form:

• Kaflafyrirsagnir
• Láréttir skilrúm
• Sjónrænir aðskiljarar
• Flokkað efni

3. Rík fjölmiðlun

Bæta við sjónrænum þáttum:

• Myndir og táknmyndir
• Innbyggð myndbönd
• Infographics
• Skýringar

4. Lögfræði og samræmi

Birta mikilvægar upplýsingar:

• Texti skilmála
• Persónuverndaryfirlýsingar
• Fyrirvarar
• Nauðsynlegar upplýsingar

5 Vörumerki

Styrktu vörumerkið þitt:

• lógó
• Merki litir
• Sérsniðin stíl
• Samræmt útlit

Að bæta við HTML-blokk

Skref 1: Bæta við reitnum

1. Opnaðu eyðublaðið þitt í A.F.B.
2. finna HTML blokk í reitalistanum
3. Dragðu það á viðkomandi stað í eyðublaðinu þínu

Skref 2: Bættu við efni þínu

1. Smelltu á HTML-blokkina til að velja hana
2. Opna stillingargluggann
3. Sláðu inn HTML-efnið þitt
4. Forskoðun til að staðfesta útlit

Skref 3: Staðsetning og stíll

1. Dragðu til að endurraða ef þörf krefur
2. Bæta við innlínustílum eða flokkum
3. Prófun á framhlið

Algeng notkun HTML-blokka

1. Kaflafyrirsagnir

Persónuupplýsingar Vinsamlegast gefðu upp upplýsingar um tengiliði þína hér að neðan.

Niðurstaða:

Starfsfólk Upplýsingar
Vinsamlegast gefðu upp tengiliðaupplýsingar þínar hér að neðan.

2. Láréttur skilrúm

Niðurstaða: Hrein lína sem aðskilur hluta.

3. Leiðbeiningakassi

 Mikilvægt: Vinsamlegast hafið pöntunarnúmerið tilbúið áður en haldið er áfram.

4. Leiðbeiningar með punktum

Áður en þú sendir inn, vinsamlegast vertu viss um að: Öllum nauðsynlegum reitum er lokið Netfangið þitt er rétt Þú hefur skoðað skilmálana hér að neðan

5. Mynd

6. Innbyggt myndband

7. Viðvörunar-/viðvörunarkassi

 ⚠️ Viðvörun: Ekki er hægt að breyta innsendingum eftir að þær hafa verið sendar.

8. Árangur/Upplýsingakassi

 ✓ Framfarir þínar eru sjálfkrafa vistaðar.

9. Persónuverndaryfirlýsing

Upplýsingar þínar eru verndaðar samkvæmt persónuverndarstefnu okkar. Við munum aldrei deila gögnum þínum með þriðja aðila.

10. Samantekt á skilmálum

 Þjónustuskilmálar Með því að senda inn þetta eyðublað samþykkir þú að...

Dæmi um eyðublaðsuppsetningu

Fjölhlutaform

[HTML-blokk: 1. hluti - Fyrirsögn Persónuupplýsingar] Nafnreitur Netfangsreitur Símareitur [HTML-blokk: Skiptireitur] [HTML-blokk: 2. hluti - Fyrirsögn Verkefnisupplýsingar] Fellivalmynd fyrir gerð verkefnis Lýsing Textasvæði Fjárhagsáætlunarreitur [HTML-blokk: Skiptireitur] [HTML-blokk: 3. hluti - Fyrirsögn Lokaskref] Skráarupphleðsla Skilmálar Gátreitur Senda hnappur

Leiðbeiningarform

[HTML-blokk: Velkomin skilaboð og leiðbeiningar] [HTML-blokk: Vísir fyrir skref 1] Spurning 1 Spurning 2 [HTML-blokk: Vísir fyrir skref 2] Spurning 3 Spurning 4 [HTML-blokk: Áminning um endurskoðun] Senda hnappur

Umsóknareyðublað

[HTML-blokk: Fyrirtækjamerki] [HTML-blokk: Starfsheiti og lýsing] Nafnsreitur Netfangsreitur [HTML-blokk: Leiðbeiningar um „Hlaða inn ferilskrá“ með sniðkröfum] Reitur fyrir skráarupphleðslu [HTML-blokk: Yfirlýsing um jafnrétti] Senda hnappur

Stílsetning HTML-blokka

Innbyggðir stílar

Bæta stílum beint við þætti:

Stílfært efni hér.

Algengir stíleiginleikar

Bakgrunnur: bakgrunnur: #f5f5f5; Bylting: bylting: 15px; Spássa: spássa: 20px 0; Rammi: rammi: 1px samfelldur #ddd; Rammaradíus: rammaradíus: 5px; Leturstærð: font-size: 14px; Litur: color: #333; Textajöfnun: textajöfnun: miðjun;

Að búa til stílhrein kassa

Upplýsingakassi (blár):

 Upplýsingaskilaboð hér

Árangursreitur (grænn):

 ✓ Skilaboð um árangur hér

Viðvörunarkassa (gulur):

 ⚠️ Viðvörunarskilaboð hér

Villukassi (rauður):

 ✕ Villa eða mikilvæg viðvörun hér

Ráðleggingar um móttækilega hönnun

Myndir

Notið alltaf hámarksbreidd fyrir móttækilegar myndir:

Myndbönd

Notið móttækilegt umbúðaefni fyrir innfelld myndbönd:

Lesanleiki texta

• Notið hlutfallslegar leturstærðir (em, rem)
• Halda línulengdum lesanlegum
• Nægileg bólstrun á farsíma

Best Practices

1. Hafðu það hnitmiðað

• Stuttur, skannanlegur texti
• Punktapunktar yfir málsgreinar
• Aðeins nauðsynlegar upplýsingar

2. Sjónræn stigveldi

• Hreinsa fyrirsagnir
• Samræmd stílbrögð
• Rökrétt flæði

3. Aðgengi

• Alt texti fyrir myndir
• Nægilegt litasamhengi
• Merkingarfræðilegt HTML (h2, h3, p, ul)
• Treystið ekki bara á litinn til að fá merkingu

4. Ekki ofleika það

• Of mikið efni yfirgnæfir
• Jafnvægi efnis með innsláttarreitum
• Tilgangur hverrar HTML-blokkar

5. Prófaðu vandlega

• Forskoðun á tölvu og farsíma
• Athugaðu að allir tenglar virki
• Staðfesta að myndirnar hafi verið hlaðnar
• Prófa í mismunandi vöfrum

Hugmyndir að ítarlegri HTML-blokkum

Framfaravísir

1  2  3 Skref 2 af 3: Upplýsingar um verkefnið

Tveggja dálka skipulag

Valkostur A Lýsing á valkosti A... Valkostur B Lýsing á valkosti B...

Samanbrjótanlegur hluti (upplýsingar/samantekt)

Smelltu til að lesa alla skilmálana Skilmálar og skilyrði í heild sinni eru hér ...

Táknalisti

✓ Frí heimsending á pöntunum yfir $50 ✓ 30 daga peningaábyrgð ✓ Þjónusta við viðskiptavini allan sólarhringinn

Niðurtalning/Brýnt

 🔥 Tímabundið tilboð - Sendið inn fyrir föstudag til að eiga rétt á tilboði!

Öryggissjónarmið

Hvað er öruggt

• Staðlaðar HTML-taggar (p, div, h1-h6, ul, li, o.s.frv.)
• Innlínustílar
• Myndir frá traustum heimildum
• Innfelld myndbönd frá helstu kerfum

Hvað á að forðast

• JavaScript í HTML-blokkum (gæti verið fjarlægt)
• Ytri forskriftir
• Ótraustar iframe heimildir
• Formþættir innan HTML-blokka

Athugasemd um takmarkanir á handritum

Flestir eyðublaðasmiðir hreinsa HTML til að koma í veg fyrir XSS árásir. JavaScript og ákveðin merki geta verið fjarlægð sjálfkrafa til öryggis.

Bilanagreining

HTML birtist ekki

• Athugaðu hvort setningafræðivillur séu til staðar
• Staðfestið að merkin séu rétt lokuð
• Sum merki kunna að vera takmörkuð

Stílsetning ekki notuð

• Athugaðu setningafræði innlínustíls
• Þema CSS gæti hnekkt
• Notaðu sértækari stíl eða !mikilvægt

Myndir birtast ekki

• Staðfestu að vefslóð myndarinnar sé rétt
• Athugaðu heimildir mynda
• Notið fulla vefslóð (https://…)

Útlitsbrot í farsíma

• Bæta við hámarksbreidd: 100% við myndir
• Nota sveigjanleg útlit (flexbox)
• Prófun á raunverulegum snjalltæki

Yfirlit

Bæta við sérsniðnu HTML efni í eyðublöð:

1. Bæta við HTML-blokk – Dragðu að eyðublaðinu þínu
2. Sláðu inn efni – HTML í stillingarglugganum
3. Staðsetja á viðeigandi hátt – Milli viðeigandi sviða
4. Stíll eftir þörfum – Innlínustílar eða flokkar
5. Halda aðgengilegum – Alt-texti, andstæður, merkingarfræðilegt HTML
6. Prófaðu á viðbragðshæfan hátt – Skjáborð og farsími

Niðurstaða

HTML-blokkir breyta eyðublöðum úr einföldum spurningalistum í leiðbeiningar. Bættu við samhengi þar sem notendur þurfa á því að halda, skipuleggðu löng eyðublöð í rökrétta hluta og notaðu fjölbreytt efni til að vekja áhuga og upplýsa. Hvort sem um er að ræða fyrirsögn í kafla, leiðbeiningarkassa eða innbyggt myndband, þá gerir sérsniðið HTML-efni eyðublöðin þín skilvirkari og notendavænni.

Sjálfvirk eyðublaðasmiður Inniheldur reitinn HTML-blokk, sem gerir þér kleift að bæta við hvaða HTML-efni sem er á milli reitanna í eyðublaðinu þínu. Búðu til fagleg og upplýsandi eyðublöð sem leiðbeina notendum í gegnum innsendingarferlið.

Tilbúinn/n að bæta eyðublöðin þín? Sækja sjálfvirka eyðublaðasmiðinn og byrjaðu að bæta við sérsniðnu efni í dag.