Скачать или смотреть Create perfect Post/CPT Archive Loop in Gutenberg with Greenshift (Greenlight Elements) + ACPT

Watch this video to know how to "Create accessible and semantically perfect post archive loop section in WordPress Gutenberg editors using Greenshift Greenlight Elements and Blocksy Theme" from scratch and with ease.

Chapters:
0:00 Check semantic and accessibility
3:08 Setting up proper HTML structure
5:23 Global section styles + types of CSS classes
7:20 Setting up custom theme page template
8:20 Setting up theme-based content area width
11:20 Moving styles from root to global class
13:23 Setting up section aria data attribute
15:03 How to order our HTML elements
18:18 Getting rid of theme generated spacing
26:17 Applying CSS Grid an Flex
28:28 Transforming static HTML into Loop
29:30 Mapping post dynamic data to elements
31:57 Taking care of mobile responsiveness
33:13 Adding aspect ration to Image
36:55 Adding dynamically generated ALT atribute
39:52 Exploring dynamic data attributes
43:46 Automatically ordering post loop images
50:24 Exploring [datetime=YYYY-MM-DD] attribute
53:42 Checking quality of our post archive section
54:32 Applying proper naming to rest of our CSS
57:48 Getting basic CPT and Meta Fields set up
1:02:40 Transforming Post archive into CPT loop

By the end of this video you will (full names of topics being covered):
1. Check accessibility and semantic structure of section
2. Set up proper HTML tree structure for section header and archive loop
3. Setup global section styles with theme-based content area width
4. Understand which kind of CSS class to use in which case (root, local or global class)
5. Set up custom page template in Blocksy page specific settings
6. Set up section with theme-styles based content area width and create class based locally scoped variable to use it in section styles for padding
7. Move styles from root class to global class
8. Set up appropriate section aria data attribute for indexing robots and users with disabilities
9. Understand how to order our HTML elements for better semantics and accessibility (cascade browsing with screen reader)
10. Automatically get rid of unnecessary spacing around Headings and Paragraphs with three lines of CSS
11. Apply CSS Grid an Flex to group of HTML elements
12. Transform static HTML into loop with dynamically fetched post data
13. Map post dynamic data to HTML elements inside our loop
14. Take care of mobile responsiveness
15. Add aspect ration to Image element through Figure element styles
16. Adding automatically generated ALT image atribute based on dynamic post title value
17. Exploring the idea of dynamically generated aria-labelledby data attribute for each Article HTML element of post in our query loop
18. Make CSS style that automatically revert the order of post loop images in layout by targeting its position in DOM using CSS selectors + some debugging
19. Explore the idea of dynamically generating [datetime=YYYY-MM-DD] attribute for the post date HTML element
20. Check quality of our post archive section
21. Apply BEM naming to our HTML elements root classes
22. Get basic Custom Post Type and Custom Meta Fields set up with ACPT
23. Transform our Post archive loop into CPT archive loop and map Meta Fields

I hope you enjoyed it.



Professional WP tools we used in this video:
Greenshift Query Addon (All-in-one)
Blocksy Theme Pro
ACPT Pro

Other plugins from our setup:
Greenshift Smart Code AI - Code editor with auto-completion
WPvivid Backup Plugin

I hope you enjoyed it.
Subscribe to be the first who receive new videos.