Par savjeta kako članak da izgleda vizuelno ljepše

Neću nekog uvoda pisat bespotrebe, ovo su nekih par jednostavnih trikova da vaš članak izgleda ljepše, pošto ja veze nemam o kodiranju html css i ostalom vjerujem da neće biti problem i ostalim koji ne znaju iste stvari da skontaju.

U wp članak prebacite sa visual u text verziju da bi mogli ga poćet uljepšavat

trenutno članak tj dio članka koji ćemo uljepšavat izgleda ovako

Ođe neću pričat o h2 h3 tagovima boldu buletima krivim slovima i ostalom šta većina znaju i koriste, no o manje korištenim a lakim stvarima. Primjere ću davat pa onda objasnit koliko ja znam za šta služi sta u kodu.

<p style="border:3px; border-style:solid; border-color:##FF0000; padding: 1em;">Ođe ide text</p>

Ovaj kod za paragraf će napravit box oko teksta i to izgleda sad ovako

u kodu border i ovo 3px označava debljinu linije boxa kolor je boja a pading mislim koliko je tekst odmaknut od bordera ili border od ivica (nisam siguran).

Ukoliko želite mjenjati boje ivica preporučujem ovaj sajt https://html-color-codes.info/ i tu jednostavno izaberete boju koju želite i samo u kodu dje stoji border color zamjenite šifru boje

Ukoliko npr želite da obojite pozadinu text u boxu samo dodajteu onaj dio style ovaj text, boje možete birati na onom linku gore što ostavih background:#F5F6CE;

<p style="border:3px; border-style:solid; border-color:##82FA58; padding: 1em; background:#F5F6CE;">Ođe text</p>

i to sad ovako izgleda

