{"id":1908,"date":"2021-06-01T11:54:20","date_gmt":"2021-06-01T11:54:20","guid":{"rendered":"https:\/\/webwerkplaats-demo.nl\/demo14\/?page_id=1908"},"modified":"2021-06-01T13:04:53","modified_gmt":"2021-06-01T13:04:53","slug":"uitleg","status":"publish","type":"page","link":"https:\/\/webwerkplaats-demo.nl\/demo14\/uitleg\/","title":{"rendered":"Uitleg"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.4.7&#8243; use_background_color_gradient=&#8221;on&#8221; background_color_gradient_start=&#8221;rgba(0,0,0,0.6)&#8221; background_color_gradient_end=&#8221;rgba(0,0,0,0.6)&#8221; background_color_gradient_overlays_image=&#8221;on&#8221; background_image=&#8221;https:\/\/webwerkplaats-demo.nl\/demo14\/wp-content\/uploads\/modern-building-against-sky-323780.jpg&#8221; custom_padding=&#8221;||145px||false|false&#8221;][et_pb_row _builder_version=&#8221;4.4.7&#8243;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.4.7&#8243;][et_pb_text _builder_version=&#8221;4.9.4&#8243; text_text_color=&#8221;#ffffff&#8221; header_font=&#8221;|700|||||||&#8221; header_text_color=&#8221;#ffffff&#8221; header_font_size=&#8221;50px&#8221; hover_enabled=&#8221;0&#8243; header_font_size_tablet=&#8221;&#8221; header_font_size_phone=&#8221;35px&#8221; header_font_size_last_edited=&#8221;on|phone&#8221; sticky_enabled=&#8221;0&#8243;]<\/p>\n<h1 style=\"text-align: center;\">Uitleg van dit systeem<\/h1>\n<p style=\"text-align: center;\">Hiermee kunnen we een &#8220;online showroom&#8221; maken voor ieder product<\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.4.7&#8243; background_color=&#8221;rgba(0,0,0,0)&#8221; custom_margin=&#8221;-1px||||false|false&#8221;][et_pb_row _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221;][et_pb_column _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; type=&#8221;4_4&#8243;][et_pb_text _builder_version=&#8221;4.9.4&#8243; header_3_font=&#8221;|700|||||||&#8221; header_3_text_color=&#8221;#8332ac&#8221; header_3_font_size=&#8221;35px&#8221; header_3_line_height=&#8221;1.3em&#8221; header_5_font=&#8221;|700|||||||&#8221; header_5_text_color=&#8221;rgba(0,0,0,0.47)&#8221; header_5_letter_spacing=&#8221;2px&#8221; width=&#8221;65%&#8221; width_tablet=&#8221;&#8221; width_phone=&#8221;100%&#8221; width_last_edited=&#8221;on|phone&#8221; module_alignment=&#8221;center&#8221; custom_margin=&#8221;||43px|||&#8221; hover_enabled=&#8221;0&#8243; header_3_font_size_tablet=&#8221;&#8221; header_3_font_size_phone=&#8221;25px&#8221; header_3_font_size_last_edited=&#8221;on|phone&#8221; locked=&#8221;off&#8221; sticky_enabled=&#8221;0&#8243;]<\/p>\n<h3>WordPress, Divi en Divi Engine<\/h3>\n<p>Neem het beste van wat er nu verkrijgbaar is: WordPress en Div en je kunt makkelijk te onderhouden en aantrekkelijke websites bouwen.<br \/>WordPress schiet alleen in 1 ding tekort. Het aanbrengen en vorm geven van extra gegevens<\/p>\n<h3>Custom field en posts<\/h3>\n<p>Eerst even wat technische uitleg. <br \/>In WordPress kun je 3 verschillende soorten &#8220;bladzijden&#8221; aanmaken.<br \/>Pagina&#8217;s (pages)<br \/>Berichten (post)<br \/>Projecten (projects)<\/p>\n<p>Om het overzichtelijk te houden gaan we alleen op posts in. Maak je een nieuwe post aan dan opent zich onderstaand scherm.<\/p>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/webwerkplaats-demo.nl\/demo14\/wp-content\/uploads\/1-standaard-wordpress-bericht.jpg&#8221; _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; alt=&#8221;standaard wordpress bericht&#8221; title_text=&#8221;1-standaard wordpress bericht&#8221; box_shadow_style=&#8221;preset1&#8243; hover_enabled=&#8221;0&#8243; sticky_enabled=&#8221;0&#8243;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; sticky_enabled=&#8221;0&#8243;]<\/p>\n<p>Je ziet (van boven naar beneden) alleen Titel en het Tekst vak.<\/p>\n<p>In de rechter kantlijn kun je nog een Categorie aangeven en een uitlichte afbeelding instellen.<br \/>\nMaar stel, je wilt je producten voorstellen? Dan kom je tekort. Er zijn geen extra velden waar je bijvoorbeeld het gewicht, of de kleur, of de motorinhoud kunt invullen. <\/p>\n<h2>Stap 1: De Custom Post<\/h1>\n<p>Eerst maken we een custom post. Die krijgt zijn eigen menu keuze. Dan is dat stap 1.[\/et_pb_text][et_pb_image src=&#8221;https:\/\/webwerkplaats-demo.nl\/demo14\/wp-content\/uploads\/1-extra-wordpress-post.jpg&#8221; _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; title_text=&#8221;1-extra wordpress-post&#8221; hover_enabled=&#8221;0&#8243; sticky_enabled=&#8221;0&#8243;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; sticky_enabled=&#8221;0&#8243;]<\/p>\n<h2>Stap 2: de Extra Velden (custom fields) voor deze Custom Post<\/h2>\n<p>Nu wil je daar Custom Fields aan toe voegen. Dat zijn extra velden die behoren bij dat Bericht. Onthoud de naam: Custom fields zijn velden, behorende bij 1 individueel Bericht (post).<\/p>\n<p>In dit horloge voorbeeld kun je denken aan heren of dames, chronograaf of dresswatch, automaat of hand opwinder. Merknaam, prijs&#8230;<\/p>\n<p>Die custom fields maak je dan aan in de custom post &#8220;Horloges&#8221;.<br \/>Een voorbeeld van een Custom Post &#8220;Horloges&#8221; maakt denk ik veel duidelijk.<br \/>Hier onder het beeldscherm waar je een nieuw horloge aan brengt of wijzigt.<\/p>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/webwerkplaats-demo.nl\/demo14\/wp-content\/uploads\/4-custom-post-horloges-invullen-scaled.jpg&#8221; _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; title_text=&#8221;4-custom-post-horloges-invullen&#8221; hover_enabled=&#8221;0&#8243; sticky_enabled=&#8221;0&#8243;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; sticky_enabled=&#8221;0&#8243;]<\/p>\n<h2>Stap 3: de Extra Velden (custom fields) laten zien aan de voorzijde<\/h2>\n<p>Alle gegevens over een bepaald type horloge zijn ingevuld, inclusief de foto&#8217;s<\/p>\n<p>Maar WordPress en themes laten de velden niet zien. Gewoon omdat we eerst moeten programmeren wat, waar moet komen.<\/p>\n<p>Dat kan door een webpagina te verbouwen in HTML \/ PHP maar bij Divi is dat veel te complex. Toch wil je alle horloges laten zien. Het doel is op de voorpagina als &#8220;product kaarten&#8221;<br \/>\nKlik je op een product kaart, dan komt dat horloge met al zijn details op een individuele pagina.<br \/>\n[\/et_pb_text][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; sticky_enabled=&#8221;0&#8243;]<\/p>\n<h2>Stap 4: de Custom Loop <\/h2>\n<p>WordPress haalt altijd alle berichten op in een vaste reeks. Een vaste procedure. Men noemt dat bij WordPress &#8220;the loop&#8221;.<\/p>\n<p>Nu willen we dat WordPress niet de berichten maar de horloges laat zien. Daarvoor maken we een eigen loop. De Custom Loop.<\/p>\n<p>Nu kun je die stylen in Divi en je bent klaar.<br \/>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; column_structure=&#8221;2_5,3_5&#8243;][et_pb_column _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; type=&#8221;2_5&#8243;][et_pb_image src=&#8221;https:\/\/webwerkplaats-demo.nl\/demo14\/wp-content\/uploads\/5-custom-post-horloges-op-de-voorpagina.jpg&#8221; _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; title_text=&#8221;5-custom-post-horloges-op-de-voorpagina&#8221; width=&#8221;80%&#8221; hover_enabled=&#8221;0&#8243; sticky_enabled=&#8221;0&#8243;][\/et_pb_image][\/et_pb_column][et_pb_column _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; type=&#8221;3_5&#8243;][et_pb_image src=&#8221;https:\/\/webwerkplaats-demo.nl\/demo14\/wp-content\/uploads\/single-product-custom-loop-wordpress-divi-scaled.jpg&#8221; _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; title_text=&#8221;single-product-custom-loop-wordpress-divi&#8221; hover_enabled=&#8221;0&#8243; sticky_enabled=&#8221;0&#8243;][\/et_pb_image][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.4.7&#8243; use_background_color_gradient=&#8221;on&#8221; background_color_gradient_start=&#8221;rgba(131,50,172,0.82)&#8221; background_color_gradient_end=&#8221;rgba(93,43,150,0.77)&#8221; background_color_gradient_direction=&#8221;218deg&#8221; background_color_gradient_overlays_image=&#8221;on&#8221; background_image=&#8221;https:\/\/webwerkplaats-demo.nl\/demo14\/wp-content\/uploads\/building-metal-house-architecture-101808.jpg&#8221;][et_pb_row _builder_version=&#8221;4.4.7&#8243;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.4.7&#8243;][et_pb_text _builder_version=&#8221;4.9.4&#8243; header_3_font=&#8221;|600|||||||&#8221; header_3_text_color=&#8221;#ffffff&#8221; header_3_font_size=&#8221;37px&#8221; header_3_line_height=&#8221;1.5em&#8221; custom_margin=&#8221;||8px|||&#8221; hover_enabled=&#8221;0&#8243; header_3_font_size_tablet=&#8221;&#8221; header_3_font_size_phone=&#8221;25px&#8221; header_3_font_size_last_edited=&#8221;on|phone&#8221; sticky_enabled=&#8221;0&#8243;]<\/p>\n<h3 style=\"text-align: center;\">Kan dat ook voor mijn producten?<\/h3>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.9.4&#8243; text_text_color=&#8221;#ffffff&#8221; width=&#8221;50%&#8221; width_tablet=&#8221;100%&#8221; width_phone=&#8221;100%&#8221; width_last_edited=&#8221;on|tablet&#8221; module_alignment=&#8221;center&#8221; hover_enabled=&#8221;0&#8243; sticky_enabled=&#8221;0&#8243;]<\/p>\n<p style=\"text-align: center;\"><strong>Dit systeem is zo flexibel, dat welke velden en welke vormgeving dan ook, kunnen gemaakt worden. Bel of mail dan gaan we kijken hoe dat in te zetten is voor jouw bedrijf<\/span><\/p>\n<p>[\/et_pb_text][et_pb_button button_url=&#8221;https:\/\/www.www.webwerkplaats.nl\/#contactformulier&#8221; button_text=&#8221;Bel of mail voor meer gratis demonstratie&#8221; button_alignment=&#8221;center&#8221; admin_label=&#8221;Knop Alle Horloges&#8221; _builder_version=&#8221;4.9.4&#8243; custom_button=&#8221;on&#8221; button_text_color=&#8221;#8332ac&#8221; button_bg_color=&#8221;#ffffff&#8221; button_border_width=&#8221;0px&#8221; button_border_radius=&#8221;5px&#8221; button_letter_spacing=&#8221;2px&#8221; button_font=&#8221;|700|||||||&#8221; button_use_icon=&#8221;off&#8221; custom_padding=&#8221;10px|40px|10px|40px|true|true&#8221; hover_enabled=&#8221;0&#8243; locked=&#8221;off&#8221; sticky_enabled=&#8221;0&#8243;][\/et_pb_button][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Uitleg van dit systeem Hiermee kunnen we een &#8220;online showroom&#8221; maken voor ieder productWordpress, Divi en Divi Engine Neem het beste van wat er nu verkrijgbaar is: Wordpress en Div en je kunt makkelijk te onderhouden en aantrekkelijke websites bouwen.Wordpress schiet alleen in 1 ding tekort. Het aanbrengen en vorm geven van extra gegevens Custom [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"<!-- wp:paragraph -->\n<p>Dit is een voorbeeldpagina. Het is anders dan een blog bericht omdat het op \u00e9\u00e9n plek blijft en tevoorschijn komt in je site navigatie (in de meeste thema's). De meeste mensen starten met een Over pagina dat hen voorstelt aan potenti\u00eble site bezoekers. Het zou iets als dit kunnen zeggen:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:quote -->\n<blockquote class=\"wp-block-quote\"><p>Hoi daar! Ik ben een fietskoerier in het dagelijks leven en een beginnende acteur in de avonduren, en dit is mijn site. Ik leef in Los Angeles, heb een leuke hond genaamd Jack en ik hou van pi&#241;a coladas. (En overvallen worden door de regen.)<\/p><\/blockquote>\n<!-- \/wp:quote -->\n\n<!-- wp:paragraph -->\n<p>...of zoiets als dit:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:quote -->\n<blockquote class=\"wp-block-quote\"><p>De XYZ Doohickey Company is opgericht in 1971 en heeft sindsdien kwalitatieve doohickeys aan het publiek geleverd. Gevestigd in Gotham City, heeft XYZ meer dan 2000 mensen in dienst en doet allerlei fantastische dingen voor de community in Gotham.<\/p><\/blockquote>\n<!-- \/wp:quote -->\n\n<!-- wp:paragraph -->\n<p>Als nieuwe WordPress gebruiker kan je naar <a href=\"https:\/\/webwerkplaats-demo.nl\/demo14\/wp-admin\/\">je dashboard<\/a> gaan om deze pagina te verwijderen en nieuwe pagina's toe te voegen voor je inhoud. Veel plezier!<\/p>\n<!-- \/wp:paragraph -->","_et_gb_content_width":"","footnotes":""},"class_list":["post-1908","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/webwerkplaats-demo.nl\/demo14\/wp-json\/wp\/v2\/pages\/1908","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webwerkplaats-demo.nl\/demo14\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/webwerkplaats-demo.nl\/demo14\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/webwerkplaats-demo.nl\/demo14\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webwerkplaats-demo.nl\/demo14\/wp-json\/wp\/v2\/comments?post=1908"}],"version-history":[{"count":6,"href":"https:\/\/webwerkplaats-demo.nl\/demo14\/wp-json\/wp\/v2\/pages\/1908\/revisions"}],"predecessor-version":[{"id":1926,"href":"https:\/\/webwerkplaats-demo.nl\/demo14\/wp-json\/wp\/v2\/pages\/1908\/revisions\/1926"}],"wp:attachment":[{"href":"https:\/\/webwerkplaats-demo.nl\/demo14\/wp-json\/wp\/v2\/media?parent=1908"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}