A dokumentumban a http://webgrafikairoda.hu/szovegestartalom/ oldal html és css kódját mutatjuk be, ezzel azonnal használható, gyakorlatias segítséget nyújtva weboldalak szöveges tartalmának szerkesztéséhez. A HTML Kód <div class="blog_h2">bevezető gondolatok</div> Az internetes kereskedelem virágzásának hála, <strong>hatalmas konkurenciaharccal</strong> kell szembenézniük a vállalkozásoknak. Egy vállalkozás manapság csak akkor lehet igazán sikeres, ha <strong>több közösségi médiában</strong> is aktívan jelen van, melyek össze vannak kötve <strong>keresőoptimalizált weboldalukkal</strong>. Amennyiben ez a rendszer hatékonyan működik, már jó esélye van a cégnek arra, hogy számos Látogató érkezzen az oldalára. Szerencsés esetben egy informatív, szerkezeti felépítésében jól átlátható honlapon találják magukat. </br></br>a potenciális vevők azonban sietnek, <span style="color: #ef6b23"><strong>gyorsan szeretnének döntést hozni</strong></span>. Ugyanakkor nekünk el kell érnünk, hogy az oldalaink tartalmát ténylegesen <strong>átolvassák</strong>. <span style="font-size: 16px">Mit tehetünk, hogy <strong>szöveges tartalmaink</strong> kellőképpen <strong>figyelemfelkeltőek</strong> legyenek, vezessék az Olvasó tekintetét azokra az elemekre, amelyek segítik a leendő Ügyfelünket a <strong>vásárlási döntésben</strong>?</span> <div class="blog_h2">mit emeljünk ki?</div> <span style="font-size: 18px">Mielőtt rátérnénk a hogyan kérdésére, fontos néhány pontba szedve tisztáznunk, mit szükséges kiemelnünk az oldalak tartalmában.</span> <ul class="bloglista"> 18px"><strong>Kulcsszavak</strong></span>. Lehetnek ezek a termékek, szolgáltatások nevei, <strong>főbb tulajdonságaik, jellemzőik</strong>, amik fontosak lehetnek a Vásárlónak. Ha csak ezeket olvassa el a Látogató, akkor is tudnia kell, hogy mi kínálunk-e pontosan olyan terméket vagy szolgáltatást, amit ő keres.</li> 18px"><strong>Megkülönböztetés</strong></span>. Emeljük ki azokat a szavakat is, amelyekkel <strong>termékünk minőségére utal</strong>, illetve azokat, melyek szolgáltatásunk megkülönböztetésére hivatottak. Mondjuk egy étterem honlapján szerelhet a következő mondat: "Ételeink kiváló minőségére garancia, hogy csak válogatott, <span style="color: #ef6b23"><strong>adalékanyagoktól mentes, friss alapanyagokat</strong></span> használunk fel konyhánkon." Fontos, hogy ne az elvont jelzők kerüljenek kiemelésre ("kiváló minőségű"), hanem <strong>önálló</strong> <strong>jelentéssel bíró szókapcsolatok</strong>, mint esetünkben a "válogatott, adalékanyagoktól mentes, friss alapanyagokat".</li> 18px"><strong>Kedvezmények</strong></span>. Hiába találtunk ki egy <strong>ütős akciót</strong>, ha az elkerüli a Látogató figyelmét. Amennyiben nem szeretnénk <a class="alink" href="http://webgrafikairoda.hu/popupmaker/" target="_blank">popup-ba</a> tenni, akkor különös gonddal kell kiemelnünk a kapcsolódó oldalon.</li> 18px"><strong>Információk</strong></span>. A száraz információkból azokat kell csak kiemelnünk, amelyek "nem ismerete" problémát okozhat az Ügyfelünknek, ilyen lehet például egy <strong>akció időtartama, vállalási határidők</strong> stb.</li> </ul> <div class="blog_h2">a Jó és a Rossz</div> <span style="font-size: 18px">avagy a kiemelés fő szabályai</span> <table style="margin-left: 20px"> <tbody> <tr class="fejlec"> <td width="20%"><strong>a kiemelés...</strong></td> <td><strong>igen!</strong></td> <td><strong>ne!</strong></td> <tr class="paratlan"> <td style="font-size: 16px">gyakorisága</td> 1
<td>a <strong>kevesebb néha több</strong> elv érvényesüljön, ha mindent kiemelsz, olyan, mintha semmit se emelnél ki!</td> <td>hiba egy szót vagy kifejezést többször is kiemelni.</td> <tr class="paros"> <td style="font-size: 16px">megjelenése</td> <td>törekedj az esztétikus, <strong>visszafogott</strong> megjelenésre!</td> <td>ne használj a szemnek <strong>bántó, túl élénk, egymástól elütő színeket</strong>, kerüld az <strong>extrém betűméreteket</strong>, amik már az olvashatóság rovására mennek!</td> <tr class="paratlan"> <td style="font-size: 16px">típusa</td> <td><strong>váltogasd</strong> a kiemelések típusát (betűméret, szín, betűtípus, vastagság)!</td> <td>nem szerencsés, ha csak <strong>egyfajta kiemelési módot</strong> használsz. A <strong>dőlt betű</strong> rontja az olvashatóságot, ne használ gyakran! Az <strong>aláhúzás nem túl esztétikus</strong>, csak a linkeknél alkalmazd!</td> </tbody> </table> <div class="blog_h2">szöveges tartalmak szerkesztése egyedi html, css kódokkal</div> A <strong>wordpress grafikus szerkesztője</strong> sajnos eléggé <strong>korlátozott lehetőséget</strong> biztosít csak a szöveges tartalmak formázására. <span style="font-size:18px">a WordPress grafikus tartalom szerkesztőjében többek között nincs lehetőséged változtatni a...</span> <ul class="bloglista"> <li><i class="fa fa-close" style="font-size:30px; color: #000"></i> szavak méretét,</li> <li><i class="fa fa-close" style="font-size:30px; color: #000"></i> szavak színét,</li> <li><i class="fa fa-close" style="font-size:30px; color: #000"></i> szavak betűtípusát,</li> <li><i class="fa fa-close" style="font-size:30px; color: #000"></i> a bekezdések hátterét,</li> <li><i class="fa fa-close" style="font-size:30px; color: #000"></i> a bekezdések keretét.</li> </ul> Én ezt a bejegyzést <div class="blog_kiemelt">egyedi html és css kódokkal</div> formáztam. Kedvet kaptál<strong> egy kis kódoláshoz</strong>? <div class="akcio_kiemelt"><strong>segíthetünk?</strong> A linkre kattintva letöltheted a bejegyzés <span style="color:#000">html és css kódját</span>, amihez egy <span style="color:#000"><strong>gyorstalpaló mellékletet</strong></span> is adunk! </div> 2
A CSS Kód WordPress-ben a Megjelenés -> Szerkesztő > style.css file végére kell beírni! Jó tanács: Ne az eredeti style.css file-ba írjuk a saját kódunkat, hanem készítsünk egy úgynevezett child-theme t. Amennyiben mégis úgy döntünk, hogy az eredeti file-t szerkesztjük, akkor mindenképpen készítsünk egy biztonsági mentést a szerkesztés előtt és után is! Figyeljünk arra, hogy semmit ne írjunk át és ne töröljünk ki, mert nem vonhatóak vissza a változtatások! Fontos, hogy ha az eredeti file-t módosítjuk, akkor a letöltött téma a későbbiekben NEM frissíthető, mert elvesznek a változtatásaink. A child-theme készítését egy későbbi bejegyzésünkben megmutatjuk..blog_h2 { font-size: 24px; margin-bottom: 15px; margin-left: 40px; margin-top: 30px; letter-spacing: 2px; border-left: 3px solid #ef6b23; padding-left: 10px;.blog_h2::first-letter { color: #ef6b23; font-weight: 600;.blog_kiemelt { text-align: center; font-size: 20px; margin-bottom: 25px; color: #037e63; font-family: 'Kalam', cursive;.alink { color: #146298!important; text-decoration: underline!important; a.alink:hover { font-size: 18px!important;.bloglista { margin-left: 70px; margin-bottom: 20px;.akcio_kiemelt { background: #ef6b23; color: #fff; font-size: 23px; letter-spacing: 1px; margin: 30px; padding: 20px; border-left: 5px solid #000; text-align: justify; tr.paratlan { background-color: #000; 3
color: #fff; tr.paros { background-color: #fff; color: #000; Magyarázat a html kódokhoz <div class="bekezdestipusneve">ez egy bekezdés.</div> Bekezdéseinket érdemes div-ekbe tennünk, ha egyedi formát szeretnénk nekik adni. Az azonos osztály (class= )megnevezéssel rendelkező div-eket a stlye.css ben együttesen formázhatjuk a következő hivatkozással:.bekezdestipusneve { <strong>ez vastagon szedett szöveg lesz. Ez a funkció a WP szerkesztőből is elérhető.</strong> <span style="color: #ef6b23">narancssárga lesz a betű színe.<span> <span style="font-size: 18px">18 as betűméretű lesz a szöveg.< span> </br> Sortörést szúrhatunk be a szövegünkbe a szellős tagolásért. <i class="fa fa-check" style="font-size:25px; color: #ef6b23"></i> ikonokat szúrhatunk a szövegünkbe, melyet egyúttal formázni is tudunk. A használható ikonokat és nevüket itt lehet megnézni: http://fontawesome.io/icons/ <a class="linkformazas" href="http://domain.hu target="_blank">link neve</a>a böngészőben új oldalon fog megnyílni a link kattintás után, ennek köszönhetően a felhasználó nem navigál el az oldalról <table style="margin-left: 20px"> <tbody>táblázat</tbody></table> Bal oldali külső margó (külső eltartás) beállítása. Magyarázat a css kódokhoz letter-spacing: 2px; N ö v e l h e t j ü k a b e t ű k k ö z ö t t i t á v o l s á g o t. border-left: 3px solid #ef6b23; padding-left: 10px;.blog_h2::first-letter { font-weight: 600; text-align: center; text-align: justify; text-decoration: underline!important; a.alink:hover { font-family: 'Kalam', cursive; Dobozok (div-ek) bal oldali keretének vastagságát, a vonal típusát (solid=egyenes, folytonos) és színét határozzuk meg. Bal oldali, belső margót adhatunk meg. Adott osztályba tartozó dobozok (div-ek) első betűjét tudjuk önállóan formázni. Betűk vastagságát határozza meg. Csak akkor működik, ha az adott webfontnak van ilyen vastagságú típusa! Középre igazíthatjuk a szövegüket Sorkizárt lesz a szövegünk Aláhúzott lesz a szöveg. A style.css file-ban már rögzített formázásokat a!important beszúrásával tudjuk felülírni. :hover használatával megadhatunk formázásbeli változást, ami akkor lép életbe, amikor a kurzort a szöveg felé visszük Betűtípusokat válogathatunk a https://fonts.google.com/ oldalról, ahol a betűtípus kiválasztása után megjelenik a kód, amit be kell írnunk a style.css file-ba. Ne felejtsük el, hogy a header.php file-ba is be kell illesztenünk a betűtípus elérési útvonalát (link) a <head> és a </head> tagek közé. 4
Tipp: Chrome böngészőben könnyen megnézhetjük adott oldalelemek css formázását, sőt kedvünk kísérletezhetünk a paraméterek módosításával. Kattintsunk jobb egérgombbal a szövegre, melynek formázására kíváncsiak vagyunk, majd válasszuk a Vizsgálat menüpontot. A jobb alsó sarokban megjelenik a css kód, melyen lehetőségünk van változtatni, természetesen a file-ba valójában nem nyúlunk bele, de a böngésző megmutatja nekünk, hogy hogy nézne ki az oldal az adott módosítással. Példa: 1) Előtte: 2) Próba módosításokkal: 5
6