WordPress Customizer Guide
Learn how to use all customizer options in Tewido theme. Each section contains a direct link to the setting in the dashboard.
Note: To access the customizer, go to: Appearance → Customize or use the direct links in each section.
Colors
Customize main site colors
Control the main colors of the site. You can set three primary colors used throughout the site with automatic CSS variables.
Primary Color
Main color for buttons, links, and highlighted elements. Default: #8B5CF6
Secondary Color
Complementary color used for gradients and effects. Default: #3B82F6
Accent Color
Color for emphasizing important elements and notifications. Default: #10B981
Fonts
Customize site fonts
Choose the right Google fonts for your site. You can specify different fonts for body text and headings with full Arabic font support.
Body Font
Font for regular text and paragraphs. Example: Cairo, Tajawal, IBM Plex Sans Arabic
Heading Font
Font for main and secondary headings. Example: Cairo, Almarai, Changa
Font Weights
Weights 300, 400, 500, 600, 700, 800 are loaded automatically
Tip: For best performance, choose one font and use it for both body and headings.
Sizing & Spacing
Customize element dimensions
Control default sizes and spacing for various elements on the site like border radius and more.
Border Radius
Control element corner roundness. Higher values mean more rounded corners.
Padding
Default internal spacing within elements.
Button Sizes
Customize default button dimensions.
Logo
Site logo settings
Upload your site logo with support for light and dark modes. You can also upload the site icon (Favicon).
Light Logo
Logo used in light mode or on dark backgrounds.
Dark Logo
Logo used in dark mode or on light backgrounds.
Site Icon
Icon that appears in browser tab. Recommended size: 512×512 pixels.
Logo Width
Set logo width in pixels.
Header
Customize page header
Full control over header appearance and behavior with support for transparency, sticky, and blur background.
Header Type
Choose between normal, sticky, or transparent header.
Blur Effect
Add glass blur effect to background when scrolling.
Background Color
Customize header background color with transparency support.
Header Height
Set header height in pixels.
CTA Button
Add a button in header with custom text and link.
Contact Info
Site contact information
Add your site contact information to use in widgets and various pages.
Email Address
Contact email address.
Phone Number
Phone number with country code.
WhatsApp Number
WhatsApp number for direct contact.
Address
Office or company address.
Social Media Links
Facebook, Twitter, Instagram, LinkedIn, YouTube, and more.
Floating Contact Button
Sticky WhatsApp button
Add a floating WhatsApp button that appears on all pages for easy direct contact with visitors.
Enable Button
Enable or disable floating WhatsApp button.
WhatsApp Number
Number used for WhatsApp contact.
Default Message
Pre-written message when clicking the button.
Button Position
Choose button position (left or right of screen).
Posts
Post display settings
Control how posts are displayed on the blog home and archive pages.
Show Featured Image
Show or hide featured image on post page.
Show Date
Show post publish date.
Show Author
Show post author name.
Show Categories
Show post categories.
Related Posts
Show related posts at end of post.
Notification Bar
Messages and alerts for visitors
Add a notification bar for visitors with LTR and RTL language support and optional link.
Enable Bar
Enable or disable notification bar.
Bar Position
Choose bar position: top left, top center, top right, bottom left, bottom center, bottom right.
Dismiss Behavior
Manual (close button), auto (after duration), or no dismiss (always visible).
Colors
Background color and text color.
Custom JavaScript
Add custom JS code
Add custom JavaScript code that runs in the site footer. Ideal for tracking and analytics code.
Warning: Be careful when adding JavaScript code. Incorrect code may affect site functionality.
Mobile CSS
Mobile device styles
Add custom CSS that only applies to mobile and tablet devices. It will be automatically wrapped in a media query.
Breakpoint Width
Width in pixels at which mobile CSS applies. Default: 768px.
Tip: Common breakpoint values: 639 (below sm), 767 (below md), 1023 (below lg).
Google Tag Manager
Tracking code management
Add Google Tag Manager code to track and analyze your site visitors using GTM snippets.
GTM Head Code
Paste GTM snippet for head section (includes script tag).
GTM Body Code
Paste GTM snippet for body section (includes noscript tag).
Note: Get GTM code from tagmanager.google.com after creating a new container.