Kā pievienot pielāgotu HTML saturu WordPress veidlapās

Veidlapas nav tikai ievades lauki. Dažreiz jums ir kaut kas jāpaskaidro, jāsadala sadaļas, jāparāda attēls vai jāpievieno konteksts starp jautājumiem. Pielāgots HTML saturs pārveido statiskas veidlapas par vadītu pieredzi. Lūk, kā savām WordPress veidlapām pievienot bagātīgu saturu.

Kas ir HTML bloks?

Definīcija

HTML bloks ir īpašs veidlapas elements, kas parāda saturu, neapkopojot ievades datus. Tas atveido HTML starp jūsu veidlapas laukiem, ļaujot pievienot tekstu, attēlus, videoklipus, atdalītājus un citus elementus.

HTML bloks salīdzinājumā ar parastajiem laukiem

Kāpēc izmantot HTML blokus?

1. Norādījumi un norādījumi

Palīdziet lietotājiem saprast, kas jādara:

• Izskaidrojiet sarežģītus jautājumus
• Nodrošiniet kontekstu
• Saraksta prasības
• Ceļvedis pa sadaļām

2. Vizuālā organizācija

Sadalīt garās formas:

• Sadaļu virsraksti
• Horizontālie dalītāji
• Vizuālie atdalītāji
• Grupēts saturs

3. Bagātīga multivide

Pievienojiet vizuālos elementus:

• Attēli un ikonas
• Iegultie video
• infografikas
• Diagrammas

4. Tiesību akti un atbilstība

Parādiet svarīgu informāciju:

• Noteikumu un nosacījumu teksts
• Paziņojumi par konfidencialitāti
• Atrunas
• Nepieciešamā informācijas atklāšana

5. Zīmola veidošana

Nostipriniet savu zīmolu:

• Logos
• Zīmolu krāsas
• Pielāgots stils
• Konsekvents izskats

HTML bloka pievienošana

1. darbība. Pievienojiet lauku

1. Atveriet savu veidlapu sadaļā A.F.B.
2. Adrese HTML bloķēšana lauku sarakstā
3. Velciet to uz vēlamo pozīciju veidlapā

2. darbība. Pievienojiet savu saturu

1. Noklikšķiniet uz HTML bloka, lai to atlasītu
2. Atvērt iestatījumu paneli
3. Ievadiet savu HTML saturu
4. Priekšskatījums, lai pārbaudītu izskatu

3. solis: pozīcija un stils

1. Ja nepieciešams, velciet, lai mainītu secību
2. Pievienot iekļautos stilus vai klases
3. Tests priekšpusē

Bieži sastopamie HTML bloku lietojumi

1. Sadaļu virsraksti

Personīgā informācija Lūdzu, norādiet savu kontaktinformāciju zemāk.

Rezultāts:

Personīgā informācija
Lūdzu, tālāk norādiet savu kontaktinformāciju.

2. Horizontālais dalītājs

Rezultāts: Tīra līnija, kas atdala sekcijas.

3. Instrukciju kaste

 Svarīgi: pirms turpināt, lūdzu, sagatavojiet savu pasūtījuma numuru.

4. Norādījumi ar aizzīmēm

Pirms iesniegšanas, lūdzu, pārliecinieties: Visi obligātie lauki ir aizpildīti Jūsu e-pasta adrese ir pareiza Jūs esat pārskatījis tālāk norādītos noteikumus.

5. Attēls

6. Iegultais video

7. Brīdinājuma/trauksmes lodziņš

 ⚠️ Brīdinājums: Iesniegumus pēc nosūtīšanas nevar rediģēt.

8. Veiksmes/Informācijas lodziņš

 ✓ Jūsu progress tiek automātiski saglabāts.

9. Paziņojums par konfidencialitāti

Jūsu informācija ir aizsargāta saskaņā ar mūsu Privātuma politiku . Mēs nekad neizpaudīsim jūsu datus trešajām personām.

