wp wireframe
This commit is contained in:
291
docs/tech_docs/wp_kadence_wireframe.md
Normal file
291
docs/tech_docs/wp_kadence_wireframe.md
Normal file
@@ -0,0 +1,291 @@
|
|||||||
|
# **Homepage Structure Using Kadence Blocks**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## **Hero Section**
|
||||||
|
|
||||||
|
### **Group:** Hero Introduction
|
||||||
|
|
||||||
|
- **Block:** Row Layout (Single Row)
|
||||||
|
- **Background:** Video or Image (16:9 aspect ratio) with `alt` text including primary keyword.
|
||||||
|
- **Block:** Advanced Heading
|
||||||
|
- **Content:** Main heading with primary keyword. Secondary keyword in the subheading.
|
||||||
|
- **Meta Description:** Informative description with the primary keyword.
|
||||||
|
- **Block:** Button
|
||||||
|
- **Action:** "Book an Event" with a descriptive `aria-label` for accessibility.
|
||||||
|
|
||||||
|
**Kadence Row Layout (Single Row)**
|
||||||
|
|
||||||
|
- **Background Settings**: Choose from color, gradient, image, or video. If using an image or video, ensure it's web-optimized.
|
||||||
|
- **Padding & Margin**: Adjust to create space and center content.
|
||||||
|
|
||||||
|
**Kadence Advanced Heading**
|
||||||
|
|
||||||
|
- **Font Settings**: Use H1 for main heading. Adjust font size, weight, and line-height for clarity.
|
||||||
|
- **Content**: Main heading with primary keyword. Add a secondary keyword in the subheading.
|
||||||
|
|
||||||
|
**Kadence Button**
|
||||||
|
|
||||||
|
- **Design**: Use Kadence’s styling options for button size, color, border-radius, and hover effects.
|
||||||
|
- **Link**: "Book an Event". Ensure the link directs to the booking section or page.
|
||||||
|
|
||||||
|
- **Row Layout (Single Row)**: This is appropriate for creating a hero section, as Kadence's Row Layout provides flexibility for both background and content settings.
|
||||||
|
- **Advanced Heading**: The Advanced Heading block in Kadence is suitable for hero section headings due to its extensive customization options.
|
||||||
|
- **Button**: The standard Gutenberg Button block is ideal for CTAs, especially in hero sections.
|
||||||
|
- **Video**: Consider adding a short video showcasing the chef's work for an engaging visitor experience.
|
||||||
|
|
||||||
|
> - Provides an immediate visual impact and introduces visitors to the chef's main offering.
|
||||||
|
> - Call to Action: "Book an Event"
|
||||||
|
> - Ensure the hero image loads quickly to reduce bounce rate.
|
||||||
|
> - Position the main heading and CTA (Call to Action) button above the fold for immediate visibility.
|
||||||
|
> - Use high-contrast colors for text and CTA to make them stand out against the background.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## **About the Chef**
|
||||||
|
|
||||||
|
### **Group:** Chef's Background
|
||||||
|
|
||||||
|
- **Block:** Row Layout (Two Columns: 1/3 + 2/3)
|
||||||
|
- **Column 1:**
|
||||||
|
- **Block:** Image (1:1 or 3:2 aspect ratio) with `alt` text describing the chef.
|
||||||
|
- **Column 2:**
|
||||||
|
- **Block:** Advanced Heading
|
||||||
|
- **Content:** Chef's name (with keyword) and bio. Include chef's relevant keywords in the bio.
|
||||||
|
- **Links:** Chef's social media profiles.
|
||||||
|
|
||||||
|
**Kadence Row Layout (Two Columns: 1/3 + 2/3)**
|
||||||
|
|
||||||
|
- **Column Gap**: Adjust to create a harmonious space between image and text.
|
||||||
|
|
||||||
|
**Kadence Image Block (1/3 column)**
|
||||||
|
|
||||||
|
- **Image Settings**: Choose a high-quality portrait of the chef and ensure it's web-optimized.
|
||||||
|
- **Alt Text**: Briefly describe the chef.
|
||||||
|
|
||||||
|
**Kadence Advanced Heading (2/3 column)**
|
||||||
|
|
||||||
|
- **Font Settings**: Use H2 tag and adjust font size, weight, and line-height.
|
||||||
|
- **Content**: Chef's name followed by a concise bio, ensuring a natural flow with keyword integration.
|
||||||
|
|
||||||
|
**Kadence Social Links (2/3 column)**
|
||||||
|
|
||||||
|
- **Design**: Customize icon size and colors.
|
||||||
|
- **Links**: Directly link to the chef's profiles on different platforms.
|
||||||
|
|
||||||
|
- **Row Layout (Two Columns: 1/3 + 2/3)**: This layout is effective for combining an image with textual content. The 1/3 column is suitable for the chef's image, while the 2/3 column can house the textual content.
|
||||||
|
- **Social Media**: Include links to the chef's social media profiles for increased engagement.
|
||||||
|
|
||||||
|
> - A brief introduction to the chef can help personalize the website and establish credibility.
|
||||||
|
> - Include a short bio and portrait.
|
||||||
|
> - Use a high-quality image of the chef. This helps in establishing trust.
|
||||||
|
> - Ensure the bio is concise and highlights the chef's achievements or specialties.
|
||||||
|
> - Include relevant keywords in the bio without keyword stuffing.
|
||||||
|
> - Use schema markup for the chef's bio to improve search engine visibility.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## **Services Offered**
|
||||||
|
|
||||||
|
### **Group:** Services Overview
|
||||||
|
|
||||||
|
- **Block:** Row Layout (Three Columns)
|
||||||
|
- **Each Column:**
|
||||||
|
- **Block:** Info Box with image (16:9 or 4:3 aspect ratio) with `alt` text (include service-specific keywords).
|
||||||
|
- **Content:** Heading with service-specific keywords, concise description, and Button ("Learn More" or "Book Now" with `aria-label`).
|
||||||
|
|
||||||
|
**Kadence Row Layout (Three Columns)**
|
||||||
|
|
||||||
|
- **Column Gap**: Adjust for even spacing between columns. Ensure columns stack on mobile for responsiveness.
|
||||||
|
|
||||||
|
**Kadence Info Box (Each Column)**
|
||||||
|
|
||||||
|
- **Image**: Use service-specific images that are web-optimized.
|
||||||
|
- **Heading**: Integrate service-specific keywords. Adjust font for clarity.
|
||||||
|
- **Description**: Provide concise service details.
|
||||||
|
- **Button**: Link to detailed service pages or booking options, using Kadence button styling.
|
||||||
|
|
||||||
|
- **Row Layout (Three Columns)**: This layout is suitable for showcasing multiple services side by side. For mobile views, ensure that the columns stack for responsiveness.
|
||||||
|
- **Info Box**: The Info Box block in Kadence is versatile and combines an image, heading, and button, making it ideal for service descriptions.
|
||||||
|
|
||||||
|
> - Showcase the primary services to give visitors an idea of what the chef specializes in.
|
||||||
|
> - Use concise descriptions and visuals.
|
||||||
|
> - Call to Actions: "Learn More" or "Book Now"
|
||||||
|
> - Highlight the most popular or signature services to capture interest.
|
||||||
|
> - Use clear and descriptive alt texts for service images.
|
||||||
|
> - Include CTAs within each service to drive user action.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## **Testimonials Slider**
|
||||||
|
|
||||||
|
### **Group:** Client Testimonials
|
||||||
|
|
||||||
|
- **Block:** Testimonial with Ratings
|
||||||
|
- **Content:** Rotating testimonials with name, designation, company, testimonial text, and ratings.
|
||||||
|
- **Link:** "Read All Testimonials" with `title` attribute for more context.
|
||||||
|
|
||||||
|
**Kadence Testimonial Carousel**
|
||||||
|
|
||||||
|
- **Layout**: Choose a design that allows for image, name, designation, and testimonial text.
|
||||||
|
- **Images**: Use uniform size, web-optimized images of the testimonial giver.
|
||||||
|
- **Content**: Display a curated list of impactful testimonials.
|
||||||
|
- **Navigation**: Adjust arrow and dot settings for user-friendly navigation.
|
||||||
|
|
||||||
|
- **Testimonial**: The Testimonial block provided by Kadence is apt for rotating testimonials and can also display associated images.
|
||||||
|
- **Ratings**: Integrate a rating system for testimonials to enhance credibility.
|
||||||
|
|
||||||
|
> - Social proof is powerful. Displaying a few select testimonials can build trust.
|
||||||
|
> - Call to Action: "Read All Testimonials"
|
||||||
|
> - Display testimonials with photos to increase credibility.
|
||||||
|
> - Rotate the most impactful testimonials.
|
||||||
|
> - Ensure the slider doesn’t move too fast, allowing users to read comfortably.
|
||||||
|
> - Use schema markup for testimonials to increase their visibility in search engines.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## **Upcoming Events/Classes**
|
||||||
|
|
||||||
|
### **Group:** Events Schedule
|
||||||
|
|
||||||
|
- **Block:** Row Layout (Single Row)
|
||||||
|
- **Block:** Advanced Button (for viewing all events with `title` attribute)
|
||||||
|
- **Block:** Calendar with Link to Detailed Events Page
|
||||||
|
|
||||||
|
**Kadence Advanced Button**
|
||||||
|
|
||||||
|
- **Design**: Customize size, color, and hover effects.
|
||||||
|
- **Link**: Direct to a page with more comprehensive event details.
|
||||||
|
|
||||||
|
**Embed Block**
|
||||||
|
|
||||||
|
- **Integration**: Embed Google Calendar or another interactive system. Ensure it's styled to match the site's theme.
|
||||||
|
|
||||||
|
- **Calendar Integration**: Since neither Kadence nor Gutenberg provides a dedicated "Calendar" block, consider integrating Google Calendar, especially if it's linked with Calendly on the backend.
|
||||||
|
- **Detailed Events Page**: Include a link to a page with more comprehensive event details.
|
||||||
|
|
||||||
|
> - Inform visitors of any upcoming events or classes they can attend or book.
|
||||||
|
> - Call to Action: "View All Events"
|
||||||
|
> - Highlight limited-time or special events to create a sense of urgency.
|
||||||
|
> - Ensure the calendar is interactive and mobile-responsive.
|
||||||
|
> - Optimize event descriptions with relevant keywords.
|
||||||
|
> - Use schema markup for events to improve search engine visibility.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## **Gallery**
|
||||||
|
|
||||||
|
### **Group:** Image Gallery
|
||||||
|
|
||||||
|
- **Block:** Gallery with Lightbox
|
||||||
|
- **Content:** Images from past events/classes with descriptive `alt` texts.
|
||||||
|
- **Caption:** Write captions for each image with keywords.
|
||||||
|
|
||||||
|
**Kadence Gallery Block**
|
||||||
|
|
||||||
|
- **Layout**: Choose between grid or masonry layout. Enable lightbox feature for enhanced image viewing.
|
||||||
|
- **Images**: Upload web-optimized images with consistent aspect ratios.
|
||||||
|
- **Captions**: Provide concise descriptions with keyword integration.
|
||||||
|
|
||||||
|
- **Gallery Block**: Kadence's Gallery block is recommended due to advanced features like lightbox and masonry grid options.
|
||||||
|
- **Lightbox**: Implement a lightbox feature for an enhanced viewing experience.
|
||||||
|
|
||||||
|
> - A visual representation of past events, dishes, or classes can be enticing.
|
||||||
|
> - Call to Action: "View Full Gallery"
|
||||||
|
> - Optimize images for quick loading and mobile responsiveness.
|
||||||
|
> - Use descriptive alt texts for each image for SEO benefits.
|
||||||
|
> - Consider adding a lightbox feature for a larger view of images upon clicking.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## **Newsletter Signup**
|
||||||
|
|
||||||
|
### **Group:** Newsletter Subscription
|
||||||
|
|
||||||
|
- **Block:** Row Layout (Single Row)
|
||||||
|
- **Block:** Advanced Heading (for the section's title with primary or secondary keyword)
|
||||||
|
- **Subtitle:** Offer such as "Sign up and receive a 10% discount on your next booking or a free recipe."
|
||||||
|
- **Block:** Form (with `aria-label` for the email input field and "Subscribe" button).
|
||||||
|
|
||||||
|
**Kadence Form Block**
|
||||||
|
|
||||||
|
- **Fields**: Add fields for name and email. Customize placeholder texts.
|
||||||
|
- **Button**: Style the "Subscribe" button using Kadence settings.
|
||||||
|
- **Notifications**: Set up email notifications for each signup.
|
||||||
|
|
||||||
|
- **Forms**: While Kadence offers a form block, for specialized forms, especially newsletter sign-ups and detailed contact forms, consider linking to Google Forms for more functionality and flexibility.
|
||||||
|
|
||||||
|
> - Engage visitors by offering them a chance to stay updated with news, recipes, or special offers.
|
||||||
|
> - Call to Action: "Subscribe"
|
||||||
|
> - Position this near the footer but ensure it's visually distinct.
|
||||||
|
> - Make the sign-up process simple with minimal fields.
|
||||||
|
> - Ensure GDPR compliance if collecting emails from European visitors.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## **Contact & Booking**
|
||||||
|
|
||||||
|
### **Group:** Contact Details
|
||||||
|
|
||||||
|
- **Block:** Row Layout (Two Columns)
|
||||||
|
- **Column 1:**
|
||||||
|
- **Block:** Form (with fields for name, email, event type, date, and message, all with proper `aria-label` attributes for accessibility).
|
||||||
|
- **Column 2:**
|
||||||
|
- **Block:** Advanced Heading (for contact details, include keywords like "Contact [Chef's Name] for Corporate Cooking Events").
|
||||||
|
|
||||||
|
**Kadence Row Layout (Two Columns)**
|
||||||
|
|
||||||
|
- **Column Gap**: Adjust to create an even space between form and contact details.
|
||||||
|
|
||||||
|
**Kadence Form Block (1/2 column)**
|
||||||
|
|
||||||
|
- **Fields**: Include fields for name, email, event type, date, and message. Customize placeholders.
|
||||||
|
- **Button**: Style the "Submit" button using Kadence settings.
|
||||||
|
|
||||||
|
**Kadence Advanced Heading (1/2 column)**
|
||||||
|
|
||||||
|
- **Content**: Display contact details with keyword integration, ensuring natural readability.
|
||||||
|
|
||||||
|
> - Provide an easy way for visitors to reach out or book an event.
|
||||||
|
> - Call to Action: "Submit"
|
||||||
|
> - Make the form fields intuitive and easy to fill.
|
||||||
|
> - Use clear error messages and confirmations.
|
||||||
|
> - Ensure the form is mobile-responsive and loads quickly.
|
||||||
|
> - Consider adding a map showing the chef's location or primary service area.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## **Footer**
|
||||||
|
|
||||||
|
### **Group:** Footer Information
|
||||||
|
|
||||||
|
- **Block:** Row Layout (Multiple Rows)
|
||||||
|
- **Row 1:**
|
||||||
|
- **Block:** Navigation Menu (with `title` attributes for each link for more context).
|
||||||
|
- **Row 2:**
|
||||||
|
- **Block:** Icon List (for social media icons with proper `aria-label` attributes).
|
||||||
|
- **Row 3:**
|
||||||
|
- **Block:** Advanced Heading (for contact information with Schema Markup for local SEO).
|
||||||
|
|
||||||
|
**Kadence Navigation Menu**
|
||||||
|
|
||||||
|
- **Design**: Create a simple footer menu with essential links.
|
||||||
|
|
||||||
|
**Kadence Icon List**
|
||||||
|
|
||||||
|
- **Design**: Customize icon sizes, colors, and hover effects.
|
||||||
|
- **Links**: Directly link icons to respective social media profiles.
|
||||||
|
|
||||||
|
**Kadence Advanced Heading**
|
||||||
|
|
||||||
|
- **Content**: Display contact information and any necessary disclaimers.
|
||||||
|
|
||||||
|
- **Navigation Menu**: Utilize Kadence's Navigation block for a more customized menu experience in the footer.
|
||||||
|
- **Mobile Responsiveness**: Ensure that all blocks, especially those with columns, are set to stack or rearrange appropriately on mobile views.
|
||||||
|
|
||||||
|
> - Include essential links, contact information, and social media icons.
|
||||||
|
> - Keep the footer organized with clear categories or columns.
|
||||||
|
> - Ensure links are easy to click, especially on mobile devices.
|
||||||
|
> - Include an SEO-friendly sitemap link in the footer to aid search engine crawling.
|
||||||
|
|
||||||
|
---
|
||||||
Reference in New Issue
Block a user