FAQs Archive - Porto Documentation https://www.portotheme.com/wordpress/porto/documentation/faq/ Proto Documentation site Sun, 03 Oct 2021 01:51:46 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 Bootstrap 5 Migration Guide https://www.portotheme.com/wordpress/porto/documentation/faq/how-to-migrate-bootstrap-5/ Tue, 14 Sep 2021 09:51:26 +0000 https://www.portotheme.com/wordpress/porto/documentation/?post_type=faq&p=1473 The post Bootstrap 5 Migration Guide appeared first on Porto Documentation.

]]>

Porto 6.2.0 uses Bootstrap 5 instead of Bootstrap 4.  If you find some broken pages, you don’t need to worry about that. Mainly two reasons might cause that kind of broken styles. You’d better read this article first.

1. Enhanced Grid System

  • .xxl Class – Bootstrap’s grid system can now adapt across all six default breakpoints. The six default grid class are as follow: xs, sm, md, lg, xl and xxl. The class .xxl will handle breakpoints that are beyond the regular bootstrap media query breakpoint which has a minimum dimension of 1400px grid breakpoint in a 12 column layout.
  • Gutter Classes – If you are planning on controlling the horizontal gutter widths, you need to use the .gx-* class. Alternatively, you can use the .gy-* class to control the vertical gutter widths.
  • Style Expression Modification – If you come across some broken styles in width determination process, check style expression first. In Bootstrap 5, you could use flex: 0 0 auto; width: xx%;, while flex: 0 0 xx%; max-width: xx%; is used in Bootstrap 4.

2. Helper Classes

  • float-left > float-start
  • float-right > float-end
  • text-left > text-start
  • text-right > text-end
  • rounded-left > rounded-start
  • rounded-right > rounded-end
  • border-left > border-start
  • border-right > border-end
  • dropdown-menu-left > dropdown-menu-start
  • dropdown-menu-right > dropdown-menu-end
  • ml-0 > ms-0
  • ml-1 > ms-1
  • ml-2 > ms-2
  • ml-3 > ms-3
  • ml-4 > ms-4
  • ml-5 > ms-5
  • ml-auto > ms-auto
  • mr-0 > me-0
  • mr-1 > me-1
  • mr-2 > me-2
  • mr-3 > me-3
  • mr-4 > me-4
  • mr-5 > me-5
  • mr-auto > me-auto
  • pl-0 > ps-0
  • pl-1 > ps-1
  • pl-2 > ps-2
  • pl-3 > ps-3
  • pl-4 > ps-4
  • pl-5 > ps-5
  • pr-0 > pr-0
  • pr-1 > pe-1
  • pr-2 > pe-2
  • pr-3 > pe-3
  • pr-4 > pe-4
  • pr-5 > pe-5

If you think this article is not enough, please go to How to Migrate from Bootstrap Version 4 to 5.

The post Bootstrap 5 Migration Guide appeared first on Porto Documentation.

]]>
How to fix Whatsapp Number and clicking to take to Whatsapp Chat on Header and Footer https://www.portotheme.com/wordpress/porto/documentation/faq/how-to-fix-whatsapp-number-and-clicking-to-take-to-whatsapp-chat-on-header-and-footer/ Wed, 07 Apr 2021 08:43:25 +0000 https://www.portotheme.com/wordpress/porto/documentation/?post_type=faq&p=1188 The post How to fix Whatsapp Number and clicking to take to Whatsapp Chat on Header and Footer appeared first on Porto Documentation.

]]>

First of all Whatsapp icon is only appears on mobile devices if you want to show it on all devices like PC, Laptop, Tablets, and Mobiles then simply go to the Dashboard >> Porto >> Theme Options >> Skin >> Custom CSS and then paste this code .share-whatsapp{display:block !important;} in Custom CSS section as showing below:

Now to fix the Whatsapp icon issue on header, when user click on Whatsapp icon it will let user to chat on Whatsapp. Simply go to your site cPanel and open the layout.php file under wp-content/themes/porto/inc/functions now when the file opens, scroll down to the page at line number 2141 there you see Anchor tag, simply copy this code

