Mega Menü Son Güncelleme: 04-07-2026
Mega Menü içerikleri malesef manuel olarak girilmelidir. Sonraki sürümlerde Mega Menü için de sürükle bırak içerik oluşturucu geliştirmeyi planlıyoruz. Böylece mega menünüzü kodlarla uğraşmadan kolayca oluşturabileceksiniz.
Mega Menü içeriği olarak demo sitesinde yer alan menülerin kodları burada verilmiştir. Kendi mega menünüz için ilgili kod parçalarını güncelleyebilirsiniz.
ÖNEMLİ HATIRLATMA!
Menü Düzenleme Penceresindeki Simge alanı mega menüde genişlik belirteci olarak kullanılmaktadır. Temalarımızda Mega Menü olarak kullanmak istediğiniz menünün düzenleme sayfasında mega menü açılır penceresinin genişliğini Simge alanında piksel olarak veya tam geniş olarak belirtebilirsiniz. Eğer herhangi bir genişlik belirtmezseniz menü alanı genişliği otomatik olarak menü alanı genişliğinde olacaktır. Piksel cinsinden belirtmek için bu alana istediğiniz genişliği piksel olarak (px ibaresi olmadan Örn:700) girin. Eğer tam geniş bir açılır pencere istiyorsanız bu durumda bu alana full ibaresini girmelisiniz.
Alan Adı Mega Menü İçeriği
Demo site Alan Adı Mega Menü içeriğini oluşturmak için yapmanız gerekenler:
- WiseCP Yönetim Panelinizde oturum açın.
- Site Yönetimi > Menüler (Header/Footer) menüsünü tıklayın.
- Açılan sayfada yer alan Header Menü sekmesinde düzenlemek istediğiniz menüyü (Alan Adı) seçin ve karşısındaki simgesine tıklayın.
- Mega Menü içeriklerinde ve Menü Etiketlerinde Kısakodlar kullanarak istediğiniz herhangi bir ürün grubundaki ürünün fiyatını gösterebilirsiniz.
Herhangi bir ürün grubundaki belirli bir ürünün fiyatını göstermek için {{domain:com:register}} veya {{hosting:15}} vb. şeklinde kısakodlar kullanabilirsiniz. Kısakodlar hakkında detaylı bilgi için lütfen Kısa Kodlar Dokumantasyonuna gözatın.
-
Açılan Popup pencerede Mega Menü kutucuğunu işaretleyin ve aşağıdaki içerikleri buraya yapıştırın.
<li class="row"> <div class="col-xl-8"> <div class="row row-cols-2"> <div class="menu-item"> <a href="{SITE_URL}alan-adi"> <i class="fa-solid fa-magnifying-glass-arrow-right"></i> <span class="menu-title"> <h5>Alan Adı Kayıt</h5> İşletmenize en uygun alan adını bulun ve en avantajlı fiyatlarla kolayca kaydedin. </span> </a> </div> <div class="menu-item"> <a href="{SITE_URL}alan-adi/transfer"> <i class="fa-solid fa-repeat"></i> <span class="menu-title"> <h5>Alan Adı Transfer</h5> Alan adınızı hızlı ve güvenli bir şekilde transfer edin, tüm süreci kolayca yönetin. </span> </a> </div> <div class="menu-item"> <a href="{SITE_URL}alan-adi#section-domain-prices"> <span class="fon-ribbon fon-ribbon-top fon-ribbon-end">.com {{domain:com:register}}</span> <i class="fa-solid fa-tags"></i> <span class="menu-title"> <h5>Alan Adı Fiyatları</h5> Rekabetçi alan adı fiyatlarımızı keşfedin ve bütçenize uygun seçenekleri değerlendirin. </span> </a> </div> <div class="menu-item"> <a href="{SITE_URL}alan-adi/whois"> <i class="fa-solid fa-id-card-clip"></i> <span class="menu-title"> <h5>Whois Sorgulama</h5> Alan adı sahipliği ve detayları hakkında bilgi edinmek için hızlı bir Whois sorgusu yapın. </span> </a> </div> </div> </div> <div class="col-xl-4"> <div class="purple-bg menu-featured featured-row"> <div class="col-xl-6"> <span class="menu-featured-title"> Ücretsiz Whois Koruması </span> <div class="menu-featured-desc"> <i class="fa-solid fa-check"></i> Alan adınızı koruyun, gizliliğinizi artırın. </div> <a href="#" class="btn btn-sm btn-purple"> Şimdi Satın Al </a> </div> <div class="col-xl-6"> <img src="{TEMPLATE_URL}images/ucretsiz-whois-koruma.png" alt="Ücretsiz Whois Koruması" class="img-fluid"> </div> </div> </div> </li> <li class="menu-featured"> <i class="fa-solid fa-user-lock"></i> Tüm alan adı kayıt işlemlerinde <strong>ÜCRETSİZ</strong> Whois Koruması sağlanmaktadır. </li><li class="row"> <div class="col-xl-8"> <div class="row row-cols-2"> <div class="menu-item"> <a href="{SITE_URL}en/domain"> <i class="fa-solid fa-magnifying-glass-arrow-right"></i> <span class="menu-title"> <h5>Domain Register</h5> Find the most suitable domain name and register it easily at the most advantageous prices. </span> </a> </div> <div class="menu-item"> <a href="{SITE_URL}en/domain/transfer"> <i class="fa-solid fa-repeat"></i> <span class="menu-title"> <h5>Domain Transfer</h5> Transfer your domain name quickly and securely, and manage the entire process easily. </span> </a> </div> <div class="menu-item"> <a href="{SITE_URL}en/domain#section-domain-prices"> <span class="fon-ribbon fon-ribbon-top fon-ribbon-end">.com {{domain:com:register}}</span> <i class="fa-solid fa-tags"></i> <span class="menu-title"> <h5>Domain Prices</h5> Explore our competitive domain name prices and evaluate options that fit your budget. </span> </a> </div> <div class="menu-item"> <a href="{SITE_URL}en/domain/whois"> <i class="fa-solid fa-id-card-clip"></i> <span class="menu-title"> <h5>Whois Lookup</h5> Perform a quick Whois lookup to find out about domain ownership and other domain details. </span> </a> </div> </div> </div> <div class="col-xl-4"> <div class="purple-bg menu-featured featured-row"> <div class="col-xl-6"> <span class="menu-featured-title"> Free Whois Protection </span> <div class="menu-featured-desc"> <i class="fa-solid fa-check"></i> Protect your domain, enhance your privacy. </div> <a href="#" class="btn btn-sm btn-purple"> Shop Now </a> </div> <div class="col-xl-6"> <img src="{TEMPLATE_URL}images/ucretsiz-whois-koruma.png" alt="Free Whois Protection" class="img-fluid"> </div> </div> </div> </li> <li class="menu-featured"> <i class="fa-solid fa-user-lock"></i> <strong>FREE</strong> Whois Protection is provided for all domain name registrations. </li> - Güncelle/Kaydet düğmesine tıklayarak menünüzü kaydedin.
Hosting Mega Menü İçeriği
Demo site Hosting Mega Menü içeriğini oluşturmak için yapmanız gerekenler:
- WiseCP Yönetim Panelinizde oturum açın.
- Site Yönetimi > Menüler (Header/Footer) menüsünü tıklayın.
- Açılan sayfada yer alan Header Menü sekmesinde düzenlemek istediğiniz menüyü (Web Hosting) seçin ve karşısındaki simgesine tıklayın.
-
Açılan Popup pencerede Mega Menü kutucuğunu işaretleyin ve aşağıdaki içerikleri buraya yapıştırın.
<li class="row"> <div class="col-xl-8"> <div class="row row-cols-3"> <div class="menu-item"> <a href="{SITE_URL}kategori/ekonomik-ssd-hosting"> <i class="fa-solid fa-cloud"></i> <span class="menu-title"> <h5>Web Hosting</h5> Sadece <strong>{{hosting:15}}</strong>'den başlayan fiyatlarla. </span> </a> </div> <div class="menu-item"> <a href="{SITE_URL}kategori/profesyonel-ssd-hosting"> <i class="fa-solid fa-server"></i> <span class="menu-title"> <h5>Profesyonel SSD Hosting</h5> Sadece <strong>{{hosting:17}}</strong>'den başlayan fiyatlarla. </span> </a> </div> <div class="menu-item"> <a href="{SITE_URL}kategori/bayi-reseller-hosting"> <i class="fa-solid fa-sitemap"></i> <span class="menu-title"> <h5>Reseller Hosting</h5> Sadece <strong>{{hosting:33}}</strong>'den başlayan fiyatlarla. </span> </a> </div> <div class="menu-item"> <a href="#"> <span class="fon-ribbon fon-ribbon-top fon-ribbon-end">Popüler</span> <i class="fa-solid fa-database"></i> <span class="menu-title"> <h5>Kurumsal Hosting</h5> İşletmeler için daha yüksek performans ve seçenekler. </span> </a> </div> <div class="menu-item"> <a href="#"> <i class="fa-brands fa-wordpress"></i> <span class="menu-title"> <h5>Wordpress Hosting</h5> Wordpress için optimize edilmiş güvenli ve kararlı platform. </span> </a> </div> <div class="menu-item"> <a href="#"> <i class="fa-solid fa-cart-plus"></i> <span class="menu-title"> <h5>E-Ticaret Hosting</h5> E-Ticarete özel yüksek performans ve optimizasyon. </span> </a> </div> </div> </div> <div class="col-xl-4"> <div class="success-bg menu-featured featured-row"> <div class="col-xl-6"> <span class="menu-featured-title"> Ücretsiz Site Yapıcı </span> <div class="menu-featured-desc"> <i class="fa-solid fa-check"></i> Sitenizi dakikalar içinde oluşturun. </div> <a href="#" class="btn btn-sm btn-success"> Şimdi Satın Al </a> </div> <div class="col-xl-6"> <img src="{TEMPLATE_URL}images/ucretsiz-site-yapici.png" alt="Ücretsiz Site Yapıcı" class="img-fluid"> </div> </div> </div> </li> <li class="menu-featured"> <i class="fa-solid fa-shield-halved"></i> Tüm web hosting paketlerimizde SSL sertifikası <strong>ÜCRETSİZ</strong> sağlanmaktadır. </li><li class="row"> <div class="col-xl-8"> <div class="row row-cols-3"> <div class="menu-item"> <a href="{SITE_URL}en/category/cheap-ssd-hosting"> <i class="fa-solid fa-cloud"></i> <span class="menu-title"> <h5>Web Hosting</h5> Prices starting from only <strong>{{hosting:15}}</strong>. </span> </a> </div> <div class="menu-item"> <a href="{SITE_URL}en/category/professional-ssd-hosting"> <i class="fa-solid fa-server"></i> <span class="menu-title"> <h5>Professional SSD Hosting</h5> Prices starting from only <strong>{{hosting:17}}</strong>. </span> </a> </div> <div class="menu-item"> <a href="{SITE_URL}en/category/reseller-hosting"> <i class="fa-solid fa-sitemap"></i> <span class="menu-title"> <h5>Reseller Hosting</h5> Prices starting from only <strong>{{hosting:33}}</strong>. </span> </a> </div> <div class="menu-item"> <a href="#"> <span class="fon-ribbon fon-ribbon-bottom fon-ribbon-end fon-ribbon-bookmark">Popüler</span> <i class="fa-solid fa-database"></i> <span class="menu-title"> <h5>Corporate Hosting</h5> For higher performance and options for businesses. </span> </a> </div> <div class="menu-item"> <a href="#"> <i class="fa-brands fa-wordpress"></i> <span class="menu-title"> <h5>Wordpress Hosting</h5> A secure and powerful platform crafter for wordpress. </span> </a> </div> <div class="menu-item"> <a href="#"> <i class="fa-solid fa-cart-plus"></i> <span class="menu-title"> <h5>E-Commerce Hosting</h5> High performance and optimization tailored for e-commerce. </span> </a> </div> </div> </div> <div class="col-xl-4"> <div class="success-bg menu-featured featured-row"> <div class="col-xl-6"> <span class="menu-featured-title"> Free Site Builder </span> <div class="menu-featured-desc"> <i class="fa-solid fa-check"></i> Create your site in minutes. </div> <a href="#" class="btn btn-sm btn-success"> Shop Now </a> </div> <div class="col-xl-6"> <img src="{TEMPLATE_URL}images/ucretsiz-site-yapici.png" alt="Free Site Builder" class="img-fluid"> </div> </div> </div> </li> <li class="menu-featured"> <i class="fa-solid fa-shield-halved"></i> SSL certificate is provided <strong>FREE</strong> of charge in all our web hosting packages. </li> - Güncelle/Kaydet düğmesine tıklayarak menünüzü kaydedin.
Server Mega Menü İçeriği
Demo site Server Mega Menü içeriğini oluşturmak için yapmanız gerekenler:
- WiseCP Yönetim Panelinizde oturum açın.
- Site Yönetimi > Menüler (Header/Footer) menüsünü tıklayın.
- Açılan sayfada yer alan Header Menü sekmesinde düzenlemek istediğiniz menüyü (Sunucu) seçin ve karşısındaki simgesine tıklayın.
-
Açılan Popup pencerede Mega Menü kutucuğunu işaretleyin ve aşağıdaki içerikleri buraya yapıştırın.
<li class="row"> <div class="col-xl-8"> <div class="row row-cols-3"> <div class="menu-item"> <a href="{SITE_URL}kategori/turkiye-lokasyon-vds-vps"> <i class="fa-solid fa-server danger-bg danger-hover-bg"></i> <span class="menu-title"> <h5>Türkiye Lokasyon VPS/VDS</h5> Aylık sadece <strong>{{server:30}}</strong>'den başlayan fiyatlarla. </span> </a> </div> <div class="menu-item"> <a href="{SITE_URL}kategori/almanya-lokasyon-vds-vps"> <i class="fa-solid fa-server default-bg default-hover-bg"></i> <span class="menu-title"> <h5>Almanya Lokasyon VPS/VDS</h5> Aylık sadece <strong>{{server:42}}</strong>'den başlayan fiyatlarla. </span> </a> </div> <div class="menu-item"> <a href="{SITE_URL}kategori/fransa-lokasyon-vds-vps"> <i class="fa-solid fa-server primary-bg primary-hover-bg"></i> <span class="menu-title"> <h5>Fransa Lokasyon VPS/VDS</h5> Aylık sadece <strong>{{server:38}}</strong>'den başlayan fiyatlarla. </span> </a> </div> <div class="menu-item"> <a href="{SITE_URL}kategori/fiziksel-sunucular-dedicated"> <span class="fon-ribbon">Popüler</span> <i class="fa-solid fa-computer success-bg success-hover-bg"></i> <span class="menu-title"> <h5>Fiziksel Sunucular</h5> Aylık sadece <strong>{{server:24}}</strong>'den başlayan fiyatlarla. </span> </a> </div> <div class="menu-item"> <a href="javascript:void(0);"> <i class="fa-solid fa-screwdriver-wrench purple-bg purple-hover-bg"></i> <span class="menu-title"> <h5>Sunucu Yönetimi</h5> Yönetimli sunucu hizmetimizle siz sadece işinize odaklanın, teknik detayları bize bırakın. </span> </a> </div> <div class="menu-item"> <a href="javascript:void(0);"> <i class="fa-solid fa-database pink-bg pink-hover-bg"></i> <span class="menu-title"> <h5>Sunucu Barındırma</h5> Tier-3 veri merkezlerinde, uptime garantili hosting çözümleriyle projenize sınıf atlatın. </span> </a> </div> </div> </div> <div class="col-xl-4"> <div class="primary-bg menu-featured featured-row"> <div class="col-xl-6"> <span class="menu-featured-title"> Ücretsiz Hediyeler </span> <div class="menu-featured-desc"> <i class="fa-solid fa-check"></i> Ücretsiz SSL <i class="fa-solid fa-check"></i> Ücretsiz Domain </div> <a href="#" class="btn btn-sm btn-primary"> Şimdi Satın Al </a> </div> <div class="col-xl-6"> <img src="{TEMPLATE_URL}images/ucretsiz-domain-ssl.png" alt="Ücretsiz Domain & SSL" class="img-fluid"> </div> </div> </div> </li> <li class="menu-featured"> <i class="fa-solid fa-award"></i> Full Terformans, Tam Donanım, Her Bütçeye Uygun Sunucu Kiralama Çözümleri. </li><li class="row"> <div class="col-xl-8"> <div class="row row-cols-3"> <div class="menu-item"> <a href="{SITE_URL}en/category/turkey-location-vds-vps"> <i class="fa-solid fa-server danger-bg danger-hover-bg"></i> <span class="menu-title"> <h5>Turkey Localtion VPS/VDS</h5> Prices starting from only <strong>{{server:30}}</strong> per month. </span> </a> </div> <div class="menu-item"> <a href="{SITE_URL}en/category/germany-location-vds-vps"> <i class="fa-solid fa-server default-bg default-hover-bg"></i> <span class="menu-title"> <h5>Germany Localtion VPS/VDS</h5> Prices starting from only <strong>{{server:42}}</strong> per month. </span> </a> </div> <div class="menu-item"> <a href="{SITE_URL}en/category/france-location-vds-vps"> <i class="fa-solid fa-server primary-bg primary-hover-bg"></i> <span class="menu-title"> <h5>France Localtion VPS/VDS</h5> Prices starting from only <strong>{{server:38}}</strong> per month. </span> </a> </div> <div class="menu-item"> <a href="{SITE_URL}en/category/dedicated-servers"> <span class="fon-ribbon">Popular</span> <i class="fa-solid fa-computer success-bg success-hover-bg"></i> <span class="menu-title"> <h5>Dedicated Server</h5> Prices starting from only <strong>{{server:24}}</strong> per month. </span> </a> </div> <div class="menu-item"> <a href="javascript:void(0);"> <i class="fa-solid fa-screwdriver-wrench purple-bg purple-hover-bg"></i> <span class="menu-title"> <h5>Server Management</h5> With our managed server service, you can focus on your business and leave the technical details to us. </span> </a> </div> <div class="menu-item"> <a href="javascript:void(0);"> <i class="fa-solid fa-database pink-bg pink-hover-bg"></i> <span class="menu-title"> <h5>Server Hosting</h5> Take your project to the next level with uptime guaranteed hosting solutions in Tier-3 data centers. </span> </a> </div> </div> </div> <div class="col-xl-4"> <div class="primary-bg menu-featured featured-row"> <div class="col-xl-6"> <span class="menu-featured-title"> Free Gifts </span> <div class="menu-featured-desc"> <i class="fa-solid fa-check"></i> Free SSl <i class="fa-solid fa-check"></i> Free Domain </div> <a href="#" class="btn btn-sm btn-primary"> Shop Now </a> </div> <div class="col-xl-6"> <img src="{TEMPLATE_URL}images/ucretsiz-domain-ssl.png" alt="Free Domain And SSL" class="img-fluid"> </div> </div> </div> </li> <li class="menu-featured"> <i class="fa-solid fa-award"></i> Full performance, full hardware, server leasing solutions for every budget. </li> - Güncelle/Kaydet düğmesine tıklayarak menünüzü kaydedin.
SMS Mega Menü İçeriği
Demo site SMS Mega Menü içeriğini oluşturmak için yapmanız gerekenler:
- WiseCP Yönetim Panelinizde oturum açın.
- Site Yönetimi > Menüler (Header/Footer) menüsünü tıklayın.
- Açılan sayfada yer alan Header Menü sekmesinde düzenlemek istediğiniz menüyü (SMS) seçin ve karşısındaki simgesine tıklayın.
- Açılan Popup pencerede Simge alanına 400 değerini girin. Bu değeri içeriğinizin genişliğine göre azaltıp çoğaltabilirsiniz. Tam geniş yapmak için full yazabilirsiniz. NOT: Temamızda Simge alanı Mega Menü genişliğini ayarlamak için kullanılmaktadır.
-
Açılan Popup pencerede Mega Menü kutucuğunu işaretleyin ve aşağıdaki içerikleri buraya yapıştırın.
<li class="row row-cols-1"> <div class="menu-item"> <a href="{SITE_URL}uluslararasi-sms"> <i class="fa-solid fa-earth-americas"></i> <span class="menu-title"> <h5>Uluslararası Toplu SMS</h5> Uluslararası toplu sms servisimiz ile tüm dünyaya en uygun fiyatlarla sms gönderin. </span> </a> </div> <div class="menu-item"> <a href="{SITE_URL}kategori/sms"> <span class="fon-ribbon">Popüler</span> <i class="fa-solid fa-comment-sms"></i> <span class="menu-title"> <h5>Türkiye Toplu SMS</h5> Başlıklı, Anında Teslim toplu sms hizmeti ile, Tüm Türkiye\'ye sms gönderin. </span> </a> </div> </li> <li class="menu-featured"> <i class="fa-solid fa-star"></i> Taahhütsüz ve Süresiz / Başlıklı / Anında Teslim toplu sms hizmetlerimizden yararlanın. </li><li class="row row-cols-1"> <div class="menu-item"> <a href="{SITE_URL}en/international-sms"> <i class="fa-solid fa-earth-americas"></i> <span class="menu-title"> <h5>International Bulk SMS</h5> Send SMS to the entire world at the best prices with our international bulk SMS service. </span> </a> </div> <div class="menu-item"> <a href="{SITE_URL}en/category/sms"> <span class="fon-ribbon">Popular</span> <i class="fa-solid fa-comment-sms"></i> <span class="menu-title"> <h5>Türkiye Bulk SMS</h5> Send SMS to all of Turkey with the instant delivery bulk SMS service. </span> </a> </div> </li> <li class="menu-featured"> <i class="fa-solid fa-star"></i> Take advantage of our commitment-free and unlimited / titled / instant delivery bulk SMS services. </li> - Güncelle/Kaydet düğmesine tıklayarak menünüzü kaydedin.
SEO Mega Menü İçeriği
Demo site SEO Mega Menü içeriğini oluşturmak için yapmanız gerekenler:
- WiseCP Yönetim Panelinizde oturum açın.
- Site Yönetimi > Menüler (Header/Footer) menüsünü tıklayın.
- Açılan sayfada yer alan Header Menü sekmesinde düzenlemek istediğiniz menüyü (SEO) seçin ve karşısındaki simgesine tıklayın.
Açılan Popup pencerede Mega Menü kutucuğunu işaretleyin ve aşağıdaki içerikleri buraya yapıştırın.
<li class="row row-cols-3"> <div class="menu-item"> <a href="{SITE_URL}kategori/google-seo-hizmetleri/seo-paketleri"> <i class="fa-solid fa-magnifying-glass-chart"></i> <span class="menu-title"> <h5>SEO Paketleri</h5> Web sitenizi arama motorlarında üst sıralara taşıyın. </span> </a> </div> <div class="menu-item"> <a href="{SITE_URL}kategori/google-seo-hizmetleri/tanitim-yazisi-paketleri"> <i class="fa-solid fa-pen-nib"></i> <span class="menu-title"> <h5>Tanıtım Yazısı Paketleri</h5> İçeriklerinizle güven kazanın, markanızı öne çıkarın. </span> </a> </div> <div class="menu-item"> <a href="{SITE_URL}kategori/google-seo-hizmetleri/backlink-paketleri"> <i class="fa-solid fa-link"></i> <span class="menu-title"> <h5>Backlink Paketleri</h5> SEO gücünüzü artıracak kaliteli bağlantılar edinin </span> </a> </div> </li> <li class="menu-featured"> <i class="fa-solid fa-award"></i> Tüm Seo Hizmetlerimizde Kamsamlı ve Detaylı Raporlama ile arama motorlarındaki görünürlüğünüzü arttırın </li><li class="row row-cols-3"> <div class="menu-item"> <a href="{SITE_URL}en/category/google-seo-services/seo-packages"> <i class="fa-solid fa-magnifying-glass-chart"></i> <span class="menu-title"> <h5>SEO Packages</h5> Boost your website's ranking in search engines. </span> </a> </div> <div class="menu-item"> <a href="{SITE_URL}en/category/google-seo-services/article-backlink-packages"> <i class="fa-solid fa-pen-nib"></i> <span class="menu-title"> <h5>Promotional Article Packages</h5> Build trust with your content and highlight your brand. </span> </a> </div> <div class="menu-item"> <a href="{SITE_URL}en/category/google-seo-services/backlink-packages"> <i class="fa-solid fa-link"></i> <span class="menu-title"> <h5>Backlink Packages</h5> Get high-quality links to boost your SEO power. </span> </a> </div> </li> <li class="menu-featured"> <i class="fa-solid fa-award"></i> Increase your visibility in search engines with comprehensive and detailed reporting across all our SEO services. </li>- Güncelle/Kaydet düğmesine tıklayarak menünüzü kaydedin.
Kurumsal Mega Menü İçeriği
Demo site Kurumsal Mega Menü içeriğini oluşturmak için yapmanız gerekenler:
- WiseCP Yönetim Panelinizde oturum açın.
- Site Yönetimi > Menüler (Header/Footer) menüsünü tıklayın.
- Açılan sayfada yer alan Header Menü sekmesinde düzenlemek istediğiniz menüyü (Kurumsal) seçin ve karşısındaki simgesine tıklayın.
- Açılan Popup pencerede Simge alanına full değerini girin. Bu değeri içeriğinizin genişliğine göre azaltıp çoğaltabilirsiniz. Sabit bir genişlik ayarlamak için piksel cinsinden bir değer Örn:1100 girebilirsiniz. NOT: Temamızda Simge alanı Mega Menü genişliğini ayarlamak için kullanılmaktadır.
-
Açılan Popup pencerede Mega Menü kutucuğunu işaretleyin ve aşağıdaki içerikleri buraya yapıştırın.
<li class="row row-cols-4"> <div class="col"> <div class="menu-item menu-list"> <h4><i class="fa-regular fa-address-card"></i> Kurumsal Bilgiler</h4> <a href="{SITE_URL}hakkimizda.html">Hakkımızda</a> <a href="{SITE_URL}referanslar">Referanslar</a> <a href="{SITE_URL}haberler">Haber ve Duyurular</a> <a href="{SITE_URL}yazilar">Blog'tan Yazılar</a> <a href="{SITE_URL}iletisim">İletişim</a> </div> </div> <div class="col"> <div class="menu-item menu-list"> <h4><i class="fa-regular fa-life-ring"></i> Destek ve Yardım</h4> <a href="{SITE_URL}banka-hesaplari.html">Banka Hesapları</a> <a href="{SITE_URL}bilgi-bankasi">Bilgi Bankası</a> <a href="{SITE_URL}hesabim/destek-talebi-olustur">Destek Talebi Oluştur</a> <a href="{SITE_URL}yazilimlar#scriptsss">Sıkça Sorulan Sorular</a> <a href="https://documentation.fonwise.com/index?theme=datawise" target="_blank">Tema Dokumantasyonu</a> </div> </div> <div class="col"> <div class="menu-item menu-list"> <h4><i class="fa-solid fa-file-contract"></i> Diğer Sayfalar</h4> <a href="{SITE_URL}ornek-sayfa">Özel Örnek Sayfa</a> <a href="{SITE_URL}lisans-dogrula">Lisans Sorgulama</a> <a href="{SITE_URL}hizmet-ve-kullanim-sozlesmesi">Hizmet ve Kullanım Sözleşmesi</a> <a href="{SITE_URL}kisisel-veriler-ve-genel-gizlilik-sozlesmesi">Gizlilik Sözleşmesi</a> <a href="{SITE_URL}cerez-politikasi.html">Çerez Politikası</a> </div> </div> <div class="col"> <div class="menu-item menu-featured featured-column" style="background-image: url({TEMPLATE_URL}images/contact-man.png)"> <div class="menu-box"> <i class="fa-solid fa-headset"></i> <span class="menu-title"> Müşteri Hizmetleri <h5>0850 123 45 67</h5> </span> </div> <div class="menu-box"> <i class="fa-solid fa-envelope"></i> <span class="menu-title"> E-Posta Adresimiz <h5>info@example.com</h5> </span> </div> <div class="menu-box"> <i class="fa-solid fa-bullhorn"></i> <span class="menu-title"> Kampanya <h5>%20 Hoşgeldin İndirimi</h5> </span> </div> </div> </div> </li><li class="row row-cols-4"> <div class="col"> <div class="menu-item menu-list"> <h4><i class="fa-regular fa-address-card"></i> Corporate Information</h4> <a href="{SITE_URL}en/about-us.html">About Us</a> <a href="{SITE_URL}en/references">Our References</a> <a href="{SITE_URL}en/news">News and Announcements</a> <a href="{SITE_URL}en/articles">Recent Posts from Blog</a> <a href="{SITE_URL}en/contact">Contact Us</a> </div> </div> <div class="col"> <div class="menu-item menu-list"> <h4><i class="fa-regular fa-life-ring"></i> Support and Help</h4> <a href="{SITE_URL}en/bank-accounts.html">Bank Accounts</a> <a href="{SITE_URL}en/knowledgebase">Knowledge Base</a> <a href="{SITE_URL}en/myaccount/create-support-requests">Create Support Request</a> <a href="{SITE_URL}en/softwares#scriptsss">Frequently Asked Questions</a> <a href="https://documentation.fonwise.com/index?theme=datawise" target="_blank">Theme Documantation</a> </div> </div> <div class="col"> <div class="menu-item menu-list"> <h4><i class="fa-solid fa-file-contract"></i> Other Pages</h4> <a href="{SITE_URL}en/example-page">Custom Example Page</a> <a href="{SITE_URL}en/license-verification">License Verification</a> <a href="{SITE_URL}en/service-and-use-agreement">Service and Use Agreement</a> <a href="{SITE_URL}en/personal-data-and-general-privacy-agreement">Privacy Policy</a> <a href="{SITE_URL}en/cookie-policy.html">Cookie Policy</a> </div> </div> <div class="col"> <div class="menu-item menu-featured featured-column" style="background-image: url({TEMPLATE_URL}images/contact-man.png)"> <div class="menu-box"> <i class="fa-solid fa-headset"></i> <span class="menu-title"> Customer Service <h5>+1 732-776-6536</h5> </span> </div> <div class="menu-box"> <i class="fa-solid fa-envelope"></i> <span class="menu-title"> E-Mail Address <h5>info@example.com</h5> </span> </div> <div class="menu-box"> <i class="fa-solid fa-bullhorn"></i> <span class="menu-title"> Deals <h5>%20 Welcome Discount</h5> </span> </div> </div> </div> </li> - Güncelle/Kaydet düğmesine tıklayarak menünüzü kaydedin.
Mega Menü Yapısı
Mysia Mega Menü iki farklı stilden oluşmakadır:
Simgeli Blok Görünümü: Örneğin: Web Hosting, Server, SMS menüleri
Simgeli Blok Kod İncelemesi:
<li class="row row-cols-2"> <div class="menu-item"> <a href="{SITE_URL}tr/kategori/hosting/ekonomik-ssd-hosting"> <i class="fa-solid fa-cloud"></i> <span class="menu-title"> <h5>Ekonomik SSD Hosting</h5> Sadece <strong>39 TL</strong>'den başlayan fiyatlarla. </span> </a> </div> </li> <li class="menu-featured"> <i class="fa-solid fa-shield-halved"></i> Tüm web hosting paketlerimizde SSL sertifikası <strong>ÜCRETSİZ</strong> sağlanmaktadır. </li>- A - Ana Tayışıcı Öge:
.row css sınıfına sahip olan <li> ögesi simgeli blokların gösterileceği alandır. Bu öge bootstrap satır css sınıflarını kullanır ve ögelerin gösterilmesini istediğiniz sütun sasyısını ilgili css sınıfı ile ekleyebilirsiniz. Örn: Bir satırda 3 öge gösterilmesini istiyorsanız row-cols-3 css sınıfını ekleyebilirsiniz. Bootstrap Grid Row Sınıfları için Buraya Tıklayınız.- B - Menü Ögesi:
.menu-item css sınıfına sahip olan <div> html ögesi her bir menünüzü içeren bloktur. Menü sayınıza bağlı olarak bu ögeyi çoğaltabilirsiniz.- C - Menü Linki: menü linkini yazacağınız <a> html ögesi.
- C1 - Simge: İstediğiniz FontAwesome 6.5.2 simgesi kodunu yazabilirsiniz.
- C2 - Menü Başlığı:
.menu-title css sınıfına sahip olan <span> html ögesi menünüzün başlığını ve varsa açıklamasını içermektedir. Menü başlığınızı <h5> html ögesi içerisine yazmalısınız.
- C - Menü Linki: menü linkini yazacağınız <a> html ögesi.
- B - Menü Ögesi:
- D - Reklam / Tanıtım Menü Ögesi :
.menu-featured css sınıfına sahip olan bu <li> html ögesi içerisinde istediğiniz duyuru ve reklamları yayınlayabilirsiniz. Resim dahil her türlü özel html kodunuzu ekleyebilirsiniz. Menünün altında gösterilir.
- A - Ana Tayışıcı Öge:
Menü Listesi Görünümü: Örneğin: Kurumsal menüsü
Menü Listesi Kod İncelemesi:
<li class="row row-cols-4"> <div class="menu-item menu-list"> <h4><i class="fa-regular fa-address-card"></i> Kurumsal Bilgiler</h4> <a href="{SITE_URL}hakkimizda.html">Hakkımızda</a> <a href="{SITE_URL}referanslar">Referanslar</a> <a href="{SITE_URL}haberler">Haber ve Duyurular</a> <a href="{SITE_URL}iletisim">İletişim</a> </div> <div class="menu-item menu-featured featured-column" style="background-image: url({TEMPLATE_URL}images/iletisim-ceo.png)"> <div class="menu-box"> <i class="fa-solid fa-headset"></i> <span class="menu-title"> Müşteri Hizmetleri <h5>0850 123 45 67</h5> </span> </div> <div class="menu-box"> <i class="fa-solid fa-headset"></i> <span class="menu-title"> E-Posta Adresimiz <h5>info@example.com</h5> </span> </div> </div> </li>- A - Ana Tayışıcı Öge:
.row css sınıfına sahip olan <li> ögesi menü listesi bloklarının gösterileceği alandır. Bu öge bootstrap satır css sınıflarını kullanır ve ögelerin gösterilmesini istediğiniz sütun sasyısını ilgili css sınıfı ile ekleyebilirsiniz. Örn: Bir satırda 3 öge gösterilmesini istiyorsanız row-cols-3 css sınıfını ekleyebilirsiniz. Bootstrap Grid Row Sınıfları için Buraya Tıklayınız.- B - Menü Ögesi:
.menu-item css sınıfına sahip olan <div> html ögesi her bir menünüzü içeren bloktur. Menü sayınıza bağlı olarak bu ögeyi çoğaltabilirsiniz. Menü Listesi görünümü için bu ögeye mutlaka menu-list css sınıfını eklemelisiniz.- B1 - Menü Grubu Başlığı: menü başlığını gireceğiniz <h4> html ögesidir. İsterseniz FontAwesome 6.5.2 simgeleri ekleyebilirsiniz.
- B2 - Menü Linki: bu grup altında yayınlamak istediğiniz menü linklerini alt alta <a> etiketleri içerisine yazabilirsiniz. İstediğiniz kadar çoğaltabilirsiniz.
- C - Reklam / Tanıtım Menü Ögesi :
.menu-featured css sınıfına sahip olan bu <div> html ögesi içerisinde istediğiniz duyuru ve reklamları yayınlayabilirsiniz. menu-item css sınıfına sahip ögeye menu-featured featured-column css sınıfını eklemelisiniz.- C1 ve C2 - Simgeli Tanıtım Kutuları:
.menu-box css sınıfına sahip olan bu <div> html ögesi içerisinde istediğiniz önemli biglileri yayınlayabilirsiniz. Benzer bir görünüm oluşturmak için mevcut kodları düzenleyebilirsiniz. FontAwesome 6.5.2 simgesi ekleyebilir ve menu-title css sınıfına sahip <span> html ögesi içerisine <h5>başlığınızı ve içeriğinizi yazabilirsiniz
- C1 ve C2 - Simgeli Tanıtım Kutuları:
- B - Menü Ögesi:
- A - Ana Tayışıcı Öge:
Paket Özellikleri
Mega Menü ayarlarınızı yapılandırdıktan sonra lütfen aşağıdaki adımları takip edin.