Ongelma: Pelkkä HTML-taulukoiden kopiointi on epäpuhdasta.

On tärkeää, että yritysten henkilöstö ei kopioi taulukoita, sillä muuten HTML-koodissamme on paljon ”roskia”, kuten kuvattu. HTML-koodi ei näy editorin ”visuaalisella” alueella. Muokataksesi sitä sinun on napsautettava ”Tekstiä” WordPress-editorissa. Kun koodi yksinkertaisesti kopioidaan, se vie mukanaan pieniä pätkiä, joita emme halua. Tässä on suora esimerkki käytännöstä:

Esimerkki – Taulukon huono HTML

Tänne on kopioitu vielä monia asioita, joita et näe:

<th class=”headerSort” tabindex=”0″ title=”Lajittele nousevasti” role=”sarakeotsikon painike”>Ei.</th>
<th class=”headerSort” tabindex=”0″ title=”Lajittele nousevasti” role=”sarakeotsikon painike”>Piiri</th>.
<th class=”headerSort” tabindex=”0″ title=”Sort Ascending” role=”columnheader button”>Area</th>

Näemme siis, että copy & paste poistaa joitakin asioita.

Esimerkki – Taulukon hyvä HTML

Siltä se näyttäisi puhtaana:

<th>Ei.</th>
<th>Piiri</th>
<th>Alue</th>

Ratkaisu: HTML-taulukkomalli

Sinun on käytettävä hieman HTML:ää tai tutustuttava siihen. On parasta tallentaa se lyhyesti ja kopioida tai muokata sitä sitten:

• Vihje1 : <table> ja <tbody> ovat vain alussa </table> </tbody> vain lopussa.
• Vihje 2: Käytä <th>-merkkiä vain ensimmäisellä rivillä ja sulje se uudelleen (th tarkoittaa ”taulukkootsikkoa”).
• Vihje 3: <tr> avaa rivin ja </tr> sulkee sen (tr on nimeltään ”taulukkorivi”).
• Vihje 4: <td> avaa arvon tai laatikon ja </td> sulkee sen (td tarkoittaa ”taulukon tietoja”).

Tässä on taulukko, jossa on 3 saraketta ja 3 riviä:

<table>
<tbody>
<tr>
<th>Ohje 1</th>
<th>Ohje 2</th>
<th>Leader 3</th>
</tr>
<tr>
<td>Teksti 1</td>
<td>Teksti 2</td>
<td>Teksti 3</td>
</tr>
<tr>
<td>Teksti 1</td>
<td>Teksti 2</td>
<td>Teksti 3</td>
</tr>
</tbody>
</table>

Valmis pöytä näyttää tältä:

Toinen esimerkki, jossa on 2 saraketta ja 2 riviä:

<table>
<tbody>
<tr>
<th>Ohje 1</th>
<th>Ohje 2</th>
</tr>
<tr>
<td>Teksti 1</td>
<td>Teksti 2</td>
</tr>
</tbody>
</table>

Toinen esimerkki, jossa on 4 saraketta ja 5 riviä.

<table>
<tbody>
<tr>
<th>Ohje 1</th>
<th>Ohje 2</th>
<th>Leader 3</th>
<th>Leader 4</th>
</tr>
<tr>
<td>Teksti 1</td>
<td>Teksti 2</td>
<td>Teksti 3</td>
<td>Teksti 4</td>
</tr>
<tr>
<td>Teksti 1</td>
<td>Teksti 2</td>
<td>Teksti 3</td>
<td>Teksti 4</td>
</tr>
<tr>
<td>Teksti 1</td>
<td>Teksti 2</td>
<td>Teksti 3</td>
<td>Teksti 4</td>
</tr>
<tr>
<td>Teksti 1</td>
<td>Teksti 2</td>
<td>Teksti 3</td>
<td>Teksti 4</td>
</tr></tbody>
</table>

Lisää sarakkeita ja rivejä

Voit saada lisää rivejä aloittamalla tai sulkemalla uuden ”Taulukkorivin” ”Taulukon” <taulukko>…</taulukko> sisällä. Tämä näyttää tältä:

<tr>
…
</td>

Sarakkeiden lukumäärästä riippuen ”Taulukon tiedot” on sitten lisättävä.

<tr>
<td>Teksti 1</td>
<td>Teksti 2</td>
<td>Teksti 3</td>
<td>Teksti 4</td>
</tr>

Facebook-tapahtumamainokset & Page Like