10. Noteikumu un nosacījumu kopsavilkums

 Pakalpojumu sniegšanas noteikumi Iesniedzot šo veidlapu, jūs piekrītat...

Veidlapu izkārtojuma piemēri

Daudzsekciju veidlapa

[HTML bloks: 1. sadaļa — Personiskās informācijas virsraksts] Vārda lauks E-pasta lauks Tālruņa lauks [HTML bloks: Atdalītājs] [HTML bloks: 2. sadaļa — Projekta informācijas virsraksts] Projekta veida nolaižamais saraksts Apraksta teksta apgabals Budžeta lauks [HTML bloks: Atdalītājs] [HTML bloks: 3. sadaļa — Noslēguma darbību virsraksts] Faila augšupielādes noteikumu izvēles rūtiņa Iesniegšanas poga

Instrukciju veidlapa

[HTML bloks: Sveiciena ziņojums un instrukcijas] [HTML bloks: 1. soļa indikators] 1. jautājums 2. jautājums [HTML bloks: 2. soļa indikators] 3. jautājums 4. jautājums [HTML bloks: Atgādinājums par atsauksmi] Iesniegšanas poga

Pieteikuma veidlapa

[HTML bloks: Uzņēmuma logotips] [HTML bloks: Amata nosaukums un apraksts] Vārda lauks E-pasta lauks [HTML bloks: Instrukcija "Augšupielādējiet savu CV" ar formāta prasībām] Faila augšupielādes lauks [HTML bloks: Vienlīdzīgu iespēju paziņojums] Iesniegšanas poga

HTML bloku veidošana

Iekļautie stili

Pievienojiet stilus tieši elementiem:

Jūsu veidotais saturs šeit.

Bieži sastopamās stila īpašības

Fons: background: #f5f5f5; Pildījums: padding: 15px; Marža: margin: 20px 0; Robeža: border: 1px solid #ddd; Robežas rādiuss: border-radius: 5px; Fonta lielums: font-size: 14px; Krāsa: color: #333; Teksta izlīdzināšana: text-align: center;

Stilizētu lodziņu izveide

Informācijas lodziņš (zils):

 ℹ️ Informatīvs ziņojums šeit

Veiksmes lodziņš (zaļš):

 ✓ Veiksmes ziņojums šeit

Brīdinājuma lodziņš (dzeltens):

 ⚠️ Brīdinājuma ziņojums šeit

Kļūdas lodziņš (sarkans):

 ✕ Šeit ir kļūda vai svarīgs brīdinājums

Adaptīva dizaina padomi

Attēli

Adaptīviem attēliem vienmēr izmantojiet maksimālo platumu:

video

Izmantojiet adaptīvo apvalku iegultiem videoklipiem:

Teksta lasāmība

• Izmantojiet relatīvos fontu izmērus (em, rem)
• Saglabājiet rindu garumus salasāmus
• Pietiekama iekšējā aizpildīšana mobilajā tālrunī

Labākā pieredze

1. Saglabājiet to kodolīgi

• Īss, viegli lasāms teksts
• Aizzīmju punkti virs rindkopām
• Tikai būtiska informācija

2. Vizuālā hierarhija

• Notīrīt virsrakstus
• Vienmērīgs stils
• Loģiskā plūsma

3. Pieejamība

• Alternatīvais teksts attēliem
• Pietiekams krāsu kontrasts
• Semantiskais HTML (h2, h3, p, ul)
• Nepaļaujieties tikai uz krāsu, lai iegūtu nozīmi

4. Nepārspīlējiet to

• Pārāk daudz satura nomāc
• Līdzsvarojiet saturu ar ievades laukiem
• Katra HTML bloka mērķis

5. Rūpīgi pārbaudiet

• Priekšskatījums datorā un mobilajā tālrunī
• Pārbaudiet visas saites, kas darbojas
• Pārbaudiet attēlu ielādi
• Testēšana dažādās pārlūkprogrammās

