How to create Magento 2 theme from scratch?
How important is having a unique website in order to stand out in a crowded online market? How can you make your ecommerce store more customizable and distinctive? Can creating a Magento 2 theme from scratch help improve your online brand? These are the questions that businesses and developers often grapple with.
A report by Adobe(2019) highlights the rising competition in the e-commerce sector, emphasizing the need for businesses to differentiate themselves through their website’s aesthetics and functionality. According to Statista, an estimated 1.92 billion people purchased goods or services online in 2019, underscoring the enormity of the e-commerce market. The growing competition and customer expectations have made the customization of online stores crucial for business success. Existing solutions, however, are often restrictive and fail to provide the required flexibility, leading to a demand for developing custom Magento 2 themes. Surveys conducted in the USA also have indicated a similar trend, suggesting a rising interest in custom Magento 2 theme development.
In this article, you will learn how to create a Magento 2 theme from scratch. The upcoming sections will take you through a step-by-step guide for the same. From the basics of Magento 2 theme structure and its components to the more complex aspects such as theme hierarchy and customization, the guide will provide an in-depth view into the process.
Beyond the technical process, this article will also delve into the strategic implications of theme development. You will learn how to design a theme keeping your target demographic in mind and how it can go a long way in boosting your brand’s online presence.
Crucial Definitions for Understanding Magento 2 Theme Creation
Magento 2: It is a popular ecommerce platform that enables businesses to create and manage online stores. It comes with a host of integrated features that facilitate efficient online selling.
Theme Creation: This refers to the process of building a unique visual design for a website. In Magento 2, themes control the look and feel of an online store, including the color scheme, layout, typography, and other design elements.
From Scratch: This denotes starting from the beginning, without using any pre-existing materials or templates. In Magento 2 theme creation, ‘from scratch’ means designing a new theme entirely rather than modifying an existing one.
Unleashing Your Creativity: Crafting Your Unique Magento 2 Theme from Scratch
Creating a unique and appealing Magento 2 theme from scratch demands both technical skills and a dash of creativity. The customization possibilities with Magento 2 encompass much more than just changing colours and fonts. It allows you to implement exclusive features and create exceptional experiences for your customers.
Crucial Preliminary Steps
Before you start coding your Magento 2 theme, there are some essential steps you need to follow. First and foremost, you need to set up a Magento 2 development environment. There are multiple online resources available to guide you through this crucial step. Once the environment is set up, you should create a directory for your theme in the Magento 2 app/design/frontend/ folder. The name of this directory should be vendorName_themeName. Remember to replace vendorName and themeName with the name of your vendor and theme, respectively.
Following this, create three subdirectories within your theme directory. They must be named web, etc, and Magento_Theme respectively. The ‘web’ directory will hold your static files such as CSS and images, ‘etc’ directory will contain your theme.xml file which designate basic information about your theme and ‘Magento_Theme’ will include your layout configurations. Following these directory structure standards makes your theme organized and easy to navigate for future changes or updates.
Dive Deep: Designing and Developing Your Theme
With the preliminary setup out of the way, it’s time to dive deep into the design and development phase of your Magento 2 theme. Start by creating a theme.xml file inside your etc directory. This file should contain basic information about your new theme, including the theme name, the parent theme (if any), and the preview image.
- The theme name should appear between the
tags. This is the name that will be displayed in the Magento 2 backend.</li> <li>The <strong>parent theme</strong> is the theme which your new theme will inherit all non-specified parameters from. The parent theme’s name needs to be placed between the tags. If you don’t want to have a parent theme, simply skip this step.</li> <li>The <strong>preview image</strong> is the thumbnail that will be displayed for your theme in the Magento 2 backend. You need to create the preview image, save it in the web directory, and note its location within the tags in the theme.xml file.</li> </ul> <p>After setting up the theme.xml file, it’s time to start customizing the look of your theme. The layout, templates, and web directories are where you can make most of your design adjustments. The layout directory should contain the layout.xml files that specify the structure of your site’s pages. The templates directory contains .phtml files, which hold the HTML and PHP code for different parts of your theme. The web directories contain CSS files, images, and other static content. You can create CSS styles, add images, and manipulate other static contents within these directories to shape your unique Magento 2 theme.</p> <p>Creating a Magento 2 theme is a highly intricate process, with a plethora of nuances to consider. But with patience, determination, and a flair for creativity, you can craft a Magento 2 theme that stands out from the crowd, captivates your audience, and gives your eCommerce store a significant boost.</p> <h2>Uncover the Secrets to Perfecting your Magento 2 Theme Creation Process</h2> <h3>The Genesis of the Idea</h3> <p>Have you ever wondered what sets successful e-commerce stores apart from the rest? The secret lies in personalized user experiences, and for Magento 2 users, the key to unlocking this lies in creating a custom theme. A Magento 2 theme can be crafted from scratch, giving you complete control over the aesthetic appearance of your store. Here lies the biggest benefit – the ability to ensure your website’s look and feel aligns with your brand’s overall identity, giving your customers a familiar and consistent experience.</p> <p><b>The common roadblocks</b></p> <p>Creating a Magento 2 theme from scratch is not without its challenges, which can sometimes intimidate newbies. One common issue is not understanding the hierarchy of Magento 2 themes. Newcomers often struggle with locating and modifying the correct files. Mistakenly editing wrong files can lead to the site’s functionality breaking down or the design turning into a nightmare. Overcoming these obstacles requires a clear understanding of the folder structure and theme inheritance of Magento 2.</p> <p>Another hurdle is the complexity of requiring multiple programming languages, including XML, PHTML, CSS and JS. Some of these come with a steep learning curve, especially if you are not a seasoned developer. But, don’t let these deterrents hold you back, as the opportunities to customize and differentiate your eCommerce store through a bespoke Magento 2 theme are unparalleled.</p> <h3>Success Stories That Inspire</h3> <p>Despite the complexity and reasonably steep learning curve, many eCommerce store owners and developers have successfully created unique Magento 2 themes from scratch and harnessed their potential. For instance, the popular ‘Luna’ theme was created by a small team with limited technical knowledge. They started by learning Magento’s core coding concepts and gradually moved onto the more complex components. The result was a simple, yet compelling theme that offered their users a seamless online shopping experience.</p> <p>Another success story comes from ‘Acme Inc.’, a young and dynamic startup, who despite their initial struggles with understanding theme inheritance and the huge library of Magento 2’s documentation, emerged with a beautiful and responsive theme. The team leveraged online learning resources, Magento’s comprehensive documentation, and the community forums to steadily solve the critical issues they faced.</p> <p>Therefore, the ability to create a theme from scratch allows businesses to design the storefront exactly as per their needs. It’s like tailoring a suit – your size, your choice of cloth, and your choice of style. They leveraged these resources and their perseverance, to transform their creative vision into a successful Magento 2 theme. They built it brick by brick, page by page, and what emerged was an immaculate online storefront that was perfectly aligned with their brand’s image and attracted their target audience.</p> <p>In the same way, everyone from small-scale entrepreneurs to large corporations can create user-friendly and efficient eCommerce websites by crafting custom Magento 2 themes. Suppose developers approach this task with a structured plan, a clear understanding of Magento’s core concepts. In that case, they will eventually make creative and well-functioning themes that enhance the user’s online shopping experience.</p> <h2>Magento 2 Themes: Transforming your Innovative Ideas into Reality from Scratch</h2> <h3>Taking a Step-Back: Do You Really Understand the Foundations?</h3> <p>Do you know the fundamental concepts and pillars that underpin a fully functional and effective theme in Magento 2? This is an essential question to consider as it impacts how our themes are born and how they transform our ideas into reality. A Magento 2 theme essentially constitutes a combination of layouts, templates, styles or images. The creation of a Magento 2 theme involves configuring these elements and integrating them to work in tandem. Theme creation can be broken down into several stages which include creating a directory for the theme, declaring the theme, creating a composer package for the theme and applying and configuring the theme.</p> <h3>Navigating the Maze: What Challenging Factors are at Play?</h3> <p>Creating a Magento 2 theme from scratch presents a unique set of challenges that need to be thoroughly addressed. One primary concern is the lack of readily available resources and in-depth knowledge about the platform. Magento 2, being an enterprise-level eCommerce solution, comes with an exhaustive list of functionalities and technicalities. Understanding and ‘taming’ this extensive solution to create a custom theme is certainly a daunting endeavor. Moreover, making a theme responsive, compatible and easy to use across different devices and browsers is a complex feat in and of itself. Lastly, ensuring your theme adheres to various industry standards and meets customer expectations can be a tricky balance to strike.</p> <h3>Illustrating Success: Case Studies that Inspire and Educate</h3> <p>Despite these challenges, success stories abound when it comes to creating themes on Magento 2 from the ground up. Pioneering eCommerce companies such as Stance, Vizio and Olympus have successfully tailored custom themes in Magento 2 that not only enhance user experience (UX) but also boost conversion rates. </p> <p>Stance, for instance, optimized their product navigation by simplifying the cart and checkout processes of their theme, leading to a significant decrease in the site’s bounce rate. On the other hand, Vizio revolutionized their product display by integrating a 3D view within their theme, providing a more interactive and enriched shopping experience for their customers. Olympus focused on boosting mobile conversion rates by tuning their theme to enhance mobile UX. These companies leverage Magento 2 themes to alter user experiences on their platform and drive digital commerce success. </p> <p>By examining businesses that have excelled in Magento 2 theme design, we can gain insights into best practices and proven strategies. Learning from these instances, it becomes evident that understanding the core of Magento 2, being privy to user preferences and staying updated with industry advancements are key to designing a successful Magento 2 theme.</p> <h2>Conclusion</h2> <p>Isn’t it remarkable how the flexibility of Magento 2 empowers us to create a complete theme from the ground up? We can conceive, design, customize, and launch a digital storefront that is wholly unique to our brand. This potential to transform our creative vision into a functional eCommerce website is the power of Magento 2.</p> <p>We sincerely hope that our informative articles are inspiring and helpful to your own unique journey. Following our blog will ensure that you have the freshest insights at your fingertips. Remember, with an open-source solution like Magento 2, there’s always something new and exciting to discover. The world of eCommerce changes at a breakneck pace – don’t just keep up, stay ahead! Our hands-on guides, expert tips, and thought-leadership articles are ready to navigate you through the technicalities and bring you to the forefront of Magento 2 innovations.</p> <p>In closing, we understand the excitement that comes with every new release. Rest assured, we share that enthusiasm too. Whether it’s the latest update or an entirely new theme that demands due attention, we’ll be breaking it down for you, step by step. Stay tuned for more unfurling themes, trends, and topics to keep you ahead in the fast-paced world of eCommerce. Together, we’ll continue to explore the endless possibilities offered by Magento 2 – a journey that promises new learning experiences with every step forward.</p> <h2>F.A.Q.</h2> <div> <strong>Q1: What is the initial step to start creating a Magento 2 theme from scratch?</strong> </p> <p>A1: The initial step to start creating a Magento 2 theme from scratch is to set up a new theme directory. This is necessary to store all your theme files and set the correct directory structure.</p> <p> <strong>Q2: How can I declare my new theme in Magento 2?</strong> </p> <p>A2: You can declare your new theme by creating a theme.xml file within your theme directory. This file will define the theme’s name and its parent theme, if any.</p> <p> <strong>Q3: How do I configure the layout of my new Magento 2 theme?</strong> </p> <p>A3: You can configure the layout of your Magento 2 theme by modifying the layout files in your theme’s directory. These XML files control the structure and content placement of your theme.</p> <p> <strong>Q4: Can I create and customize my own CSS styles in the Magento 2 theme?</strong> </p> <p>A4: Absolutely. You can create and customize your own CSS styles by adding a custom ‘styles.css’ file in your theme’s web/css directory. Changes made in this file will directly reflect on your theme’s styling.</p> <p> <strong>Q5: How do I apply and activate my newly created Magento 2 theme?</strong> </p> <p>A5: You can apply and activate your new Magento theme through the Magento Admin Panel. Navigate to “Content > Design > Configuration”, here you can set your theme as the default for your store view.</p> </div> </div> </div> </article><!-- #post-331 --> <article class="post" class="post-518 post type-post status-publish format-standard has-post-thumbnail hentry category-templates tag-budget tag-challenges tag-collaboration tag-communication tag-customization tag-deadlines tag-design tag-development tag-feedback tag-flexibility tag-goals tag-implementation tag-metrics tag-objectives tag-organization tag-presentation tag-productivity tag-project-management tag-project-planning tag-requirements tag-resources tag-risk tag-scalability tag-sharing tag-stakeholder-engagement tag-status tag-success tag-tasks tag-team-members tag-testing tag-timeline tag-tracking"> <figure class="post-thumbnail"><a href="https://templatesocean.com/templates/why-use-project-templates/"><img width="640" height="425" src="https://templatesocean.com/wp-content/uploads/2023/09/macbook-624707_640.jpg" class="img-fluid wp-post-image" alt="" decoding="async" srcset="https://templatesocean.com/wp-content/uploads/2023/09/macbook-624707_640.jpg 640w, https://templatesocean.com/wp-content/uploads/2023/09/macbook-624707_640-300x199.jpg 300w" sizes="(max-width: 640px) 100vw, 640px" /></a></figure> <div class="post-content"> <div class="entry-meta"> <span class="cat-links"><a href="https://templatesocean.com/category/templates/" rel="category tag">Templates</a></span> </div> <header class="entry-header"> <h4 class="entry-title"><a href="https://templatesocean.com/templates/why-use-project-templates/">Why use project templates?</a></h4> </header> <div class="entry-meta pb-2"> <span class="author"> <a href="https://templatesocean.com/author/admin/"><span class="grey">by </span>Mac Jones</a> </span> <span class="posted-on"> <a href="https://templatesocean.com/2023/07/"><time> July 10, 2023</time></a> </span> </div> <div class="entry-content"> <p>Why do we use project templates? What benefits do they bring to a project’s lifecycle? Can enormous time and effort really be saved with the use of these pre-defined frameworks? Project templates are undoubtedly a well-used tool in project management. However, their full breadth of use and how they provide a substantial work boost is still a substantial topic that merits exploration.</p> <p>Notably, the lack of standardization and inefficiency in workflow are major difficulties that arise without templates, as suggested by industry leaders like Forbes and Fast Company. According to recent surveys in the U.S., numerous businesses grapple with these issues, indicting a pressing need for a solution. This reality illuminates the necessity for project templates not as a mere convenience, but as an essential tool in tackling such problems, streamlining processes, and driving productivity.</p> <p>In this article, you will learn everything you need to know about project templates. From understanding their basic functionality to exploring advanced features, this article provides a comprehensive overview. Whether you are a beginner in project management or an experienced leader, expect to gain insightful knowledge.</p> <p>This article is aimed at giving you an insight into project templates: their features, the benefits they provide, and how they help teams communicate better and more effectively. Moreover, it will guide you through their essential role in the successful completion of projects. By illustrating real-world examples, you will be able to appreciate the profound impact of project templates in project management.</p> <p><img decoding="async" loading="lazy" src="https://marketplace.canva.com/EAFGlvWuzm8/1/0/1600w/canva-yellow-white-3d-simple-funny-meme-XumAOJ02HrU.jpg" alt="Why use project templates? " width="500" height="600"></p> <h2>Understanding the Definitions of Project Templates</h2> <p>Project templates, a fundamental concept in project management, is crucial for non-technical readers to grasp. <i>Project templates</i> are preset formats that serve as a guide for defining, planning and managing projects efficiently. They provide a clear structure for completing tasks, allowing teams to save time and reduce errors. Primarily, they include vital elements like project goals, tasks, and deadlines, which helps in maintaining consistent style and content. </p> <p> Besides, <i>project management</i> is an overarching term indicating the process of planning, organizing, motivating, and controlling resources to achieve specific objectives. It encompasses techniques and tools employed to manage the uncertainties of individual projects within programs and portfolios in an organization. </p> <h2>Unveiling the Secret Weapon: How Project Templates Revolutionize Efficiency </h2> <h3> Streamlining Processes with Project Templates </h3> <p> Project templates are more than mere base structures that house the skeletal framework of a project. They are actually comprehensive windows into an efficiently organized workspace. Imagine being able to compartmentalize every important aspect of your project into pre-arranged and highly structured sections. This is exactly what project templates offer. They lend an air of professionalism to your workspace and work, facilitating seamless project management. </p> <p> Without project templates, every new project would need to start from scratch. This would mean recreating files, layouts, hierarchies, systems, and more, each time. However, templates cut down this time-consuming process significantly. With them, all you need to do is fill up the predefined spaces with the specifics of your new project. By eliminating the need to create a new structure with every project, project templates ensure a great deal of time, energy and resources are saved. </p> <h3> The Power of Reusability and Consistency </h3> <p> When introduced into the workspace, project templates can transform the efficiency and productivity of teams. Firstly, since they can be used repeatedly across varying projects, they help maintain consistency. As a result, every team member knows precisely where to find information and how to navigate through the project. This boosts teamwork, project understanding, and collaboration. </p> <ul> <li> Imagine a new team member, who is unfamiliar with company protocols, joins your project. With a project template in place, they can easily understand the workflow and their role within it. This provides a streamlined onboarding process. <li> Client communication is another key area that project templates can significantly improve. With the template’s clear structure, project updates can be communicated effectively to all stakeholders, leaving no room for misinterpretation or confusion. <li> Quality control is yet another important aspect where project templates prove invaluable. Since they help maintain a standard layout and process, it becomes easier to spot abnormalities or areas of improvement. </ul> <p> In essence, project templates are not just about being organized or making things look pretty. They go far beyond that by introducing and reinforcing efficient work processes, promoting team collaboration and above all, bringing about a significant positive difference to work productivity. They truly revolutionize efficiency within a workplace. </p> <h2>Diving Deeper: The Unexpected Benefits Project Templates Bring to your Business</h2> <h3>Should You Utilize Project Templates?</h3> <p>When faced with an important task or a large team project, where do you begin? This question often initiates a flurry of activities like brainstorming, strategizing, and envisioning the final outcome. However, starting from scratch each time can be daunting, time-consuming, and impede the consistency necessary for successful project management. This is where project templates can be an unexpected boon for your business. They bring with them a multitude of benefits such as saving time, providing consistency, decreasing the margin for errors, and imparting a sense of coordinated structure to the project. They also act as a jump-off point by laying down the essential groundwork lending clarity to what the project’s objective and deliverables should look like. </p> <h3>Addressing the Predicament</h3> <p>The main challenge without a project template is that businesses tend to face repetition of the same groundwork for each project. This not only consumes valuable time but also increases the risk of oversight and inconsistencies in project handling. With different team members involved and varied approaches adopted for each project, the lack of a unified structure can sometimes lead to confusion and miscommunication. This results in compromised project quality and wasted resources. Project templates, on the other hand, standardize the whole process. They provide a preformatted structure that can be used again and again. Employees just need to fill in the specifics of their project, leading to an efficient, error-free, and uniform approach to all projects.</p> <h3>Embracing Project Templates’ Best Practices</h3> <p>Successful businesses widely adopt project templates and there are numerous examples of their advantageous use. For instance, a marketing agency might create a template for its client proposals that contains fields for all the relevant details, ensuring no critical elements are overlooked. A construction company, on the other hand, might use project templates to structure their project plan, tracking progress and ensuring all safety standards and regulations are efficiently met. A project template for software development could ensure all stages of development like ideation, design, implementation, testing and deployment are sequentially arranged. Accounting firms could use these templates to manage their financial auditing processes, outlining the regulatory steps to be followed, thus reducing the chance of costly mistakes. These examples clearly illustrate how project templates can streamline processes and improve efficiency across different industry sectors.</p> <h2>Pushing Boundaries with Project Templates: Shattering Myths and Adopting Best Practices</h2> <h3>Refuting Misconceptions</h3> <p>What if adopting project templates can remarkably streamline your workflow? The cutting-edge world of project management is witnessing a transformative change with the incorporation of project templates. A common misconception is that project templates impede creativity by enforcing rigid structures. However, this is not the case. Essentially, these templates act as powerful tools that foster efficiency in project execution. Irrespective of the size and nature of a project, templates bring in an element of predictability by defining pre-set stages, thus allowing managers to anticipate challenges and devise strategies effectively. They foster a clear-cut directional approach and facilitate standardized documentation, thereby minimizing miscommunication and maximizing productivity.</p> <h3>The Core Challenge</h3> <p>The pivotal predicament lies in understanding the judicious application of these templates. A project template is not a one-size-fits-all solution, but rather a flexible framework. Some managers tend to rigidly follow templates without adapting them to specific projects or creating new ones when necessary. This approach can constrict the scope of customization and adaptability. The purpose of a project template is to simplify and systematize processes, but misapplication can lead to complicated processes and suboptimal results. Regardless of how impeccably designed a template is, if managers fail to customize and adapt it to suit their projects’ unique demands, they might miss out on the dynamic benefits of these tools.</p> <h3>Embracing Optimal Strategies</h3> <p>Successful project managers are those who master the art of moulding project templates to meet their specific requirements. They recognize the inherent power of these tools and optimize them to suit their projects’ unique needs. For instance, a tech startup tasked with software development might require a different template compared to an event management firm planning a concert. In the tech startup, the template might focus on technical aspects such as design, testing, and deployment. On the contrary, the event management template might centre around key milestones like sponsorship acquisition, marketing initiatives, and logistics organization. Both instances call for radically different templates, yet under the broad umbrella of project management. Thus, it’s all about leveraging project templates in a manner that aligns with the project’s objectives. A groundbreaking approach involves frequently reviewing and updating templates based on project feedback, leading to continuous improvement and growth. This approach proves how project templates can truly be a game-changer in project management if used wisely.</p> <h2>Conclusion</h2> <p>Have you ever considered the tremendous benefits a project template could bring to your workflow? Templates are far more than just a predefined framework; they are an extraordinary asset to increase productivity, promote consistency, and improve time management. A crucial tool used by successful project managers worldwide, templates streamline resource allocation and task management, all while maintaining the project’s quality and efficiency. Imagine the convenience of a tailor-made solution woven into your project which follows its lifecycle from the planning phase, execution, control to closing. </p> <p>Now picture this… being part of a community that appreciates and shares the worth of project templates. Being part of this blog means embracing simplified project management strategies, and looking forward to more tips and approaches in the coming releases. Don’t be a bystander in the project management world! Be active, follow this blog, brace yourself for the unveiling of more indispensable tools and compelling blog posts. Stay connected with us, constantly improve your knowledge, and influence others with your innovative and effective management style. </p> <p>In the serendipity of project management, it is our desire that you enjoy every moment with us; anticipate every new release with a keen eye to perfect your craft. Our forthcoming discussions will cover a lot more ground in the realm of project management. We eagerly await your next visit and look forward to engaging more with you. Until then, keep leveraging those project templates and watch how you command respect in your respective domains. The world needs more efficient project managers, and you are part of that exclusive group.</p> <h2>F.A.Q.</h2> <p>1. What are project templates?</p> <p>Project templates are pre-defined structure of files and folders that provide a base to start a new project. They speed up the workflow by having a preset framework in place.</p> <p>2. Why is it necessary to use project templates?</p> <p>The use of project templates ensures consistency and efficiency in the project process. It streamlines tasks, saving valuable time and resources that can be spent on other vital aspects of a project.</p> <p>3. How do project templates enhance team collaboration?</p> <p>Project templates enable better team collaboration by providing a common structure and language that each team member can understand. With clear roles, responsibilities, and deadlines outlined in the template, the team can function more effectively.</p> <p>4. Are project templates flexible, or are they rigid formats?</p> <p>While project templates provide structured guidelines, they are generally flexible and can be tailored according to the specific requirements of a project. The key is to understand what suits best for the project at hand and customize accordingly.</p> <p>5. What types of project templates exist?</p> <p>There is a wide variety of project templates, including but not limited to, project management templates, project planning templates, project schedule templates and project proposal templates. The selection of a project template depends highly on the nature and requirements of the project.</p> </div> </div> </article><!-- #post-518 --> </div> <div class="col-lg-4 col-md-4 col-sm-12"> <div class="sidebar"> <aside id="block-2" class="widget text_widget widget_block widget_search"><form role="search" method="get" action="https://templatesocean.com/" class="wp-block-search__button-outside wp-block-search__text-button wp-block-search"><label class="wp-block-search__label" for="wp-block-search__input-1" >Search</label><div class="wp-block-search__inside-wrapper " ><input class="wp-block-search__input" id="wp-block-search__input-1" placeholder="" value="" type="search" name="s" required /><button aria-label="Search" class="wp-block-search__button wp-element-button" type="submit" >Search</button></div></form></aside><aside id="block-3" class="widget text_widget widget_block"> <div class="wp-block-group is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"> <h2 class="wp-block-heading">Recent Posts</h2> <ul class="wp-block-latest-posts__list wp-block-latest-posts"><li><a class="wp-block-latest-posts__post-title" href="https://templatesocean.com/templates/flatlogic-unveils-shift-from-react-templates-to-ai-powered-business-software-solutions/">Flatlogic Unveils Shift from React Templates to AI-Powered Business Software Solutions</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://templatesocean.com/templates/what-are-modes-in-magento-2/">What are modes in Magento 2?</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://templatesocean.com/templates/why-is-wordpress-so-expensive/">Why is WordPress so expensive?</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://templatesocean.com/templates/what-are-the-cons-of-woocommerce/">What are the cons of WooCommerce?</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://templatesocean.com/templates/which-is-better-wix-or-shopify/">Which is better Wix or Shopify?</a></li> </ul></div></div> </aside><aside id="block-9" class="widget text_widget widget_block"> <div class="wp-block-group is-layout-constrained wp-block-group-is-layout-constrained"><div class="wp-block-group__inner-container"> <h2 class="wp-block-heading">More for reading</h2> </div></div> </aside><aside id="block-4" class="widget text_widget widget_block"> <div class="wp-block-group is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"><ul class="wp-block-archives-list wp-block-archives"> <li><a href='https://templatesocean.com/2024/05/'>May 2024</a></li> <li><a href='https://templatesocean.com/2023/11/'>November 2023</a></li> <li><a href='https://templatesocean.com/2023/10/'>October 2023</a></li> <li><a href='https://templatesocean.com/2023/09/'>September 2023</a></li> <li><a href='https://templatesocean.com/2023/08/'>August 2023</a></li> <li><a href='https://templatesocean.com/2023/07/'>July 2023</a></li> <li><a href='https://templatesocean.com/2023/06/'>June 2023</a></li> <li><a href='https://templatesocean.com/2023/05/'>May 2023</a></li> </ul></div></div> </aside><aside id="block-29" class="widget text_widget widget_block"> <div class="wp-block-group is-layout-constrained wp-block-group-is-layout-constrained"><div class="wp-block-group__inner-container"> <h2 class="wp-block-heading">Best AI Tools For Business and Personal Use</h2> <p><a href="https://www.synthesia.io/">Synthesia</a></p> <p><a href="https://www.unscreen.com/">Unscreen</a></p> <p><a href="https://www.getmunch.com/">Munch</a></p> <p><a href="https://openai.com/dall-e-2/">Dall-E-2</a></p> <p><a href="https://www.nextrembrandt.com/">NextRembrant</a></p> </div></div> </aside> </div> </div> </div> </div> </section> <footer class="site-footer"> <div class="container-full"> <div class="row footer-sidebar"> <div class="col-lg-3 col-md-6 col-sm-12"> <aside id="block-5" class="widget text_widget widget_block"><div class="wp-block-group is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"><h2 class="wp-block-heading">Archives</h2><ul class="wp-block-archives-list wp-block-archives"> <li><a href='https://templatesocean.com/2024/05/'>May 2024</a></li> <li><a href='https://templatesocean.com/2023/11/'>November 2023</a></li> <li><a href='https://templatesocean.com/2023/10/'>October 2023</a></li> <li><a href='https://templatesocean.com/2023/09/'>September 2023</a></li> <li><a href='https://templatesocean.com/2023/08/'>August 2023</a></li> <li><a href='https://templatesocean.com/2023/07/'>July 2023</a></li> <li><a href='https://templatesocean.com/2023/06/'>June 2023</a></li> <li><a href='https://templatesocean.com/2023/05/'>May 2023</a></li> </ul></div></div></aside><aside id="block-6" class="widget text_widget widget_block"><div class="wp-block-group is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"><h2 class="wp-block-heading">Categories</h2><ul class="wp-block-categories-list wp-block-categories"> <li class="cat-item cat-item-1"><a href="https://templatesocean.com/category/templates/">Templates</a> </li> </ul></div></div></aside> </div> </div> </div> <div class="site-info text-center"> Maverick WordPress Theme </div> </footer> <div class="page-scroll-up"><a href="#totop"><i class="fa fa-angle-up"></i></a></div> <script> // This JS added for the Toggle button to work with the focus element. if (window.innerWidth < 992) { document.addEventListener('keydown', function(e) { let isTabPressed = e.key === 'Tab' || e.keyCode === 9; if (!isTabPressed) { return; } const focusableElements = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'; const modal = document.querySelector('.navbar.navbar-expand-lg'); // select the modal by it's id const firstFocusableElement = modal.querySelectorAll(focusableElements)[1]; // get first element to be focused inside modal const focusableContent = modal.querySelectorAll(focusableElements); const lastFocusableElement = focusableContent[focusableContent.length - 1]; // get last element to be focused inside modal if (e.shiftKey) { // if shift key pressed for shift + tab combination if (document.activeElement === firstFocusableElement) { lastFocusableElement.focus(); // add focus for the last focusable element e.preventDefault(); } } else { // if tab key is pressed if (document.activeElement === lastFocusableElement) { // if focused has reached to last focusable element then focus first focusable element after pressing tab firstFocusableElement.focus(); // add focus for the first focusable element e.preventDefault(); } } }); } </script> <script type='text/javascript' src='https://templatesocean.com/wp-content/themes/the-maverick/assets/js/skip-link-focus-fix.js?ver=20151215' id='the-maverick-skip-link-focus-fix-js'></script> </body> </html>