{"id":2066,"date":"2021-06-21T07:32:48","date_gmt":"2021-06-21T07:32:48","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=2066"},"modified":"2023-04-30T08:33:17","modified_gmt":"2023-04-30T08:33:17","slug":"how-to-customize-an-archive-page-with-acf","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/how-to-customize-an-archive-page-with-acf\/","title":{"rendered":"How to customize an Archive Page with ACF"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2066\" class=\"elementor elementor-2066\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3e5bfdb3 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3e5bfdb3\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-25879e96\" data-id=\"25879e96\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6b0700b7 elementor-widget elementor-widget-video\" data-id=\"6b0700b7\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=VnFC3HPAmNY&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-25a6fad8 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"25a6fad8\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1309e3f3\" data-id=\"1309e3f3\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-738e307a elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"738e307a\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1931\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1931\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1932\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1932\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1931\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1931\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1931\" tabindex=\"0\" hidden=\"false\"><p>In this tutorial, you\u2019ll learn how to customize Archive Pages with content drawn from ACF on your WordPress website. This lets you dynamically insert data directly into your Archive Pages, giving you full control over your design with Elementor.<\/p><p>You&#8217;ll learn how to:<br \/>\u2714\ufe0e Enter custom content in your Archive Page ACF Fields<br \/>\u2714\ufe0e Connect the ACF fields to your Archive Page in Elementor \u2018s Editor<br \/>\u2714\ufe0e And more!<\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1932\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1932\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1932\" tabindex=\"0\" hidden=\"hidden\"><p>hey there Cassie from Elementor here<br \/>guess what now you can use ACF to<br \/>customise your archive page in this<br \/>video you&#8217;ll learn how to work on an<br \/>archive page with content drawn from ACF<br \/>advanced custom fields<br \/>this lets you dynamically insert data<br \/>directly into your archive page giving<br \/>you full control over your design with<br \/>Elementor without using any code so head<br \/>over to our archive page which has a<br \/>premade design set up here in the hero<br \/>section we want to put a background<br \/>image of the country down here is a did<br \/>you know area that will make dynamic<br \/>further down you can also set up this<br \/>quote section to be dynamic as well and<br \/>finally we have the country&#8217;s map that<br \/>will also be updated according to the<br \/>country to enter our country details go<br \/>to the dashboard then under posts<br \/>categories choose the country you want<br \/>to edit for example Japan and click Edit<br \/>here I already entered the default<br \/>category fields and in this area here<br \/>you&#8217;ll see the ACF fields I added so<br \/>first off I&#8217;ll add Japan&#8217;s background<br \/>image then go ahead and fill in the Digi<br \/>no fields add an interesting fact in<br \/>each one of them fill in a quote related<br \/>to Japan in the map field enter the name<br \/>of the country Japan now that we&#8217;ve<br \/>added all our content click update on<br \/>your keyboard press command + e to open<br \/>the finder and return to the travel<br \/>archive template now we&#8217;ll connect our<br \/>fields to get the data we defined<br \/>earlier let&#8217;s start with the background<br \/>image click on the section go to style<br \/>background choose dynamic and then<br \/>select an ACF image field click again<br \/>and set the key to background image<br \/>looks good<br \/>let&#8217;s move on to the did you knows here<br \/>I&#8217;ll link the appropriate fact to each<br \/>one<br \/>first click dynamic and set it to a CF<br \/>field click again and under key choose<br \/>did you know one for the second one<br \/>I&#8217;ll set the key &#8211; did you know &#8211; and<br \/>lastly did you know three good job now<br \/>let&#8217;s scroll down to our quote under the<br \/>archive post let&#8217;s make it dynamic click<br \/>on the text then dynamic choose a CF<br \/>field and click again to choose your<br \/>quote for the final touch go to the map<br \/>go on you know what to do next &#8211;<br \/>location click dynamic and select a CF<br \/>field then set the key to map magic<br \/>that&#8217;s it now check it out<br \/>editing an archive template with ACF<br \/>content and Elementor is a cinch so try<br \/>out ACF with your archive page today and<br \/>don&#8217;t forget subscribe to our You Tube<br \/>channel later<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview In this tutorial, you\u2019ll learn how to customize Archive Pages with content drawn from ACF on your WordPress website. This lets you dynamically insert data directly into your Archive Pages, giving you full control over your design with Elementor. You\u2019ll learn how to: \u2714\ufe0e Enter custom content in your Archive Page ACF [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":9728,"comment_status":"closed","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[41],"class_list":["post-2066","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-integrations","tag-guides-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to customize an Archive Page with ACF - Academy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/academy\/how-to-customize-an-archive-page-with-acf\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to customize an Archive Page with ACF - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview In this tutorial, you\u2019ll learn how to customize Archive Pages with content drawn from ACF on your WordPress website. This lets you dynamically insert data directly into your Archive Pages, giving you full control over your design with Elementor. You\u2019ll learn how to: \u2714\ufe0e Enter custom content in your Archive Page ACF [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/how-to-customize-an-archive-page-with-acf\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-21T07:32:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-30T08:33:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Customize-an-Archive-Page-with-ACF.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1921\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Hodaya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hodaya\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to customize an Archive Page with ACF - Academy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/academy\/how-to-customize-an-archive-page-with-acf\/","og_locale":"en_US","og_type":"article","og_title":"How to customize an Archive Page with ACF - Academy","og_description":"Overview Transcript Overview In this tutorial, you\u2019ll learn how to customize Archive Pages with content drawn from ACF on your WordPress website. This lets you dynamically insert data directly into your Archive Pages, giving you full control over your design with Elementor. You\u2019ll learn how to: \u2714\ufe0e Enter custom content in your Archive Page ACF [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/how-to-customize-an-archive-page-with-acf\/","og_site_name":"Academy","article_published_time":"2021-06-21T07:32:48+00:00","article_modified_time":"2023-04-30T08:33:17+00:00","og_image":[{"width":1921,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Customize-an-Archive-Page-with-ACF.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/how-to-customize-an-archive-page-with-acf\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/how-to-customize-an-archive-page-with-acf\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"How to customize an Archive Page with ACF","datePublished":"2021-06-21T07:32:48+00:00","dateModified":"2023-04-30T08:33:17+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-customize-an-archive-page-with-acf\/"},"wordCount":556,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-customize-an-archive-page-with-acf\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Customize-an-Archive-Page-with-ACF.jpg","keywords":["Guides and Tutorials"],"articleSection":["Integrations"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/how-to-customize-an-archive-page-with-acf\/","url":"https:\/\/elementor.com\/academy\/how-to-customize-an-archive-page-with-acf\/","name":"How to customize an Archive Page with ACF - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-customize-an-archive-page-with-acf\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-customize-an-archive-page-with-acf\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Customize-an-Archive-Page-with-ACF.jpg","datePublished":"2021-06-21T07:32:48+00:00","dateModified":"2023-04-30T08:33:17+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/how-to-customize-an-archive-page-with-acf\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/how-to-customize-an-archive-page-with-acf\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/how-to-customize-an-archive-page-with-acf\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Customize-an-Archive-Page-with-ACF.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Customize-an-Archive-Page-with-ACF.jpg","width":1921,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/how-to-customize-an-archive-page-with-acf\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Integrations","item":"https:\/\/elementor.com\/academy\/integrations\/"},{"@type":"ListItem","position":4,"name":"How to customize an Archive Page with ACF"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c","name":"Hodaya","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","caption":"Hodaya"},"url":"https:\/\/elementor.com\/academy\/author\/hodaya\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2066","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=2066"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2066\/revisions"}],"predecessor-version":[{"id":9525,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2066\/revisions\/9525"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/9728"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=2066"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=2066"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=2066"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}