The YouTube video transcript outlines a step-by-step guide to building a WordPress website focused on home decor. The instructor details the process of creating a homepage using the Bloxy theme and Generate Blocks plugin. Key steps involve installing plugins, setting up categories, creating a hero image, and designing a grid layout for categories.
The tutorial covers responsive design principles, ensuring the site looks good on various devices. The video includes tips on image optimization, menu customization, and linking to internal pages. Ultimately, the goal is to create a professional-looking and functional website.
Setting Up WordPress and Installing the Bloxy Theme
The initial steps involve creating a WordPress website from scratch. This includes picking a niche, keyword research, and converting these into blog post titles. You also need to select a domain and set up a Cloudways account for hosting.
After that, connect the domain to Cloudflare for a content delivery network and firewall. The process continues with WordPress installation and basic setup for the site’s layout. The tutorial uses the Bloxy theme and emphasizes designing a homepage.
If you’re new, the guide advises starting from the first lesson to build the site methodically. The goal is to have a fully functional WordPress website with numerous articles and affiliate links.
Installing and Utilizing the Generate Blocks Plugin
To design the homepage effectively, the tutorial recommends installing a block plugin. Although the theme is Bloxy, a separate block plugin is necessary. The suggested plugin is Generate Blocks.
The plugin is favored because of its methodical approach. Unlike other plugins with hundreds of blocks, Generate Blocks focuses on six key blocks. These include container, grid, headline, button, query loop, and image blocks.
These six blocks are sufficient to build almost anything. The focused approach ensures easier maintenance and extensibility. A pro version with a pattern library is available, but the free plugin suffices for the tutorial.
The pattern library in the pro version is useful for custom page builds. The pro version of Generate Blocks costs around $100 per year.
Creating a Homepage and Loading Categories
To begin, add a new page and name it ‘Home’. After publishing, ensure this page is set as the homepage in the WordPress settings. This is done via the customize button, then navigating to homepage settings.
Select a static page instead of latest posts, and choose ‘Home’. With the homepage set, the next step involves loading categories. The tutorial references creating Excel spreadsheets with posts corresponding to different categories.
In the tutorial, eight categories are used: Thrifty room makeovers, DIY decor, small room solutions, and holiday home decor. The remaining categories are spring, summer, fall, and winter home decor, plus a special category for product reviews.
The presenter encourages viewers to create similar categories with blog post titles and keywords. The video explains how to add these categories to the site.
Designing the Homepage: Hero Image and Category Grid
The vision includes a hero image with text overlay. The main headline reads “Timeless home decor Inspirations” with a sub-headline: “create inviting spaces throughout your home”. Below the hero image, there will be four columns of two rows, each representing a category.
Following the categories, a list of recent posts will be displayed. As there are currently no real posts, this will be populated later. The focus will be on building the homepage. This starts with sourcing images for each category, using a 1:1 aspect ratio.
The presenter uses Midjourney for AI-generated images, but any AI program or stock photos can be used. Example image prompts include “Thrifty Room Makeover”.
The presenter also shows how they search on Google Images to gather ideas for prompts to Midjourney. This can help when trying to figure out what kind of image should be generated.
Image Optimization and Hero Section Construction
After generating images, they need resizing to 300×300 resolution. The images are also compressed using a JPEG compressor. The presenter uses specific tools, but online converters are available.
A tool called imageresizer.com is presented in the video as a method to resize the images. The presenter goes on to discuss the hero image which will be 16×9.
With images ready, editing the homepage begins. The first step is to hide the page title. This is achieved via the Bloxy settings by disabling the page title. The design then uses Generate Blocks, starting with a container.
Inside the main container, another container is added, followed by headline elements. The main title and sub-headline are then input. A button is added below the headlines, with the text “Learn about us”.
Styling the Hero Section with Generate Blocks
The styling process begins by selecting the topmost container. The layout is set to relative positioning with hidden overflow. Block alignment is set to full to ensure the image spans the entire page.
A background image is added to the outer container. A gradient is applied to ensure the text is readable. The gradient direction is set to 120 degrees, using a pseudo-element.
The darker color is chosen for color one, and the opacity is set to zero for color two. The font color is then changed to white. The inner container’s Z-index is set to one to bring the text forward.
Font sizes are adjusted, and the main heading is set as an H1 element. Typography settings are used to reduce the font size. The sub-headline style is changed to a paragraph. The button is center-aligned within its container.
Responsive Design Adjustments for the Hero Section
Padding is adjusted for the inner container. Top padding is set to 200 pixels, lower padding to 120, and left/right padding to 40. Responsive design is addressed by checking the appearance on different devices using F12 developer mode.
Adjustments are made for tablets and mobile devices. Font sizes and padding are modified to ensure readability and visual appeal across devices. The goal is to provide a professional look regardless of the device.
On smaller devices the font sizes are reduced so that the layout is not too large. The button size is also modified depending on the device.
Vertical spacing is adjusted to remove excess gap at the top of the homepage. The button color is configured for both standard and hover states. The button is linked to the “About Us” page.
Creating Category Grids and Linking to Category Pages
The next step involves creating a grid of categories below the hero image. Another container is created, followed by a headline element. The headline text is “Home decor Inspirations designer inspiration”.
The headline is set as an H2 element, with a reduced font size. A grid block is added with a four-way grid. Each grid contains an image of the category and a one-word representation of the category.
The categories are arranged in a specific order: holiday home decor, followed by the seasons, then Thrifty, DIY, and small spaces. Images are added to each container using the Generate Blocks image option.
A headline block is added below each image, displaying the category name. The presenter duplicates the first category to save time styling the rest.
Finalizing the Category Grid and Adding Recent Posts Section
The images and text are replaced for each category. Line spacing and alignment are adjusted to improve the visual appearance. Horizontal and vertical gaps are added to the grid for better spacing.
Image widths and heights are set to 85% and aligned to the center. Column gaps are set to zero for mobile devices. Flex and column settings are enabled for mobile containers to ensure proper alignment.
Rounded corners are added to the images for a polished look. The grid is duplicated to include the remaining four categories. The images and text are updated for the new categories.
The images are linked to their respective category pages. A section for the most recent posts is prepped by adding a container and a headline. The advanced posts block is added, excluding product reviews.
Menu Configuration and Mobile Optimization
The tutorial covers how to link the images to the category pages. It also includes how to remake the menu. The footer menu is modified to include an “About Us” page.
The mobile view of the footer menu is optimized by adjusting font sizes and spacing. The header menu is updated with the new categories. The category names are condensed to single words for the menu.
The header menu style is customized using Bloxy theme options. The off-canvas area (mobile menu) is configured to display the main menu. The presenter also shows how to add posts to the site.
The video concludes by noting that category pages will be customized in a future video. The next video will focus on loading content onto the site.