How to create an amazing home page with pre-made templates | WordPress Gutenberg
#wordpressdesign #gutenbergblocks #webdesign #websitecreation #webdevelopment #template #templatelibrary
00:00 Introduction
00:47 Update the text
01:40 Upddate the images
03:38 Add a pattern
04:44 Add a call to action
WordPress has fundamentally changed the way we approach webpage design, with the Gutenberg block editor being one of its most significant advancements. In this guide, we'll walk you through the process of building a complete architect homepage using Gutenberg WordPress blocks and the MaxiBlocks template library.
Kickstarting the Process
Before diving in, it's beneficial to visualize and map out the components you need for your page. Though this step isn't mandatory - you can always explore the library for inspiration - having a blueprint can streamline the building process.
Assembling the Page
Start with a blank canvas. Click on the blue "+" icon and pick the "Template library block." Navigate to the hero tab and opt for the "Pro hero 8" pattern, marking our first application of a Gutenberg WordPress block.
To personalize the hero, select the text and enter your custom content.
Upon completing this step, make sure to check the responsive sizes to confirm they've been updated. For the smallest mobile size, adjust the text columns to 100%.
Modifying Images
To change images, select the row by clicking it in the breadcrumbs above the image container. Open the sidebar settings and select the background layer, then click on the image to modify it.
Editing the concealed images that surface on hover requires accessing the default "list view" in the top navigation tab. Open the container, then open the column section. Select the image and substitute it with your chosen image. Repeat this for the third image.
Incorporating More Elements
To continue building the page, click the "+" icon to reopen the "template library." This time, choose an icon pattern. After verifying its correct loading, update it with your content and icons. Updating the icons involves clicking the "upload" button and using the search bar to locate an icon. Repeat this for the remaining four icons.
Integrating a Story Mix Pattern
The next section involves adding a "story mix" pattern. These are special Gutenberg WordPress blocks that comprise a variety of design elements. Adjust the padding for better screen fit and eliminate any superfluous margins.
Creating the Architect Portfolio
The architect portfolio can be fashioned using an "Image" pattern. Open and search for the pattern in the library, and remove all superfluous paddings and margins.
Next, repeat the process to incorporate a call-to-action, followed by the "team" section.
Once all the patterns are placed on the page, we can commence the final modifications.
Final Touches to the Page
Our portfolio section might benefit from additional items. Click on the pattern and select the "duplicate" icon in the toolbar. Duplicate it twice, then navigate to the "advanced" tab in the sidebar. Select the "flexbox" settings and assign it a row gap of 30px. Now, you can "copy" and "paste" your content into the patterns.
Personalize the portfolio section with your own work by clicking the "upload" button in the toolbar, then browse and search for your images.
The last step involves checking the responsive settings. This primarily entails adjusting paddings to maintain uniformity. Click "update" and preview the live page.
Building an architect homepage with Gutenberg WordPress blocks and the MaxiBlocks template library is a simple and efficient process. These tools offer the versatility and control necessary to craft a visually striking and functional webpage. With Gutenberg WordPress blocks, your creative potential is limitless.
Get started at https://maxiblocks.com/ - Tired of those page builders that tease you with basic features and make you pay for the rest? MaxiBlocks is here to break the cycle. Discover freedom with 1600+ templates, 13K+ icons, and 100 design styles. Join our community!
=== Description here ===
Important links:
Help desk - https://maxiblocks.com/go/help-desk
Pro library - https://maxiblocks.com/pro-library/
Demo library - https://maxiblocks.com/demo/
MaxiBlocks - https://maxiblocks.com/
Twitter - / maxiblocks
Discord community - https://maxiblocks.com/go/maxi-discord
Roadmap - https://maxiblocks.com/go/roadmap