Page Rebuilding – Homepage Rebuilding Projects

Whole homepage rebuilt with ACF, former client https://socialmovementtechnologies.org/

Check the full-page screenshot here.

An entire and rather content-heavy homepage rebuild was undertaken to make it lighter.

That means to remove the existing page builder Elementor and rebuild it with modern code, compatible with the search engines requirements and no need for maintenance. 

The rebuild had these goals:

1. Customization and Flexibility: Create of text or image containers that align perfectly with the content needs of the homepage. An additional goal was to have precise control over the content layout and structure.
2. Design Flexibility: Create unique layout without being restricted by default WordPress structures. This leads to a more tailored user experience and branding.

3. User-Friendliness: Make it simple for non-technical users to update content without needing to know HTML or CSS. The content containers can be set up in a way that the admin interface is intuitive and easy to navigate.

4. Streamlined Content Entry: Custom containers created for specific content types, ensuring consistency and reducing the chances of formatting errors.

5. Improved Content Organization: Organize content in a more structured manner. This is particularly useful for complex content types or when dealing with large amounts of data.

6. Reusable Components: Custom containers can be reused across different parts of the website, ensuring consistency and saving time in content creation.

7. Enhanced Performance: Custom containers help in optimizing database queries, as it allows for more precise data retrieval. This can lead to faster page load times.

8. Reduced Bloat: Custom containers help in avoiding the bloat that can come from using multiple plugins for various content types, as they consolidates the functionality into a single, efficient system.

9. SEO Benefits: Custom containers can be used to create custom meta tags, titles, and descriptions for different sections of the homepage, enhancing SEO efforts.

10. Better Content Structuring: Well-structured content is easier for search engines to index, which can improve search engine rankings.

11.  

• Benefits of Rebuilding a Homepage with Custom Containers (ACF)

  1. Customization and Flexibility:

     • Tailored Content Management: ACF allows for the creation of custom fields that align perfectly with the content needs of the homepage. This enables precise control over the content layout and structure.
     • Design Flexibility: Designers and developers can create unique layouts without being restricted by default WordPress structures. This leads to a more tailored user experience and branding.

  2. User-Friendly:

     • Ease of Use for Non-Developers: ACF makes it simple for non-technical users to update content without needing to know HTML or CSS. The fields can be set up in a way that the admin interface is intuitive and easy to navigate.
     • Streamlined Content Entry: Custom fields can be created for specific content types, ensuring consistency and reducing the chances of formatting errors.

  3. Improved Content Organization:

     • Structured Data Management: ACF helps in organizing content in a more structured manner. This is particularly useful for complex content types or when dealing with large amounts of data.
     • Reusable Components: Custom fields can be reused across different parts of the website, ensuring consistency and saving time in content creation.

  4. Enhanced Performance:

     • Optimized Queries: Using custom fields can help in optimizing database queries, as it allows for more precise data retrieval. This can lead to faster page load times.
     • Reduced Bloat: ACF helps in avoiding the bloat that can come from using multiple plugins for various content types, as it consolidates the functionality into a single, efficient system.

  5. SEO Benefits:

     • Custom Metadata: ACF can be used to create custom meta tags, titles, and descriptions for different sections of the homepage, enhancing SEO efforts.
     • Better Content Structuring: Well-structured content is easier for search engines to index, which can improve search engine rankings.

   

 

• Steps taken to Rebuild the Homepage

  1. Planning and Strategy:

     1.a. Content Audit: Review existing content and whether it needs to be migrated, improved, or discarded.

     1.b. Wireframe and prototype: develop drafts with focus on user needs and behaviors.
•  

  2. Custom Containers:

  2.a. Field Containers: Determine the types of fields/containers needed (e.g., text, image, flexible content, forms etc.).
  2.b. Group Containers: Organize containers into logical groups to keep the admin interface/backend clean and user-friendly.
  
  

  1. Templates:

     3.a. Custom Template: Develop custom WordPress template that utilizes ACF fields to render the homepage.
     3.b. Responsive Design: Ensure the template is responsive and looks good on all devices.
     
     

  2. Integration and Testing:

     4.a. ACF Integration: Integrate the ACF fields into the WordPress theme and ensure they are correctly pulling and displaying data.
     4.b. Testing: Thorough test the homepage for functionality, usability, and compatibility across different browsers and devices.
     
     

  3. Content Migration:
     5.a. Data Migration: Migrate existing content into the new ACF fields. This may involve manual data entry.
     5.b. Content Formatting: Ensure that the migrated content is properly formatted and displayed as intended.

  4. SEO and Analytics Setup:

     • SEO Fields: Set up custom fields for SEO purposes, such as meta titles, descriptions, and schema markup.
     • Analytics Integration: Ensure that analytics tools (e.g., Google Analytics) are correctly integrated to track user behavior.

Here are the results:

Header/Hero Section

Logo, header title and subtitle, plus the hero image are set and populated from the straightforward backend interface.

and here is the frontend hero section:

The next element, a red-colored fascia or banner that includes icons that set the main topics: 

All elements are set easily in the backend: icons, banner color, icon titles and links, descriptions

Follows a separate section of 6 posts with titles and links (the selection of posts and the section color are editor’s choice)

 

Here is how this section is set in the backend. Note the feature of searching posts to populate.
You start typing words contained in the post title and the system offers you the most relevant posts.

Follows another section with functional topics / CTAs enclosed in circles, again set in the backend.

Here is the backend where the editor sets the color, titles and content of the CTAs.

 

The last part are the testimonials, always a problematic element in page builders and always need maintenance after breaking so often.

Here the system is error-free and very easy to implement.

Same function as above, you just put a few relevant words and the system pulls up the testimonials
the order of which you can adjust easily by moving them into the container.

The editor has the option to set the background image, button color, button text and link.

 

Want a robust and fast page like the above to replace your homepage or just build an efficient landing page for your ads?

Let a pro handle the details