<a <?php echo porto_filter_output( $nofollow ); ?> class=”share-whatsapp” style=”display:none” href=”https://wa.me/+923413160974/?text=<?php echo esc_attr( $porto_settings[‘header-social-whatsapp’] ) ?>” data-action=”share/whatsapp/share” title=”<?phpesc_attr_e( ‘WhatsApp’, ‘porto’ ); ?>”><?phpesc_html_e( ‘WhatsApp’, ‘porto’ ); ?></a>

and replace it, then change the number in this code like the image below.

And check back your site after clear the browser cache.

Now for the Footer do the same thing as we do for header but for footer the file is different, you can find the footer file in the wp-content/plugins/porto-functionality/widgets then open follow_us.php and replace the code of line number 184 with this code

<a href=”https://wa.me/+923164354407/?text=<?php echo esc_attr( $whatsapp ) ?>” <?php echo $nofollow_escaped; ?> target=”_blank” <?php echo $tooltip_escaped; ?>title=”<?phpesc_attr_e( ‘WhatsApp’, ‘porto-functionality’ ); ?>” class=”share-whatsapp” style=”display:none”><?phpesc_html_e( ‘WhatsApp’, ‘porto-functionality’ ); ?></a>

and change your phone number in this code like in the below image.

And check back your site after clear the browser cache.

Hope this helps 🙂
Stay Safe & Healthy…

Regard’s P-Themes.

The post How to fix Whatsapp Number and clicking to take to Whatsapp Chat on Header and Footer appeared first on Porto Documentation.

]]>
How to create Custom Header using Porto Template Builder and with WP Bakery Page Builder https://www.portotheme.com/wordpress/porto/documentation/faq/how-to-create-custom-header-using-porto-template-builder-and-with-wp-bakery-page-builder/ Thu, 01 Apr 2021 07:59:14 +0000 https://www.portotheme.com/wordpress/porto/documentation/?post_type=faq&p=1185 The post How to create Custom Header using Porto Template Builder and with WP Bakery Page Builder appeared first on Porto Documentation.

]]>

Please watch and follow the instructions shown in the below-listed video. It shows how to create a Custom Header using Porto Template Builder with WP Bakery Page Builder.

Hope this helps 🙂
Stay Safe & Healthy…

Regard’s P-Themes.

The post How to create Custom Header using Porto Template Builder and with WP Bakery Page Builder appeared first on Porto Documentation.

]]>
How to create Custom Product Archive Page using Porto Template Builder and with WP Bakery Page Builder https://www.portotheme.com/wordpress/porto/documentation/faq/how-to-create-custom-product-archive-page-using-porto-template-builder-and-with-wp-bakery-page-builder/ Wed, 31 Mar 2021 14:31:20 +0000 https://www.portotheme.com/wordpress/porto/documentation/?post_type=faq&p=1184 The post How to create Custom Product Archive Page using Porto Template Builder and with WP Bakery Page Builder appeared first on Porto Documentation.

]]>

Please watch and follow the instructions shown in the below-listed video. It shows how to create a Custom Product Archive page using Porto Template Builder with WP Bakery Page Builder.

Hope this helps 🙂
Stay Safe & Healthy…

Regard’s P-Themes.

The post How to create Custom Product Archive Page using Porto Template Builder and with WP Bakery Page Builder appeared first on Porto Documentation.

]]>
How to create Custom Footer using Porto Template Builder and with WP Bakery Page Builder https://www.portotheme.com/wordpress/porto/documentation/faq/how-to-create-custom-footer-using-porto-template-builder-and-with-wp-bakery-page-builder/ Thu, 25 Mar 2021 11:15:13 +0000 https://www.portotheme.com/wordpress/porto/documentation/?post_type=faq&p=1181 The post How to create Custom Footer using Porto Template Builder and with WP Bakery Page Builder appeared first on Porto Documentation.

]]>

