Articles in Category: ShortCode

Stileer je website met Shortcode

naar de website van Shortcode

Shortcode is wat het woord zegt: een korte code die je in je pagina inlast met een groots resultaat. Het maakt een groot aantal losse extensies compleet overbodig.

Veel code zoals die op BDthemes kun je direct gebruiken, als je tenminste  de bijbehorende CSS-stijl maar in je  custom html-pagina meekopieert.

Maar als Joomla plugin werkt het pas echt aangenaam.

Hieronder staat een beperkt aantal voorbeelden:

Tips voor Shortcode

on donderdag, 09 november 2017. Posted in Joomla, ShortCode

Tips voor Shortcode:

1. Editor: liefst TinyMCE en schakel die op code

2. Kies de Insert Shortcode button (zie onder). Je krijg dan het hele panel met alle codes te zien om uit te kiezen.

 

3. Als je Shortcode zichtbaar wordt kun je daarbinnen ook weer nieuwe, geneste ShortCode plakken, ook weer met de Insert ShortCode button.

4. Je kunt ook de complete Shortcode inclusief CSS (vanaf de demosite van Shortcode) in de html plakken, zo ben ik begonnen met Shortcode uit te testen.
Maar als je Shortcode op je website installeert, hoeft die CSS-code hoeft niet er meer bij. En heb je ook meer codes tot je beschikking.

Met Shortcode zie je in de editor nooit het eindresultaat, dat zie je pas op je live pagina.  Maar er is wel een live preview in de editor.

ShortCode werkt in pagina's.

In modules moet je bij opties 'Bewerk inhoud' op 'Ja' zetten (staat default op Nee)

Daar heb ik handig gebruik van gemaakt door de 'Bewerk inhoud' button lekker op Nee te laten staan, dan wordt de onderliggende code niet vertaald en aan de front-end voor jullie zichtbaar.

  1. voor dit doel plakte ik de Shortcode in een module (Custom html) met ± dezelfde naam als mijn voorbeeld.
  2. die module hoef ik verder nergens aan een menu te koppelen en heeft ook geen positie nodig
  3. die module voeg ik in op de pagina achter het betreffende ShortCode-voorbeeld, precies in de tekst waar die moet komen. Hoe deed ik dat?
    - click de Module-button (zie plaatje hierboven) dan kan je uit een panel van al jouw modules kiezen om in te voegen. Degene die je net aanmaakte (staat meestal boven).
  4. En de inhoud van die module wordt lekker NIET vertaald zodat jullie hem kunnen zien.

En dan nog dit:

Maak je browser venster eens kleiner en weer groter.
Je ziet hoe de inhoud zich netjes aanpast, dus volledig responsive op mobiel.

Beperking: bij mobiele weergave komen onderdelen die eerst naast elkaar stonden altijd onder elkaar te staan, wat je ook doet of hoe smal je jouw kolommen ook maakt, 1/4, 1/8 etc. Dat was voor mij een teleurstelling, het is meer dat je het weet!

Row

on woensdag, 08 november 2017. Posted in Joomla, ShortCode

Met row heb je  veel meer controle over de inhoud

Je kunt er van alles inzetten, ook media, Youtube etc., the sky is the limit.
De indeling kun je helemaal voor jezelf op maat maken, 1/3 2/3 5/7 etc. Met gewoon wat proberen zie je het effect, maar er is ook een live preview in de 'Insert Shortcode' dialoog.

1/3 column 1
1/3 column 2
1/3 column 3

Dit is de code voor Row:

[row] [column size="1/3"] [panel text_align="center"]1/3 column 1[/panel] [/column] [column size="1/3"] [panel text_align="center"]1/3 column 2[/panel] [/column] [column size="1/3" last="1"] [panel text_align="center"]1/3 column 3[/panel] [/column] [/row]

Box shortcode

on woensdag, 08 november 2017. Posted in Joomla, ShortCode

Box Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

dit is de code voor Box:

[box title_color="#f4e7d7" box_color="#737373"]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.[/box]

3 kolommen met Youtube filmpjes

on woensdag, 08 november 2017. Posted in Joomla, ShortCode

Hier weer het voorbeeld met de 3 kolommen met Youtube filmpjes

Maar nu is er op de plaats van  'Column Example' weer een ShortCode voor 2 Youtube filmpjes geplakt. De derde heb ik expres leeggelaten, zodat je ziet wat er gebeurt.

1/3 Column Example

kolommen met Youtube

dit is de code voor 3 kolommen, waarvan 2 met Youtube:

[row] [column size="1/3"] [panel text_align="center"][youtube_advanced url="https://youtu.be/0_nPD7POiKo " width="600" height="300" rel="no"][/panel] [/column] [column size="1/3"] [panel text_align="center"][youtube url="https://www.youtube.com/watch?v=J2rCnAh4ZDU" width="300" height="200"][/panel] [/column] [column size="1/3" last="1"] [panel text_align="center"]1/3 Column Example[/panel] [/column] [/row]