CMSMS HTML5 Singlepage parallax template

CMSMS HTML5 Singlepage parallax template

CMS Made Simple 2.0+ | 20-12-2017 | Pascal Merks | Reacties


Voor CMS Made Simple heb ik een nieuwe template gemaakt om een Singlepage website te maken met parallax achtergronden. Voor deze template is geen uitbreiding nodig. Alleen de installatie van CMS Made Simple. Mocht je de slideshow of een Contact formulier willen gebruiken dan zijn de uitbreidingen Gallery en Formbuilder nodig.

Voorbeeld: http://single1200.pmkmedia.nl

Zip bestand met alle bestanden: http://single1200.pmkmedia.nl/uploads/files/Single1200-2.1.zip

 

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. slideshow (upload hier de bestanden uit de map uploads/slideshow van het zipbestand)

Ga naar inhoud/HTML-blokken en maak de volgende HTML-Blokken aan met de zelfde namen.

 

Stap 2 Themabeheer:

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

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

Stel Single1200 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 Mainpage en maak deze Standaard (check of hij Sjabloon Single1200 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 of andere firstlevel paginas het Sjabloon Single1200-parallax hier komt de parallax achtergrond.

Maak onder het kopje Home nog een pagina aan en die noem je bijvoorbeeld Home-2 (of een andere naam maar neit de zelfde als de bovenlichende) en geef deze het Single1200-pageleft of Single1200-pageright Sjabloon (kies of hij links of rechts mooier staat bij de afbeelding die je kiest voor deze pagina.)

Doe het zelfde bij alle andere pagina's. Hier een voorbeeld van hoe de pagina opbouw moet zijn.

 

Stap 5 Gebruikersgedefinieerde tags:

Maak een nieuwe UDT aan met als naam get_image en kopieer de inhoud uit het gelijknamige bestand in de map UDT van het zip bestand er in.

 

Stap 6 Achtergronden:

Ga naar Inhoud/Afbeeldingbeheer en maak een 2 nieuwe mappen aan met de namen backgrounds en pageimages.

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

Upload in de map pageimages alle afbeeldingen die bij je aangemaakte pagina's voor de tekst wilt hebben met de zelfde naam als je Pagina alias dus stel je Pagina alias is about-2 dan moet je achtergrond ook about-2.jpg heten (met kleineletters en deze mogen jpg, jpeg, png of gif bestanden zijn).

Als je de pagina structuur aanhoud die ik beschreven heb dan kan er niets fout gaan.

 

Als je nu naar je website gaat zal je zien dat hij nu netjes een Singlepage website toont en als je scrolt de achtergronden langzamer scrollen en er netjes een afbeelding naast de tekst staat.

 

Slideshow en Contact: (optioneel)

Voor de slideshow volg deze tutorial: http://pmkmedia.nl/news/32/88/CMSMS-Slideshow-voor-HTML5-Singlepage-Video-template

Op de pagina waar je de slideshow wilt vervang je het sjabloon Single1200-parallax met Single1200-slider. De rest werkt het zelfde alleen de sjabloon namen zijn met Single1200 er voor inplaats van Singlepage.

 

Mocht je een Contacformulier willen geef deze pagina het sjabloon Single1200-contact installeer de FormBuilder module en upload het Contactformulier sjabloon uit het zip-bestand en geef hem de naam contact. (E-mail adres en andere gegevens wijzigen naar die van jou website. Verzendsjabloon niet weizigen i.v.m. javascript).

 

Video header installeren: (optioneel)

Installeer eerst Single1200 1.7!

 

Stap 1 UDT aanmaken:

Maak een nieuwe UDT aan met als naam video en kopieer de inhoud uit het gelijknamige bestand in de map UDT van het zip bestand er in.

 

Stap 2 een nieuwe map aan:

Ga naar Inhoud/Bestandsbeheer en maak in de map uploads een map videos aan (hier komen de videos).

Upload in deze map 4 bestanden met de zelde naam als de Pagina alias van je video header.

  1. Het videobestand in MP4 formaat. (Bestandsextensie .mp4)
  2. Het videobestand in OGG formaat. (Bestandsextensie .ogv)
  3. Het videobestand in WEBM formaat. (Bestandsextensie .webm)
  4. Een preview afbeelding in JPG formaat. (Bestandsextensie .jpg)

Via deze website http://video.online-convert.com kan je je videos omzetten naar het juiste formaat of gebruik hier een programma voor dit http://www.any-video-converter.com/products/for_video_free/ is daar een goede voor.

 

Stap 3 video instellen als header:

Ga naar Inhoud/Pagina's.

Geef de Home of andere firstlevel paginas in het Opties tab het Sjabloon Single1200-video. Als inhoud vul je de gewenste tekst in die je wilt met maximaal 3 regels (zie demo website) om te voorkomen dat de video header uit zijn voegen schiet (meer tekst zie je niet). Als je geen tekst wil en alleen de video als header wil dan zet je een streepje "-" of de tekst "leeg" neer bij inhoud (zonder haakjes).

 

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 2.1
Wat is er veranderd in versie 2.1:

1. Geupdate naar CMS Made Simple 2.0+.

Link naar zip: http://single1200.pmkmedia.nl/uploads/files/Single1200-2.1.zip

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

1. Formbuilder sjabloon PHP error_reporting gefixt.
2. UDTs PHP error_reporting gefixt.

Link naar zip: http://single1200.pmkmedia.nl/uploads/files/Single1200-1.7.zip

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

1. Video header functie geupdate voor met en zonder tekst.
2. Slider header aangepast voor grotere schermen dan 1080p.

Link naar zip: http://single1200.pmkmedia.nl/uploads/files/Single1200-1.6.zip

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

1. Video header functie toegevoegd.
2. Loading screen toegevoegd.
3. Extra menu breekpunt op 960px om te voorkomen dat een lang menu de links onder elkaar zet.

Link naar zip: http://single1200.pmkmedia.nl/uploads/files/Single1200-1.5.zip

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

1. UDT voor pagina afbeeldingen (nu kunnen het  jpg, jpeg, png of gif bestanden zijn).

Link naar zip: http://single1200.pmkmedia.nl/uploads/files/Single1200-1.4.zip

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

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

Link naar zip: http://single1200.pmkmedia.nl/uploads/files/Single1200-1.3.zip

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

1. Mobile menu fix.
2. Gallery slider sjabloon fix.

Link naar zip: http://single1200.pmkmedia.nl/uploads/files/Single1200-1.2.1.zip

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

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://single1200.pmkmedia.nl/uploads/files/Single1200-1.2.zip

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

1. Menu sjablonen opgeschoont.
2. Achtergronden en afbeeldingen gekoppelt aan page alias inplaats van menutext.

Link naar zip: http://single1200.pmkmedia.nl/uploads/files/Single1200-1.1.zip

Reacties:

comments powered by Disqus

Laatst toegevoegd

Categorieën

Laatste reacties

Laatste tweets