Hieronder vind je een WordPress cheat-sheet met belangrijke en veel gebruikte codes voor ontwerp, lay-out en webdesign.

Cheat-sheet shortcodes WordPress plugin

KolommenButtons, tabs, expand, etcBetaalde versie

Kolommen | Ultimate shortcodes

==================== KOLOM 2x ==================== [su_row][su_column size="1/2"]

`Kopje 1`

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus et leo eget tellus hendrerit scelerisque. Cras venenatis ultrices nulla. Quisque at dui. Fusce ante leo, mattis vitae, lobortis vitae, cursus porta. [/su_column][su_column size="1/2"]

`Kopje 2`

==================== KOLOM 3x ==================== [su_row][su_column size="1/3"]

`Kopje 1`

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus et leo eget tellus hendrerit scelerisque. Cras venenatis ultrices nulla. Quisque at dui. [/su_column][su_column size="1/3"]

`Kopje 2`

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus et leo eget tellus hendrerit scelerisque. Cras venenatis ultrices nulla. Quisque at dui. [/su_column][su_column size="1/3"]

`Kopje 3`

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus et leo eget tellus hendrerit scelerisque. Cras venenatis ultrices nulla. Quisque at dui. [/su_column][/su_row]

==================== KOLOM + AFBEELDING ==================== [su_row][su_column size="1/3"]

`Kopje 1`

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus et leo eget tellus hendrerit scelerisque. Cras venenatis ultrices nulla. Quisque at dui. [/su_column][su_column size="2/3"] [/su_column][/su_row]


[su_row][su_column size="2/3"]


[/su_column][su_column size="1/3"]Kopje 1
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus et leo eget tellus hendrerit scelerisque. Cras venenatis ultrices nulla. Quisque at dui.

[/su_column][/su_row]

[su_row][su_column size="1/4"]
Poes A
Lorem ipsum dolor sit amet, adipiscing elit. Phasellus et leo eget tellus hendrerit scelerisque. Cras venenatis ultrices nulla. Quisque at dui.

Lees meer

[/su_column][su_column size="1/4"]
Poes B
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus et leo eget tellus scelerisque. Cras venenatis ultrices nulla. Quisque at dui.

Lees meer

[/su_column][su_column size="1/4"]
Poes C
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus et leo eget tellus hendrerit scelerisque. Cras venenatis ultrices nulla at dui.

Lees meer

[/su_column][su_column size="1/4"]
Poes D
Lorem ipsum dolor consectetuer adipiscing elit. Phasellus et leo eget tellus hendrerit scelerisque. Cras venenatis ultrices nulla. Quisque at dui.

Lees meer

[/su_column][/su_row]

Buttons, tabs, expand | Ultimate shortcodes

voorbeelden van Ultimate Shortcodes
==================== BUTTON ====================


[su_button url="https://www.cursuswp.com/" target="blank" style="flat" background="#888888" size="4"]Ga naar cursusmateriaal[/su_button]
[su_button url="https://www.cursuswp.com/" target="blank" style="flat" background="#fff654" color="#d40000" size="4" radius="0"]Ga naar cursusmateriaal[/su_button]
[su_button url="https://www.cursuswp.com" target="blank" style="flat" background="#cc0000" size="6" icon="icon: arrow-right" icon_color="#fffffe"]Tekst nog aanpassen[/su_button]
[su_button url="https://www.cursuswp.com" target="blank" style="flat" background="#cc0000" size="8" icon="icon: arrow-right" radius="4" icon_color="#fffffe"]Tekst nog aanpassen[/su_button]
[su_button url="https://www.cursuswp.com" target="blank" style="flat" background="#000066" size="10" icon="icon: arrow-right" icon_color="#fffffe" radius="0"]Tekst nog aanpassen[/su_button]
Bekijk kleuren:

www.cursuswp.com/kleur
====================

TABS 3x

====================

[su_tabs][su_tab title="Tab 1"]
Kopje van tab 1
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus et leo eget tellus hendrerit scelerisque. Cras venenatis ultrices nulla. Quisque at dui. Fusce ante leo, mattis vitae, lobortis vitae, cursus porta.

[/su_tab][su_tab title="Tab 2"]
Kopje van tab 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus et leo eget tellus hendrerit scelerisque. Cras venenatis ultrices nulla. Quisque at dui. Fusce ante leo, mattis vitae, lobortis vitae, cursus porta.

[/su_tab][su_tab title="Tab 3"]
Kopje van tab 3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus et leo eget tellus hendrerit scelerisque. Cras venenatis ultrices nulla. Quisque at dui. Fusce ante leo, mattis vitae, lobortis vitae, cursus porta.