Facebook-tapahtumamainosten ja sivutykkäysbannerien mallit luodaan parhaiten 1200 x 444 pikselin kokoisina. Facebook ei käytä tätä yksikköä, mutta nykyään on ajateltava monia laitteita, joilla mainoksia nähdään, kannettavista tietokoneista iPhoneihin. 1200 x 444 px:n resoluutio on aina tarkka kaikilla laitteilla, jopa nykyaikaisilla Retina-näytöillä.

Luomuotoilu 1200 x 444 pikseliä

Työpöytänäytön koko on 470 x 174 pikseliä / mobiilinäytön koko on 560 x 210 pikseliä.
– skaalautuu automaattisesti Facebook

Facebook-sivuston linkki & tarjousmainos

Facebookin verkkosivulinkki- ja tarjousmainokset eroavat toisistaan vain hieman pystysuuntaisten mittojensa osalta. Facebook käyttää 627 pikseliä 444 pikselin sijaan. Luo siksi aina verkkosivuston linkki- ja tarjousmainosbannerien suunnittelu 1200 x 627 pikselin kokoiseksi.

Luomuotoilu 1200 x 627 pikselissä

Työpöytänäytön koko on 470 x 246 pikseliä / mobiilinäytön koko on 560 x 292 pikseliä.
– skaalautuu automaattisesti Facebook

Jos olet enemmän kiinnostunut Facebook-markkinoinnista, tutustu Facebook-markkinointitoimistoomme.

Lisätietoja saat Facebook-markkinointitoimistostamme.

Ohjeet
Facebook-tykkäyssivun suunnittelu 4 askeleessa:

Vaihe 1: Facebookin graafinen ulkoasu Photoshopissa

PSD on kaksi kertaa vaadittua suurempi. Miksi? Sinulla ei siis varmasti ole ongelmia profiilikuvan kanssa, jonka mitat ovat suuremmat kuin todellisuudessa näkyvät pikselit. Aseta grafiikat annettuihin kansioihin (otsikko, profiili). Vinkki! Kuten malliin on merkitty ”EXAMPLE”, taustakerrokset yhdistävät profiilin ja otsikkokuvan. Näin siirtymä pysyy siistinä, ja voit siirtää taustaa vapaasti edestakaisin ilman ongelmia.

Vaihe 2: Deaktivoi esikatselukerros

Jos haluat tallentaa Facebookin profiili- ja kansikuvan, poista ensin ylätason ”profiilikuva – muoto” käytöstä.

Vaihe 3: Valitse ja leikkaa maskit

Valitse kahden kansion maskit (otsikko, profiili). Aivan yksinkertaisesti ALT + hiiren klikkauksella. Siirry takaisin normaalinäkymään ja rajoita kuva (Muokkaa > Rajaa). Näin saat alkuperäiset mitat. Muista: otsikkokuvan on oltava (vähintään) 850 x 315 pikseliä ja profiilikuvan (vähintään) 180 x 180 pikseliä, mutta näyttö on rajoitettu 160 x 160 pikseliä.

Vaihe 4: Tallenna ja lataa

Tallenna kuva jpg-muodossa laatutasolla 10, 11. Seuraavaksi voit ladata uuden profiili- ja kansikuvasi Facebook-tykkäyssivulle.

Lataa: 4x graafiset tiedostot Facebook-mainoskampanjoita varten (2014)

Vinkki! XXL-oppaamme: Facebook-mainokset – Mainonta, mainokset ja pikselit

[shortcode-muuttuja slug=”adsense”]

Facebook-tapahtumamainokset & Page Like

Luo malleja Facebook-tapahtumamainoksia ja Page Like -banneria varten 1200 x 444 pikseliä. Näin saat tarkan resoluution jopa nykyaikaisilla Retina-näytöillä.

Luomuotoilu 1200 x 444 px

Työpöydän näyttö: 470 x 174 px
– skaalautuu automaattisesti Facebook

Mobiilinäyttö: 560 x 210 px
– skaalautuu automaattisesti Facebook

Facebook-sivuston linkki & tarjousmainos

Facebookin verkkosivulinkki- ja tarjousmainokset eroavat hieman toisistaan pystysuunnassa. Tässä käytetään 444 pikselin sijasta kokonaisia 627 pikseliä. Tämä johtuu erilaisesta mainosformaatista. Luo suunnittelusi verkkosivuston linkki- ja tarjousmainosbannereille, joiden koko on 1200 x 627 pikseliä.

Luomuotoilu 1200 x 627 px

Työpöydän näyttö: 470 x 246 px
– skaalautuu automaattisesti Facebook

Mobiilinäyttö: 560 x 292 px
– skaalautuu automaattisesti Facebook

[shortcode-muuttuja slug=”adsense-content”]

[shortcode-muuttuja slug=”adsense”]