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

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

WordPress cheat-sheet Ultimate shortcodes plugin



====================
KOLOM 2x
====================
[su_row][su_column size="1/2"]
<h1>Kopje 1</h1>
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"]
<h1>Kopje 2</h1>
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]

<hr>
<hr>
====================
KOLOM 3x
====================
[su_row][su_column size="1/3"]
<h2>Kopje 1</h2>
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"]
<h2>Kopje 2</h2>
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"]
<h2>Kopje 3</h2>
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]

<hr>
<hr>
====================
KOLOM + AFBEELDING
====================
[su_row][su_column size="1/3"]
<h2>Kopje 1</h2>
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"]
<img src="http://www.cursuswp.com/demo/img/mr/cursus-training-workshop-wordpress-wp-hond-1.jpg" />
[/su_column][/su_row]

<hr>
<hr>

[su_row][su_column size="2/3"]
<img src="http://www.cursuswp.com/demo/img/mr/cursus-training-workshop-wordpress-wp-paard-1.jpg" />
[/su_column][su_column size="1/3"]
<h2>Kopje 1</h2>
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]

<hr>
<hr>

[su_row][su_column size="1/4"]
<img src="http://www.cursuswp.com/demo/img/mr/cursus-training-workshop-wordpress-wp-poes-1.jpg" />
<h2>Poes A</h2>
Lorem ipsum dolor sit amet, adipiscing elit. Phasellus et leo eget tellus hendrerit scelerisque. Cras venenatis ultrices nulla. Quisque at dui. 
<a href="http://www.cursuswp.com" rel="noopener" target="_blank">Lees meer</a>
[/su_column][su_column size="1/4"]
<img src="http://www.cursuswp.com/demo/img/mr/cursus-training-workshop-wordpress-wp-poes-2.jpg" />
<h2>Poes B</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus et leo eget tellus scelerisque. Cras venenatis ultrices nulla. Quisque at dui. 
<a href="http://www.cursuswp.com" rel="noopener" target="_blank">Lees meer</a>
[/su_column][su_column size="1/4"]
<img src="http://www.cursuswp.com/demo/img/mr/cursus-training-workshop-wordpress-wp-poes-3.jpg" />
<h2>Poes C</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus et leo eget tellus hendrerit scelerisque. Cras venenatis ultrices nulla at dui. 
<a href="http://www.cursuswp.com" rel="noopener" target="_blank">Lees meer</a>
[/su_column][su_column size="1/4"]
<img src="http://www.cursuswp.com/demo/img/mr/cursus-training-workshop-wordpress-wp-poes-4.jpg" />
<h2>Poes D</h2>
Lorem ipsum dolor consectetuer adipiscing elit. Phasellus et leo eget tellus hendrerit scelerisque. Cras venenatis ultrices nulla. Quisque at dui. 
<a href="http://www.cursuswp.com" rel="noopener" target="_blank">Lees meer</a>
[/su_column][/su_row]

<hr>
<hr>
====================
BUTTON
====================
<hr>

[su_button url="http://www.cursuswp.com/" target="blank" style="flat" background="#888888" size="4"]Ga naar cursusmateriaal[/su_button]

<hr>

[su_button url="http://www.cursuswp.com/" target="blank" style="flat" background="#fff654" color="#d40000" size="4" radius="0"]Ga naar cursusmateriaal[/su_button]

<hr>

[su_button url="http://www.cursuswp.com" target="blank" style="flat" background="#cc0000" size="6" icon="icon: arrow-right" icon_color="#fffffe"]Tekst nog aanpassen[/su_button]

<hr>

[su_button url="http://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]

<hr>

[su_button url="http://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]

<hr>

Bekijk kleuren:
<a href="http://www.cursuswp.com/kleur" rel="noopener" target="_blank">www.cursuswp.com/kleur</a>
<hr>
<hr>
====================
TABS 3x
====================
[su_tabs][su_tab title="Tab 1"]
<h2>Kopje van tab 1</h2>
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"]
<h2>Kopje van tab 2</h2>
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"]
<h2>Kopje van tab 3</h2>
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]

<hr>
<hr>
====================
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]

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

<hr>
[su_spoiler title="Spoiler Voorbeeld 2" icon="arrow"]<h3>Kopje van spoiler</h3>
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]

<hr>
[su_spoiler title="Spoiler Voorbeeld 3" icon="caret"]<h2>Kopje van spoiler</h2>
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]