[/su_tab][/su_tabs]
====================

EXPAND

====================

[su_expand more_text="Lees meer" less_text="Sluiten" text_color="#3f3f3f" link_color="#ff0021" more_icon="icon: arrow-down" less_icon="icon: arrow-up" height="1" ]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus et leo eget tellus hendrerit scelerisque. Cras venenatis ultrices nulla. Quisque at dui. Fusce ante leo, mattis vitae, lobortis vitae, cursus porta.[/su_expand]
====================

SPOILER

====================

[su_spoiler title="Spoiler Voorbeeld 1" icon="chevron"]Phasellus et leo eget tellus hendrerit scelerisque.[/su_spoiler]

[su_spoiler title="Spoiler Voorbeeld 2" icon="arrow"]Kopje van spoiler
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus et leo eget tellus hendrerit scelerisque. Cras venenatis ultrices nulla. Quisque at dui. Fusce ante leo, mattis vitae, lobortis vitae, cursus porta.[/su_spoiler]

[su_spoiler title="Spoiler Voorbeeld 3" icon="caret"]Kopje van spoiler
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus et leo eget tellus hendrerit scelerisque. Cras venenatis ultrices nulla. Quisque at dui. Fusce ante leo, mattis vitae, lobortis vitae, cursus porta.[/su_spoiler]

[su_spoiler title="Spoiler Voorbeeld 4 met Afbeelding" style="simple" icon="arrow"]
[su_row][su_column size="1/3"]Kopje 1
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus et leo eget tellus hendrerit scelerisque. Cras venenatis ultrices nulla.
[/su_column][su_column size="2/3"]


[/su_column][/su_row]
[/su_spoiler]
====================

LABEL | Willekeurige afbeelding

====================
Cursuswp.com  [su_label type="default"]Label default[/su_label]
Cursuswp.com  [su_label type="success"]Label success[/su_label]
Cursuswp.com  [su_label type="warning"]Label warning[/su_label]
Cursuswp.com  [su_label type="important"]Label important[/su_label]
Cursuswp.com  [su_label type="black"]Label black[/su_label]
Cursuswp.com  [su_label type="info"]Label info[/su_label]
====================

IMAGE | Willekeurige afbeelding

====================

[su_dummy_image width="750" height="400"  theme="nightlife"]
Je kan zelf een categorie selecteren:

any, abstract, animals, business, cats, city, food, nightlife, fashion, people, nature, sports, technics, transport
====================

YOUTUBE

====================

Verander alleen de URL van je youtube filmpje:
[su_youtube_advanced url="https://www.youtube.com/watch?v=jDR740dlaaU" controls="no" showinfo="no" rel="no"]====================

TEXT | Voorbeeldtext

====================
[su_dummy_text what="paras" amount="1" cache="yes"]paras, words

Betaalde versie | 10 dollar lifetime

Onderstaande voorbeelden zijn van de betaalde versie van Ultimate Shortcodes plugin
==================== LOS ICON ==================== Bekijk alle icons: http://fontawesome.io/icons


[su_icon icon="icon: star" background="#ffffff" color="#ffc914" text_color="#ffffff" size="20" shape_size="4" radius="0" text_size="34" margin="0px 1px 1px 0px"][/su_icon]
[su_icon icon="icon: map-marker" background="#f2f2f2" color="#3ea93a" text_color="#3ea93a" size="24" shape_size="8"][/su_icon]
Jouw adres

Nederland

[su_icon icon="icon: envelope-o" background="#f2f2f2" color="#3ea93a" text_color="#3ea93a" size="24" shape_size="8" url="mailto:info@cursuswp.com" target="self"][/su_icon]info@cursuswp.com

[su_icon icon="icon: phone" background="#f2f2f2" color="#3ea93a" text_color="#3ea93a" size="24" shape_size="8"][/su_icon]+31 (0) 6 1234 5678

[su_icon icon="icon: whatsapp" background="#f2f2f2" color="#3ea93a" text_color="#3ea93a" size="24" shape_size="8"][/su_icon]+31 (0)6 1234 5678

[su_icon icon="icon: linkedin" background="#0077b5" color="#ffffff" size="20" text_size="12" margin="0px 10px 10px 0px" url="https://nl.linkedin.com/in/arthurwentzel/nl"]Arthur op LinkedIn[/su_icon]
[su_icon icon="icon: pencil" background="#00b560" color="#ffffff" size="20" text_size="12" margin="0px 10px 10px 0px" url="http://www.grafischontwerper.nl"]GrafischOntwerper.nl[/su_icon]
[su_icon icon="icon: graduation-cap" background="#555555" color="#ffffff" size="20" text_size="12" margin="0px 10px 10px 0px" url="http://www.cursuswordpress.com"]CursusWordpress.com[/su_icon]
====================

