Websites

on dinsdag, 21 november 2017. Posted in Portfolio, Joomla

Leuk om te weten - de peilers voor mijn websites zijn natuurlijk Joomla en:

  1. Gantry
  2. Shortcode
  3. en soms ZOO (met name voor veel data)

Portfolio van websites:

 

Natuurlijk deze website: renevanelk.com

De Oudshoornse Kerk: oudshoornsekerk.nl

Trouwen aan de Oude Rijn:  trouwenaandeouderijn.nl

Familie website Van Elk Wat Wils:  vanelkwatwils.nl

Ja, ik geef het toe, deze laatste moet weer eens gerestyled worden en is met een Yootheme template, niets mis met Yootheme overigens.

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!

Gantry

on dinsdag, 21 november 2017. Posted in Joomla, Gantry

Gantry is voor deze site als template gebruikt!

Gantry biedt je een fantastische grafische interface met bouwblokken voor de opbouw van je pagina's. Je kunt blokken slepen en modules komen echt waar je ze wilt hebben.

Het kostte wat moeite om het onder de knie te krijgen, maar voor mij was het de investering dubbel en dwars waard.

Op de Joomla Gebruikersgroep Leiden JUG071 gaf ik een presentatie over Gantry. Het helpt als je weet waar je moet beginnen....

Gantry installeren:

Ga naar http://gantry.org/downloads en ga naar de Joomla sectie. Maak niet de fout die ik maakte door de Grav 1.1.19 pakketten te dwonloaden, die is niet voor Joomla.

  1. Download de 3 pakketten
  2. Installeer eerst joomla-pkg_gantry5_v5.4.19.zip
  3. Pas dan kunnen de twee andere templates geinstalleerd worden, Helium en Hydrogen (de allernieuwste)

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]