⚡ Optimize Price Table Elementor for Mobile View & Speed! 🚀

Hello friends from Marieú Technology Corporation, how can we optimize our pricing page? Don’t worry, in this step-by-step guide, you will learn how to optimize price table elementor for mobile view. ⚡ 🚀

Elementor is a web page builder or “page builder.” It allows you to create and design web pages using templates, widgets, or predefined blocks. The installation of the Elementor plugin is done through WordPress. There, you will find a free version and a paid version; the latter offers a greater number of widgets and templates.

How to Optimize Price Table Elementor?

We are going to optimize our pricing page. On our mobile device, we are going to make a few configurations, and as a result, we will see that it is much better optimized. The view of the pricing tables will look appropriate.

We have the architecture diagram; remember that this optimization will be done using WordPress and Elementor. What would the comparison be, the before and after? The table texts are disordered and not aligned. For example, if we apply a discount, it is above the savings, when everything should be on the same line.

Diagram: Optimize Price Table Elementor for Mobile View.
Source: Author’s Own Work, via Miro software.

We also see the table is too narrow; it should be at least a little wider. The plan detail is also too reduced; it is very narrow. And we have a comparison here of how it will look finally. It has a much more comfortable dimension for the user; we have increased it, placing the discount, the savings percentage, the dollar sign, and the price all on a single, adequately spaced line.

The plan detail is also aligned to the left. We know the amount of plan text might still overflow the table, but we have centered it properly.

We see that the Little Plan is centered, and the small email announcements are also adequately concentrated. These would be the results we would obtain. How do we reach these results? We do the following: we must start by updating the WordPress and Elementor plugins.

After that, we are going to create a template and insert the section. We are going to copy the section from the website and create it inside a template. Next, we will optimize price table elementor (monthly and annual plans) in vertical mobile mode. Remember that for Elementor, we have four types of view modes. There is a panoramic view, a desktop version view, a tablet version view, and finally, a mobile mode view.

Point number 4, we will save changes and copy the Shortcode. When it is created, edited, and saved, a Shortcode is generated. We are going to copy that Shortcode and insert it into our pricing page. Finally, remember to clear the cache. Moreover, we will clear the cache not only in the final stage but also while we are editing. We clear the cache and update the changes.

So, here we are in WordPress. In an initial stage, we have to create the template from scratch. We click “Add New” and here we select Page.

Here we will enter the name “Monthly Email Announcement Prices” and create it. Once it finishes creating, we are going to add a section here, in the Navigator. If the Navigator is not enabled, remember you can enable it here: “Navigator.” Once the Navigator is open, we are going to paste the section from our website. This is our email announcement pricing page. On this page, we are going to copy the section. Right-click, we copy only the table section, remember, and here, in the template, we paste it.

Before Optimization: Mobile Price Table Layout Issue in Elementor.
Source: Author’s Own Work, via Elementor.

So, here we have the editing mode in Elementor for our email announcement and pricing page. Before proceeding, let me remind you what this service consists of. The service we are offering is for email announcements, which allows each of you to send advertising messages, welcomes, perhaps newsletters, informational bulletins, promotions, among others.

So, the email announcement service would be made up of three plans: the Little Plan, the Robust Plan, and the Elastic Plan. These are the three plans that make up this service, divided into monthly periods (a payment per month) and annual periods (a payment per year).

So, now we are going to enter the mobile version editing mode. We put “Responsive Mode” and select “Vertical Mobile.” There it is! As we initially commented, there is text overflow, lack of alignment, width issues, lack of spacing, and centering between the prices and the dollar sign. The “I Want It” button to request the plan also needs centering.

Also, something similar with the other plans. Initially, for you to add it, in our case, the toggle button (lever or switch) is already added. We are going to search here in widgets for “Toggle,” and there it is! Remember, select, drag, and drop. The service is composed of three plans, which is why optimizing the Mobile Price Table is so crucial.

So, you can change the color here, depending on your company’s website. We go to Style, Annual, and here Indicators Background, the color background, and we change it. Let’s imagine it’s green, and there it is, the green color is reflected. Once you have that. If you look here, we have the option to edit content. Something similar here.

So, we are going to continue with the one below—there it is! So, we click “Edit Content.” Remember that this is in the Toggle section. If we want to design each of these tables, we will make a particular video for that.

For now, we are only going to focus on how to optimize price table elementor. We click “Edit Content,” and inside, we are going to insert it as a Shortcode: Section, Column, and here we have Shortcode. So, there is Shortcode. What is the code that was inserted? The Shortcode is [elementor-templates id="4038"].

So, where does this Shortcode come from? It comes from the template where we designed our email announcement price table. If we want to edit the content of that Shortcode, we have to enter Templates.

Here are the Templates! And we go to Saved Templates, from which we will enter the “Monthly Email Announcement Price” templates. We will edit it with Elementor. So, here in the editing view, we only have the tables. Any update we make here, in the tables, will be reflected here. It is no longer necessary to enter, save, click “Edit Contents,” or “Widgets Area.” It is no longer necessary. Automatically, with this Shortcode, any change here will be reflected directly in production, on our pricing page.

In fact, it is much simpler and faster because sometimes if we are using Rank Math, editing becomes a bit slow. Working with shortcodes is key to efficiently optimize price table elementor without slowing the editor. We recommend working with shortcodes short; the integration, the template, comes directly here. To avoid making changes here and feeling the system slow down, we make the changes directly here, in the template.