PANEL

====================

[su_panel background="#f2f3f4" ]
Voorbeeldkopje 1
Pellentesque sed lacus ut ipsum aliquam tincidunt. Donec eget quam non eros suscipit egestas. Aliquam erat volutpat. Quisque iaculis velit sollicitudin pede. Etiam arcu mauris, interdum id, placerat at, convallis vitae, orci. Etiam magna. Donec at sapien quis dolor adipiscing ullamcorper. Morbi vitae arcu.

[/su_panel]

[su_panel background="#f2f3f4"  color="#ff0102"]Voorbeeldkopje 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus et leo eget tellus hendrerit scelerisque. Cras venenatis ultrices nulla.

[/su_panel]

[su_panel background="#ffd000"  color="#000000"]Voorbeeldkopje 3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus et leo eget tellus hendrerit scelerisque. Cras venenatis ultrices nulla.

[/su_panel]

[su_panel background="#f2f3f4" ]Voorbeeldkopje 4
Pellentesque sed lacus ut ipsum aliquam tincidunt. Donec eget quam non eros suscipit egestas. Aliquam erat volutpat. Quisque iaculis velit sollicitudin pede. Etiam arcu mauris, interdum id, placerat at, convallis vitae, orci. Etiam magna. Donec at sapien quis dolor adipiscing ullamcorper. Morbi vitae arcu.

[su_row][su_column size="1/2"]
Kopje 1
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus et leo eget tellus hendrerit scelerisque. Cras venenatis ultrices nulla. Quisque at dui. Fusce ante leo, mattis vitae, lobortis vitae, cursus porta.

[/su_column][su_column size="1/2"]
Kopje 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus et leo eget tellus hendrerit scelerisque. Cras venenatis ultrices nulla. Quisque at dui. Fusce ante leo, mattis vitae, lobortis vitae, cursus porta.

[/su_column][/su_row]
[/su_panel]

[su_row][su_column size="1/2"]
[su_panel background="#ffe5ed" color="#ff0102" url="https://www.cursuswp.com"]> Bekijk alle Pakketten[/su_panel]
[/su_column][su_column size="1/2"]
[su_panel background="#fff2e5" color="#ff8300" border="1px #ffc6cc" radius="2" text_align="center" url="https://www.cursuswp.com"]> Bekijk alle Pakketten[/su_panel]
[/su_column][/su_row]
[su_panel background="#ebf7f7" color="#37b5b7" border="1px #e4e3f0" radius="2" text_align="center" url="https://www.cursuswp.com"]1 zone gratis
4 zones voor de prijs van 3[su_spacer size="10"][/su_panel]

[su_panel background="#f2f2f2" color="#333333" border="0px solid #cccccc" shadow="0px 1px 2px #eeeeee" radius="0" text_align="center"][su_spacer size="5"]25, 26, 27 oktober | Amsterdam
Aanmelden[su_spacer size="5"][/su_panel]
====================

PRICING TABLES

====================
[su_pricing_table]
[su_plan name="Relax S" price="15" before="€" period="maand (€180/jaar)" btn_url="http://www.cursuswordpress.com/contact" btn_text="Aanvragen" background="#e6ffe6" btn_background="#00b33c" btn_color="#ffffff" border="#b3ffb3"]Onderhoud
Relax-S
Eenvoudige websites:

Tot 10 plugins

Tot 100 webpagina's
Support / Advies / consult:

geen
Updates WordPress
Updates plugins
Update Thema
Backups WordPress bestanden
Limiteer aantal login pogingen
Firewall
Malware scans
Backups database
-
-
-
[/su_plan]
[su_plan name="Relax M" price="20" before="€" period="maand (€240/jaar)" btn_url="http://www.cursuswordpress.com/contact" btn_text="Aanvragen" background="#ccffcc" btn_background="#00b33c" btn_color="#ffffff" border="#b3ffb3"]Onderhoud
Relax-M
Eenvoudige websites:

Tot 15 plugins

Tot 300 webpagina's
Support / Advies / consult:

1 uur per jaar
Updates WordPress
Updates plugins
Update Thema
Backups WordPress bestanden
Limiteer aantal login pogingen
Firewall
Malware scans
Backups database
-
-
-
[/su_plan]
[su_plan name="Relax L" price="30" before="€" period="maand (€360/jaar)" btn_url="http://www.cursuswordpress.com/contact" btn_text="Aanvragen" background="#b3ffb3" btn_background="#00b33c" btn_color="#ffffff" border="#b3ffb3"]Onderhoud
Relax-L
Eenvoudige websites:

