Figma
Collaborative interface design, prototyping and design systems.
How we use it at Webgate
We design responsive page layouts, review feedback and hand over reusable components for development.
The Webgate toolkit
Website design &
development tools.
A practical directory of 31 tools used in Webgate projects. Explore what each one does, how we use it, and where to get started.
By the Webgate team · Updated 13 November 2026
Design. Build. Measure. Improve.
31 tools · 5 workflow areas
Find the right tool for the job.
Webgate uses Figma for design, WordPress and Elementor for editable marketing websites, and React and Next.js for custom builds. Our wider toolkit supports research, SEO, analytics, integrations and project delivery.
Tools are selected for each project; this is not a list of software every client needs. Some cards describe tools used in earlier Webgate workflows. Product availability and plans can change.
01 / Design & review
Shape the website before you build it.
Tools for planning, interface design and feedback that gives everyone a clear next step.
Relume
An AI website builder with tools for planning site structure and page layouts.
How we use it at Webgate
We have used Relume to explore sitemaps and wireframes before refining the design in Figma.
Markup.io
Visual feedback software for commenting directly on websites and other digital content.
How we use it at Webgate
We have used pinned comments to collect client feedback on pages and keep design corrections easy to follow.
Loom
Screen recording and video messaging for sharing explanations without a live meeting.
How we use it at Webgate
We record page walkthroughs and explain feedback so designers, developers and clients can review the same context.
02 / Build & develop
Build a website your team can run.
Content management, custom development and delivery tools. The right combination depends on what the website needs to do.
WordPress
An open-source content management system for publishing and maintaining websites.
How we use it at Webgate
We build and maintain marketing websites with editable content, reusable templates and integrations tailored to each team.
Elementor
A visual WordPress editor for building page layouts, templates and reusable website elements.
How we use it at Webgate
We turn approved designs into responsive pages that marketing teams can edit, including reusable sections and dynamic content.
Advanced Custom Fields
A WordPress plugin for creating structured fields and editing interfaces for custom content.
How we use it at Webgate
We structure content such as team profiles and custom page information, then connect those fields to website templates.
WPML
A WordPress translation plugin for managing multilingual content and language versions.
How we use it at Webgate
We implement multilingual websites and handle translation of pages, templates and custom fields, including Elementor compatibility checks.
React
A JavaScript library for building interfaces from reusable components.
How we use it at Webgate
We use React on custom website projects, including interfaces that connect structured content and external services.
Next.js
A React framework for building websites with routing, server rendering and application features.
How we use it at Webgate
We use Next.js for custom builds, including Webgate Studio, where the website benefits from a code-based frontend.
GitHub
A platform for hosting Git repositories, reviewing changes and collaborating on code.
How we use it at Webgate
We keep website code in version control, review changes and connect repositories to deployment workflows.
Vercel
A platform for building, previewing and deploying websites and web applications.
How we use it at Webgate
We deploy custom projects such as Webgate Studio and use preview deployments to review changes before release.
03 / AI & research
Use AI with a clear job to do.
Assistants for research, content and implementation. We check the outputs and keep people responsible for the final result.
ChatGPT
An AI assistant for working with text, ideas, research and technical questions.
How we use it at Webgate
We use it to explore content and implementation ideas, with people checking facts, brand fit and the final output.
Claude
An AI assistant that supports writing, reasoning and coding workflows.
How we use it at Webgate
We use Claude in AI-assisted website work, including content and Elementor workflows, with scoped access and human review.
OpenAI Codex
An AI coding agent for understanding projects, editing code and carrying out development tasks.
How we use it at Webgate
We use Codex for implementation, checks and supported Elementor MCP edits, then review the saved pages in the browser.
Perplexity
An AI research tool that finds and summarizes information with links to sources.
How we use it at Webgate
We have used it for early UX and website research, checking original sources before using findings in a recommendation.
04 / Measure & optimize
Understand what needs to improve.
Tools for search visibility, measurement, behavior analysis and performance checks.
Google Analytics 4
Google’s analytics platform for measuring website events, traffic and user journeys.
How we use it at Webgate
We set up measurement around useful actions, such as inquiries, and check that campaign and source data remain meaningful.
Google Tag Manager
A tag management system for deploying and managing website measurement tags.
How we use it at Webgate
We manage analytics and marketing tags, test triggers and check their behavior with the website’s consent setup.
Google Search Console
Google’s tool for monitoring search performance, indexing and website search issues.
How we use it at Webgate
We check which pages Google discovers, investigate indexing problems and review search visibility after website changes.
Ahrefs
An SEO toolkit with site auditing, keyword research and backlink analysis.
How we use it at Webgate
We use Site Audit to investigate broken links and technical issues, then prioritize fixes that affect website quality.
Rank Math
A WordPress SEO plugin for metadata, sitemaps, indexing controls and structured data.
How we use it at Webgate
We configure page titles, descriptions and schema, and review how WordPress pages appear in search and shared links.
Hotjar
Behavior analytics tools, now part of Contentsquare, for heatmaps and session replay.
How we use it at Webgate
We work with Hotjar on client websites to investigate page interactions and identify areas to improve in the user journey.
WP Rocket
A WordPress performance plugin for page caching and frontend optimization.
How we use it at Webgate
We configure caching and asset delivery, then test menus, media and interactions to catch optimization-related regressions.
Google Lighthouse
An automated auditing tool for performance, accessibility, SEO and web best practices.
How we use it at Webgate
We use lab audits to diagnose loading problems and compare changes, alongside real-user data when it is available.
Pagespeed Digital
Webgate’s website health monitoring tool for performance, uptime, technical SEO and AI search readiness.
How we use it at Webgate
We use it to bring website health checks into one dashboard and identify issues to investigate during ongoing website care.
05 / Connect & collaborate
Connect the website to the work around it.
CRM, automation and delivery tools that help website projects fit into day-to-day business.
HubSpot
A customer platform combining CRM, marketing tools and website content management.
How we use it at Webgate
We build CMS themes and modules where needed, and connect website forms and customer data to marketing workflows.
Pipedrive
A sales CRM for managing contacts, leads and deal pipelines.
How we use it at Webgate
We connect website inquiries to Pipedrive so leads enter the sales workflow with the information a team needs.
Make
A visual automation platform for connecting apps and building multi-step workflows.
How we use it at Webgate
We use it for suitable website integrations that move information between forms, marketing tools and business systems.
Zapier
An automation platform that connects app events to actions in other services.
How we use it at Webgate
We connect Elementor form submissions to tools such as Brevo and Pipedrive, reducing repeated manual data entry.
ClickUp
A project management workspace for tasks, documentation and delivery coordination.
How we use it at Webgate
We organize website work into assigned tasks, track feedback and keep implementation and QA work visible to the team.
Slack
A team communication platform built around channels, messages and integrations.
How we use it at Webgate
We coordinate delivery and ongoing support in shared project channels, including work alongside client marketing teams.
See the tools in practice
The workflow matters as much as the software.
Explore practical guides and project examples behind this toolkit.
Good questions
Website tools: your questions, answered.
Which tools does Webgate use for website design and development?
We use Figma for interface design, WordPress and Elementor for editable marketing websites, and React and Next.js for custom development. Tools such as GitHub, Vercel, Rank Math and Google Analytics 4 support delivery and ongoing improvement. The selection depends on the project.
Do we need all 31 tools for a website project?
No. A website needs a practical setup that fits its content, integrations, reporting and maintenance. Many tools in this directory serve different types of projects, or are used by our delivery team rather than installed on a client website.
What is the difference between WordPress and Elementor?
WordPress is the content management system. Elementor is a visual editor that runs inside WordPress. We use them together where a marketing team needs reusable layouts and straightforward editing.
How does Webgate use AI tools?
We use AI for supported research, content and development tasks, including Elementor MCP workflows. We define the task and permissions, review the output and test the resulting website before release.
Which tools help with SEO and AI search visibility?
Google Search Console helps us inspect indexing and search performance. Ahrefs supports site auditing, and Rank Math manages WordPress SEO settings. Useful, accurate content and a technically accessible website remain the foundation; no tool guarantees rankings or inclusion in AI answers.
Are these tools free?
Some tools are open source or have free entry options; others require subscriptions or paid licenses. Follow each official link to check current plans, usage limits and terms. Hosting and implementation costs are separate considerations.
Can Webgate work with our existing tools?
Yes. We start by reviewing the website and tools your team already uses, then identify what to keep, connect or change. Explore our website design, development and integrations services to see how we approach that work.
A better website starts with the right setup.
Tell us what your team needs to publish, connect and improve. We’ll help you choose a practical toolkit and put it to work.
Let’s talk about your website ↗Product names and logos belong to their respective owners. Listing a tool does not imply a partnership or endorsement.