So, we are going to optimize price table elementor. We set the view mode to Mobile, select Vertical Mobile, and open the Navigator. First, we are going to reduce the space. For that, we are going to go to the section here. We select the section that encompasses the three columns, that is, the three plans. We are going to Advanced. In Advanced, we have Margin and Padding. We are going to set them to “0.” It will increase, it will be a little bigger. We set it to zero, and also remember that if the link values are activated, as in this case (it is shaded, meaning it is activated), all values will move simultaneously.

If I raise one, all four directions will move: top, right, bottom, and left. They will move at the same time. One, they will be centered to the same value, and two, they will increase in the same proportion. I want you to notice the change. I’m going to change it, and there it is! We are going to leave it at zero, and here, in the margin, we are also going to leave it at zero. What effect will this have on the table? It will reduce the height a little. We will put zero, and there it is.

Now also, where it says “auto,” it means that we can no longer make a change in those directions. We update and we are going to see the results. Remember that this is the template, and this is our pricing page, where everything is.

So, we have already optimized the section containing the three columns. Now we are going to enter the first column, that is, where the first plan, the Little Plan, is located. We select the first column, we are going to expand it to recognize that we have a total of two columns and an inner section. If we open the last column and find all the texts, images, icons, spaces, buttons, among others, we know who it belongs to. For example, this text editor belongs to the small email announcements. We close the column and we can use the first column.

We go to Advanced. We are going to deactivate it and activate it again. We note that it no longer leaves a space on both the left and the right; and if we scroll down a bit, we notice the difference with the next table, which is not yet optimized. Next is the inner section. We select it, and similarly, we go to Advanced, deactivate and activate the Margin and Padding again, and finally, the last column, we go to Advanced, set the Margin and Padding to zero, deactivate and activate again.

Now we see that it is completely flush, top, left, and right, at the same level as the border. Now, to leave a small space and differentiate the table, we are going to do the following: we are going to go to the inner section, and we are going to set the padding only to 15. We are going to see the difference here, 15—there it is!

Now we are going to continue with the discounts: the previous day’s price, the one that is crossed out, and the current price, the one being offered for the Little Plan service. We reduce the size a bit; we are going to set it to 30. We select the column; we are going to set the difference to 70 for 100%, and there it is! We also see that it leaves a space.

Here we see that the price is to the left; we have to center it. We will leave it at 70, and here, the dollar sign, we will leave the difference. We are going to set it to 30—done! So, we already see that it is centering towards the texts and the savings percentages and prices. Now here we are going to align it a little more to the center. We select the cost, and in Content, we select and set it to the middle, centered alignment. So we underline and set centered alignment—there it is!

In case we see that it doesn’t change to the right, it doesn’t change to the center, we recommend the following: we go to Advanced and update. We deactivate and activate the Margin and Padding again; it has to be zero for it to move.

We go with the next ones, which would be the plan details. We see that the icon is completely at the edge of the table. We are going to move it in a little more, just like the text. We select Advanced. We are going to give it a little more margin. We are going to deactivate and set it to 10 so that it moves a little to the right. So, it has a left margin of 10. The same with the others: Advanced, deactivate and set to 10.

So, we have the entire list with a left margin of 10: 500 customers, unlimited email sending, two form windows, limited email announcement campaigns, custom HTML option, segmentation, image gallery, RSS campaigns (which is the sending frequency), contains a captivating blog, includes analysis of the graphic report, includes three landing pages, and finally, 24/7 customer service.

Furthermore, we can improve the button in the following way, by adding a space at the bottom. We can duplicate this layer and we can add the button below. So, we select the spacer, right-click, duplicate, we duplicate, we see the button and above—there it is! Both spacers have 10 pixel units. We are going to set it to 25. 25 for the first one, and for the second one, we are going to set it to 25 too—done!

So, to conclude this optimize price table elementor for the first table (Little Plan), we are going to add a 30-pixel spacer at the top. So, we go to the Widgets section and place a Spacer. We select, drag, and drop.

After Optimization: Optimized Mobile Price Table in Elementor.
Source: Author’s Own Work, via Elementor.

We are going to set it to 30. We update and save. Here we have the template. Remember that we have been editing the “Monthly Email Announcement Prices” template, and this template—every template you create and design—generates a Shortcode. This is the code. We copy it and paste it into our page.

So, here we search for Prices, Email Announcement Prices, we edit. So here we have the edit screen. We open the Navigator, and in the Navigator, we open “Edit Content,” and here we are going to paste the Shortcode—there it is! This is the Shortcode. Officially, you have it this way.

If we want to include the Shortcode from scratch, we eliminate it. We go to Widget, Shortcode. We select, drag, and drop. Here we are going to include the Shortcode that we copied—there it is! We click Apply and close.

Final Results

We wait for it to load, and there it is. We switch to the mobile view mode—there is the mobile mode. And here we have the optimized view. Let’s look at a detail: when the customer opens their cell phone, they can see the logo, they can see the drop-down menu—very good!

In fact, the phone number and the “Write to Us” button are not visible because the space is reduced, which is why they are crossed out with diagonal lines in Mobile version. We have the header, which is already optimized, and we have the plans whose presentation we have improved.

We have the Monthly toggle button, and here we have Annual. Further down, the Mobile Price Table is now in order, centered, with prices, discount, plan detail. The button also leaves adequate space for the next table—very good! And the same with the last one, the Elastic Plan.

We have the FAQs, which are the popular questions or frequently asked questions posed by the user—questions and answers. The footer is also optimized. The Mobile Price Table is now in order, centered, with prices, discount, plan detail. That’s it, thank you, friends from Marieú Technology Corporation!