Uzlabotas HTML bloku idejas

Progresa rādītājs

1  2  3 2. darbība no 3: Projekta informācija

Divu kolonnu izkārtojums

A variants A varianta apraksts... B variants B varianta apraksts...

Sakļaujamā sadaļa (sīkāka informācija/kopsavilkums)

Noklikšķiniet, lai izlasītu pilnus noteikumus Pilns noteikumu un nosacījumu teksts šeit...

Ikonu saraksts

✓ Bezmaksas piegāde pasūtījumiem virs 50 USD ✓ 30 dienu naudas atmaksas garantija ✓ Klientu atbalsts visu diennakti

Atpakaļskaitīšana/Steidzamība

 🔥 Ierobežota laika piedāvājums — iesniedziet līdz piektdienai, lai kvalificētos!

Drošības apsvērumi

Kas ir droši

• Standarta HTML tagi (p, div, h1-h6, ul, li utt.)
• Iekļautie stili
• Attēli no uzticamiem avotiem
• Iegultie video no lielākajām platformām

Ko izvairīties

• JavaScript HTML blokos (var tikt noņemts)
• Ārējie skripti
• Neuzticami iframe avoti
• Veidlapas elementi HTML blokos

Piezīme par skriptu ierobežojumiem

Lielākā daļa veidlapu veidotāju attīra HTML, lai novērstu XSS uzbrukumus. JavaScript un noteikti tagi drošības nolūkos var tikt automātiski noņemti.

Problēmu novēršana

HTML netiek renderēts

• Pārbaudiet sintakses kļūdas
• Pārliecinieties, vai etiķetes ir pareizi aizvērtas
• Dažas atzīmes var būt ierobežotas

Stils nav piemērots

• Pārbaudīt iekļautā stila sintaksi
• Tēmas CSS var ignorēt
• Izmantojiet specifiskākus stilus vai !important

Attēli netiek rādīti

• Pārbaudiet, vai attēla URL ir pareizs
• Pārbaudiet attēla atļaujas
• Izmantojiet pilnu URL (https://…)

Izkārtojuma sadalījums mobilajā ierīcē

• Pievienot attēliem maksimālo platumu: 100 %
• Izmantojiet elastīgus izkārtojumus (flexbox)
• Tests uz faktiskās mobilās ierīces

Kopsavilkums

Pielāgota HTML satura pievienošana veidlapām:

1. Pievienot HTML bloku – Velciet uz savu formu
2. Ievadiet saturu – HTML iestatījumu panelī
3. Novietojiet atbilstoši – Starp attiecīgajiem laukiem
4. Stils pēc nepieciešamības – Iekļautie stili vai klases
5. Saglabājiet pieejamu – Alt teksts, kontrasts, semantiskais HTML
6. Testējiet reaģējoši – Datorā un mobilajās ierīcēs

Secinājumi

HTML bloki pārveido veidlapas no vienkāršām anketām par vadītām pieredzēm. Pievienojiet kontekstu tur, kur lietotājiem tas ir nepieciešams, sakārtojiet garas veidlapas loģiskās sadaļās un iekļaujiet bagātīgu multividi, lai piesaistītu uzmanību un informētu. Neatkarīgi no tā, vai tas ir sadaļas virsraksts, instrukciju lodziņš vai iegults video, pielāgots HTML saturs padara jūsu veidlapas efektīvākas un lietotājam draudzīgākas.

Automātiska veidlapu veidotāja ietver HTML bloka lauka tipu, kas ļauj pievienot jebkādu HTML saturu starp veidlapas laukiem. Izveidojiet profesionālas, informatīvas veidlapas, kas palīdz lietotājiem iesniegšanas procesā.

Vai esat gatavs uzlabot savas veidlapas? Lejupielādēt automātisko veidlapu veidotāju un sāciet pievienot pielāgotu saturu jau šodien.