Templates maken met Helix 3 framework - Presentatie Eric Tiggeler Joomladagen 2015 10 april 2015

2. Tekstschrijver
Schrijfboeken
Boeken over Joomla:
www.joomla.erictiggeler.nl

3. 1. Template nodig, wat dan?
2. Wat zijn frameworks?
3. Wat biedt Helix 3?
4. Helix3 in de praktijk
5. Het geheime wapen van Helix
6. Ingebouwde extra’s
7. De moraal

5. Gemak dient de mens:
gebruik de standaardtemplate

6. Logo, header, kleuren aanpassen
(hoofdstuk 4, Tips en tools voor Joomla 3)

7. De luxe kant-en-klaarvariant:
gebruik een gedownloade template

8. Voorbeeld: Favourite van FavThemes.com
(hoofdstuk 7, Tips en tools voor Joomla 3)

9. Eigen recept: bouw zelf een template
met rauwe ingrediënten

10. Basis in
HTML en CSS
+ Joomla-codes
+ Bootstrap =
eigen template
(uit: hoofdstuk 7 Tips en tools voor Joomla 3)

11. De mix: een beetje van jezelf, een
beetje van een framework

13. • Template met basisvormgeving
• Veel ingebouwde ‘features’
• Bedoeld om zelf aan te passen

14. • Niet vanaf nul beginnen
Je hoeft het wiel niet opnieuw uit te vinden
• Geavanceerde extra’s ingebouwd
Responsive lay-out, megamenu,
• Basistemplate eenvoudig aan te passen
Vele tientallen ingebouwde opties
• Gebaseerd op bestaande codebibliotheken Vaak
Bootstrap als basis
• Gratis te gebruiken
Geen verplichte zichtbare copyrightregels

15. • Er zijn er veel concurrerende frameworks
Welke werkt het beste, welke blijft bestaan?
• Gecompliceerd
Template + scripts + extensies
Features die je niet gebruikt, zitten er ook in
• Een systeem binnen een systeem
Elk framework: eigen logica, eigen interface
• Documentatie versnipperd
Weinig stap-voor-stap tutorials. Hoe wijk je af
van de ingebouwde mogelijkheden?

16. Erg veel keuze …
Afbeelding: /www.joomlart.com/blog/t3-framework/the-pros-and-cons-of-competing-joomla-template-frameworks

17. • T3 (joomlart.com)
• Warp 7 (yootheme.com)
• Gantry 4 (gantry-framework.org)
• Gavern (gavick.com)
• Helix 3 (joomshaper.com)
• Wright (joomlashack.com)
• Bootstruct (construct-framework.com)
• JV framework (joomlavi.com)
• EF4 (joomla-monster.com)
… en meer

21. Joomshaper maakt templates,
extensies en het Helix-framework
Fonkelnieuwe versie Helix 3
sinds eind februari 2015

23. Recent geïntroduceerd (februari 2015) en
actief ondersteund door de makers
• Visuele ‘layout builder’: layout
aanpassen zonder coderen
• Kleuren per layoutblok aanpasbaar
(achtergrond, tekst, links)
• Responsive lay-out en responsive
menu’s

24. • Powered by Bootstrap 3.2
• Sticky (vaste) menuheader
• Ondersteunt Google fonts
• Css aan te passen via ‘custom.css’
• Claim: goede, moderne code,
‘lichtgewicht’

25. Voorbeelden: Helix II en Helix 3

27. • HelixII
• Responsive

28. •Taalweblog
•Helix3

29. •Website bij Engels Joomlaboek
•Helix3

30. Off-canvas menu
op tablet/mobiel

32. Voor bestaande site:
alleen template + system plugin
Voor complete
demosite: Quickstart
Pack

33. Zo ziet de site eruit na installatie
van het Quickstart Pack

34. Hoe verander je de instellingen?
• Zoals bij elke template:
Extensies > Templatebeheer > Stijlen >
[helix3] - Standaard

35. Een aantal voorbeelden,
van logo tot lay-out

36. • Tab Basic > Logo
• Upload eigen logo
• Resultaat:

37. • Geen overbodige logo’s en copyrights
• Tab Basic > Footer
• Resultaat:

38. • Tab Basic > Boxed Layout > Yes
• Tab Basic > Body Background Image >
Selecteer achtergrondafbeelding
• Resultaat:

39. • Tab Typography > Body Font
(of Heading 1, Heading 2 enz.)
• Kies een Google font (met live preview):

40. Google Fonts
Het resultaat:

