A carousel is a dynamic and interactive slideshow element used on websites to display multiple pieces of content within a limited space. It allows users to scroll or swipe through a series of items, such as images, blog posts, or product cards, without needing to load a new page. Carousels are widely used in modern web design because they help present content in a visually appealing and organized way.
They’re perfect for showcasing featured content like testimonials, portfolio items, image galleries, or promotions. One common use case is displaying the latest blog posts on your WordPress website. Instead of listing them statically, a carousel lets you highlight recent articles in a scrollable format that catches the visitor’s attention and improves user engagement.
Adding a Post Carousel to the Homepage with Phlox Theme
Now let’s see how we can use Phlox to add a carousel element featuring the latest blog posts to the homepage of our website.
To install Phlox, go to the Appearance menu and open the Themes section. Click on Add Theme, then search for Phlox. Once you find it, click the Install button and then activate it.
To get familiar with importing the ready-made demos, watch the video tutorial below:
Ok, so after getting started with the Phlox, this is an overview of our website, which we created by importing one of the ready-made Phlox demos. We want to display a carousel of the latest blog posts in the designated section.
The first step is editing our page with Elementor:
Search for the term “Carousel” in the widgets section. As you can see, Phlox offers several widgets with this feature for various purposes. Here, we’ll add the Grid & Carousel Posts widget to the page.
As you can see, our beautifully designed carousel, which displays the latest posts, has been placed perfectly. Note that there are various options available to control its behavior and appearance, including autoplay, the number of columns, different filters for loading specific posts, and more.
WordPress comes equipped with a few standard content types—Posts, Pages, Attachments, and some internal types like Revisions and Menus. These default post types are designed to cover the most common needs of a basic website. However, many websites require more specialized content structures that go beyond blog posts or static pages.
That’s where Custom Post Types (CPTs) come into play. A custom post type is a tailor-made content type that functions much like a regular post or page but is designed to fit a specific purpose. Whether you’re building a property listing website, a recipe collection, an event calendar, or a product catalog, custom post types allow you to create and manage content that matches your site’s unique needs.
What Can You Do With Custom Post Types
With custom post types, you can define your own fields, taxonomies, and admin interface. For example:
A “Recipe” CPT could include fields such as Ingredients, Cooking Time, and Difficulty.
A “Portfolio” CPT might have fields like Client Name, Project Description, and Image Gallery.
A “Job Listing” CPT could hold data like Job Title, Location, Salary, and Application Instructions.
Not only do custom post types improve how content is organized and displayed, but they also enhance your site’s usability and SEO. By creating distinct sections in the WordPress dashboard for different content types, CPTs make content management more intuitive and user-friendly.
Many people in the WordPress community often confuse ACF (Advanced Custom Fields) with custom post types or use the terms interchangeably. This confusion happens because ACF frequently works alongside CPTs and has become one of the most popular plugins for extending them.
For example, you might hear someone mention:
ACF Slider – a custom post type for image sliders enhanced with custom fields via ACF.
ACF Custom Post – a general reference to a CPT that uses ACF fields for additional data.
ACF Testimonials – a testimonial post type structured with custom ACF fields like author name, quote, and company.
In practice, ACF and custom post types are a powerful duo for building dynamic, structured content in WordPress without writing complex code.
This article briefly introduces the top and most popular plugins for working with Custom Post Types.
Advanced Custom Fields (ACF)
Advanced Custom Fields Banner
Advanced Custom Fields (ACF) is a popular WordPress plugin that makes it easy to add custom fields and, more recently, custom post types (CPTs) to your site without needing extra tools. After its acquisition by WP Engine, ACF introduced built-in CPT support along with a refreshed interface. With over 30 field types available, it lets users place custom fields across posts, pages, users, media, and more. Its user-friendly design, support for conditional logic, and compatibility with most themes and plugins have made it a go-to choice for developers and content creators looking to build flexible, structured websites.
Custom Post Type UI (CPT UI)
CPT UI Banner
Custom Post Type UI is a widely used and reliable WordPress plugin designed to help users create and manage custom post types and taxonomies through a clean and intuitive interface. It simplifies the process of setting up new content structures, making it accessible even to those without coding experience. Originally popular for its compatibility with ACF—especially at a time when ACF lacked native support for editing post types—this plugin has maintained its reputation for being a practical and efficient solution. It also offers import and export functionality, allowing users to transfer custom post types across different websites, which is particularly useful for managing content at scale. Thanks to its user-friendly design and flexible features, Custom Post Type UI remains a top choice for WordPress users looking to extend their site’s content organization capabilities.
Pods – Custom Content Types and Fields
Pods Banner
Pods is a flexible and developer-focused WordPress plugin that goes far beyond simply creating custom post types. As a complete content framework, it allows users to build and manage custom post types, taxonomies, fields, user roles, and relationships—all within a unified interface. Its templating capabilities and shortcode support make it easy to display custom content without needing additional page builders. What sets Pods apart is its modular structure and advanced features, such as storing data in separate database tables for performance optimization and linking complex relationships across post types, users, or even external database objects. While it offers extensive functionality, the plugin is more suited to experienced users due to its steeper learning curve and somewhat cluttered interface.
Meta Box
Meta Box Banner
Meta Box is a powerful and modular WordPress plugin designed for developers who want to create highly customized websites using custom fields, post types, and taxonomies. Although Meta Box includes a free version, users unlock its full potential by upgrading to the Pro extensions, which offer advanced tools for building dynamic content structures. Despite the developers’ claims of beginner-friendliness, the plugin primarily serves users with coding experience. Features like exporting CPTs as PHP, integrating with Twig, or working with custom database tables require custom code to use effectively. Meta Box supports over 40 custom field types and integrates with popular builders like Elementor and Beaver Builder, offering flexibility and performance in one lightweight package. Its modular system allows users to activate only the needed components, making it an efficient solution for developers building scalable and tailored WordPress projects.
JetEngine
Jet Engine Banner
JetEngine is an all-in-one solution for building dynamic, database-driven WordPress websites that go far beyond just registering custom post types. Designed with flexibility and scalability in mind, it offers an extensive suite of tools for creating CPTs, custom fields, taxonomies, and more—all from a single, intuitive interface.
Unlike more minimal plugins, JetEngine includes advanced modules. It support for Custom Content Types (CCTs) that operate outside the standard WordPress tables, and seamless integration with builders like Elementor, Gutenberg, and Bricks. It’s fully compatible with other plugins like ACF, Pods, and CPT UI, making it ideal for projects that require advanced structure without custom coding.
The convenience of shopping anytime and anywhere has made online shopping more popular. Setting up an online store opens your business to a global audience. Compared to brick-and-mortar stores, online stores involve low setup and maintenance costs. A physical clothing store requires a building with proper infrastructure, while an online store only requires a user-friendly interface and a responsive website, making it more affordable than the former. To build a successful eCommerce store, adding an excellent responsive theme and high-quality plugins is essential to improve functionality and create a user-friendly experience. Here, we will guide you through opening a clothing store with Phlox and WooCommerce product addons.
Reasons for opening an online clothing store
Low opening and maintenance cost – Compared to a physical store, an eCommerce store can be created at a lower cost, reducing the risk of financial loss. Also, with proper SEO optimization, you can reach a wider audience, reducing advertisement costs.
Global audience – A physical store limits you to a region, whereas an online store gives your clothing store a place in the global market.
Flexibility – the flexibility to operate your store from anywhere in the world allows for a better work-life balance.
How to start an online clothing store
To start an online clothing store, you can either create a website from scratch or use WordPress, a content management system that helps with website building. Choosing a WordPress platform to build a website is preferred for its ease of use and low-cost setup and maintenance. Besides, turning a website into an eCommerce store is easy by installing the WooCommerce plugin.
You are five simple steps away from creating your online clothing store.
Purchase a domain name
Buy a hosting
Install WordPress
Install the theme
Install WooCommerce plugins
Let us guide you through these five simple steps.
Purchase a domain name
Purchasing a domain is the first step towards creating a website. A domain name is what we enter into a search engine to find a website. Examples of domain names are google.com or Phlox.pro. These are website addresses that humans can comprehend, contrary to the actual IP addresses, which are a string of numbers.
Before choosing a domain registrar, consider its pricing and plans and ensure it is accredited with ICANN (Internet Corporation for Assigned Names and Numbers).
Usually, domain names are the same as the brand name. The popular extensions end with .com. You can search for the availability of a domain name and purchase it from sites like Namecheap or Hostinger. The amount payable to the name can vary according to its popularity. Once you find the ideal name and purchase it, you must renew the name yearly.
Buy a hosting
To host your website on the web server, register it with a hosting provider. Popular hosting providers like Hostinger, GoDaddy, or Bluehost can be used to host the website. When choosing a hosting provider, consider the factors like pricing plans, security and maintenance support, website uptime, etc. Also, look for the ones that provide WordPress hosting to support WordPress websites. Some hosting providers offer free or affordable plans for the initial months and free domains for the initial year.
Install WordPress
You can download WordPress manually or from the hosting dashboard. The former choice can be more difficult. While purchasing the domain, look for the ones that have WordPress already installed or have the option for WordPress download within the dashboard. After registering with your hosting provider, you will find the option to install WordPress in the dashboard. Hostinger provides guided steps for installing WordPress and finishing the setup.
Install the theme
Themes are essential for maintaining the appearance and functionality of your website. WordPress has several free and premium themes from which you can choose one that matches your design ideas. WordPress has default themes that can be customized to fit your preferences and brand identity. We recommend you check out the Phlox theme, which is suitable for almost all websites.
Phlox theme
Phlox is best compatible with Elementor, a page builder plugin on WordPress. The theme is perfect for any website, including a clothing store.
Phlox is a responsive, fast, and free theme optimized for SEO. It has a user-friendly interface and a live drag-and-drop feature for easy page customization. The theme is also compatible with WPML to support language translations. The built-in e-commerce functionalities in the theme simplify product management.
Phlox offers 250+ templates for you to choose from. You can select prebuilt templates for your clothing store from the vast collection. Phlox also has a smart one-click demo importer feature that makes it easy to import demos.
With the Phlox theme, you can design and customize single product pages on your clothing store. You can choose a template from the product options panel and apply different templates for each product page. With this theme, on your product page, you can add functionalities like product ratings, page navigation buttons, product sharing buttons, stock keeping unit section, display wishlist, etc. Also, you can add images in different aspect ratios. When shopping, adding related products to the product page can boost sales. You can customize the appearance, style, label, and other features of the related products section.
After downloading Phlox, go to Appearance > Themes > Add new theme on the WordPress admin panel’s dashboard.
Click on the upload theme button on the page and upload the zip file of the downloaded theme.
Click on the activate button on the Phlox thumbnail image.
OR
On the WordPress dashboard, go to Appearance> Themes > Add new theme
Search for the Phlox theme
Click on Install> Activate.
After activating the theme, you can access the Phlox dashboard in the options to customize the theme.
How to install a template (Demo)
Go to the Phlox dashboard.
Click on Demo Importer. There are several templates to choose from, including free and pro versions.
Select a template, and you can view the template by clicking on the preview button.
Click on Import > Continue > Install the required plugins.
In the next step, you get the option to select either a complete pre-build website or selected data only. Click on the complete pre-build website option and then click on import content.
Within a few minutes, the full template will be imported.
Install WooCommerce plugins
To convert your WordPress website into an eCommerce store, download the WooCommerce plugin. It has several features free of cost and is ready to convert your website into a fully functional online store. The WooCommerce plugin allows you to add payment and shipping options to your store, access analytics, manage inventory, display products, and customize your online store with many more features.
To install the WooCommerce plugin, go to the WordPress dashboard and click on Plugins> Add new plugins.
Search for WooCommerce
Click on install > activate.
Click on Let’s Go, where you will be asked to fill in details to finish the setup.
To add extra functionality and features to your WooCommerce store, you can also add other plugins. These plugins can help improve the shopping experience and thus result in an increase in sales. You can install additional plugins like WooCommerce Custom Product Addons to add product options to your product page.
WooCommerce Custom Product Addons
WooCommerce Custom Product Addons help customize your product page with several features such as showing or hiding fields based on conditional logic, setting a price for selected fields, setting up pricing formula, uploading files, checkbox and radio group to select multiple options, date and time fields, etc., are the various additional features that you can add on to your product page with this plugin. The plugin allows adding custom fields based on color, size, clothing material, or specific features to meet customers’ needs. This makes the product page more customer-friendly and improves the shopping experience. You can also create product bundles with this plugin to encourage more purchases.
After you purchase the plugin, you will get a zip file to be downloaded.
Go to the WordPress dashboard and click on plugins > add new > upload
After clicking the upload button, attach the zip file and click Install now.
Click on the activate plugin button.
After you purchase the product, you will get a license key on the confirmation page.
Copy the license key and paste it into the plugin license key box on the product add-on button on your dashboard.
Click on Activate.
On the product addons settings page, go to license activation to confirm whether the plugin is activated. If successful, the license status must be active.
Additional settings to finish the setup
Now that the store is all set, the next step is to add products.
To add the products, go to the products section on your WordPress dashboard. Then, click on add new box that appears at the top of the page. Enter the product details. If you are adding products in bulk, click on the import box that appears at the top of the page. On the next page, you will get the option to choose a CSV file from your computer. To upload multiple product images, use the product gallery option. To finish, check out the various tabs and fill in the necessary information, such as product specifications and product price.
Similarly, to set up shipping, go to the dashboard > WooCommerce > settings. Add the details, like the shipping zones. To set up payment methods, go to dashboard > WooCommerce > settings. Add the preferred payment gateway.
On the WooCommerce settings page, you can see other options like general, product, tax, shipping, payments, accounts and privacy, emails, integration, and Advanced settings. Check each setting and add the necessary details. Before launching the website, check to see if you missed anything.
Conclusion
With technological advancements, online shopping has become more popular. As a result, businesses are turning to digital platforms. Website building can be a challenge if you lack technical expertise. However, you can create a user-friendly and responsive clothing store using WordPress. If you carefully follow the above steps, you can create an online store even without any technical expertise. Using a good-quality theme like Phlox can enhance the appearance and functionality of your website. With the right tools, you can effortlessly create your online store.
When creating a visually appealing and user-friendly website, having consistent headers across all pages can be beneficial. However, there are times when you may want to differentiate certain pages to enhance their unique identity. This is where using different headers for different pages comes into play. For example, if you have pages with a light-themed design and a homepage with a darker aesthetic, using distinct headers can help visually separate these sections and provide a more immersive experience for your visitors.
Another common scenario is when you want to display a specific call to action (CTA) button on a particular page only. For instance, you might have a “Subscribe Now” button on your homepage to encourage newsletter sign-ups, but on your About page, you might want to feature a “Contact Us” button instead. By customizing your headers, you can tailor the user experience and guide visitors towards the desired action.
Understanding Header Templates in Phlox
Phlox header/footer builder lets you create unique headers and footers with different structures and layouts for desktop, tablet, and mobile. You can add rows and columns by Elementor Page Builder, and customize the look of the header and footer by adding or removing elements. You are able to use all the available elements (such as the horizontal menu, burger menu, search box, social media icons, welcome message, contact numbers, custom icons, call to action buttons, subscription box, shopping cart, …) without any limitation. Also, It is possible to see the changes in real-time.
The header builder is an Elementor-based visual builder and to access it, you need to navigate to the Header tab in Templates -> Saved Templates.
Creating and Assigning Header Templates
In this example, we’ve used the pre-built ‘Corporate 2024‘ demo from Phlox, where the Header templates are already prepared.
You can view these pre-designed Header templates by going to the menu: Templates > Saved Templates > Header section.
Also in the Customizer, under Header > Header Templates, we can view the available Header templates and identify the current default.
It’s important to note that the template selected as the ‘Current Header’ in the Customizer is displayed for the entire website and all pages; in other words, it’s global. For instance, in this demo, regardless of which page we visit on the website, the template named ‘Site Header’ is displayed, featuring dark font and logo.
However, on the homepage, we see a light-colored logo and font, which is the ‘Header light’ template that we will discuss in the next section.
To create a new header template, simply navigate to the Saved Templates menu and click on the ‘Add New Template’ option.
Next, set the ‘Template Type’ to ‘Header’, give it a name, and click the ‘Create Template’ button.
Elementor will then open, allowing you to design and save your custom header template.
[the video]
Your newly created header will now appear in the list when you go back to the Customizer or Header templates section.
Using the Page Options Panel
Now, let’s get to the main point. To make one of your pages have a different header than the global header selected in the Customizer, simply edit that page with the default WordPress editor.
If you scroll down a bit, you’ll encounter the Page Options section of the Phlox theme. Using the options provided in Page Options, you can make changes specific to that page. In fact, by default, Page Options doesn’t make any changes to the options set in the Customizer for all pages, but you have the ability to customize each of these options for this specific page.
From the Header Templates section, set the ‘Use Legacy header’ option to ‘No’.
Then, select the different header that you want to display for this page only.
After updating the page, this page will load this header template, replacing the one from the Customizer panel.
Conclusion
Understanding and effectively utilizing header templates in Phlox can significantly enhance your website’s visual appeal and user experience. By creating and assigning distinct headers, you can establish a consistent brand identity while also tailoring the content presentation to specific pages. This flexibility empowers you to guide visitors towards desired actions, create visually engaging sections, and ultimately improve your website’s overall effectiveness.
Elementor has revolutionized the way WordPress users create and customize their websites. With its intuitive drag-and-drop interface and powerful features, Elementor empowers users to design stunning, professional-looking pages without the need for extensive coding knowledge. To complement the capabilities of this versatile page builder, a well-chosen theme can significantly enhance your website’s overall appearance, functionality, and performance.
In this article, we’ll explore some of the best free Elementor themes available, each offering unique features and benefits to suit different website needs.
Phlox
Phlox is a standout WordPress theme renowned for its extensive Elementor integration and impressive range of pre-built features. Designed to streamline the process of creating visually appealing and functional pages, Phlox offers a wealth of tools and options to cater to various website needs.
With its collection of over 30 exclusive Elementor elements, Phlox empowers users to go beyond the standard capabilities of the page builder. These specialized elements provide additional functionality, such as testimonials, Google Maps, and more, enabling the creation of dynamic and engaging content.
Top Features:
Extensive Elementor Integration: Phlox seamlessly integrates with Elementor, providing a plethora of exclusive elements and features to enhance your page building experience.
Diverse Demo and Template Library: Choose from a 250+ selection of professionally designed demos and page templates to jumpstart your website creation process.
Code-Free Page Building: Phlox’s intuitive interface allows you to build optimized and visually stunning pages without writing a single line of code.
Advanced Element Library: Explore Phlox’s library of advanced elements, including testimonials, Google Maps, and more, to add unique features to your website.
Versatile Theme Options: Whether you’re building a portfolio, blog, online store, or business site, Phlox offers the flexibility and tools you need to create a customized and effective website.
Phlox’s compatibility with Elementor and other popular page builders, combined with its extensive feature set, makes it a compelling choice for WordPress users seeking a powerful and versatile theme.
Hello Elementor
As the official theme developed by the creators of Elementor, Hello Elementor is a minimalist and lightweight option designed specifically for use with the popular page builder. Its clean and uncluttered design provides a blank canvas for Elementor Pro users to fully customize their websites without being hindered by pre-defined styling options.
Top Features:
Elementor Integration: Hello Elementor is tailor-made for Elementor, ensuring a seamless and integrated experience.
Minimalist Design: Its minimalist approach provides a clean foundation for you to build your website from scratch using Elementor’s powerful tools.
Fast Loading Speed: The theme’s lightweight nature contributes to fast loading times, enhancing the user experience.
WooCommerce Integration: Hello Elementor seamlessly integrates with WooCommerce, making it ideal for online stores.
Accessibility and Translation-Ready: Designed with web accessibility in mind, Hello Elementor is also translation-ready, ensuring a global reach.
If you’re seeking a free Elementor theme that prioritizes flexibility and performance, Hello Elementor is an excellent choice. Its minimalist design and deep integration with Elementor make it a versatile option for creating stunning and functional websites.
OceanWP
OceanWP is a highly popular WordPress theme known for its versatility, performance, and compatibility with Elementor. Its scalable nature makes it suitable for both small and large websites, and its unique Elementor widgets streamline the page-building process.
With over 60 pre-built demos, OceanWP offers a wide range of starting points for your website. Its seamless integration with WooCommerce makes it an excellent choice for online stores, and its fast page loading times and built-in SEO features contribute to a positive user experience and improved search engine visibility.
Top Features:
Extensive Demo Library: Choose from over 60 demos to quickly create a visually appealing website.
WooCommerce Compatibility: Easily build and manage online stores with OceanWP’s WooCommerce integration.
Optimized Performance: Enjoy fast page loading times and improved SEO for better user experience and search rankings.
Unique Elementor Widgets: Streamline page building with OceanWP’s specialized Elementor widgets.
Versatile Theme Options: Customize your website’s layout, typography, and more with OceanWP’s extensive customization options.
OceanWP’s combination of performance, versatility, and Elementor integration makes it a compelling choice for WordPress users seeking a powerful and feature-rich theme. Whether you’re building a personal blog, online store, or business website, OceanWP offers the tools and flexibility you need to create a successful online presence.
Astra
Astra is a highly popular WordPress theme renowned for its lightweight design, extensive customization options, and seamless integration with Elementor. Its focus on performance and flexibility makes it a versatile choice for a wide range of websites.
Top Features:
Lightweight and Fast: Astra’s optimized code and minimal resource usage ensure lightning-fast loading times, enhancing the user experience.
Extensive Customization Options: Customize every aspect of your website, from colors and typography to layouts and header styles, using Astra’s powerful customization tools.
Elementor Integration: Seamlessly integrate with Elementor to create stunning and dynamic pages with ease.
Vast Demo Library: Choose from over 130 pre-built demos to get started quickly and effortlessly.
Performance Optimization: Astra’s focus on performance ensures your website loads quickly and efficiently.
Astra’s combination of speed, flexibility, and Elementor integration makes it a compelling choice for WordPress users seeking a high-performance and customizable theme. Whether you’re building a personal blog, online store, or business website, Astra offers the tools and features you need to create a successful online presence.
Neve
Neve is a popular WordPress theme known for its minimalist design, lightweight nature, and seamless integration with Elementor. Its focus on simplicity and performance makes it a suitable choice for a wide range of websites, from personal blogs to online stores.
Top Features:
Minimalist Design: Neve’s clean and uncluttered layout provides a solid foundation for building visually appealing websites.
Lightweight and Fast: Its optimized code and minimal resource usage ensure fast loading times, enhancing the user experience.
Elementor Integration: Create stunning and dynamic pages effortlessly with Neve’s compatibility with Elementor.
Extensive Demo Library: Choose from over 100 pre-built demos to jumpstart your website creation process.
Customization Options: Customize your website’s appearance and functionality with Neve’s flexible settings and live customizer.
Neve’s combination of simplicity, performance, and Elementor integration makes it a compelling choice for WordPress users seeking a versatile and user-friendly theme. Whether you’re a beginner or a seasoned developer, Neve offers the tools and flexibility you need to create a successful online presence.