Please watch and follow the instructions shown in the below video. It shows how to create a Custom Footer using Porto Template Builder with WP Bakery Page Builder.

Hope this helps 🙂
Stay Safe & Healthy…

Regard’s P-Themes.

The post How to create Custom Footer using Porto Template Builder and with WP Bakery Page Builder appeared first on Porto Documentation.

]]>
How to create Custom Product Layout using Porto Template Builder and with WP Bakery Page Builder https://www.portotheme.com/wordpress/porto/documentation/faq/how-to-create-custom-product-layout-using-porto-template-builder-and-with-wp-bakery-page-builder/ Sat, 20 Mar 2021 08:22:40 +0000 https://www.portotheme.com/wordpress/porto/documentation/?post_type=faq&p=1180 The post How to create Custom Product Layout using Porto Template Builder and with WP Bakery Page Builder appeared first on Porto Documentation.

]]>

Please watch and follow the instructions in below video that shows how to create a Custom Product Layout using Porto Template Builder with WP Bakery Page Builder.

Hope this helps 🙂
Stay Safe & Healthy…

Regard’s P-Themes.

The post How to create Custom Product Layout using Porto Template Builder and with WP Bakery Page Builder appeared first on Porto Documentation.

]]>
Site Distort because of Mixed Content/SSL Certificate issue https://www.portotheme.com/wordpress/porto/documentation/faq/site-distort-because-of-mixed-content-ssl-certificate-issue/ Mon, 22 Feb 2021 14:30:21 +0000 https://www.portotheme.com/wordpress/porto/documentation/?post_type=faq&p=1173 The mixed content or SSL issue occurs due to having a secure connection and it does not load the style sheet of the website. Please try to change the website link from HTTP TO HTTPS For this open your site WP Admin Dashboard and Navigate to Setting >> General and change the WordPress website URL […]

The post Site Distort because of Mixed Content/SSL Certificate issue appeared first on Porto Documentation.

]]>
The mixed content or SSL issue occurs due to having a secure connection and it does not load the style sheet of the website.

Please try to change the website link from HTTP TO HTTPS

For this open your site WP Admin Dashboard and Navigate to Setting >> General and change the WordPress website URL from http:// yourwebiste.com to https://yourwebiste.com

OR

Second way to change this is, Navigate to Dashboard >> Plugins >> Add New.

Search for Really simple SSL plugin in the new plugin search directory and install and activate it.

After Installation click on the top of dashboard you will see the notification showing below and you have to click on go ahead button and finally check back your site after removing the browser cache.

Hope this helps 🙂
Stay Safe & Healthy…

Regard’s P-Themes.

The post Site Distort because of Mixed Content/SSL Certificate issue appeared first on Porto Documentation.

]]>
Home Page Newsletter Pop Up/Modal Box Background Image and Text changing or Removing the Pop Up/Modal Box Using Visual Composer Page Builder. https://www.portotheme.com/wordpress/porto/documentation/faq/home-page-newsletter-pop-up-modal-box-background-image-and-text-changing-or-removing-the-pop-up-modal-box-using-visual-composer-page-builder/ Sat, 20 Feb 2021 13:21:14 +0000 https://www.portotheme.com/wordpress/porto/documentation/?post_type=faq&p=1166 The post Home Page Newsletter Pop Up/Modal Box Background Image and Text changing or Removing the Pop Up/Modal Box Using Visual Composer Page Builder. appeared first on Porto Documentation.

]]>

Firstly, this Modal Pop-Up is coming from Modal Box which is present on the Homepage. So, you need to first edit your Home page. Here’s how to do it:

After editing the home page, turn on the navigator, after that find the Modal Dialog Box into it:

If you want to change the content, then you have to go to navigator Porto >> Template Builder >> ALL and find and edit the particular block and change anything from there as you like:

And if you simply want to delete this, you have to delete the Modal Dialog Box element:

