Bootstrap shortcodes voor WordPress

Voor diegenen met weinig of geen kennis van html is Bootstrap 3 Shortcodes een geschenk uit de hemel. Zonder ook maar één regel html te schrijven, kun je met behulp van deze plugin toch gemakkelijk Bootstrap elementen gebruiken in berichten en pagina’s in WordPress. De shortcodes accepteren parameters waarmee je de elementen kunt instellen. De shortcode voor een button accepteert bijvoorbeeld de parameters type, size, link en target.

Om een kleine groene button te maken met een link die in een nieuw venster opent, gebruik je dus de volgende shortcode:

[button type="success" size="sm" target="_blank" link="https://wordpress.org/plugins/bootstrap-3-shortcodes/"]Bootstrap 3 Shortcodes[/button]

Het resultaat:

Bootstrap 3 Shortcodes

Ontzettend zijn de shortcodes waarmee je kolommen kunt maken op basis van het Bootstrap grid. Om tekst over twee kolommen te verdelen gebruik je de volgende shortcodes:

[row] [column md="6"] Kolom 50% breed
[/column] [column md="6"] Kolom 50% breed
[/column] [/row]

Het resultaat:

Kolom 50% breed
Kolom 50% breed

Alle beschikbare shortcodes staan beschreven op het GitHub project en je vindt daar ook de gebruiksaanwijzing. Je vindt er niet echt smeuïge voorbeelden, maar onder elke shortcode staat een link naar de documentatie van de betreffende elementen op de website van Bootstrap. Op de website van Bootstrap tref je wel de nodige voorbeelden aan.

Adament – WordPress Theme

Adament Bootstrap Wordpress Theme

Adament is een mooi gratis WordPress theme dat uitermate geschikt is voor een portfolio website. De homepage wordt gevuld door een bijna fullscreen slideshow die je kunt vullen met het custom post type Slide. Het custom post type Portfolio kan gebruikt worden om portfolio items toe te voegen aan een portfolio. Adament bevat een portfolio template om deze items op een mooie manier te vertonen. Tot slot is er de mogelijkheid om een eigen logo te uploaden en het kleurenschema van het theme aan te passen. Adament is te downloaden in ruil voor een tweet, like of +1.

Bootstrap ThemeRoller

Met behulp van Bootstrap ThemeRoller kun je veel instellingen van het theme aanpassen. Je kunt je voorkeuren instellen terwijl je daarnaast een voorvertoning te zien krijgt. De basiskleuren, typografie  en formulier elementen van het theme zijn aanpassen bij de basic settings. Wil je graag nog wat verder gaan, dan kun je bij de advanced settings nog veel meer naar je hand zetten. De kleuren voor de standaard buttons kun je met behulp van een color picker wijzigen of door een hexadecimale waarde in te voeren. Op dezelfde eenvoudige manier kun je er ook het uiterlijk van de navbar, meldingen, tabellen en dropdown menu’s aanpassen.

Beautiful Buttons for Twitter Bootstrap

De buttons van Bootstrap zijn heel herkenbaar en daarom zou je ze misschien wel wat willen aanpassen, zodat je website niet al te veel op andere Bootstrap websites lijkt. Beautiful Buttons for Twitter Bootstrap biedt een CSS generator waarmee je je eigen buttons kunt maken en vervolgens de CSS code daarvoor kunt kopiëren. Je kunt niet veel meer dan de kleuren aanpassen, maar indien je niet goed thuis bent in CSS, kan deze tool je goed pas komen.

Twitter Bootstrap Button Generator

Met behulp van de Twitter Bootstrap Button Generator van PlugoLabs maak je in een handomdraai buttons in verschillende formaten en stijlen, voorzien van tekst en icoontje. Je voert de tekst voor de button in en na acht keuzes te hebben gemaakt, kun je de benodigde HTML kopiëren om vervolgens in je website te plakken.

Navbar voorbeelden

De navbar van Bootstrap is vrij eenvoudig op meerdere manieren te gebruiken. De standaard navbar van Bootstrap is statisch en beslaat de volle breedte van de website. Je kunt er ook een fixed navbar van maken zoals op deze website. Plaats je de navbar in een container, dan kun je een vaste breedte aangeven. Op de pagina Navbar Examples van Webdesigntuts+ wordt besproken hoe de standaard navbar in elkaar zit en wat de mogelijkheden zijn. Daarnaast wordt voor de twee varianten stap voor stap uitgelegd hoe je de standaard Bootstrap Navbar kunt aanpassen. Alle drie de varianten van de navbar zijn responsive, waardoor ze ook goed op mobiele apparaten functioneren.

Premium Bootstrap themes en templates