41. • Tab Presets: vier
kleurenschema’s

42. • Of bepaal zelf het kleurenschema: kies
de Text Color en
Major Color:

43. Het geheime wapen van Helix:
Layout Builder
(tab Layout)

45. • Van onder naar boven vind je alle
templateblokken en moduleposities
• Blokken (divs): Top Bar, Header, Title, enz.
• Moduleposities: top1, top2, enz.

46. Blokken in de Layout Builder
= de code van de template
= wat je ziet aan de voorkant van de site:
<section id="id="sp-top-
bar">
Modulepositie top1, top2
enz.
Logo, menu

47. Eenvoudig moduleposities verslepen
Bijvoorbeeld het logo:1
2
3

48. Het resultaat van het verslepen van een
modulepositie:

49. Bijvoorbeeld de menubalk (Header)
Versleep de header
Oorspronkelijke positie
Verplaatst

50. • Via ‘Add columns’ voeg je kolommen toe of
kies je andere kolomverdeling
• Effect aan de voorkant: smallere positie voor logo

51. • Aan de lege nieuwe sectie moet je nieuwe
moduleposities toewijzen: zie
www.joomshaper.com/documentation/helix/creating-module-positions
Nieuwe rij
In de lay-out
Nieuwe sectie

52. De Layout Builder is meer dan alleen layout:
• Klik op Settings
• Pas de kleuren van het blok aan:

53. • Voorbeeld: in de sectie Header kiezen we een
blauwe Background Color

54. Snel effect op de paginavormgeving door blok
voor blok de kleuren aan te passen

55. • Je kunt met de Layout Builder nog veel meer
eigenschappen van elke sectie/modulepositie
veranderen:
• Achtergrondkleur
• Tekstkleur
• Background image
• Linkkleur (en hoverkleur)
• Bovendien de ruimte rondom:
margin en padding
• … en je kunt de responsive weergave
aanpassen: verbergen op tablet en phone
en desktop

56. • Welke pagina-onderdelen zijn wel en niet zichtbaar op
desktop, tablet en phone?
• Per sectie (row) en modulepositie kun je de
zichtbaarheid bij responsive weergave aanpassen

57. Responsive weergave
aanpassen: voorbeeld
• Bijvoorbeeld de sectie Top bar:
zichtbaar op desktop, niet op kleiner scherm
Desktop Tablet

58. Met de Layout Builder kun je:
1. Moduleposities verplaatsen (verslepen)
2. Secties (paginablokken) verslepen: hoger/lager
3. Breedte van moduleposities aanpassen
4. Nieuwe moduleposities maken:
in nieuwe kolom of rij
5. Kleuren bepalen van alle vaste paginablokken:
achtergrond, tekst, links
(en margin en padding van die blokken wijzigen)
6. Responsive weergave bepalen

59. O ja, en het is iets anders dan
de Page Builder.
Dat is een soort CCK dat
je los van Helix kunt
gebruiken:
http://www.joomshaper.com/page-builder

60. Niet alles kun je aanpassen met de
ingebouwde opties

61. Andere aanpassingen: via CSS
• Ga naar Templatebeheer > Stijlen > [naam template]
• Tab Custom Code:
• Vul code in bij Custom CSS:
• Resultaat:

62. Meer wijzigingen? Maak een
bestand custom.css
Ga naar Templatebeheer > [naam template] > Details and
files
• Maak een bestand custom.css

63. • Voer de benodigde code in en sla custom.css
op
• Hetzelfde
resultaat:

66. Standaard zijn ze beide
actief
Megamenu:

67. Off-canvas menu:

68. Off-canvas menu:
Toont menumodule (of andere
module) in de positie
‘offcanvas’

69. Megamenu: geïntegreerd in
de standaard-Joomla-
menu’s

70. Megamenu: modules in een
menu plaatsen
Backend Frontend

71. Extra tab in het artikelbewerkscherm:
Helix Blog Options
Eigenlijk CCK-achtige artikelformats

72. Voorbeeld van het format ‘Video’:

73. Voorbeeld van het format ‘Gallery’:

75. • Helix3 is een krachtig framework,
lekker up-to-date, behoorlijk
gebruiksvriendelijk.
• Maar het is niet het enige framework.
Kijk op de demosites van verschillende
frameworks, probeer ze uit
• Zwaar, licht, krachtig, simpel: kies een
framework dat bij jouw wensenlijstje
past.

76. http://www.joomshaper.com/documentati
on/helix3/helix3-basic-settings

77. Happy frameworking!