Hope this helps 🙂
Stay Safe & Healthy…

Regard’s P-Themes.

The post Home Page Newsletter Pop Up/Modal Box Background Image and Text changing or Removing the Pop Up/Modal Box Using Visual Composer Page Builder. appeared first on Porto Documentation.

]]>
Home Page Newsletter Pop Up/Modal Box Background Image and Text changing or Removing the Pop Up/Modal Box Using Elementor Page Builder. https://www.portotheme.com/wordpress/porto/documentation/faq/home-page-newsletter-pop-up-modal-box-background-image-and-text-changing-or-removing-the-pop-up-modal-box-using-elementor-page-builder/ Sat, 13 Feb 2021 11:47:52 +0000 https://www.portotheme.com/wordpress/porto/documentation/?post_type=faq&p=1159 The post Home Page Newsletter Pop Up/Modal Box Background Image and Text changing or Removing the Pop Up/Modal Box Using Elementor Page Builder. appeared first on Porto Documentation.

]]>

Firstly, this Modal Pop-Up is coming from Modal Box which is present on the Homepage. So, you need to first edit your Home page. Here’s how to do it:

After the edit page and turn ON the navigator, now find the Modal Dialog Box  and edit it, you will find the Shortcode of the Block set under it:

If you want to change the content then you have to go to Porto >> Template Builder >> ALL or Blocks and find and edit the particular block and change anything as you like:

And if you simply want to delete this, you have to delete the Modal Dialog Box element:

Hope this helps 🙂
Stay Safe & Healthy…

Regard’s P-Themes.

The post Home Page Newsletter Pop Up/Modal Box Background Image and Text changing or Removing the Pop Up/Modal Box Using Elementor Page Builder. appeared first on Porto Documentation.

]]>
Home Newsletter Pop Up/Modal Box Background Image and Text changing or Removing the Pop Up/Modal Box Using WPBakery Page Builder. https://www.portotheme.com/wordpress/porto/documentation/faq/home-newsletter-pop-up-modal-box-background-image-and-text-changing-or-removing-the-pop-up-modal-box-using-wpbakery-page-builder/ Thu, 11 Feb 2021 10:34:04 +0000 https://www.portotheme.com/wordpress/porto/documentation/?post_type=faq&p=1147 The post Home Newsletter Pop Up/Modal Box Background Image and Text changing or Removing the Pop Up/Modal Box Using WPBakery Page Builder. appeared first on Porto Documentation.

]]>

Firstly, this Modal Pop-Up is coming from Modal Box which is present on the Homepage. So, you need to first edit your Home page. Here’s how to do it:

Then you’ll find the editor window in-front of you. Click on Backend Editor, like shown in this image:

On the editor window, after scrolling down a bit, you’ll find Porto Modal Box. Please click on the Pencil icon,  then, you’ll find the Widget Setting window. There you’ll find the Block Name named as Newsletter Popup. Like this:

Now, to change the Block Settings, you need to go to the Dashboard >> Porto >> Template Builder >> Newsletter Popup >> Edit like the below image:

After click on “Edit” a new page will be open like below image:

In order to change the background image, simply click on the “edit row” icon and go to “Design tab”  and then scroll down the image section, choose the image, save settings like the below:

For changing the text simply click on the “edit” icon, click on “General” , and enter the text in the “text box” like the below image:

For removing the popup/modal simply go to the Dashboard >> Pages >> All Pages >> Home Page >> Edit like in the below image:

After click on “edit” a new page will be opened. Please scroll down the page at the “Porto Modal Box” section, then the section looks like the below image:

Simply click on the “edit row” icon, choose “General” , scroll down in the box at the “Disable row” and simply “Disable it” , save settings. See below image:

Hope this helps 🙂
Stay Safe & Healthy…

Regard’s P-Themes.

The post Home Newsletter Pop Up/Modal Box Background Image and Text changing or Removing the Pop Up/Modal Box Using WPBakery Page Builder. appeared first on Porto Documentation.

]]>