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 voor CSS

Een overzicht van classes en css-codes

https://www.w3schools.com/colors/colors_converter.asp


<p class="inleiding"> </p>
<p class="klein"> </p>
<p class="mini"> </p>
<hr/> 
<hr class="coolest" /> 
<hr class="coolestwide" />

[aw_spacer size="5"]
[aw_spacer size="10"]
[aw_spacer size="15"]
[aw_spacer size="20"]

<h1></h1>
<h2></h2>
<h3></h3>
&nbsp;
&#8209;   -
<h2 class="h2-big"></h2>
class="wit ct"
class="link"

title="XXXXXX WordPress" rel="nofollow"

<button class="button bt-mini bt-basis"> </button>
<button class="button bt-mini bt-basis"></button>
<button class="button bt-mini bt-basis"></button>

[aw_posts template="templates/list-loop.php" posts_per_page="6" taxonomy="post_tag" tax_term="357" order="desc" orderby="rand"]
================================================
<p class="inleiding">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus et leo eget tellus hendrerit scelerisque. Cras venenatis ultrices nulla. </p>

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]

[aw_row][aw_column size="1/2"]

[/aw_column][aw_column size="1/2"]

[/aw_column][/aw_row]

================================================
BUTTON BUTTON BUTTON:

simpele button:
<a href="" title="XXXXXX WordPress"><button class="button bt-normal">Info XXXXXX WordPress</button></a>

BOOTCAMP:
<a href="https://www.cursuswp.com/aanmelden-cursus/"><button class="button bt-normal bt-bootcamp">Bekijk WordPress Bootcamp 3-daagse</button></a>

AANMELDEN:
<a href="https://www.cursuswp.com/aanmelden-cursus/" title="Aanmelden WordPress cursus" ><button class="button bt-normal bt-maat">Meld je aan voor een WordPress</button></a>

PLUGIN:
<a href="https://www" title="XXXXXX WordPress plugin" rel="nofollow" target="_blank"><button class="button bt-plugin">Info WordPress plugin</button></a>

CENTER:
<p style="text-align: center;"> </p>
<p style="text-align: center;"><a href="https://www" title="XXXXXX WordPress><button class="button bt-normal">XXXXXXXXXXX</button></a></p>

================================================
LINK met icoontje:
class="link" title="Groepscursus WordPress voor beginners"

<a class="link" href="https://cursuswordpress.com/members/?page_id=22" target="_blank" rel="noopener">Login WordPress Basis</a>

================================================
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:
<hr>
[aw_spacer size="1"]
<a class="btnbasis" href="https://yoast.com/wordpress/plugins/seo/" target="_blank" rel="noopener">Meer informatie Yoast WordPress plugin</a>

btnbig
btnnormal
btnklein
btnmini

basis
design
bootcamp
maat
cta
terug

plugin
cta
cta2

aanb-bt
aanb-bas
demo-cms
welk