Template Parts Demo
This page demonstrates all available content template parts with example usage code.
Hero
<?php
// Left: content_block_left > left_content > left_title+left_copy
// Right: content_block_right > right_content > right_title+right_copy
dixital_part(
'content/hero',
array(
'id' => 'top',
'content_block_left' => 'cover-home-left',
'content_block_right' => 'cover-home-right',
'background_color' => '#0f1115',
'background_image' => array( 'url' => 'image.jpg', 'alt' => 'Alt text' ),
'video_url' => '/path/to/video.mp4',
'video_type' => 'video/mp4',
'youtube_url' => 'https://youtube.com/watch?v=xxx',
'floating_cta' => array( 'url' => '#', 'label' => 'CTA Label' ),
)
);
?>Stats
Stats
Key metrics and numbers that define our success.
<?php
// Intro: content_block > intro_content > title+copy
// Items: content_block > content > value+label
dixital_part(
'content/stats',
array(
'id' => 'stats',
'background_color' => '#f5f3ef',
'title' => 'Stats',
'copy' => 'Key metrics and numbers that define our success.',
'items' => array(
array( 'value' => '150+', 'label' => 'Projects' ),
array( 'content' => '<strong>50+</strong><span>Clients</span>' ),
array( 'content_block' => 'stats-years' ),
),
)
);
?>Split
Split Section
Split layout with media and content side by side.
<?php
// Intro: content_block > intro_content > title+copy
dixital_part(
'content/split',
array(
'background_color' => '#ffffff',
'content_block' => 'split-intro',
'media' => array( 'url' => 'image.jpg', 'alt' => 'Alt text' ),
'media_position' => 'left', // o 'right'
)
);
?>Panels
Panels Grid
Grid of panels with customizable colors and content.
Custom Panel
Description with customizable background color.
Another Panel
Another description with different color.
<?php
// Intro: content_block > intro_content > title+copy
// Panels: content o label+title+copy
dixital_part(
'content/panels',
array(
'background_color' => '#f5f3ef',
'title' => 'Panels Grid',
'copy' => 'Grid of panels with customizable colors and content.',
'columns' => 2,
'panels' => array(
array(
'label' => 'Label',
'title' => 'Title',
'copy' => 'Description',
'accent' => 'brand', // o 'dark'
),
array(
'content' => '<h3>Custom HTML</h3><p>Panel content.</p>',
'background_color' => '#0f1115',
),
),
)
);
?>Features
Features
Explore our key features and capabilities.
Feature 1
Description of feature 1.
Feature 2
Description of feature 2.
Feature 3
Description of feature 3.
<?php
// Intro: content_block > intro_content > title+copy
// Items: content o title+copy+tags
dixital_part(
'content/features',
array(
'id' => 'features',
'background_color' => '#f5f3ef',
'content_block' => 'features-intro',
'items' => array(
array(
'content' => '<h3>Feature 1</h3><p>Description of feature 1.</p>',
'accent' => 'dark',
),
array(
'title' => 'Feature 2',
'copy' => 'Description of feature 2.',
'tags' => array( 'UX', 'Performance' ),
'accent' => 'brand',
),
),
)
);
?>Portfolio
Project 1
Description of project 1.
Project 2
Description of project 2.
Project 3
Description of project 3.
<?php
// Intro: content_block > intro_content > title+copy
// Items: image o image_url/image_alt + content o title+copy+tags
dixital_part(
'content/portfolio',
array(
'background_color' => '#ffffff',
'intro_content' => '<h2 class="content-title">Portfolio</h2><p class="content-copy">Recent projects.</p>',
'items' => array(
array(
'image' => array( 'url' => 'image.jpg', 'alt' => 'Alt text' ),
'title' => 'Project 1',
'copy' => 'Description of project 1.',
),
array(
'image_url' => 'image-2.jpg',
'image_alt' => 'Alt text',
'content' => '<h3>Custom card</h3><p>HTML content for the card.</p>',
),
),
)
);
?>Team
Designer
John Doe
Creative designer with 5+ years of experience.
Developer
Jane Smith
Full-stack developer specializing in WordPress.
<?php
// Intro: content_block > intro_content > title+copy
// Items: image o image_url/image_alt + content o role+name+bio+highlights
dixital_part(
'content/team',
array(
'id' => 'team',
'background_color' => '#0f1115',
'title' => 'Team',
'copy' => 'Meet the people behind the project.',
'items' => array(
array(
'image' => array( 'url' => 'image.jpg', 'alt' => 'Alt text' ),
'role' => 'Designer',
'name' => 'John Doe',
'bio' => 'Creative designer with 5+ years of experience.',
'highlights' => array( 'UI', 'Branding' ),
),
array(
'image_url' => 'team-2.jpg',
'image_alt' => 'Alt text',
'content' => '<p class="team__role">Developer</p><h3>Jane Smith</h3><p class="team__bio">Full-stack developer specializing in WordPress.</p>',
),
),
)
);
?>FAQ
FAQ
Frequently asked questions about our services.
We offer a wide range of digital services including web development, design, and consulting.
Project timelines vary depending on scope, but most projects are completed within 4-8 weeks.
Yes, we offer ongoing support and maintenance packages to ensure your project stays up-to-date.
<?php
// Main: content_block > main_title+main_copy
// Aside: aside_content (key del block) > aside_title+aside_copy
dixital_part(
'content/faq',
array(
'background_color' => '#f5f3ef',
'content_block' => 'faq-main',
'aside_content' => 'faq-aside',
'items' => array(
array(
'question' => 'Question 1?',
'answer' => 'Answer 1.',
),
),
)
);
?>Contact
<?php
// Intro: content_block > intro_content > title+copy
dixital_part(
'content/contact',
array(
'id' => 'contact',
'background_color' => '#0f1115',
'content_block' => 'contact-intro',
'socials' => array(
array( 'url' => 'https://instagram.com/your-brand', 'icon' => 'instagram', 'label' => 'Instagram' ),
array( 'url' => 'https://linkedin.com/company/your-brand', 'icon' => 'linkedin', 'label' => 'LinkedIn' ),
),
'details_content_block' => 'contact-details',
)
);
?>About
<?php
// Intro: content_block > intro_content > title+copy
dixital_part(
'content/about',
array(
'id' => 'about',
'background_color' => '#f5f3ef',
'content_block' => 'about-intro',
'media' => array( 'url' => 'image.jpg', 'alt' => 'Alt text' ),
'media_position' => 'right', // o 'left'
)
);
?>Services
Our Services
Comprehensive solutions for your business.
Web Development
Custom websites built with modern technologies.
UI/UX Design
Beautiful and intuitive user experiences.
Consulting
Strategic guidance for digital transformation.
<?php
// Intro: content_block > intro_content > title+copy
// Items: content_block > content > title+copy
dixital_part(
'content/services',
array(
'id' => 'services',
'background_color' => '#ffffff',
'intro_content' => '<h2 class="content-title">Services</h2><p class="content-copy">What we do.</p>',
'items' => array(
array(
'title' => 'Service 1',
'copy' => 'Description of service 1.',
),
array(
'content' => '<h3>Service 2</h3><p>Custom HTML item.</p>',
),
array(
'content_block' => 'service-consulting',
),
),
)
);
?>Testimonials
What Our Clients Say
Feedback from our satisfied customers.
Excellent work! Highly recommended.
Great team and amazing results.
<?php
// Intro: content_block > intro_content > title+copy
// Items: content_block > content > quote+author+role
dixital_part(
'content/testimonials',
array(
'id' => 'testimonials',
'background_color' => '#f5f3ef',
'title' => 'What clients say',
'copy' => 'Feedback from recent projects.',
'items' => array(
array(
'quote' => 'Testimonial text.',
'author' => 'Author Name',
'role' => 'Role/Title',
),
array(
'content' => '<blockquote><p>Custom testimonial.</p><footer><cite>Jane Doe</cite><span>CEO</span></footer></blockquote>',
),
array(
'content_block' => 'testimonial-featured',
),
),
)
);
?>Pricing
Pricing Plans
Choose the plan that fits your needs.
Basic
$29
/month
Perfect for small projects.
- Feature 1
- Feature 2
- Feature 3
Pro
$79
/month
For growing businesses.
- All Basic features
- Feature 4
- Feature 5
<?php
// Intro: content_block > intro_content > title+copy
// Items: content_block > content > title+price+period+description+features+cta
dixital_part(
'content/pricing',
array(
'id' => 'pricing',
'background_color' => '#ffffff',
'content_block' => 'pricing-intro',
'items' => array(
array(
'title' => 'Plan Name',
'price' => '$99',
'period' => '/month',
'description' => 'Plan description.',
'features' => array( 'Feature 1', 'Feature 2' ),
'cta_url' => '#',
'cta_label' => 'Get Started',
),
array(
'content' => '<h3>Enterprise</h3><p>Custom pricing card.</p>',
),
array(
'content_block' => 'pricing-custom',
),
),
)
);
?>CTA
<?php
// Intro: content_block > intro_content > title+copy
dixital_part(
'content/cta',
array(
'id' => 'cta',
'background_color' => '#0f1115',
'content_block' => 'cta-intro',
'cta_url' => '#',
'cta_label' => 'Get Started',
)
);
?>Steps
Our Process
How we work with you from start to finish.
1
Discovery
We learn about your goals and requirements.
2
Design
We create a design that meets your needs.
3
Development
We build your solution with modern technologies.
4
Launch
We deploy and support your project.
<?php
// Intro: content_block > intro_content > title+copy
// Items: content_block > content > title+copy
dixital_part(
'content/steps',
array(
'id' => 'steps',
'background_color' => '#f5f3ef',
'title' => 'Our Process',
'copy' => 'How we work.',
'items' => array(
array(
'title' => 'Step 1',
'copy' => 'Description of step 1.',
),
array(
'content' => '<div class="steps__number">2</div><div class="steps__content"><h3>Design</h3><p>Description of step 2.</p></div>',
),
array(
'content_block' => 'step-launch',
),
),
)
);
?>List
Key Points
Important information about our services.
Point 1
Description of point 1.
Point 2
Description of point 2.
Point 3
Description of point 3.
<?php
// Intro: content_block > intro_content > title+copy
// Items: content_block > content > title+copy
dixital_part(
'content/list',
array(
'id' => 'list',
'background_color' => '#ffffff',
'title' => 'Key Points',
'copy' => 'Important information about our services.',
'items' => array(
array(
'title' => 'Item 1',
'copy' => 'Description of item 1.',
),
array(
'content' => '<h3>Item 2</h3><p>Custom HTML item.</p>',
),
array(
'content_block' => 'list-featured-item',
),
),
)
);
?>Gallery
<?php
// Intro: content_block > intro_content > title+copy
// Images: 'images' array OR 'media_category' OR 'media_tag'
dixital_part(
'content/gallery',
array(
'id' => 'gallery',
'background_color' => '#ffffff',
'content_block' => 'placeholder', // Intro content (shown in first grid item)
'intro_color' => 'var(--dixital-color-accent)', // Background color of intro card
// Option 1: Manual images array
'images' => array(
array(
'url' => 'image.jpg',
'alt' => 'Image description',
'full_url' => 'full-image.jpg', // Optional: different URL for lightbox
),
),
// Option 2: Load from Media Library category
'media_category' => 'gallery-home', // Load images with this category
'posts_per_page' => -1, // Number of images (-1 for all)
'orderby' => 'date', // Order by: date, title, menu_order, rand
'order' => 'DESC', // Order: ASC or DESC
// Option 3: Load from Media Library tag
// 'media_tag' => 'featured',
)
);
?>