max. 25 plugins

max. 1000 webpagina's
Support / Advies / consult:

3 uur per jaar
Updates WordPress
Updates plugins
Update Thema
Backups WordPress bestanden
Limiteer aantal login pogingen
Firewall
Malware scans
Backups database
Complexe plugins
Blokkeren IP-adressen
Caching (meer snelheid)
[/su_plan]
[/su_pricing_table]

WordPress tips en links

WordPress cheat-sheet veel gebruikte codes en websitesvoor CSS

Een overzicht van handige links:

Kleur:

Tekens berekenen:

Afbeeldingen

1) Alles onderkast maken, kleine letters:

2) Streepjes toevoegen voor afbeeldingen (slug):

Alt teksten maken o.b.v namen afbeeldingen:

SEO

Verzamelpagina SEO analyse voor WordPress website:

`Meer handleidingen over WordPress`

Coronavragen? Bel: +31 6 2083 0583

class="link"

‑ -

class="wit ct"

2 online

class="randfade" class="randje" class="randje-kaal"

`KOP`

Lorem

title="XXXXXX WordPress" rel="nofollow"

================================================
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus et leo eget tellus hendrerit scelerisque. Cras venenatis ultrices nulla.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus et leo eget tellus hendrerit scelerisque. Cras venenatis ultrices nulla.
160 tekens (Google):

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus et leo eget tellus hendrerit scelerisque. Cras venenatis ultrices nulla. Quisque at di ante.
100 tekens:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus et leo eget tellus hendrerit si.
60 tekens:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit am.
[su_row][su_column size="1/2"]
xxxxxxxxxx

[/su_column][su_column size="1/2"]
xxxxxxxxxx

[/su_column][/su_row]
================================================

BUTTON BUTTON BUTTON:
simpele button:

BOOTCAMP:

AANMELDEN:

PLUGIN:

CENTER:
XXXXXXXXXXX
================================================

LINK met icoontje:

class="link" title="Groepscursus WordPress voor beginners"
Login WordPress Basis
================================================

ALLEEN GROOT:

vc_hidden-sm vc_hidden-xs

ALLEEN KLEIN:

vc_hidden-lg vc_hidden-md
Alleen op hele kleine schermen zichtbaar, verder alleen groot:

ALLEEN GROOT:

vc_hidden-xs

ALLEEN KLEIN:

vc_hidden-lg vc_hidden-md vc_hidden-sm
Alleen op hele grote schermen zichtbaar, verder alleen klein:

ALLEEN GROOT:

vc_hidden-sm vc_hidden-xs vc_hidden-md

ALLEEN KLEIN:

vc_hidden-lg

================================================

HTML BUTTON:

Meer informatie Yoast WordPress plugin
btnbig

btnnormal

btnklein

btnmini
basis

design

bootcamp

maat

cta

terug

plugin cta cta2

WordPress cheat-sheet codes ontwerp, lay-out en webdesign

Cheat-sheet shortcodes WordPress plugin

Kolommen | Ultimate shortcodes

Kopje 1

Kopje 2

Kopje 1

Kopje 2

Kopje 3

Kopje 1

Kopje 1

Poes A

Poes B

Poes C

Poes D

Buttons, tabs, expand | Ultimate shortcodes

Kopje van tab 1

Kopje van tab 2

Kopje van tab 3

Kopje van spoiler

Kopje van spoiler

Kopje 1

Betaalde versie | 10 dollar lifetime

Voorbeeldkopje 1

Voorbeeldkopje 2

Voorbeeldkopje 3

Voorbeeldkopje 4

Kopje 1

Kopje 2

1 zone gratis

25, 26, 27 oktober | Amsterdam

Onderhoud

Relax-S

Onderhoud

Relax-M

Onderhoud

Relax-L

WordPress tips en links

WordPress cheat-sheet veel gebruikte codes en websitesvoor CSS

Afbeeldingen

SEO

Meer handleidingen over WordPress

KOP

Wil je meer details over WordPress cheat-sheet codes ontwerp, lay-out en webdesignof info?

Training of cursus ontwerp en vormgeving

WordPress design en vormgeving

WordPress Bootcamp

Info over WordPress cheat-sheet codes ontwerp, lay-out en webdesign

WordPress designer

WordPress Cursussen

WordPress Bootcamp

Trainingen op maat

Locaties cursussen

Reviews cursisten

Aanbiedingen en deals

`Kopje 1`

`Kopje 2`

`Kopje 1`

`Kopje 2`

`Kopje 3`

`Kopje 1`

`Meer handleidingen over WordPress`

`KOP`