<hr>
[su_spoiler title="Spoiler Voorbeeld 4 met Afbeelding" style="simple" icon="arrow"]
[su_row][su_column size="1/3"]
<h2>Kopje 1</h2>
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"]
<img src="http://www.cursuswp.com/demo/img/mr/cursus-training-workshop-wordpress-wp-hond-1.jpg" />
[/su_column][/su_row]
[/su_spoiler]

<hr>
<hr>
====================
LABEL | Willekeurige afbeelding
====================

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

<hr>
<hr>
====================
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

<hr>
<hr>
====================
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

<hr>
<hr>
<h1>Onderstaande voorbeelden<br>zijn van de betaalde versie van<br>Ultimate Shortcodes</h1>

<hr>
<hr>
====================
LOS ICON
====================
Bekijk alle icons:
<a href="http://fontawesome.io/icons" rel="noopener" target="_blank">http://fontawesome.io/icons</a>

<hr />
[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]

<hr />
[su_icon icon="icon: map-marker" background="#f2f2f2" color="#3ea93a" text_color="#3ea93a" size="24" shape_size="8"][/su_icon]
Jouw adres
Nederland

<hr />

[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

<hr />

[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]
<br>
[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]
<br>
[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]

<hr>
<hr>
====================
PANEL
====================
[su_panel background="#f2f3f4" ]
<h2>Voorbeeldkopje 1</h2>
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]

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

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

[su_panel background="#f2f3f4" ]
<h2>Voorbeeldkopje 4</h2>
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"]
<h3>Kopje 1</h3>
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"]
<h3>Kopje 2</h3>
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]

<hr>
[su_row][su_column size="1/2"]
[su_panel background="#ffe5ed" color="#ff0102" url="http://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="http://www.cursuswp.com"]> Bekijk alle Pakketten[/su_panel] 
[/su_column][/su_row]
<hr>
[su_panel background="#ebf7f7" color="#37b5b7" border="1px #e4e3f0" radius="2" text_align="center" url="http://www.cursuswp.com"]<h3>1 zone gratis</h3>4 zones voor de prijs van 3[su_spacer size="10"][/su_panel]
<hr>
[su_panel background="#f2f2f2" color="#333333" border="0px solid #cccccc" shadow="0px 1px 2px #eeeeee" radius="0" text_align="center"][su_spacer size="5"]<h2>25, 26, 27 oktober | Amsterdam</h2>
<a href="http://www.cursuswp.com/aanmelden-cursus/">Aanmelden</a>[su_spacer size="5"][/su_panel]

<hr>
<hr>
====================
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"]
<ul>
  <li>
<h4>Onderhoud</h4>
<h2>Relax-S</h2>
</li>
  <li>Eenvoudige websites:
Tot 10 plugins
Tot 100 webpagina's</li>
  <li>Support / Advies / consult:
geen</li>
  <li>Updates WordPress</li>
  <li>Updates plugins</li>
  <li>Update Thema</li>
  <li>Backups WordPress bestanden</li>
  <li>Limiteer aantal login pogingen</li>
  <li>Firewall</li>
  <li>Malware scans</li>
  <li>Backups database</li>
  <li>-</li>
  <li>-</li>
  <li>-</li>
</ul>
[/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"]
<ul>
  <li>
<h4>Onderhoud</h4>
<h2>Relax-M</h2>
</li>
  <li>Eenvoudige websites:
Tot 15 plugins
Tot 300 webpagina's</li>
  <li>Support / Advies / consult:
<strong>1 uur</strong> per jaar</li>
  <li>Updates WordPress</li>
  <li>Updates plugins</li>
  <li>Update Thema</li>
  <li>Backups WordPress bestanden</li>
  <li>Limiteer aantal login pogingen</li>
  <li>Firewall</li>
  <li>Malware scans</li>
  <li>Backups database</li>
  <li>-</li>
  <li>-</li>
  <li>-</li>
</ul>
[/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"]
<ul>
  <li>
<h4>Onderhoud</h4>
<h2>Relax-L</h2>
</li>
  <li>Eenvoudige websites:
max. 25 plugins
max. 1000 webpagina's</li>
  <li>Support / Advies / consult:
<strong>3 uur</strong> per jaar</li>
  <li>Updates WordPress</li>
  <li>Updates plugins</li>
  <li>Update Thema</li>
  <li>Backups WordPress bestanden</li>
  <li>Limiteer aantal login pogingen</li>
  <li>Firewall</li>
  <li>Malware scans</li>
  <li>Backups database</li>
  <li>Complexe plugins</li>
  <li>Blokkeren IP-adressen</li>
  <li>Caching (meer snelheid)</li>
</ul>
[/su_plan]
[/su_pricing_table]


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: