Design a Stunning Recipe Menu with Elementor Loop Grid (Easy Tutorial!)

Daveden WebDev
Daveden WebDev
441 بار بازدید - 7 ماه پیش - This tutorial goes through creating
This tutorial goes through creating a dynamic restaurant menu list template in Elementor Pro and discusses some accessibility improvements along the way.

|| Timestamp
00:00 - Intro
00:49 - The ACF Recipe Custom Post Type
01:12 - List of plugins used
02:02 - Adding the Loop Grid widget
02:28 - Rename the Elementor Loop Template
03:34 - Loop Settings
04:28 - Editing the Loop Template
04:45 - Determining the layout and elements required
05:44 - Adding the required elements to the template
06:28 - Renaming the Elements in the Navigator
10:42 - Applying element styles
13:31 - Adding dynamic visibility conditions to the price
15:39 - Adding an aspect ratio to the recipe image
17:07 - Accessibility Improvement explained
17:51 - Adding the dotted line between title and price
19:33 - Adding the screen reader only text (Accessibility Improvement)
21:15 - Reducing the loop grid width to improve readability
21:59 - Checking for mobile responsiveness
24:02 - Adding my own CSS for screen reader text
25:02 - Outro
7 ماه پیش در تاریخ 1402/10/25 منتشر شده است.
441 بـار بازدید شده
... بیشتر