CMSMS HTML5 Singlepage Video template

CMSMS HTML5 Singlepage Video template

CMS Made Simple 1.11.x / 1.12 | 22-04-2015 | Pascal Merks | Reacties


Voor CMS Made Simple heb ik een simpele template gemaakt om een Singlepage website te maken met een fullscreen achtergrond of video. Voor deze template is geen uitbreiding nodig. Alleen de installatie van CMS Made Simple. Mocht je de slideshow gebruiken is de uitbreiding Gallery nodig.

 

Voorbeeld: http://video1200.pmkmedia.nl

Zip bestand met alle bestanden: http://video1200.pmkmedia.nl/uploads/files/VIDEO1200-1.6.zip

 

In het voorbeeld zie je op de achtergrond een video afspelen. Ik ga je laten zien hoe je dat in CMS Made Simple makkelijk voor elkaar krijgt. Als je alleen een mooie achtergrond wil dat kan ook.

 

Stap 1 CMS Made Simple installeren:

Installeer CMS Made Simple en activeer Pretty Url:

http://docs.cmsmadesimple.org/configuration/pretty-url

Ga naar Inhoud/Bestandsbeheer en maak 3 mappen an in de map uploads

  1. icons (upload hier de bestanden uit de map uploads/icons van het zipbestand)
  2. js (upload hier de bestanden uit de map uploads/js van het zipbestand)
  3. videos (hier komen de videos)

Ga naar inhoud/HTML-blokken en voor bij het footer block je eigen footer tekst in.

 

Stap 2 Themabeheer:

Ga naar Opmaak/Themabeheer/Importeer en upload het bestand VIDEO1200-Theme.xml

Nu zijn alle Sjablonen/Stylsheets en het Menu sjabloon aangemaakt.

Stel VIDEO1200 in als standaard sjabloon.

 

Stap 3 Main pagina aanmaken:

Verwijder alle pagina's bij Inhoud/Pagina's behalve de Home pagina.

Maak een nieuwe pagina aan met de naam Main en maak deze Standaard (check of hij Sjabloon VIDEO1200 gebruikt.)

WYSIWYG niet toestaan voor deze pagina: uit (aanvinken bij deze)

Deze pagina is doorzoekbaar: uit

Toon in menu: uit

Deze pagina word de pagina waar alle andere pagina's op terecht komen. Vul op deze pagina een goed beschrijving van je website in. Dit is voor de zoekmachine de pagina!

 

Stap 4 Pagina's aanmaken:

Ga naar Inhoud/Pagina's.

Geef de Home pagina het Sjabloon VIDEO1200-pageleft of VIDEO1200-pageright (kies of hij links of rechts mooier staat bij de achtergrond die je kiest voor deze pagina.)

Maak nu de pagina's aan die je wilt een geef ze het VIDEO1200-pageleft of VIDEO1200-pageright Sjabloon.

Vul je pagina's in.

 

Stap 5 Achtergronden:

Ga naar Inhoud/Afbeeldingbeheer en maak een nieuwe map aan met de naam backgrounds.

Upload in deze map alle achtergronden die bij je aangemaakte pagina's horen met de zelfde naam als de Pagina alias dus stel je Pagina alias "contact" is dan moet je achtergrond ook contact.jpg heten (met kleineletters en alleen jpegs)

Als je nu naar je website gaat zal je zien dat hij nu netjes een Singlepage website toont en als je scrolt de achtergrond veranderd naar die jij hebt gekozen per pagina.

 

Stap 6 Videos (optioneel):

Je hebt in Inhoud/Bestandsbeheer een map videos aangemaakt. In deze map upload je de videos die bij je pagina horen. Dit moeten 3 video formaten zijn MP4, WEBM en OGV. Geef deze weer de zelfde naam dus stel je Pagina alias dus stel je Pagina alias "contact" is dan moet je achtergrond ook contact.mp4, contact.webm en contact.ogv heten (met kleineletters en alleen mp4, webm en ogv).