ukoliko želite da se boja preliva sa jedne u drugu dodajte ovaj kod znate već đe da se ne ponavaljam background: linear-gradient(to right, #9FF781, #A9E2F3);

ođe više primjera i oblika prelivanja https://www.w3schools.com/css/css3_gradients.asp

ukoliko želite da tekst nije okružen ivicama samo iz koda obrišite border:3px; border-style:solid; border-color:##82FA58;

Ukoliko želite da vam ivice bordera ne budu oštre no zaobljene dodajte ovaj kod border-radius: 25px;

ovdje više o tome https://www.w3schools.com/css/css3_borders.asp

ukoliko želite da vam ivice boxa budu crtice ili tačke ili duple ivice


samo umjesto border-style:solid; stavite border-style: dotted;
ili border-style:dashed; ili border-style: double;

ukoliko želite box da ima sjenku dodajte samo box-shadow: 10px 10px;

to izgleda ovako

evo još jednom kod da se ne zaboravi
<p style="border: 3px; border-style: solid; border-color: ##82FA58; padding: 1em; background: #F5F6CE; box-shadow: 10px 10px;">Ođe text</p>

Eto toliko od mene, možda nekom ovo koristi i možda je lakše ovako kad neko ko se pretjerano ne razumije objasni i sve slika. Ako ko još koji savjet ima nek podjeli.

Ja sam izdjelio neke stvari koje ja volim i koristim i za koje mislim da uljepšavaju i prave članak preglednijim kao i da ističu bitne stvari. Naravno ovo je prvenstveno za vizualni efekat, ostalo isticanje kao što su H tagovi bold italic, bulet i nubmber liste i sl pored vizuelnog imaju i posredni SEO značaj. Ovo vizuelno uljepšavanje takođe može imati i SEO značaj jer će korisnici vjerovatno duže ostajati i više vjerovati sajtu koji lijepo izgleda i koji je lijepo složen, koji ističe bitne stvari. Primjetio sam da i ja na članku koji je lijepo složen koji ima ovakve boxove, bulet liste, h tagove, boldove i sl baš duže ostajem

15 Likes

@anja1, postajes web dizajner :slight_smile:

Iskreno, prava je steta sto Wordpress nema jos neke dodatne opcije u visual baru ali predpostavljam da je postoje plugini koji rade ovaj dio posla. Na svu srecu, jednom kada se shvati kako se lako moze mjenjati vizuelni izgled kroz kod, samo je masta granica!

Baš sam nedavno te boxeve vidjela na nekom webu i mislila da bi tako nešto ja trebala počet koristit. Taman mi ovo došlo :+1:

Osobno takve i slične stvari koristim oduvijek i mogu samo potvrditi da za SEO jeste potrebno napraviti nešto sasvim drugo (kako i Anja kaže), ali vizuelno bez dvojbe je pozitivno. :blush: Tebi Anja sam odmah dao like na još jednom kvalitetnom i korisnom topicu, jer naravno da je više nego dobro da znamo napisati i poneki kod u našu web stranicu, a ne se samo oslanjati na (automatski) WP. :wink:
Na koncu, baš zato jer ovo jeste Forum za webmajstore, a ne… recimo poljodjelce. :smile: Svaka hvala njima i čast svakome, da ne bude zabube (ovo je bilo slikovito), i oni su dobrodošli ovdje, u slobodnom vremenu ili s laptopa u polju. :blush: :o:

SEO u mnogome zavisi i od posjetilaca, ako se duže zadržavaju sa člancima, više članaka prelistaju i sl bolje će i sam taj članak rangirat i prestiće one članke koji su iznad njega a gdje se korisnik kraće zadržava tako da nije da nema uticaj vizuelni efekat na SEO, ima recimo nedirektan uticaj za razliku od gore nekih nabrojanih stvari koje direktno utiču i ima uticaj tek kad je članak u top 10-20 jer tek tad gugl može izmjerit ponašanje pojedinaca i reagovanja posjetilaca na rezultat koji su posjetili sa njihovog pretraživača.

Da, da i ja sam ih počeo koristit nakon što sam vidio da ih jedan sajt jak iz moje niše koristi i da to stvarno izgleda ljepše tako.

No da se vrnem na temu ako npr imate dvije ili više cjelina (dijelova texta) koji su razdvojeni enterom a želite da ih oba ubacite u box, obojite im pozadinu ili nešta slično nećete uspjeti. evo primjera

pogledajte gdje je kod za paragraf zatvoren, ali posto je enter udaren box će biti samo do tog entera jer se pretpostavljam automatski zatvara kod za paragraf nakon entera i to izgleda ovako


iako bi box trebao biti nakon ove riječi pleasure?"

Da bi to riješili samo dodajte samo između tih razdvojenih tekstualnih cjelina ovaj kod &nbsp; kao u ovom primjeru dolje


Takođe ukoliko želite da u boxu imate bold text ili npr h2 tag nećete moći sa ovim gore kodom koji sam podijelio ranije jer bi u tom slučaju novi tag razdvojio <h2> ili <strong> upao između otvorenog taga za paragraf (bar ja to tako kontam) i sve bi se poremetilo. da bi se to riješilo i mogao se kod za boxove i sl koristiti ukoliko postoji potreba za korištenjem h tagova strong taga i sl onda je najbolje koristiti div tagove i taj kod izgleda ovako

<div style="border: 15px; border-style: solid; border-color: #82FA58; padding: 1em; background:#97F6EB;"> Ođe text može i h2 tag i bold i sl i ne treba se koristiti onaj kod za razdvajanje textualnih cjelina</div>

stilove možete proizvoljno mjenjati, debljinu ivica, sa ili bez ivica, boju pozadine, pading, margine, shadow…


u kod pored nekih navedenih stajlinga možete pading izmjenit i to je provjerih odmicanje texta od ivica npr evo ako stavim pading da bude 5em umjesto 1 to izgleda ovako


pading možete mjenjat da bude odmaknuto odozgo odozdo s lijeve ili desne bande dolje na linku kodovi
https://www.w3schools.com/css/css_padding.asp
4 Likes

Par članaka sam dotjerao tvojim kodovim. Thanks. Svakako izgleda oku ugodnije, pa ću da nastavim. Hvala anja1

Drago mi je da je od koristi moje pisanije. Živio

1 Like

<div style="border: 6px; border-style: solid; border-color: #82FA58; padding: 2em; background-image: url('https://images.vexels.com/media/users/3/129356/isolated/lists/7666b77bbc94b969982afaade36913c2-best-chicken-logo.png'); background-repeat: no-repeat; background-position: right left; background-size: 90px 90px; background-color: #e0f2f7; border-radius: 25px;">
<h2 style="text-align: center; text-decoration: underline; letter-spacing: 3px; text-shadow: 1px 1px red;">Our #1 Pick</h2>
<span style="color: #8181f7;">
<img class="alignright" style="width: 200px; height: 290px;" src="https://www.jocooks.com/wp-content/uploads/2018/01/instant-pot-chicken-noodle-soup-1-3.jpg" alt="Chicken noodle soup" />"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? </span>

<strong style="color: red;">Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</strong>"

<a style="background-color: #4caf50; border: 2px solid; color: white; padding: 17px 44px; text-align: center; display: block; width: 50%; font-size: 19px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); margin: auto;" href="https://www.amazon.com/" target="_blank" rel="nofollow noopener">Buy Now on Amazon</a>

</div>

Novo u ovom boxu, što ranije nisam pominjao, je ovaj logo best čiken koji je dodan u box i dodat je da bude samo kao background
background-image: url('https://images.vexels.com/media/users/3/129356/isolated/lists/7666b77bbc94b969982afaade36913c2-best-chicken-logo.png'); background-repeat: no-repeat; background-position: left top; background-size: 90px 90px;
pošto sam viđao i ovo na nekim sajtovima mislim da nije loše, promoviše se brend, djeluje kao da je bitno mišljenje tog sajta i da su recimo experti

naslov our #1 pick je takođe stilizovan sa nekim novim kodovima da se vide mogućnosti i nauči štogođ novo
<h2 style="text-align: center; text-decoration: underline; letter-spacing: 3px; text-shadow: 1px 1px red;">Our #1 Pick</h2>
decoration uderline znači da je podvučeno, spacing razmak međ slovima text shadow je sjena

<a style="background-color: #4caf50; border: 2px solid; color: white; padding: 17px 44px; text-align: center; display: block; width: 50%; font-size: 19px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); margin: auto;" href="https://www.amazon.com/" target="_blank" rel="nofollow noopener">Buy Now on Amazon</a>
e sad i meni je novo ovo da se ovako može napravit prilično lijep baton, ranije sam uvijek ove batone ka amazonu pravio kao sliku pa samo ubacim link, evo može i na ovaj način se pravit baton.

3 Likes

Počeo sam koristiti tvoje kodove. Još posla koji mi nije trebao :slight_smile:

Šalim se, super su i gledam iskoristiti gdje god se može.

Hvala još jednom na postu. Znali smo i mi to od davno, većina nas, ali lijenost je čudo jedno…


Copyright © 2020 WM Forum - AboutContact - Sponsored by: Mydataknox & Webmaster.Ninja