Hur man skapar en fantastisk mÄlsida med en gratis drag-och-slÀpp-innehÄllsbyggare

Hur man skapar en fantastisk mÄlsida med en gratis drag-och-slÀpp-innehÄllsbyggare

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:

mÄlsidesdemo

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.

mall för full bredd

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”:

sida-byggare-switch

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.

startbyggnad

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.

webbplatsorigin-layouter

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Ä:

mÄlsidesdesign

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:

ny rad

Ändra sedan layouten till och klicka pĂ„:

1-kolumn-rad

LÄt oss nu lÀgga till en ny widget. Klicka pÄ knappen:

add-widget

Byt sedan till “Widgets Bundle” och vĂ€lj “SiteOrigin Hero” -widgeten:

hjÀlte

Klicka pÄ skiftnyckelikonen i det övre högra hörnet av din nya rad:

rycka

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.

fullbredd strÀckt

Men för att uppnĂ„ fullbreddseffekten behöver vi ett par steg till. Redigera först widgeten “Hero”:

widget-redigera

LĂ€gg till en ny “hjĂ€ltram”:

hjÀlte-ram

Klicka pÄ den nya ramen för att redigera den:

hjÀlte-ram-redigera

Det Àr hÀr du kan lÀgga rubriken.

HÀr Àr min:

rubrik

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.

bild-bakgrund

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:

mÄlsida ver1

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:

rad-3-kolumner

Sedan, i var och en, ska jag lĂ€gga till en enkel widget som heter “SiteOrigin Editor”:

widget-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:

editor-innehÄll

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:

add-shortcode

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”:

SU-koder

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):

kortkodsbild

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:

3-rader

Och sÄ ser det ut pÄ mÄlsidan:

su-animation

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:

dra och slÀpp

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:

2-kolumner-instÀllningar

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Ä:

förhÄllanden

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:

ca-rad

Slutligen, hÀr ser det ut pÄ mÄlsidan:

mÄlsida ver3

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:

kolumner-justera

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:

opt-in-row

Och sÄ ser det ut pÄ mÄlsidan i WordPress:

mÄlsida ver4

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:

fullstÀndig mÄlsida

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.