The Hidden Cost of Duplicate Title Tags
A WEBSITE OWNER'S DESIRE to maximise his search engine ranking is nothing new. "The optimisation of content", said many a digital marketer, "is the only technical pursuit that still carries any significant reward". What is new is the scale and speed at which poor optimisation can cripple a website's visibility, user experience, and even its core structural integrity. Once the preserve of only the most complex sites, the issue of duplicate title tags has become a common pitfall, quietly reshaping the performance of countless WordPress installations and presenting a clear obstacle for those seeking organic growth.
How to Remove Duplicate Title Tags in WordPress: A Practical Guide
So, you've discovered your site is plagued by duplicate title tags. Don't panic; this is a common and fixable issue. The root of the problem often lies in how themes and plugins generate these crucial SEO elements. Here’s a step-by-step guide to reclaiming your SEO integrity.
First, you need to identify the source. A great free tool for this is the Yoast SEO plugin. After installation, head to the 'Titles & Metas' section and navigate through the various tabs (Post Types, Taxonomies, etc.). Ensure that the title fields aren't left blank, as this often causes the theme to fall back on a default, duplicated title. For more advanced users, this is a perfect example of why does WordPress use MySQL; these settings are stored in your site's database, and a plugin like Yoast provides a user-friendly interface to manage them without writing direct SQL queries.
If the issue persists, your theme might be the culprit. This brings up an interesting question: can you use WordPress without a theme? Technically, no. WordPress requires a theme to display content. However, the vast array of types of WordPress themes means their code quality varies dramatically. A poorly coded theme might hardcode title tags, ignoring the settings you've painstakingly configured in your SEO plugin. In such cases, you might need to directly edit your theme's `header.php` file, specifically the `
` tag section, to ensure it calls the standard WordPress function `wp_title()` or, better yet, your SEO plugin's function. Always use a child theme for such modifications to preserve your changes during theme updates.</p>
<p>For those uncomfortable editing theme files, numerous dedicated plugins can scan for and help you fix duplicate meta titles. The solution ultimately depends on your technical comfort level, but the path to resolution is always clear.</p>
<h2>Don't Let Technical Debt Weigh Down Your Site</h2>
<p>Resolving duplicate title tags is just one aspect of maintaining a healthy, high-performing WordPress website. These technical SEO issues are a form of digital debt that accumulates silently, eroding your site's potential. Regular maintenance is not a luxury; it is a necessity for anyone serious about their online presence.</p>
<p>If this process seems daunting, you don't have to face it alone. The team at WPutopia specializes in untangling these very problems. We offer comprehensive <strong>WordPress services</strong>, including ongoing WordPress maintenance, theme upgrades, custom plugin installation, and technical SEO audits to ensure your site is not just functional, but truly optimal. Let us handle the technical complexities so you can focus on your business. Visit WPutopia today and let's build a faster, stronger website together.</p> </div>
<div class="article-ad">
<div class="ad-container">
<div class="ad-content">
<h3>WordPress Speed Optimization</h3>
<p>Boost your site performance and improve user experience with our specialized speed optimization service.</p>
<a href="https://wputopia.com/contact/" class="ad-button" target="_blank">Accelerate Your Site</a>
</div>
<div class="ad-image">
<img src="https://media.wputopia.com/storage/2024/11/14070218/Hero-Image-contact-us.webp" alt="WordPress Speed Optimization">
</div>
</div>
</div>
<div class="article-navigation">
<a href="792.php" class="nav-link">← Previous Article</a>
<a href="794.php" class="nav-link">Next Article →</a>
</div>
<div class="related-posts">
<h3>Related Articles</h3>
<div class="related-posts-grid">
<div class="related-post-item"><a href="549.php"><div class="related-post-image"><img src="https://images.unsplash.com/photo-1680128371866-da0e32829a03?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w2ODcyMjZ8MHwxfHNlYXJjaHwxfHx1cGdyYWRlJTIwcGhwJTIwdmVyc2lvbiUyMHdpbmRvd3N8ZW58MXwwfHx8MTc1NTkyMTc4Mnww&ixlib=rb-4.1.0&q=80&w=1080&auto=format&fit=crop&w=1200&q=80" alt="upgrade php version windows"></div><div class="related-post-title">upgrade php version windows</div></a></div><div class="related-post-item"><a href="378.php"><div class="related-post-image"><img src="https://images.unsplash.com/photo-1566915896913-549d796d2166?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w2ODcyMjZ8MHwxfHNlYXJjaHwxfHxyZWNvdmVyJTIwZGVsZXRlZCUyMHdlYiUyMHBhZ2VzfGVufDF8MHx8fDE3NTQ2NzYxODR8MA&ixlib=rb-4.1.0&q=80&w=1080&auto=format&fit=crop&w=1200&q=80" alt="recover deleted web pages"></div><div class="related-post-title">recover deleted web pages</div></a></div><div class="related-post-item"><a href="646.php"><div class="related-post-image"><img src="https://images.unsplash.com/photo-1613230752970-5a1e63bbd19a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w2ODcyMjZ8MHwxfHNlYXJjaHwxfHxhZG9iZSUyMGlsbHVzdHJhdG9yJTIwdnMlMjBjb3JlbGRyYXd8ZW58MXwwfHx8MTc1NjYyMDE4Mnww&ixlib=rb-4.1.0&q=80&w=1080&auto=format&fit=crop&w=1200&q=80" alt="adobe illustrator vs coreldraw"></div><div class="related-post-title">adobe illustrator vs coreldraw</div></a></div><div class="related-post-item"><a href="355.php"><div class="related-post-image"><img src="https://images.unsplash.com/photo-1556968444-95dea2cae706?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w2ODcyMjZ8MHwxfHNlYXJjaHwxfHx3aGF0JTIwaXMlMjBzbW0lMjBpbiUyMHNlb3xlbnwxfDB8fHwxNzUzNzA0MTgyfDA&ixlib=rb-4.1.0&q=80&w=1080&auto=format&fit=crop&w=1200&q=80" alt="what is smm in seo"></div><div class="related-post-title">what is smm in seo</div></a></div><div class="related-post-item"><a href="94.php"><div class="related-post-image"><img src="https://images.unsplash.com/photo-1653212883731-4d5bc66e0181?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w2ODcyMjZ8MHwxfHNlYXJjaHwxfHx3b3JkcHJlc3MlMjBtb250aGx5JTIwc3VwcG9ydHxlbnwxfDB8fHwxNzUxODEwNTgyfDA&ixlib=rb-4.1.0&q=80&w=1080&auto=format&fit=crop&w=1200&q=80" alt="wordpress monthly support"></div><div class="related-post-title">wordpress monthly support</div></a></div><div class="related-post-item"><a href="634.php"><div class="related-post-image"><img src="https://images.unsplash.com/photo-1708957555447-50a7cd6a3ec6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w2ODcyMjZ8MHwxfHNlYXJjaHwxfHxqcXVlcnklMjBlcnJvcnN8ZW58MXwwfHx8MTc1NjUzMzc4M3ww&ixlib=rb-4.1.0&q=80&w=1080&auto=format&fit=crop&w=1200&q=80" alt="jquery errors"></div><div class="related-post-title">jquery errors</div></a></div><div class="related-post-item"><a href="146.php"><div class="related-post-image"><img src="https://images.unsplash.com/photo-1586856635346-78823330b49f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w2ODcyMjZ8MHwxfHNlYXJjaHwxfHx3b3JkcHJlc3MlMjByb2xsYmFja3xlbnwxfDB8fHwxNzUyMjA2NTgxfDA&ixlib=rb-4.1.0&q=80&w=1080&auto=format&fit=crop&w=1200&q=80" alt="wordpress rollback"></div><div class="related-post-title">wordpress rollback</div></a></div><div class="related-post-item"><a href="781.php"><div class="related-post-image"><img src="https://images.unsplash.com/photo-1746292506315-e346cba2af48?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w2ODcyMjZ8MHwxfHNlYXJjaHwxfHxob3clMjB0byUyMGNoZWNrJTIwaWYlMjBhJTIwd2Vic2l0ZSUyMGlzJTIwd29yZHByZXNzfGVufDF8MHx8fDE3NTc1OTkzODR8MA&ixlib=rb-4.1.0&q=80&w=1080&auto=format&fit=crop&w=1200&q=80" alt="how to check if a website is wordpress"></div><div class="related-post-title">how to check if a website is wordpress</div></a></div><div class="related-post-item"><a href="765.php"><div class="related-post-image"><img src="https://images.unsplash.com/photo-1658203897415-3cad6cfad5c0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w2ODcyMjZ8MHwxfHNlYXJjaHwxfHxob3clMjB0byUyMGluc3RhbGwlMjB3b3JkcHJlc3MlMjBvbiUyMGxvY2FsaG9zdHxlbnwxfDB8fHwxNzU3NDg0MTgyfDA&ixlib=rb-4.1.0&q=80&w=1080&auto=format&fit=crop&w=1200&q=80" alt="how to install wordpress on localhost"></div><div class="related-post-title">how to install wordpress on localhost</div></a></div><div class="related-post-item"><a href="534.php"><div class="related-post-image"><img src="https://images.unsplash.com/photo-1658203897415-3cad6cfad5c0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w2ODcyMjZ8MHwxfHNlYXJjaHwxfHx3b3JkcHJlc3MlMjBkb3dubG9hZCUyMGZyb20lMjBtZWRpYSUyMGxpYnJhcnl8ZW58MXwwfHx8MTc1NTgxMzc4Mnww&ixlib=rb-4.1.0&q=80&w=1080&auto=format&fit=crop&w=1200&q=80" alt="wordpress download from media library"></div><div class="related-post-title">wordpress download from media library</div></a></div><div class="related-post-item"><a href="789.php"><div class="related-post-image"><img src="https://images.unsplash.com/photo-1629791786581-8115b1c8ae0f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w2ODcyMjZ8MHwxfHNlYXJjaHwxfHxob3clMjB0byUyMGluZGVudCUyMGluJTIwd29yZHByZXNzfGVufDF8MHx8fDE3NTc2NjQxODJ8MA&ixlib=rb-4.1.0&q=80&w=1080&auto=format&fit=crop&w=1200&q=80" alt="how to indent in wordpress"></div><div class="related-post-title">how to indent in wordpress</div></a></div><div class="related-post-item"><a href="399.php"><div class="related-post-image"><img src="https://images.unsplash.com/photo-1651684195895-38708dc94cfa?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w2ODcyMjZ8MHwxfHNlYXJjaHwxfHxtYXJrZXRpbmclMjBzdHJhdGVnaWVzJTIwZm9yJTIwd2ViJTIwZGVzaWduJTIwY29tcGFueXxlbnwxfDB8fHwxNzU0ODI3MzgyfDA&ixlib=rb-4.1.0&q=80&w=1080&auto=format&fit=crop&w=1200&q=80" alt="marketing strategies for web design company"></div><div class="related-post-title">marketing strategies for web design company</div></a></div> </div>
</div>
</article>
<link rel='stylesheet' id='icomoon-css' href='https://wputopia.com/wp-content/themes/wputopia/icomoon/style.css?ver=5.0.0' type='text/css' media='all' />
<style>
:root {
/* 新拟物主义配色方案 */
--bg-color: #f0f0f3;
--bg-gradient: linear-gradient(145deg, #f5f5f8, #e6e6e9);
--shadow-light: rgba(255, 255, 255, 0.8);
--shadow-dark: rgba(163, 177, 198, 0.5);
--text-primary: #333333;
--text-secondary: #666666;
--text-tertiary: #999999;
--accent-color: #7d56c9;
--accent-color-light: #8a63d6;
--accent-color-dark: #7049bc;
--accent-gradient: linear-gradient(145deg, var(--accent-color-light), var(--accent-color-dark));
--accent-secondary: #ff6b6b;
--card-radius: 8px;
--button-radius: 8px;
--transition: all 0.3s ease;
/* 杂志风格字体大小 */
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-md: 1rem;
--font-size-lg: 1.25rem;
--font-size-xl: 1.5rem;
--font-size-2xl: 2rem;
--font-size-3xl: 2.5rem;
--font-size-4xl: 3rem;
/* 间距 */
--spacing-xs: 0.5rem;
--spacing-sm: 1rem;
--spacing-md: 1.5rem;
--spacing-lg: 2rem;
--spacing-xl: 3rem;
--spacing-2xl: 4rem;
/* 容器宽度 */
--container-width: 1200px;
}
/* Floating Action Button - Neumorphism Style */
.fab-container {
position: fixed;
bottom: -10px; /* Same level as back-to-top button */
right: 30px;
z-index: 1000;
}
.fab-button {
width: 60px;
height: 60px;
background: var(--accent-gradient);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
position: relative;
overflow: hidden;
font-family: 'icomoon' !important;
}
.fab-button::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(145deg, rgba(255,255,255,0.2), rgba(0,0,0,0.05));
border-radius: 50%;
opacity: 0.8;
}
.fab-button:hover {
transform: translateY(-3px) scale(1.05);
}
.fab-button:active {
transform: translateY(0) scale(0.98);
box-shadow:
inset 4px 4px 8px rgba(0, 0, 0, 0.2),
inset -4px -4px 8px rgba(255, 255, 255, 0.1);
}
.fab-button::before {
content: "\e96f";
font-size: 24px;
color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
z-index: 2;
}
.fab-button-label {
position: absolute;
right: 70px;
top: 10px; /* Moved up from 50% to position it higher */
transform: translateY(0); /* Removed vertical centering */
background: var(--bg-gradient);
padding: 10px 16px;
border-radius: var(--button-radius);
box-shadow:
5px 5px 10px var(--shadow-dark),
-5px -5px 10px var(--shadow-light);
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--text-primary);
white-space: nowrap;
opacity: 1;
transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.fab-menu {
position: absolute;
bottom: 110px;
right: 0;
width: 300px;
background: var(--bg-gradient);
border-radius: var(--card-radius);
box-shadow:
8px 8px 16px var(--shadow-dark),
-8px -8px 16px var(--shadow-light);
opacity: 0;
visibility: hidden;
transform: translateY(10px) scale(0.98);
transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
overflow: hidden;
}
.fab-menu.active {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.fab-menu-header {
background: var(--accent-gradient);
color: #fff;
padding: var(--spacing-md);
border-top-left-radius: var(--card-radius);
border-top-right-radius: var(--card-radius);
position: relative;
overflow: hidden;
}
.fab-menu-header::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(145deg, rgba(255,255,255,0.2), rgba(0,0,0,0.05));
opacity: 0.8;
}
.fab-menu-header h3 {
margin: 0;
font-size: var(--font-size-md);
font-weight: 600;
color: #fff;
position: relative;
z-index: 2;
}
.fab-menu-header p {
margin: 5px 0 0;
font-size: var(--font-size-sm);
opacity: 0.9;
position: relative;
z-index: 2;
}
.fab-menu-body {
padding: var(--spacing-md);
display: flex;
align-items: center;
gap: var(--spacing-md);
flex-wrap: nowrap; /* Prevent wrapping */
}
.fab-menu-items {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.fab-menu-item {
display: flex;
align-items: center;
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--button-radius);
text-decoration: none;
color: var(--text-primary);
background: var(--bg-color);
box-shadow:
5px 5px 10px var(--shadow-dark),
-5px -5px 10px var(--shadow-light);
transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
position: relative;
overflow: hidden;
}
.fab-menu-item:hover {
transform: translateY(-2px);
box-shadow:
7px 7px 14px var(--shadow-dark),
-7px -7px 14px var(--shadow-light);
}
.fab-menu-item:active {
transform: translateY(0);
box-shadow:
inset 3px 3px 6px var(--shadow-dark),
inset -3px -3px 6px var(--shadow-light);
}
.fab-menu-item span {
margin-left: var(--spacing-sm);
font-size: var(--font-size-sm);
font-weight: 500;
position: relative;
z-index: 2;
}
.fab-menu-item svg {
width: 20px;
height: 20px;
flex-shrink: 0;
position: relative;
z-index: 2;
}
.fab-menu-item.whatsapp::before {
content: "";
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NzguMTY1IDQ3OC4xNjUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ3OC4xNjUgNDc4LjE2NSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiPjxwYXRoIGQ9Ik00NzguMTY1IDIzMi45NDZjMCAxMjguNTY3LTEwNS4wNTcgMjMyLjk2Ni0yMzQuNjc5IDIzMi45NjYtNDEuMTAyIDAtNzkuODE0LTEwLjU5OS0xMTMuNDQ1LTI4Ljk2OUwwIDQ3OC4xNjVsNDIuNDM3LTEyNS4wNGMtMjEuNDM4LTM1LjA2NS0zMy43Ny03Ni4yMDctMzMuNzctMTIwLjE1OUM4LjY2NyAxMDQuMzQgMTEzLjc2MyAwIDI0My40ODUgMGMxMjkuNjIzIDAgMjM0LjY4IDEwMC4zNCAyMzQuNjggMjMyLjk0NnpNMjQzLjQ4NSAzNy4wOThjLTEwOC4wMDIgMC0xOTcuNDIyIDg3LjgwMy0xOTcuNDIyIDE5NS44NjggMCA0Mi45MTUgMTMuOTg2IDgyLjYwMyAzNy41NzYgMTE0Ljg3OWwtMjQuNTg2IDcyLjU0MiA3NS44NDktMjMuOTY4YzMxLjEyMSAyMC40ODEgNjguNDE3IDMyLjI5NiAxMDguNTgzIDMyLjI5NiAxMDguNzIzIDAgMTk3LjMyMy04Ny44NDMgMTk3LjMyMy0xOTUuOTA4IDAtMTA3Ljg4Ni04OC42LTE5NS43MDktMTk3LjMyMy0xOTUuNzA5ek0zNjEuOTMxIDI4Ni42MmMtMS4zOTUtMi4zMzEtNS4yMi0zLjc0Ni0xMC44OTgtNi4xMTQtNS45MTctMi44NDktMzQuMDg5LTE2LjQ5Ny0zOS41MDgtMTguMzctNS4xNi0xLjkxMy04Ljk4Ni0yLjg0OS0xMi44MDEgMi44MjktNC4wMDUgNS42MzgtMTQuOTAzIDE4LjYyOS0xOC4yMyAyMi4zNTQtMy41NDYgMy43ODUtNi44NTQgNC4yNjQtMTIuNTUyIDEuNDM1LTUuNjE4LTIuODA5LTI0LjI2Ny04Ljg2Ni00Ni4yMDMtMjguMzkxLTE3LjA1NS0xNS4wNDItMjguNjctMzMuNzExLTMxLjk5Ny0zOS41MDgtMy40MjctNS43NzgtLjM5OC04LjgyNiAyLjQ3MS0xMS42MzUgMi42OS0yLjU5IDUuNzc4LTYuNzM0IDguNjI3LTEwLjA0MSAyLjk2OS0zLjI4NyAzLjkwNS01LjYzOCA1Ljc5OC05LjQyNCAxLjkxMy0zLjkwNS45MzYtNy4xOTItLjQ3OC0xMC1xNDEtMS40MTUtMi44NDktMTMuMDEtMzAuODgxLTE3Ljc1Mi00Mi4zMzctNC44NDEtMTEuNDE2LTkuNTQzLTkuNTIzLTEyLjg3MS05LjUyMy0zLjQ2NyAwLTcuMjEyLS40NzgtMTEuMTE3LS40NzgtMy43ODUgMC0xMC4wNDEgMS4zOTUtMTUuMzgxIDcuMTkyLTUuMiA1LjY1OC0yMC4xMjMgMTkuNDY1LTIwLjEyMyA0Ny41OTcgMCAyOC4wNTIgMjAuNjAxIDU1LjMwOCAyMy41NSA1OS4wNTMgMi44NjkgMy43ODUgMzkuNzQ3IDYzLjE5NyA5OC4zMDMgODYuMDcgNTguNDc2IDIyLjg3MiA1OC40NzYgMTUuMzIxIDY5LjExNSAxNC4zNjUgMTAuMzgtLjk1NiAzNC4wNjktMTMuODY3IDM4LjgxMS0yNy4wOTYgNC42Ni0xMy40NSA0LjY2LTI0Ljc2NiAzLjI0Ni0yNy1xMzd6IiBmaWxsPSIjMkRCNzQyIi8+PC9zdmc+) 0 0 no-repeat;
background-size: contain;
display: inline-block;
width: 20px;
height: 20px;
position: relative;
z-index: 2;
}
.fab-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
box-shadow:
5px 5px 10px var(--shadow-dark),
-5px -5px 10px var(--shadow-light),
inset 2px 2px 4px var(--shadow-light),
inset -2px -2px 4px var(--shadow-dark);
position: relative;
overflow: hidden;
flex-shrink: 0; /* Prevent distortion */
aspect-ratio: 1 / 1; /* Ensure perfect circle */
}
.fab-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.fab-avatar::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50%;
box-shadow: inset 0 0 0 2px var(--accent-color);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: inset 0 0 0 2px rgba(125, 86, 201, 0.4);
}
50% {
box-shadow: inset 0 0 0 2px rgba(125, 86, 201, 0.8);
}
100% {
box-shadow: inset 0 0 0 2px rgba(125, 86, 201, 0.4);
}
}
.fab-close {
position: absolute;
bottom: -60px;
right: 0;
width: 40px;
height: 40px;
background: var(--accent-gradient);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
box-shadow:
5px 5px 10px var(--shadow-dark),
-5px -5px 10px var(--shadow-light);
position: relative;
overflow: hidden;
}
.fab-close::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(145deg, rgba(255,255,255,0.2), rgba(0,0,0,0.05));
border-radius: 50%;
opacity: 0.8;
}
.fab-close.active {
opacity: 1;
visibility: visible;
}
.fab-close:hover {
transform: translateY(-2px);
box-shadow:
7px 7px 14px var(--shadow-dark),
-7px -7px 14px var(--shadow-light);
}
.fab-close:active {
transform: translateY(0);
box-shadow:
inset 3px 3px 6px var(--shadow-dark),
inset -3px -3px 6px var(--shadow-light);
}
.fab-close::before {
content: "✖";
font-size: 18px;
color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
position: relative;
z-index: 2;
}
.fab-container.active .fab-button {
transform: rotate(45deg);
}
.fab-container.active .fab-button-label {
opacity: 0;
transform: translateY(0) translateX(20px);
}
</style>
<div class="fab-container neumorphic-element">
<div class="fab-button icon-bubbles3" aria-label="Contact Us"></div>
<span class="fab-button-label">Chat with me</span>
<div class="fab-menu">
<div class="fab-menu-header">
<h3>Start a Conversation</h3>
<p>Hi! Let's connect on your preferred platform.</p>
</div>
<div class="fab-menu-body">
<div class="fab-menu-items">
<a target="_blank" href="https://api.whatsapp.com/send?phone=17722028780" rel="nofollow noopener noreferrer" class="fab-menu-item whatsapp">
<span>WhatsApp</span>
</a>
<a target="_blank" href="https://www.fiverr.com/s/e6W9V3r" class="fab-menu-item fiverr">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 48 48">
<circle cx="24" cy="24" r="20" fill="#66bb6a"></circle>
<path fill="#fff" d="M35.066,22.035v-0.959h-1.821l-0.8-0.014c-0.684,0-1.151,0.45-1.335,0.974v-0.959h-2.039V27.3 h2.039v-1.334v-2.066c0-0.62,0.503-1.123,1.123-1.123h0.795v4.523h2.039v-1.334v-2.066c0-0.62,0.503-1.123,1.123-1.123h1.012v-1.7 l-0.8-0.014C35.718,21.061,35.25,21.512,35.066,22.035z M20.56,21.206l-1.094,3.597l-1.093-3.597h-2.039l2.215,6.223h0.12h1.597 h0.12l2.213-6.223H20.56z M12.23,21.206v-0.415c0-0.364,0.294-0.658,0.658-0.658h1.287v-1.706h-1.767 c-1.223,0-2.216,0.991-2.216,2.216v0.564H9v1.649h1.192v4.572h2.039v-4.572h1.944v4.572h2.039v-4.572v-1.649h-2.039H12.23V21.206z M25.424,21.122h-0.248c-1.67,0-3.024,1.354-3.024,3.024v0.342c0,1.67,1.354,3.024,3.024,3.024h0.552 c1.143,0,2.122-0.706,2.524-1.705l-1.798-0.525c0,0-0.215,0.616-0.965,0.616c-0.847,0-1.295-0.463-1.354-0.989l0,0v-0.003 c-0.004-0.038-0.006-0.077-0.006-0.115h2.3h2.022v-0.643C28.448,22.476,27.094,21.122,25.424,21.122z M24.13,23.59 c0.025-0.559,0.485-1.006,1.051-1.006h0.194c0.565,0,1.026,0.446,1.051,1.006H24.13z"></path>
<circle cx="38.852" cy="26.305" r="1.268" fill="#263238"></circle>
</svg>
<span>Fiverr</span>
</a>
<a target="_blank" href="https://www.upwork.com/freelancers/~015ffde826807e444e?mp_source=share" class="fab-menu-item upwork">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 50 50">
<path d="M 1 9 C 0.448 9 0 9.448 0 10 L 0 24.115234 C 0 30.276234 4.6829844 35.631469 10.833984 35.980469 C 16.730984 36.314469 21.747875 32.176391 22.796875 26.650391 C 23.366875 27.420391 23.94625 28.135969 24.53125 28.792969 L 21.001953 43.771484 C 20.932953 44.069484 21.002406 44.380094 21.191406 44.621094 C 21.382406 44.859094 21.670563 45 21.976562 45 L 27.095703 45 C 27.559703 45 27.959406 44.687328 28.066406 44.236328 C 28.687406 41.615328 29.660969 37.508156 30.542969 33.785156 L 31.453125 34.3125 C 33.618125 35.4335 35.815 36 38 36 C 45.192 36 50.926 29.641 49.875 22.25 C 49.179 17.354 45.414078 13.318344 40.580078 12.277344 C 34.951078 11.064344 29.525359 13.949141 27.193359 18.744141 C 27.193359 18.744141 26.934562 19.318578 26.726562 19.892578 C 25.076563 17.046578 24.107609 14.094078 23.599609 11.955078 C 23.414609 11.175078 23.137469 9.762875 23.105469 9.671875 C 22.966469 9.268875 22.589109 9 22.162109 9 L 17 9 C 16.448 9 16 9.448 16 10 L 16 24.300781 C 16 26.649781 14.287219 28.750516 11.949219 28.978516 C 9.2672187 29.240516 7 27.13 7 24.5 L 7 10 C 7 9.448 6.552 9 6 9 L 1 9 z M 38 19 C 40.757 19 43 21.243 43 24 C 43 26.757 40.757 29 38 29 C 35.775 29 33.713531 27.658281 32.269531 26.488281 C 32.796531 24.263281 33.15025 22.773047 33.15625 22.748047 C 33.72425 20.541047 35.717 19 38 19 z"></path>
</svg>
<span>Upwork</span>
</a>
</div>
<div class="fab-avatar">
<img src="https://media.wputopia.com/storage/2025/08/19014624/Victor-saying-hi-400_transparent.webp" alt="Victor Avatar" style="object-fit: cover; width: 100%; height: 100%;" loading="lazy">
</div>
</div>
</div>
<div class="fab-close"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const fabContainer = document.querySelector('.fab-container');
const fabButton = document.querySelector('.fab-button');
const fabMenu = document.querySelector('.fab-menu');
const fabClose = document.querySelector('.fab-close');
const fabMenuItems = document.querySelectorAll('.fab-menu-item');
// Add press effect
function addPressEffect(element) {
element.addEventListener('mousedown', function() {
this.style.transform = 'scale(0.95)';
});
element.addEventListener('mouseup', function() {
this.style.transform = '';
});
element.addEventListener('mouseleave', function() {
this.style.transform = '';
});
}
// Add press effect to buttons
addPressEffect(fabButton);
addPressEffect(fabClose);
// Add delayed display animation for menu items
function setupMenuItemsAnimation() {
fabMenuItems.forEach((item, index) => {
item.style.opacity = '0';
item.style.transform = 'translateY(10px)';
item.style.transition = 'all 0.3s cubic-bezier(0.25, 1, 0.5, 1)';
});
}
function animateMenuItems(show) {
fabMenuItems.forEach((item, index) => {
setTimeout(() => {
if (show) {
item.style.opacity = '1';
item.style.transform = 'translateY(0)';
} else {
item.style.opacity = '0';
item.style.transform = 'translateY(10px)';
}
}, 50 * (index + 1)); // Add incremental delay for each item
});
}
// Initial setup
setupMenuItemsAnimation();
// Click event handling
fabButton.addEventListener('click', () => {
fabContainer.classList.toggle('active');
fabMenu.classList.toggle('active');
fabClose.classList.toggle('active');
if (fabMenu.classList.contains('active')) {
animateMenuItems(true);
} else {
animateMenuItems(false);
}
});
fabClose.addEventListener('click', () => {
fabContainer.classList.remove('active');
fabMenu.classList.remove('active');
fabClose.classList.remove('active');
animateMenuItems(false);
});
// Add haptic feedback (if browser supports it)
function addHapticFeedback(element) {
element.addEventListener('click', () => {
if ('vibrate' in navigator) {
navigator.vibrate(5); // Slight vibration for 5ms
}
});
}
addHapticFeedback(fabButton);
addHapticFeedback(fabClose);
fabMenuItems.forEach(item => addHapticFeedback(item));
});
</script>
<footer class="footer">
<p>© 2025 All rights reserved.</p>
<p>Developed by <a href="https://wputopia.com/" target="_blank">WPutopia</a></p>
</footer>
</body>
</html> 