WEB DESIGN COURSE DIRECTORY

Built with WordPress 7.1.3, Divi 5.15.1 and ACF 6.8.10.
The WordPress build uses native Divi settings and ACF, without custom CSS, PHP or JavaScript.

FILES
- Web Design Course Directory.json: Divi Library import file retaining the original native export wrapper, with its layout content replaced by the current native page24 saved content. This revision is assembled locally and has been imported into the Divi Library through the native Portability backend on the demo site.
- ACF Course Structure.json: ACF-native export of the Courses post type and Course details field group.
- Sample Courses.json: human-readable fictional sample content and field values; this file is a content reference, not a one-click WordPress import.
- Course Images/: six reusable course illustrations, matched by filename in Sample Courses.json.

SETUP
1. Activate Divi 5 and Advanced Custom Fields.
2. In ACF > Tools, import ACF Course Structure.json. Check that Courses and its four fields are available.
3. Create the six sample courses from Sample Courses.json, or enter your own. Upload the included course images and assign each as its matching course's featured image.
4. Keep each exact duration and duration band consistent. Under 3 hours is less than 3; 3–6 hours includes both boundaries; Over 6 hours is more than 6.
5. In Divi > Divi Library > Import & Export > Import, import Web Design Course Directory.json.
6. Create a page with the Blank Page template and load Web Design Course Directory from the Library. Save in Divi Builder, then view the frontend.
7. Confirm the course loop targets the Courses post type and the Post Filter targets that loop. Auto apply and And relation are configured.
8. Test the three filters. The native Divi Button named Reset filters uses the current page's dynamic permalink, clearing the query string and all selected values together.

DEPENDENCIES AND LIMITS
The Divi layout does not contain the ACF registrations, course posts or uploaded course images. These must be set up before it can show courses. No preset, global-variable, component or theme-template bundle is required.
The empty state uses Divi's standard No Results Found message plus a short suggestion to change/reset filters.
The original native Library export was imported on the dedicated demo site and rendered on a separate test page using the existing course data. This revision was imported through Divi’s official Portability backend into a uniquely named Library test item on the same demo site; its saved content exactly matched the source. The imported item was loaded through the native Builder onto an independent demo page and saved. Six course images loaded with course-specific title alt text. UI design + Beginner + Under 3 hours returned the two expected courses; a filtered reload retained all selections and both results; Reset restored all six. Reset used that page’s clean permalink with 14px vertical and 22px horizontal padding. A completely fresh-site migration has not been tested.
The courses and their illustrations are fictional demonstration content. Enrollment, payments, lessons and progress tracking are not included.

NATIVE SETTINGS IN THIS REVISION
- Course card loop: ID ordering, Ascending.
- Filter focus: 2px solid blue #022eee border, using the native Focus state.
- Course illustration: native alt attribute targeted to Image, with dynamic Loop Post Title. Image sizing remains at the saved layout values; no new native 100% width setting is claimed.
- Reset filters button: native Design > Spacing padding 14px top/bottom and 22px left/right.
- Exact course duration remains bound to course_duration_label.
