Drag-och-slÀpp-innehÄllsspel har blivit riktigt populÀrt de senaste Ären.
Om du till exempel gĂ„r till CodeCanyon och gör en snabb sökning efter “dra och slĂ€pp” fĂ„r du detta:
Det Àr mer Àn 220 plugins som svarar pÄ dra-och-slÀpp-sökfrÄgan! Och lÄt oss inte glömma att CodeCanyon inte Àr alla WordPress-plugins. Det finns mÄnga andra dra-och-slÀpp-plugins tillgÀngliga pÄ tredjepartswebbplatser och i det officiella pluginförvaret.
SÄ vad gör du nÀr du vill ha drag-och-slÀpp-innehÄllsmagi?
Tja, om du har pengar att investera, som jag sa, det finns flera premium-plugins (nÄgra av dem vi pratade om i en av vÄra granskningar / jÀmförelser). Du kan ocksÄ vÀlja en mer integrerad lösning och vÀlja ett helt WordPress-tema som redan har inbyggd drag-och-slÀpp-funktionalitet (vi har ocksÄ en lista med dem för dig).
Men.
Idag, lÄt oss hÄlla saker gratis!
HÀr Àr vÄr guide hur man skapar en fantastisk mÄlsida i WordPress med en gratis drag-och-slÀpp-innehÄllsbyggare.
Demonstrationen
LÄt oss börja med den roliga delen. HÀr Àr ett exempel pÄ vad som finns tillgÀngligt i dra-och-slÀpp-omrÄdet utan nÄgon investering alls:
Inget för komplicerat, beviljat, men det Àr inte heller nÄgot som standardinstÀllningen som WordPress tillÄter dig att göra.
Bara för att lista nÄgra coola detaljer om den lilla demosidan:
inget sidofÀlt, hjÀlteavsnitt i full bredd, layout med flera kolumner, kolumner med olika bredd, anpassade rubriker, helt responsiv struktur.
SĂ„ … du undrar nog:
Hur man skapar en mÄlsida i WordPress med dra och slÀpp
Först och frÀmst ska vi anvÀnda tvÄ plugins för att fÄ allt detta att hÀnda.
NĂ„gra mer detaljer om plugins:
De arbetar bÄda med ditt nuvarande WordPress-tema. Du kan anvÀnda dem pÄ inlÀgg och sidor. Du gör allt ditt arbete pÄ standardredigeringsskÀrmen i WordPress. Produktionen Àr lyhörd och mobilvÀnlig. Du kan anvÀnda widgets som innehÄllsblock i SiteOrigin. Det finns versionskontroll i SiteOrigin.
Viktiga mÄlsideselement
De flesta kvalitetslandningssidor har vanligtvis följande element:
Bra rubrikpresentation – stor och djĂ€rv. Minimala sidoelement, som sidofĂ€ltet, sidfotens innehĂ„ll eller nĂ„got annat som kan distrahera besökaren. Tydligt fokus pĂ„ bara ett enda mĂ„l. Detta kan vara en försĂ€ljning, ett lĂ€nkklick pĂ„ en affiliate eller ett prenumeration pĂ„ nyhetsbrev (vanligtvis). BerĂ€ttelsesdriven presentation – dĂ€r besökaren tas för hand genom varje avsnitt pĂ„ sidan tills de nĂ„r en sista uppmaning till handling. Uppmaningen till handling – frĂ„gan. Detta element berĂ€ttar för besökaren vad han ska göra. Bra visuell separation av de enskilda avsnitten pĂ„ sidan.
Vi kan antagligen lista Ànnu fler krav, men jag tror att det kommer att rÀcka för vÄr snabba demo hÀr.
1. Installera plugins
Inget snyggt hÀr, bara hÀmta dem via WordPress-installationsprogrammet () eller via WordPress.org (lÀnkarna ovan). Installera och aktivera.
(Glöm inte att du inte bara behöver det viktigaste SiteOrigin-plugin-programmet, utan ocksÄ det extra widgetpaketet.)
2. Skapa en sidmall
Det första beslutet att göra Àr om du ska skapa din mÄlsida som en WordPress eller en.
Tekniskt sett Àr det ingen skillnad. Men kom ihÄg att de flesta teman tillÄter dig att anvÀnda en mall i full bredd (utan sidofÀlt) för sidor, medan vÀldigt fÄ levererar sÄdan funktionalitet för inlÀgg.
SÄ i slutÀndan vill du förmodligen arbeta med en ny.
En gĂ„ng pĂ„ skĂ€rmen “LĂ€gg till ny sida” vĂ€xlar du direkt till “Sidbyggare”:
DÀrifrÄn har du möjlighet att antingen börja bygga nÄgot frÄn grunden eller anvÀnda en av de förbyggda layouterna.
I denna handledning ska vi bygga en mÄlsida i WordPress frÄn grunden, men jag uppmanar dig att kolla in de förbyggda layouterna ocksÄ och se vilken typ av mekanismer som sitter under huven dÀr . Var och en av dessa layouter Àr perfekt redigerbara, ingenting Àr dolt.
Det finns tvÄ huvudbehÄllartyper i SiteOrigin:
I grund och botten mÄste du först skapa en rad och sedan lÀgga till ditt innehÄll som en widget för att placera nÄgot slags innehÄll pÄ din mÄlsida.
HÀr Àr hur:
3. Skapa rader för din mÄlsida
Okej, sÄ för att komma igÄng behöver du en allmÀn uppfattning om hur du vill att din mÄlsida ska se ut.
HÀr Àr en grov struktur som jag kom pÄ:
Som du kan se, inget för snyggt.
Eftersom jag behöver ett bra exempel att arbeta med hĂ€r kommer syftet med denna mĂ„lsida att vara att marknadsföra min flickvĂ€ns (obefintliga) guide om “hur man syr en cool mössa pĂ„ mindre Ă€n 20 minuter.”
SÄ okej, genom utseendet pÄ saker behöver jag fyra individuella rader:
huvudrubriksektionen, detaljavsnittet – den som innehĂ„ller de tre bilderna, avsnittet om, opt-in-avsnittet.
FrÄn början:
Rubrikraden
Rubrikraden Àr en mycket enkel sak att göra, men ÀndÄ kan den se riktigt fantastisk ut!
HÀr Àr hur:
Klicka pÄ knappen i huvudgrÀnssnittet för SiteOrigin:
Ăndra sedan layouten till och klicka pĂ„:
LÄt oss nu lÀgga till en ny widget. Klicka pÄ knappen:
Byt sedan till “Widgets Bundle” och vĂ€lj “SiteOrigin Hero” -widgeten:
Klicka pÄ skiftnyckelikonen i det övre högra hörnet av din nya rad:
DĂ€rifrĂ„n, gĂ„ till avsnittet “Layout” i högra sidofĂ€ltet och vĂ€lj “Fullbredd strĂ€ckt” i rullgardinsmenyn “Radlayout”. Detta strĂ€cker sig hela raden, vilket i slutĂ€ndan gör det möjligt att ha en bild i full bredd i bakgrunden.
Men för att uppnĂ„ fullbreddseffekten behöver vi ett par steg till. Redigera först widgeten âHeroâ:
LĂ€gg till en ny âhjĂ€ltramâ:
Klicka pÄ den nya ramen för att redigera den:
Det Àr hÀr du kan lÀgga rubriken.
HÀr Àr min:
RĂ€tt under hela ramblocket finns det ett avsnitt som heter “Bakgrund”. I den kan du stĂ€lla in din bakgrundsbild i full bredd. Det fungerar precis som alla andra medier i WordPress. Klicka bara pĂ„ knappen “VĂ€lj media” och ladda upp en bild frĂ„n din dator.
NĂ€r du Ă€r klar klickar du bara pĂ„ huvudknappen “Klar” i det nedre högra hörnet. NĂ€r du Ă€r klar kan du klicka pĂ„ knappen “Förhandsgranska” pĂ„ hela sidan.
SÄ hÀr ser min mÄlsida ut just nu:
HÀftigt! Det Àr en bra start!
Detaljerad rad
Denna rad Àr dÀr jag placerade de tre smÄ bilderna i min design. Det Àr ocksÄ den första platsen dÀr vi ska anvÀnda Shortcodes Ultimate plugin.
SÄ hÀr ska jag gÄ vidare med att skapa det:
Börja med att lÀgga till en ny rad (precis som tidigare). Men den hÀr gÄngen vill jag ha tre kolumner och jag vill att de ska vara jÀmna:
Sedan, i var och en, ska jag lĂ€gga till en enkel widget som heter “SiteOrigin Editor”:
Detta Ă€r i grunden ett standardredigeringsfönster med all WordPress-redigeringsfunktion. Vad jag ska anvĂ€nda den till Ă€r ett mycket enkelt innehĂ„llsblock – bara en bild och lite text. SĂ„hĂ€r:
DÀrefter ska jag lÀgga till nÄgra Shortcodes Ultimate-magier hÀr! Mitt mÄl Àr att bilden ska visas pÄ skÀrmen efter en liten fördröjning och med en enkel animering.
För att fĂ„ det att hĂ€nda klickar jag pĂ„ knappen âInfoga kortkodâ högst upp pĂ„ redigeringsskĂ€rmen:
Vad du ser Àr alla Shortcodes Ultimate-kortkoder. Det hÀr kan vara lite skrÀmmande först, men det Àr faktiskt ett mycket anvÀndarvÀnligt system, och det finns nÄgra riktigt bra dokument.
Den kortkod jag ska anvĂ€nda heter “Animation”:
Experimentera gĂ€rna med alternativen i konfigurationsfönstret tills du ser nĂ„got som du verkligen gillar. Det finns en liten “Live Preview” -knapp lĂ€ngst ner för att hjĂ€lpa dig.
För nu kommer vi dock att pÄskynda saker och bara anvÀnda den fÀrdiga kortkoden direkt i redigeringsfönstret. Placera bara följande kod runt din bild:
[su_animate type="flipInY" delay="1"]YOUR_IMAGE_HERE[/su_animate]
Gör det sÄ hÀr (sÄ kortkoden finns runt bilden):
Det viktiga att mÀrka dÀr Àr att fördröjningsparametern Àr instÀlld pÄ.
DÀrefter skapar jag ytterligare tvÄ redaktörblock precis som den hÀr och lÀgger till liknande kortkoder dÀr, men jag tilldelar dem olika förseningar (för det andra blocket och för det tredje). Detta kommer att ge oss en bra utveckling.
SÄ hÀr ser min nya rad ut just nu:
Och sÄ ser det ut pÄ mÄlsidan:
Vid den hÀr tiden bör jag antagligen ocksÄ nÀmna att varje widget och varje rad kan ordnas med dra och slÀpp. Detta gör saker riktigt enkla för redigeringsarbete. HÀr Àr en demo:
Raden “Om”
Raden “Om” anvĂ€nder i princip samma widgetelement – “SiteOrigin Editor” -block – men den har tvĂ„ kolumner istĂ€llet för tre.
SĂ„ skapa en ny rad och stĂ€ll in den sĂ„ att den innehĂ„ller. StĂ€ll sedan in kolumnerna som ska delas i enlighet med det gyllene förhĂ„llandet och frĂ„n “Höger till vĂ€nster.” SĂ„hĂ€r:
SiteOrigin Àr till stor hjÀlp hÀr. Det gyllene förhÄllandet Àr bara ett av mÄnga fÀrdiga förhÄllanden att vÀlja mellan. Experimentera gÀrna med de andra ocksÄ:
InnehĂ„llet i dessa kolumner Ă€r ocksĂ„ ganska enkelt. Jag anvĂ€nder den bara för att hĂ„lla en “SiteOrigin Editor” -widget vardera och lite “Om” -information inuti:
Slutligen, hÀr ser det ut pÄ mÄlsidan:
Opt-in-raden
Det hĂ€r Ă€r vĂ„r sista rad och faktiskt den viktigaste raden för alla mĂ„lsidor – det Ă€r dĂ€r uppmaningen till handling sitter.
Jag anvĂ€nder en rad med tre kolumner och börjar med förhĂ„llandet instĂ€llt pĂ„ “JĂ€mnt”. Jag justerar emellertid mittkolonnen direkt sĂ„ att den bara tar upp 20% av hela bredden. SĂ„hĂ€r:
Som du kan se gör SiteOrigin det vÀldigt enkelt att justera vilken kolumn som helst. Du behöver bara klicka pÄ aktuell bredd och skriva in vilket vÀrde du vill ha.
Nu, mina kolumner:
Den första kolumnen Ă€r dĂ€r jag placerar en kort bit text som uppmanar mĂ€nniskor att lĂ€mna sina e-postadresser för att hĂ€mta nedladdningen. Bara en enkel widget “SiteOrigin Editor” hĂ€r. Det andra blocket Ă€r inte heller nĂ„got fint. Jag anvĂ€nder bara en pilikon för att peka pĂ„ opt-in-formulĂ€ret som kommer att placeras till höger. Ă terigen, gjort med widgeten “SiteOrigin Editor”. Den tredje kolumnen Ă€r dĂ€r magin hĂ€nder. Det Ă€r hĂ€r jag anvĂ€nder en widget frĂ„n mitt e-postleveransplugin. Den widgeten kommer att ta hand om att placera ett fungerande opt-in-formulĂ€r direkt pĂ„ sidan och ansluta det till min e-postprogramvara (kontakta din egen e-postleverantör för att fĂ„ reda pĂ„ hur den hĂ€r delen fungerar).
I slutÀndan Àr det hÀr min sista rad ser ut i drag-och-slÀpp-mÄlsidesbyggaren:
Och sÄ ser det ut pÄ mÄlsidan i WordPress:
MĂ„lsidan alla tillsammans
I detta skede Àr arbetet klart och du kan njuta av din nya mÄlsida byggd med lite drag-och-slÀpp-trick. Min har visat sig ganska trevlig, tycker jag. Kolla in det:
Att bygga nÄgot som detta Àr vÀldigt enkelt med SiteOrigin och Shortcodes Ultimate. NÀr du vÀl har fÄtt din idé behöver du inte en formgivares hjÀlp. Det faktum att du kan skapa allt detta pÄ egen hand gör dessa plugins hjÀlpsamma.
Slutligen fungerar processen med att bygga en mÄlsida som beskrivs hÀr med alla vÄra teman, sÄ det enda du begrÀnsas av Àr din kreativitet.
Se gÀrna detta inlÀgg i vÄra ThemeIsle-dokument för en lite kortare version av den hÀr guiden.