Een grote verscheidenheid aan Bootstrap themes en templates van hoge kwaliteit vind je op WrapBootstrap. Momenteel zijn er ongeveer 250 te vinden in diverse categorieën. Ben je op zoek naar een theme of template voor een corporate website, dan ben je hier aan het juiste adres. Daarnaast zorgen landing pages, portfolio’s, admin templates en prijstabellen voor een zeer compleet en gevarieerd aanbod. Voor de meeste themes en templates betaal je rond de $15,-.

Qua aantallen kan BootstrapStyler niet tippen aan WrapBootstrap, maar deze website is toch het vermelden waard. Ook hier tref je een gevarieerd aanbod van Bootstrap themes en templates van hoge kwaliteit. Voor $39,- kun je een jaar lang alle themes en templates downloaden. BootstrapStyler belooft elke maand een nieuw theme te lanceren en je krijgt een jaar lang gratis support.

Gratis Bootstrap themes en templates

Op Bootswatch worden gratis Bootstrap themes aangeboden die vrij basic zijn. Het gaat hier ook puur om de CSS van Bootstrap. Je kunt hier dus geen pagina templates downloaden. Deze gratis themes zou je wel kunnen gebruiken in combinatie met de gratis templates die op de website van Bootstrap worden aangeboden.

Op Bootstrapfree worden wel complete themes aangeboden die pagina templates bevatten. Je vindt er themes voor onder andere WordPress en Drupal. Voor statische websites vindt je er het Bootbusiness theme dat pagina templates bevat voor onder andere productpagina’s, portfoliopagina’s, blogpagina’s en een contactpagina.

Virtue – WordPress Theme

Virtue Bootstrap Wordpress Theme

Virtue ziet er eenvoudig uit, maar schijn bedriegt. Het heeft ontzettend veel opties. Met verschillende layouts voor de homepage, een portfolio template, sliders en custom fonts, heeft het aardig wat premium eigenschappen. Bovendien is het theme volledig WooCommerce ready. Virtue is dus goed te gebruiken voor een online winkel. Ook voor een bedrijfswebsite of portfoliowebsite is het een geschikt WordPress theme.

Ondanks de vele opties in de gratis versie, kun je upgraden naar Virtue Premium. Je krijgt daarvoor premium sliders en carousels, breadcrumbs, custom post types en nog veel meer.

Blain – WordPress Theme

Blain Bootstrap Wordpress Theme

Blain is een vrij sober ogend gratis WordPress theme met een aantal premium features. Eén van die features is een responsive slider die gemakkelijk met foto’s te vullen is. De Blain Recent Posts widget is een custom widget die je laatste posts toont met een thumbnail. Je kunt een eigen logo en achtergrondafbeelding uploaden en je kunt ook heel eenvoudig social media iconen in de header plaatsen, die linken naar je betreffende profiel. Verder kun je kiezen of je de sidebar links of rechts wilt hebben of dat je helemaal geen sidebar wil hebben. Blain is tevens geschikt om als starter theme te gebruiken bij het bouwen van je eigen WordPress theme. De GPL License geeft je het recht om dat theme ook te distribueren.

Cirrus – WordPress Theme

Cirrus Bootstrap Wordpress theme

Nimbus Themes belooft dat bijna alle kleuren, lettertypen, layouts en features aan te passen zijn. Cirrus heeft dan ook behoorlijk wat theme options. Het barst van de sidebar widgets, wat de boel een beetje rommelig maakt in het wp-admin. Je kunt hierdoor wel op elke pagina een andere widget tonen. Links naar je social media profielen kunnen in de header weergegeven worden in de vorm van ronde icoontjes.

Indien je een eigen logo wilt uploaden, zul je moeten upgraden naar de Cirrus Premium. Je krijgt daar natuurlijk nog andere premium features bij. Je kunt bijvoorbeeld kiezen uit vier slideshow layouts op de homepage of je kunt een statische afbeelding tonen. Met behulp van shortcodes kun je een verscheidenheid aan buttons, iconen, lettertypen en afbeeldingsstijlen tevoorschijn toveren.

Nova – WordPress Theme

Nova Bootstrap Wordpress theme

Nova is een strak en rustig vormgegeven WordPress Theme met Bootstrap 2 aan boord. De gratis versie van Nova bevat al een aantal handige theme options. Zo biedt het je de mogelijkheid om een eigen logo en favicon te uploaden en kleuren en lettertypes aan te passen. Je kunt ook heel eenvoudig social media iconen in de footer plaatsen, die linken naar je betreffende profiel. De gratis versie heeft drie widgets areas; header, sidebar en footer.

De Premium versie van Nova bevat zeven page templates, drie portfolio templates en zes widget areas. Je kunt op elke pagina of post een andere widget weergeven. In het edit post scherm maak je eenvoudig sliders waarvan je de overgangseffecten kunt instellen in de theme options. Tot slot worden meer dan 30 shortcodes meegeleverd met de betaalde versie van dit WordPress theme.