01-11-2026, 08:30 AM
Dieses Tutorial beschreibt die vollständige Integration des animierten Voice-Hubs für TeamSpeak und Discord. Das Design ist vollständig reponsive (optimiert für Desktop, Tablet und Smartphone).
Schritt 1: Das Design (Custom CSS)
Dieser Teil steuert das Aussehen, den roten Neon-Glow und sorgt dafür, dass sich das Layout auf Handys automatisch anpasst.
Gehe in dein WordPress-Backend zu Design -> Customizer.
Wähle den Punkt Zusätzliches CSS.
Kopiere diesen gesamten Block hinein:
Code:
/* --- Voice Hub CSS (STABIL & MOBIL) --- */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Rajdhani:wght@500;700&display=swap');
:root {
--dg-red: #e60000;
--dg-dark: #121212;
--dg-white: #ffffff;
}
/* Hauptcontainer */
.dg-wrapper {
background: var(--dg-white);
padding: 40px 20px;
font-family: 'Rajdhani', sans-serif;
text-align: center;
}
/* Überschrift mit Glow-Animation */
.animated-title {
font-family: 'Orbitron', sans-serif !important;
font-size: 2.8rem;
color: var(--dg-dark);
text-transform: uppercase;
margin-bottom: 60px;
position: relative;
display: inline-block;
}
.animated-title::after {
content: 'VOICE HUB';
position: absolute;
left: 0;
top: 0;
color: var(--dg-red);
width: 100%;
overflow: hidden;
border-right: 3px solid var(--dg-red);
white-space: nowrap;
animation: typewriter 4s steps(10) infinite;
filter: drop-shadow(0 0 10px var(--dg-red));
}
@keyframes typewriter {
0%, 10% { width: 0; }
40%, 60% { width: 100%; }
90%, 100% { width: 0; }
}
/* Grid Layout */
.dg-grid {
display: flex;
flex-wrap: wrap;
gap: 40px;
justify-content: center;
max-width: 1100px;
margin: 0 auto;
}
/* KARTEN-DESIGN & HOVER (MOUSEOVER FIX) */
.dg-wrapper .dg-card {
background: #ffffff !important;
border: 2px solid #f0f0f0 !important;
border-radius: 20px !important;
padding: 40px !important;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
flex: 1 1 350px;
max-width: 500px;
display: flex;
flex-direction: column;
align-items: center;
position: relative !important;
z-index: 1 !important;
}
/* DIESER TEIL STEUERT DAS MOUSEOVER */
.dg-wrapper .dg-card:hover {
border-color: var(--dg-red) !important;
transform: translateY(-12px) !important; /* Karte hebt sich ab */
box-shadow: 0 20px 45px rgba(230, 0, 0, 0.15) !important;
z-index: 10 !important;
}
/* Discord Viewer - Lang gezogen */
.discord-widget {
width: 100%;
height: 600px !important;
margin-bottom: 25px;
border-radius: 10px;
border: none;
}
/* Pulsierende Icons */
.voice-icon-box {
width: 80px;
height: 80px;
background: var(--dg-red);
border-radius: 50%;
margin-bottom: 25px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.voice-icon-box svg {
width: 40px;
height: 40px;
fill: white;
}
.voice-icon-box::before, .voice-icon-box::after {
content: '';
position: absolute;
border: 2px solid var(--dg-red);
width: 100%;
height: 100%;
border-radius: 50%;
animation: pulse-ring 2s linear infinite;
}
.voice-icon-box::after { animation-delay: 1s; }
@keyframes pulse-ring {
0% { transform: scale(1); opacity: 0.8; }
100% { transform: scale(1.6); opacity: 0; }
}
/* Button Design */
.dg-btn {
display: inline-block;
background: var(--dg-dark);
color: white !important;
text-decoration: none !important;
padding: 15px 35px;
border-radius: 50px;
font-weight: 700;
text-transform: uppercase;
transition: 0.3s !important;
margin-top: auto;
}
.dg-wrapper .dg-card:hover .dg-btn {
background: var(--dg-red) !important;
box-shadow: 0 5px 15px rgba(230, 0, 0, 0.4);
}
/* --- MOBILOPTIMIERUNG --- */
@media (max-width: 768px) {
.animated-title { font-size: 1.8rem; margin-bottom: 40px; }
.dg-grid { gap: 20px; }
.dg-card { flex: 1 1 100% !important; padding: 30px 20px !important; }
.discord-widget { height: 500px !important; }
.dg-btn { width: 100%; }
}Schritt 2: Die Einbindung (HTML)
Füge diesen Code auf deiner WordPress-Seite in einen "Individuelles HTML" Block ein.
Code:
<div class="dg-wrapper">
<h2 class="animated-title">VOICE HUB</h2>
<div class="dg-grid">
<div class="dg-card">
<div class="voice-icon-box">
<svg viewBox="0 0 24 24"><path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z"/><path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/></svg>
</div>
<h3>TEAMSPEAK</h3>
<div style="margin-bottom: 20px;">
User online:<br>
<div id="ts3viewer_1130845"></div>
<script src="https://static.tsviewer.com/short_expire/js/ts3viewer_loader.js"></script>
<script>
var ts3v_url_1 = "https://www.tsviewer.com/ts3viewer.php?ID=1130845&text=080808&text_size=12&text_family=1&text_s_color=bd1e1e&text_s_weight=bold&iconset=default";
ts3v_display.init(ts3v_url_1, 1130845, 100);
</script>
</div>
<a href="ts3server://Domain oder ID" class="dg-btn">Beitreten</a>
</div>
<div class="dg-card">
<div class="voice-icon-box">
<svg viewBox="0 0 24 24"><path d="M12 1c-4.97 0-9 4.03-9 9v7c0 1.66 1.34 3 3 3h3v-8H5v-2c0-3.87 3.13-7 7-7s7 3.13 7 7v2h-4v8h3c1.66 0 3-1.34 3-3v-7c0-4.97-4.03-9-9-9z"/></svg>
</div>
<h3>DISCORD</h3>
<iframe class="discord-widget" src="https://discord.com/widget?id=Deien ID&theme=dark" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe>
<a href="https://discord.gg/Dein Einladungslink" class="dg-btn" target="_blank">Beitreten</a>
</div>
</div>
<p style="margin-top: 40px; color: #888; font-size: 0.9rem;">
Powered by GameServer-Install.de by rumpel
</p>
</div>💡 Zusammenfassung der Funktionen:
- Schreibmaschinen-Animation: Der Titel "VOICE HUB" tippt sich selbst und leuchtet rot.
- Puls-Icons: Die Icons haben animierte Ringe, die Aufmerksamkeit erzeugen.
- Interaktive Karten: Beim Drüberfahren mit der Maus (Hover) hebt sich die Karte leicht an.
- Mobil-Check: Auf Smartphones wird die Schrift kleiner und die Karten stapeln sich sauber untereinander, um horizontales Scrollen zu vermeiden.
Damit hast du alles perfekt dokumentiert. Soll ich dir noch zeigen, wie du die TeamSpeak-Useranzahl farblich hervorheben kannst?
Lg
rumpel
