medusa/the_information_nexus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
09d1340006ede8ed4fc2e484eece9a68db85ae05
the_information_nexus/tech_docs/webdev/wp_kadence_wireframe.md
Whisker Jones 7d794ad2f9 site updates
2024-05-05 10:38:02 -06:00

12 KiB
Raw Blame History

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.