UPDATE: We just released a new tutorial on the subject: https://www.youtube.com/watch?v=F2gyAeZdU9s

Get Elementor Pro with WooCommerce widgets: https://elementor.com/pro
In this video, you will learn how to design a complete eCommerce hompage and contact page, using Elementor, WooCommerce and StoreFront.

Storefront is the free and official theme for WooCommerce, the most popular eCommerce store solution for WordPress. By utilizing the visual design capabilities of Elementor, you can customize your Storefront website in a visual, quick and easy way.

** Tools Used **
Elementor: https://elementor.com
Elementor Pro: https://elementor.com/pro
WooCommerce: https://woocommerce.com/
Storefront: https://woocommerce.com/storefront/

When developing WordPress plugins or themes, it's a good idea to have tools in place to help improve your code quality and debug your code in the case of errors. Enabling error logs, inspecting the values of variables during code execution, and looking at the database queries being run are all tools that developers can use to find and fix problems. In this tutorial, we'll dive into some of the options built into WordPress that you have at your disposal, learn about various debugging plugins and their uses, as well as look at one or two third-party tools to consider.
---
View this video and others on WordPress.TV: https://wordpress.tv/2023/07/0....7/jonathan-bossenger

In this tutorial, we'll go over how to hide a column in Elementor 2.5.

Learn More: https://elementor.com/blog/int....roducing-flexible-la
Get Elementor Pro: https://elementor.com/pro/

⁣How to create email aliases

In this tutorial, we examine several responsive web design challenges and explore various ways to solve them elegantly using Elementor.

Tip #1. Responsive Design Begins and Ends With Correct Planning.
In this business, no one in their right mind would set off on a project without a plan, a draft or sketch. The more forethought and planning you can invest in the design process, the better you will be able to anticipate the technical problems and adjust your ideas accordingly.

Tip #2. Positioning Elements for Mobile Responsive View
When it comes to correctly positioning sections for mobile responsive view, we suggest avoiding setting values in pixels. Setting values in percent (%) or in EM keeps them relative to the overall screen size. Thanks to the responsive mode, we were able to conclude that we should set the padding to 17% either side of the text widget, in our next example, so that we get similar positioning in both desktop and mobile view.

Tip #3. Responsive Design: A Horizontal Approach
Traditionally, web design is a vertical process, which is why many designers prefer to complete the design of the entire page for a single device before, trying to make the same design work as well on the next device. An easier way to go about this is to design our views horizontally, one section at a time, across all our devices as we go along.

Once we have made sure that section looking the way we want it to in Desktop, Tablet, and Mobile views, we can move on to the next. Where possible, duplicate sections, columns or widgets, and update the relevant content; re-use them as foundations to build the other similar elements on the page.

Tip #4. Change / Position Background Image
Certain background images, like that of the example below, may look great in the desktop view. However, it doesn’t take much experience to see how it wouldn’t work well when viewing the site on a mobile screen.

Tip #5. Create Alternative Section
As promised, we are only too happy to share our experience and insight with our community, who will no doubt be familiar with our next example. Well within the top area of our home page, we needed to come up with a solution to the 3-column text section. Rather than having this appear as 3 boring rows of text in Mobile view, we decided to create an alternative section, with the text inside a slider widget.

Read the full post: https://elementor.com/blog/responsive-web-design/
Get Elementor: https://elementor.com
Get Elementor Pro: https://elementor.com/pro/

Introduced in WordPress 5.8, the theme.json file allows block theme developers to control the settings and styles of the blocks in the Editor.

In this video tutorial, you will be introduced to the theme.json file, how it works, and how you can control these settings and styles.Presentation Slides »
---
View this video and others on WordPress.TV: https://wordpress.tv/2023/01/0....6/introduction-to-th

A new sticky option is available when wrapping a header or banner in a Group block. The sticky feature will ensure the block remains within the viewport and is stuck to the top of the page when the content is scrolled.
---
View this video and others on WordPress.TV: https://wordpress.tv/2023/04/1....0/adding-a-sticky-he

Learn how to protect domain’s DNS data with DNSSEC protocol.
Try Plesk Onyx for free: http://hubs.ly/H04HvFJ0
Documentation and help: http://hubs.ly/H04KJTn0

In this tutorial, we combine Elementor and PODS (a Custom Fields plugin) to create a dynamic personal website for WordPress.
You'll learn how to:

✓ Use dynamic content
✓ Create custom fields with PODS
✓ Edit a single post template with Elementor

Subscribe to our Youtube channel and be the first to get our videos!

