Tutorial film: https://www.youtube.com/watch?v=F9UBPbsZ2Rs
1.Felveszem a kapcsolatot az ügyféllel:
„1. Google drive elérhetőség. Elküldöm a youtube linket. Elküldöm az e-mail címet.
Küldési cím: zsigrayandras@gmail.com”
- Kérem a domain nevet, és a menü oldalak nevét, számát.
3.Reklámtevékenység-ügyfelek-új mappa. Abban forrásanyag almappa.
2.Domain regisztráció – websupport nevem alatt
- Domain regisztráció – odafigyelni, hogy a web-video felhasználónév alatt. Be kell legyek jelentkezve a websupport oldalra.
2.Webbsupport adminnal belépni. Sluzby –ba belépni, kiválasztani a domain nevet. Ott bal oldalon felül kiválasztani a Pripojit lehetőséget. - WordPresset aktiválni. A domain név bal oldali listájában (CMS – redakcne systemy) megnyitni – wordpress regisztrálni.
Fontos az oldal nyelvének kiválasztása, és a password ismétlése. Megadni az oldal nevét, és egy jelszavat. Jelszavat generálni, belépő ugyanaz ami az oldal neve. Majd az adatokat elmenteni az András exel tábéázatba a websupport fül alá. Kontakt email: info@weboldal-reklamfilm.sk
A wordpress oldalra úgy lépek be, hogy a domain név + /wp-admin (és ide írom be belépő kódokat)
Ha .hu akkor több, mint 24 óra is lehet a regisztráció. (lesnaskola@gmail.com, info@weboldal-reklamfilm.sk – ezekre az email címekre érkeznek a belépő kódok)
3.Wordpress alapbeállítások
Ssl certifikacio
– sluzby, kikeresni domant, amire akarom a certifikatot
– bal oszlopban ssl certifikat
– pridat, vitvorit novy certifikat
-ha van már certifikát, akkor visszamenni a fomenure. És feljebb a menuoszlopban ott van a web. Ott az első sor, az oldal internet címe – majd lejebb bekapcsolni a https módot, és ulozit. Ha nincs meg az ulozit, akkor advanced settingset kinyitni, és ott less.
Bővítmények:
– classik editor,
– elementor, elemtor pro (a pro a használt programoktó . elemetor-pro.zip)
– really simple ssl (és kell, kilépni, újra bejelentkezni),
– instagram (smash ballon social photo feed) /
– duplicate page (kék alapon két lap egymás felett),
– updraft (narancssárga kör, megforduló nyíllal a közepén)
Oldal beállítások
Beállítások menüpont:
Általános: holnap neve (׀, ǀholnap egysoros leírása, időzóna, honlap nyelve (a név a megnyitott oldalak fülcímkéjén jelenik meg)
Olvasás: keresőmotorok kikapcsolása (majd ha kész lesz az oldal, akkor vissza)
Megjelenítés menu pont
– Testreszabás: honlap ikon kiválasztás (512×512)
-Sablonok:hello elementor – új hozzáadása
4. CSS oldal létrehozás
Oldalak=új oldal: Kezdőlap (vagy inkább CSS oldal, a betűk beállítására) =szerkesztés elementorral
Elementorban: Bal lent-beállítások=(leglent fogaskerék) oldalelrendezés: teljes szélesség elementorban
Betűk-színek beállítása: Egy headinget – címsort beteszek a szagatott szegélyű téglalapba. Nem kell oszlopokat beleraknom. Beállítom H1-re. Mégegy címsort beteszek, belehúzom az elsőbe, és alá. Beállítom H2-re.Belehúzok még egy címsort, alájuk húzom – beállítom h3-ra.Mégegyet, azt H4-re.
Közzététel
Három vonal bal felül=webhelybeállítások (azért hoztam létre a négy betűtípust, alapszöveget, gombot, hogy téma stílusban beálljtsam őket, és élőben lássam a változást css oldalon:
(Mielőtt folytatnám, kilépek az elementorból és bemegyek az elementor beállításokba és letiltom az alap színeket, és betúket, hogy a sablonom paraméterei érvényesüljenek.Modósítások mentése.)
Tipográfia: body a szövegszerkesztő rész. És ott van a H1, H2, H3, H4
Első beállítás a body szövegtípusa=typography:Karla/nagyság:16/sormagasság:28 (ha nem a pixelen van, akkor csere)/vastagság:600 (ezt nem tanítja, de az övé úgy néz ki)
Második a title/cím betű beállítás, amely a legnagyobb, és a H1-vel van jelölve. Merriweather.
Harmadik=H2: ugyanaz a betűtípus, mint a H1, csak kicsivel kisebb betűk. Ugyanez a H3-ra. H5=idézet, H6=Kézzelírás / beállítom a gombot, és a színeket is. (színsablon weboldal – jó színek egyben.) Frissítés, és kilépek.
- Header építés. Sablonok=theme builder: új létrehozása, kiválasztani alehetőségek közül a headert, majd elnevezni headernek. Nem használok sablont, és a sráctól sem töltök fel semmit.
Belépek elementorba, megnyomom a plusszot, és egy nagy oszlopot létrehozok.
A nagy oszlopba belehuzok egy képet. Nem logot, mert a képnek több opciója van. Azért kell külön logo a háttértől, hogy responsiv legyen. Túl nagy, kicsit össze kell húzni. Középső oszlop stílus: pixelre váltok a szélességnél, és beállítom.Még tehetek szöveget, és vonalat is. A vonal elválasztónak van nevezve. Vastagságát, színét beállíthatom.
Hátérképhez kiválasztom a szekciót, beszúrom a képet. Beállítások: középre-középre/nincs ismétlés, és borító. Szekcióban bemegyek a haladóba, és belső margónál fent is, lent is 40. Ha lent a kép, akkor vágok 20% photoshopban.
„14.Beállítom a header mobil verzióját. Mindig ha késszen vagyok egy szakasszal, akkor beállítom a tablet, mobil verziót, mert amikor másolom a szakaszt, akkor már a változtatásoknak ott kell lenni. Ha nincsenek, akkor az összes oldalon külön kell változtatnom.
– rákattintok a szekcióra, és bemegyek a mobil nézetbe.
a, Ha valamit nem akarok mobilban látni, akkor rámegyek a haladóra, majd responsive beállításra, és Hide on mobile.
b, a méreteket változtathatom stílusban (szélesség) Fontos PX-re váltani. /ami változtatható, az mellett ott van a kis ikon szg, tablet, mobile. „
15.Menu. Nem a piros gombra kattintok, hanem a mappára, és betöltöm a srác templátumát. A mappában kidobja az elementor sablonokat, képernyőn jobb oldalt fent van a felfele mutató kisnyíl, az a feltöltés, és megkeresem a menu jason.
„Rákattintok a menu oszlopra, kiirja baloldalt, hogy nincsenek menuk. Adja a linket a figyelmeztetés alatt. Jobb click: Megnyitni új oldalon a hivatkozást. Kidob a megjelenítés fő menüpontba, ahol a hello elementor sablon van, és a testreszabás. Alattuk a menu.
Kilépek innen, és megkeresem az oldalakat. A menü szerint létrehozom az oldalakat, csak név, és közzététel. Majd vissza a megjelenés mappa, és menük. Elnevezni a menüt fő menünek, és kiszedni a simple paget, egyebeket, majd sorrendbe helyezni. „
Vissza az elemetorba. Nem frissítem, hanem bemegyek, és mentem a vázlatot. Majd fent a kereső sávban, félkörrel frissítem az oldalt.
Formátozom a betöltött sablont. Ez egy újabb szakasz, megváltoztatom a háttér színét. Bemegyek a menübe, és formátozom a menu vízszintes elhelyezkedését, aláhúzás megjelenését, majd a stilusban a betúket, színeket, aláhúzó színét.
Fontos, hogy a mobil verziót szintén beállítom menüben is.
41:33 blogpostot kezdi
Ahoz, hogy betudjunk szúrni blogpostot, először kell csinálni egy blogspot oldalt.
Bejegyzés fő menu pont – új hozzáadása.
Classic editor plugint bekapcsolni
Cím, tartalom, kategória.
Kiemelt kép: ami megjelenik a blogpost ablakokban, és a blogpost megnyitásában is.
Kép kiválasztása, és publish-közzététel.
Duplicate postal szerkesztem a következőt.
47:02 kezdi a Kezdőlapot
9 pötty – pro rész – post – behuzom a nagyobb részbe.
Megnyitom a kezdőlapot. Mappára kattintok, feltöltöm a home coloumot.
Elkezdi a testreszabást. 2 colom per sor, frissit, kilép.
Téma stílus. Link színe zöld, mert a postban linkek vannak.
8 post per oldal
Image position: top
Meta data: a kisbetús a címszó alatt
Except length: 15
Stilus:
Colums gap: 30
Rows gap: 30
Content: sapcing: 10
típography: 16 méret
Read more: 14 nagyságú
read more bettipus változtatás
read more után kiveszi a háromszöget
1:11:43 Kategory page-t kezdi, utána a blogpost oldal jön
Megcsinálom a menu szerint az oldalakat, és az aljára beteszem a category blogpost dobozt. Megfognak ott jellenni a témával kapcsolatos cikkek, ha sok less akkor oldalazás nyilakkal.
1:14:11 Blogpost page.
Legfelül kisbetúvel mutatja kategoriát, aztán nagy betú cím, alatta kisbetú datum.Aztán cikk képekkel, legalul előző-következő… share gombok…kapcsolódó cikkek blogpost rész.
Theme builder – single – uj – postot bejelölöm-bejegyzés – elnevezem blogpost templatenek.
Átmegy a homepageba, és az egész szekciót bemásolja. Kitörli a blogspot szekciót, side meghagyja.
Berak post title (single)
Featured image (single)
…bedopja magától egy postot. Ha a posztot le akarom cserélni, akkor bal lent – beállítások . prewiev settings – kikeresem. Automatikusan változtatja a képet, és szöveget.
single (post info – föléjük. Csak a dátumot hagyom meg. Ikont kitörlöm. Behuzom a cím alá a dátumot.
Behoz egy titlet ami már formátozva van, és a szövegmegváltoztatásnál a job oldalon felül kis kukaszerű ikon, ott adok dinamikus tartalmat. Dynamic text: post terms. Megjelenika settings: taxonomy: kategoris (1:18nál)
Behuzom a kép alá a post content (single)
behuzom a previous és next (single) ..formátozza. cask a next és egy nyil.
kilenc potty: keresés: share button ..három karika..kettő összekötve. Formátozom: cask az ikont hagyom meg. Minimal, circle, színváltozás…
Alá teszem releated articles:
alap . heading: főcim. – elnevezem releated artcicles.
Home pageról másolom a post szekciót.
8 helyett 4 coloumot hagyok.
Query beállítás: source: releated
exclude: *current post (kivéve jelenlegi post)—frissítés. (include – posts – all
53:44 elkezdi a side bart.
Template készítés tudnivalók. Csak a szekciót lehet elmenteni. Ezért a side barba először inner sectiont teszünk. Belső szakasz. És az egyiket kitörlöm. Mert az inner szekció alapban két táblázattal jön be. /mikor végeztem akkor leellenőrzöm, hogy minden vacak a belső szekción belül van, majd save template. Megnevezem. Ezután kitörölhetem, és a kilencpöttyös lehetőségekben, van olyan, hogy template, ott behozom. De ekkor már sárga lesz, csak a sablon, theme buildernel tudom szerkeszteni. És ezért nem szabad egy oldalon belül szerkeszteni headertm, mert csak azon az oldalon hoz változást. Kint kell.
+ megjegyzések: pl a post bejegyzést menthetem sablonként, mint a szekciót. Csak a dobozt nem. Ha nem akarom kis részenként átmásolni, akkor érdemes a dobozból szekciót csinálni.
Először rámegyek az inner sekció coloumra, és a haladóban a paddingot feloldom a kötött alól. Unlink the padding.
Első sidebar elem: fényképes köszöntő. Behuzok egy képet. Feltöltök egy profil képet. Behuzok alá egy címsort. H3 ra változtatja. És középre rakja az aligmentet. Behuzok még egy titlet. Monserat 14, 300 castag. Pici betúk, vékonyak. Transform: uppercase. Betúk közti távolság 3, zöld szín, átnevezi flodd bloger.
Behuz egy szövegszerkesztőt. Aliment közép. Első cimsor copy, és beilleszti utolsónak. Nicone betű, 22. Sok a hely az utolsó címsor, és szövegszerkesztő között. Bemegy a szövegszerkesztő, haladó, -20 alul a marginban. Van egy kis hely a képnél az oldalakon. Rámegyek a képre, haladó, unlunk padding. És ekkor szétugrik a kép teljes doboz nagyságra.
Következő elem: My personal favourites 58:55
Behuz egy elválasztót – divider. content: add element: text. Be a styleba: text: position balra. Typography. Divider: szíválasztás, szövegváltoztatás
Ez egy blogpost szekció. Elnevezem legujabb munkáinkra. Bemásolom a baloldali szekciót a kicsibe. Content- layout. Columns: 1, image position: left, image widh. 34%, experct text: kikapcsolom. Style. Rose gap 20.
Most nagyon fontos lépés jön. Beálljtani, hogy ez a blogpost szekció, cask a legujabb katzegoriákat tegye be. Query: include by: term. Termben megkeresni a kategóriát.
Layout: post per page: 3.
Bele amobil verzióba. Ott is cask egy coloumnsot hagyni. A title betút kisebbre. Dividert is.
Következik a reklám hozzáadása.
Copy az elválasztónak. Közösségi szolgáltatásaink, Call to action. Content: skin: cover. Sztyel: button: Border with: 0, / style: box: vertical position: bottom. / content: kitörli középső szöveg. 1:05:56
Utolsó szekció:
Fedezd fel. Elvélasztót, és a reklámot is másolom. Szyle: vertical position: middle. Texet kitörli, cask a gombot hagyja meg. Styele: button: hover …kiveszi az átlátszót. Hoover effect: hover animation: shrink. A kép növekedik, a gomb összemegy. Image – style: high: 100. Gombot fehér háttérre változtatja. Duplicate, és kép csere.
Megnézem, hogy minden az inner sekcióban van, és template.
„Footer: 1:21
Sablonok-team builder- footer. Nem a piros kör, hanem a mappa, belemegyek..behozom a srác első footer sablonját. „
Beraktam felsőt, alsót. Rákkattintok az also plusz gombjára, berak kettő közé. 9 pötty. Kereső short code…behuzom középre. Közzététel. Add condition..entire side…ugy hagyni. Kimenni az instagram bővítményhez (smash ballon) Connect viragosmuhely. Ugyanitt az instagram beállításokban harmadik fent a menuben a: display your feed. Legfelsőt, legrövidebbet másolni, és beillesztenni a shortcodba az instagram szekcióhoz. frissítés. Visszamegyek a vezérlőpulthoz, bele smash ballon settingbe, és második menu pont: customize. Number of photos:8 / Number of coloums:8 / padding around images:0 (vagy ahogy nekem tetszik 5) Header rész: show feed header: kivenni a pipát, show biotex: kivenni a pipát, show the load more: kivenni a pipát. – kicsit lejebb/ show the load button: kivenni a pipát. Módosítások mentése. Fontos kivenni a DISABLE MOBILE LAYOUT …OTT VAN A COLOUMSOK ALATT.
——————————
Beállítások-olvasás-kezdőoldal: bemutatkozás.
Megkeresni mit írjon ki az url-ben. Szép leirás, ne id page (Beállítások, közvetlen hivatkozás)
Nem elfelejteni telefonszámokat aktivra. Szövegszerkesztő..link…(tel:telefonszám)
Ha legközelebb piros háromszög, akkor : websupport ssl certifikacia nainstalacia spravne…(googleba)… Valamint duplikacator websupport..oldalmásolásnál.