Med Visual-composer plugin’et bliver det super nemt at tilføje lækkert indhold på din webside – både på dine sider, men også på dine blogindlæg. Tilgangen til at tilføje et blogindlæg er det samme som nævnt i indlægget Sådan tilføjer du et blogindlæg.
Men når du når ind på den side hvor du ønsker at tilføje dit indhold er fremgangsmåden en lille smule anderledes.

BEMÆRK: Som udgangspunkt anbefaler jeg IKKE at bruge visuel composer til indlæg/blogposts.
Jeg bruger det selv udelukkende til sider, da visuel composer ikke fungerer ens med de forskellige temaer og derfor kan du risikere at dine blogindlæg “fucker helt op” når du skifter tema, hvis de er lavet med Visuel composer,  men arbejdsgangen, uanset om du opretter en side eller et indlæg er den samme.

På dette screenshot kan du se et indlæg der er bygget med visuel composer. Her får du mulighed for at blande tekst og billeder uden at skulle bekrymre dig om besværlige koder.

 

Til dette indlæg har vi fået lov at “låne” skærmbilleder fra siden Uanvendelig.dk – så hvis du ikke er til heste, må du lige se bort fra de mange billeder af heste ;)

1:Vælg Visual Composer

Først og fremmest skal du starte med at vælge “backend editor” funktionen.
screen-shot-2016-12-19-at-09-48-45

Når du har valgt denne funktion, vil din brugerflade for at tilføje et nyt indlæg se lidt anderledes ud. Nemlig således:

screen-shot-2016-12-19-at-09-48-56

Klik på funktionen “+Add Element” og du vil nu få mulighed for at tilføje forskellige typer indhold.
Som udgangspunkt vil vi i dette indlæg KUN fokusere på billeder og tekst sammen, men du kan med Visual Composer tilføje mange forskellige typer indhold til din side.
Standard indhold, som tekst, billeder og video er altid tilgængeligt, men alt efter hvilket tema du har installeret på din side, vil du også have andre mulighedeer.

Når du har klikket på “+Add Element” får du denne funktion frem. I dette indlæg starter vi med at tilføje tekst. Det normale tekstfelt, hvor du kan skrive dit indhold hedder “Text Block”.

screen-shot-2016-12-19-at-09-49-06

Ikonet for “Text Block” kan se anderledes ud eller placeret et andet sted i din Visual composer menu – det afhænger igen af hvilket tema du har installeret på siden.

2:Tilføj tekst

Når du har tilføjet et tekstfelt (text block) kan du skrive din tekst i denne. Du behøver ikke her i starten at fokusere så meget på de forskellige valgmuligheder. Skriv blot din tekst og tryk på “Save Changes” når teksten er færdig.

 

3:Tilføj et billede

Efterfølgende vil du måske gerne have din tekst understøttet af nogle billeder. Dette gøres således:
screen-shot-2016-12-19-at-09-49-52Under dit tekst felt vil du nu se at du har mulighed for at klikke på et lille plus. Ved at klikke på dette plus får du endnu engang mulighed for at vælge hvilken type indhold du vil tilføje.

Denne gang vælger du istedet “Single Image”.
Igen kan udseendet på denne funktion variere alt efter hvilket tema du bruge, men som udgangspunkt vil funktionen altid hedde “single image”.
screen-shot-2016-12-19-at-09-50-00

 

Klik på “single image” og herefter får du mulighed for at vælge hvilket billede du vil tilføje under “Single Image Settings”.
Klik på det lille grønne plus, for at tilføje et billede.

screen-shot-2016-12-19-at-09-50-11

 

Vælg hvilket billede du vil tilføje dit indlæg og afslut med “Set image” – den finder du nederst i højre hjørne.

4:Størrelse på billedet

Mange vil opleve at deres billede ikke optræder i fuld størrelse når de bruger “Visual Composer”.
Dette skyldes at Visual Composer, som udgangspunkt altid vælger at vise et billede som “Thumbnail”.
Det er derfor vigtig at du husker at rette dette, når du sætter et billede ind på din side. Dette gøres når du har valgt det billede du ønsker at bruge.
Bemærk at i “Single Image Settings” lige under det sted du tilføjer billeder kan ændre på billedets størrelse via “image Size”.

Dette gøres ved at du ændrer teksten “thumbnail” til “full”. Det er VIGTIGT at du IKKE staver “full” med stort – hvis du gør det, risikerer du at systemet ikke genkender din din “kode”.

Visual Composer fungerer i princippet sådan, at den oversætter siden kode, til noget vi visuelle mennesker kan forholde os til.

Når du har rettet størrelsen klikker du “Save Changes” og så har du indsat et billede på din side.

screen-shot-2016-12-19-at-09-50-59

 

 

screen-shot-2016-12-19-at-09-51-11

5: Flere billeder ved siden af hinanden

Én af de ting der er helt genial ved visual composer, er den evne den giver os til, uden kode, at tilføje flere forskellige typer indhold der er delt op i f.eks flere spalter.
Jeg viser her et eksempel på hvordan du kan lægge 2 billeder ved siden af hinanden.

Som du kan se i det område jeg har markeret med rødt, er der mulighed for at du kan vælge flere spalter.
I dette eksempel vælger jeg derfor at tilføje 2 spalter – som hver især skal indeholde et billede.

screen-shot-2016-12-19-at-09-51-24

Istedet for at vælge én spalte i toppen, vælger du ved siden af den funktion der illustrerer 2 spalter.

 

 

screen-shot-2016-12-19-at-09-51-42

Hvis du ønsker 2 billeder ved siden af hinanden er det nemmeste at kopiere det billede du allerede har lagt ind. Herved får du nemlig også dine indstillinger omkring størrelse med.
Du kopierer et element ved at klikke på det lille ikon jeg har markeret med rødt på billedet ovenfor – “Clone single image”.

screen-shot-2016-12-19-at-09-51-58Du kan nu se at der ligger to ens billeder i spalten under hinanden. Ved at klikke på det lille “flytteikon” jeg har markeret kan du trække billedet over i den anden spalte – således at billederne optræder ved siden af hinanden.

screen-shot-2016-12-19-at-09-52-46

Når du har flyttet billedet over i den nye spalte skifter du billedet ved at klikke på det lille redigeringsikon jeg har markeret.

screen-shot-2016-12-19-at-09-53-26Skift til det billede du ønsker at bruge istedet – og gem ændringerne.

6: Det endelige resultat

Husk at før du udgiver dit indlæg kan du kontrollerer at det ser ud som du ønsker det – ved at vælge “Forhåndsvis”. Dette åbner et nyt vindue hvor siden vises som den vil se ud når den er udgivet.
Luk vinduet med forhåndsvisningen og udgiv derefter dit indlæg.

 

screen-shot-2016-12-06-at-10-54-16-copy