To learn more about WordPress, Elementor, and Custom Post Types:
https://elementor.com/wordpress-custom-post-types/

Use Dynamic Content, as well as many other features that will help you edit and customize every part of your WordPress website: https://elementor.com/theme-builder/

Get Elementor: https://elementor.com
Join Pro: https://elementor.com/pro/
Get Pods: https://wordpress.org/plugins/pods/

Learn how to change the password that you use to access your hosting subscription files via FTP, SSH, or RDP.
Try Plesk Onyx for free: http://hubs.ly/H04HvFJ0
Documentation and help: http://hubs.ly/H04KJTn0

⁣API Settings - WooCommerce Guided Tour

See UPDATED Shape Divider tutorial here: https://youtu.be/sPE4ZfUFZoE

In this tutorial we explain how to use the FREE Elementor Page Builder feature to add stunning shape dividers to WordPress page sections.
Get Elementor: https://elementor.com
Read more about Shape Dividers: http://docs.elementor.com/arti....cle/207-shape-divide

This Monday MasterClass we’re taking an in-depth look at converting a simple WordPress website into an online store in 5 simple steps.

The main focus of this episode is on setting up WooCommerce correctly in order to sell and ship physical products. If you’re also planning on selling digital/downloadable products, you might want to also check out our previous Masterclass “How to Build a Basic Online Store” https://youtu.be/SuyV4Tevmm0

This episode covers a lot of valuable web-building information for all levels looking to learn about:

Turning on Maintenance / Coming Soon mode in Elementor 02:45
Installing WooCommerece 03:30
WooCommerce Setup Wizard 03:50
Primary Setup for a WooCommerce store and payment gateways 04:09
Creating/Adding a new product 05:53
Adding store products to the website (WooCommerce widget) 07:11
A more customizable way of displaying products using Elementor 08:12
Customizing Cart and Checkout pages using the Theme Builder and Theme Style 08:39
Completing the online store setup and advanced settings 10:02
Setting up Shipping Zones, Shipping Classes, and fees 11:35
Testing our online store 17:24

\\ Tools we used in this Masterclass:
▸Gym Template Kit | https://elementor.com/blog/gym-site-template-kit/
▸WooCommerce Plugin | https://woocommerce.com/
To learn more about creating a WordPress website from scratch using Elementor, check out our previous Masterclasses:
▸From Design Tool to WordPress | https://youtu.be/bd6agRxR5Sk
▸Build the Perfect Sales Funnel in WordPress Using Elementor | https://youtu.be/tG9NRWVlxeg

Read more about transforming your simple business website into an online store in this edition of Elementor’s Online Magazine:
https://elementor.com/blog/wor....dpress-site-into-an-


Get Elementor: https://elementor.com
Get Elementor Pro: https://elementor.com/pro/

In this tutorial, you'll learn how to use the built-in Yoast SEO integration in Elementor.
Taking care and increasing your website's search engine optimization, or in short - SEO, is one of the most important things you can do to increase traffic to your website!
Check out the full article: https://elementor.com/blog/yoast-seo-integration/

Don’t forget to subscribe to our channel!

Get Elementor: https://elementor.com/
Get Elementor Pro: https://elementor.com/pro/

WordPress has made it even easier for folks by enabling users to add media via the Inserter and images from Openverse that are free to use on your site.
---
View this video and others on WordPress.TV: https://wordpress.tv/2023/04/0....2/add-media-and-open

This tutorial will explore adding tables using the Table block and a plugin. We will also briefly look at creating a table with data from Google Sheets or Excel.
---
View this video and others on WordPress.TV: https://wordpress.tv/2023/08/0....2/how-to-add-tables-

In this tutorial, we combine Elementor and ACF (Advanced Custom Fields plugin) to create a dynamic doctors portal website on WordPress.

Get Elementor: https://elementor.com
Get Elementor Pro: https://elementor.com/pro
Get ACF: https://www.advancedcustomfields.com/

In this tutorial, we will show you how to add a popup to your sites cart page that triggers after an x amount of time (when the user gets indecisive).

You will also learn how to add animated gifs to popups, all using Elementor's Popup Builder.

Learn More: https://elementor.com/popup-builder/
Get Elementor Pro: https://elementor.com/pro/

⁣Shipping Zones - WooCommerce Guided Tour

In the "Using the WordPress REST API" tutorial you were introduced to the WordPress REST API, as well as the Backbone.js client to interact with it.

In this tutorial, we will look at how you can interact with the WP REST API further, but adding and deleting data.Presentation Slides »
---
View this video and others on WordPress.TV: https://wordpress.tv/2023/03/0....3/interacting-with-t