Via deze website http://www.online-convert.com/ kan je de video omzetten naar de juiste formaten. De videos op de demo zijn ook via deze site omgezet.

Als je de videos in de map hebt gezet met de goede naam dan zal de website de video pakken inplaats van de achtergond. Een tablet of smartphone pakt altijd de achtergrond.

 

Dat was het weer. Veel plezier er mee en zijn er vragen of ben ik iets vergeten zeg het maar!

 

Voorbeeld video:

 

Changelog:

Upgrade naar versie 1.6
Wat is er veranderd in versie 1.6:

1. Naamswijziging naar VIDEO1200.

Link naar zip: http://video1200.pmkmedia.nl/uploads/files/VIDEO1200-1.6.zip

Upgrade naar versie 1.5.2

Wat is er veranderd in versie 1.5.2:

1. Formbuilder sjabloon PHP error_reporting gefixt.

Link naar zip: http://video1200.pmkmedia.nl/uploads/files/Singlepage-1.5.2.zip

Upgrade naar versie 1.5.1

Wat is er veranderd in versie 1.5.1:

1. WEBM video formaat toegevoegd.

Link naar zip: http://video1200.pmkmedia.nl/uploads/files/Singlepage-1.5.1.zip

Upgrade naar versie 1.5

Wat is er veranderd in versie 1.5:

1. Grid geupdate naar 1.7.
2. Menu highlighter toegevoegd.

Link naar zip: http://video1200.pmkmedia.nl/uploads/files/Singlepage-1.5.zip

Upgrade naar versie 1.4.1
Wat is er veranderd in versie 1.4.1:

1. Mobile menu fix.

Link naar zip: http://video1200.pmkmedia.nl/uploads/files/Singlepage-1.4.1.zip

Upgrade naar versie 1.4
Wat is er veranderd in versie 1.4:

1. Nieuwe verbeterde js bestanden voor de website en slider. (upload alle bestanden opnieuw als je een oudere versie gebruikt!)
2. Gallery slider sjabloon verbeterd.
3. Geen tekst in WYSIWYG editor gefixt.

Link naar zip: http://video1200.pmkmedia.nl/uploads/files/Singlepage-1.4.zip

Upgrade naar versie 1.3.1
Wat is er veranderd in versie 1.3.1:

1. Grid geupdate naar 1.5.1
2. Google Chrome video achtergrond gefixt.

Link naar zip: http://video1200.pmkmedia.nl/uploads/files/Singlepage-1.3.1.zip

Upgrade naar versie 1.3
Wat is er veranderd in versie 1.3:

1. Menu sjablonen opgeschoont.
2. Video en achtergronden gekoppelt aan page alias inplaats van menutext.

Link naar zip: http://video1200.pmkmedia.nl/uploads/files/Singlepage-1.3.zip

Upgrade naar versie 1.2
Wat is er veranderd in versie 1.2:

1. Stylesheet aangepast voor betere weergave van content elementen.
2. Er word nu een laadscherm weergegeven tot dat alles netjes is ingeladen.
3. Slideshow voor de gallery module toegevoegt klik hier voor de uitleg.

Link naar zip: http://video1200.pmkmedia.nl/uploads/files/Singlepage-1.2.zip

Upgrade naar versie 1.1
Wat is er veranderd in versie 1.1:

1. Stylesheet aangepast voor betere weergave portretstand op een ipad/tablet.
2. Page sjablonen verbeterd.
3. Contactformulier aangemaakt speciaal voor deze Template (E-mail adres en andere gegevens wijzigen naar die van jou website. Verzendsjabloon niet weizigen i.v.m. javascript).

Link naar zip: http://video1200.pmkmedia.nl/uploads/files/Singlepage-1.1.zip

Reacties:

comments powered by Disqus

Laatst toegevoegd

Categorieën

Laatste reacties

Laatste tweets