How to Use the Guided Custom CSS

If you are a premium user, there will be a new options panel named Custom CSS in your Advanced Tab.

When you open it, you should see something like this:

Our Guided Custom CSS

Any CSS styles you enter here will only be applied to the current block you are editing. You won’t have to worry about your styles affecting unwanted places.

You might be wondering why we call this feature “guided”, this simply means that we’ve already laid out for you a list of CSS classes you’ll need in order to modify the block through CSS. You won’t have to dive into the block’s source to find out the CSS class names.

Just fill out the necessary areas with your own style rules.

Fill it up with your style rules.

After adding your custom CSS, the block should show your changes right away.

You don’t also have to worry about the empty CSS selectors, Stackable removes the unused ones so that we can keep your pages loading fast.

My Blocks Do Not Go Full-Width Properly

Your theme normally dictates how the contents are shown in your pages.

Sometimes, blocks may not show up in full-width properly. When this happens, most of the time things get fixed by using a full-width page template.

Themes usually provide this type of template. To see if this is the case, please see if your page attributes have something like this:

Check the “Document” tab in the Block Editor’s inspector.

If your theme doesn’t have a full-width page template, there are a few plugins that that provide this type of functionality.

Here’s a free one from the WordPress Plugin Directory called ​Fullwidth Templates for Any Theme & Page Builder (we are not affiliated with the plugin)

Your mileage may vary depending on your ​theme though, so if you find that this method doesn’t work, you can also manually create your own Full Page Template. ThemeIsle has a great article discussing how to do this.

Using Stackable Block Layouts

One of the unique features of Stackable is having the option of choosing between different layouts for each block. Learn more about the basics of Stackable layouts and how you can maximize the benefits of this very cool feature.

What are Layouts?

Layouts are the pre-set placement of different blocks elements for each block. You can think of layouts as the “base” to start you off in designing your blocks.

Here is a feature block with a basic layout. We’ve included an image to make it easier to visualize.

Feature Block Basic Layout

Description for this block. Use this space for describing your block.

How can I choose a layout?

Choosing the layout that would best fit your website is one of the first steps you will take in designing with Stackable, and it’s very easy.

Each Stackable block already comes with two layouts for free – basic and plain layouts. To choose your block layout, go to the Layout tab in the inspector and you can already choose the layout that you want to use.

Can I get more layout options?

If you want even more layout options than the basic and plain, Stackable Premium will let you choose from more than 120+ layout options across all Stackable blocks. Here are some premium layouts for the feature block:

Can I change the layout I originally chose?

Yes, you can always change the layout you’ve chosen even after inputting your block contents. To do this, just go back to the Layout tab and switch to the layout that you prefer.

Don’t worry if you’ve already designed your block extensively. You can always switch between block layouts with just one click without losing any of your content.

Let us know what else you want to learn about layouts and other Stackable features.

Want to engage more?

Join the Stackable Facebook Community.

Learn more about Stackable, engage with the Stackable team, and share interesting insights and with fellow Stackable users.

Be part of our community today.

How to Fix the Block Editor Error: “Updating failed. Error message: The response is not a valid JSON response”

How to Fix the Block Editor Error: “Updating failed. Error message: The response is not a valid JSON response”

This is a dreaded error that sometimes shows up after trying to update or publish a WordPress post or page.

When this error pops up, it’s a bit of a challenge to understand what’s going on since the error is so cryptic and doesn’t provide any concrete cause of the error.

Continue reading “How to Fix the Block Editor Error: “Updating failed. Error message: The response is not a valid JSON response””

What Happens If I Uninstall Stackable

If you’re using Stackable in your site and decided to stop using the plugin, the following things would happen:

1. The blocks would show an error

In the block editor, the Stackable blocks would show an error since the plugin that supplied the blocks aren’t available anymore.

This is the normal behavior across any block that gets uninstalled, but it just means that they become uneditable in the block editor.

The blocks themselves would still remain in your page’s content though, and if needed you can still edit them manually via Code Editor.

2. Some blocks would lose their styles in the frontend

Since Stackable was removed, the main stylesheet that supplies all the styles for our blocks won’t be loaded anymore. Some Stackable blocks would look a bit wonky since they’re going to be missing some essential styling.

Some Stackable blocks would somewhat continue to look fine though, like Button blocks and Icon List blocks. And your buttons should still jump to the link they’re pointing at.

3. Some blocks would stop working in the frontend

In the frontend, for some functional Stackable blocks such as the Accordion block, Video Popup block or the Expand block, they would stop working.

The accordions would remain open, the video popup won’t pop up anymore and the expand block won’t show the expanded text.

This would happen because the scripts that contain the functionality for those blocks won’t be loaded anymore.

Troubleshooting after Updating to Version 2

Updated December 1, 2019

After months and months of hard work, V2 is finally here! This update has changed the face of Stackable, and together with such a huge update comes the risk of some (minor) kinks that may temporarily affect blocks that were built with Version 1.

We’ve spent a considerable amount of time testing this latest version to make sure that it does not break anything on your published site. However, since some minor hiccups might occur, here are some troubleshooting guides on what to do just in case you do encounter a problem. We will update this post as more and more people upgrade to v2.

1. Everything looks broken in the frontend

If everything looks broken in your frontend after upgrading, please try out these solutions:

Solution 1

The styles being loaded in your frontend may still be the old styles from version 1.

  • Please try clearing or purging the caches created by your caching plugin (like W3 Total Cache or WP Super Cache), server-side caching solution (like SG Optimizer), or DNS caching (like CloudFlare).
  • If you have speed optimization or minification plugins that remove query var strings from files loaded; or minify and combine stylesheets, it’s possible that these may force your site to load cached copies of the old stylesheets. Please try clearing or purging their current files.
Solution 2
  • It’s possible that Stackable may have failed to load the backward compatibility styles. Please head over to your backend admin, then navigate to the “Stackable” menu. Once there, scroll to the very bottom and make sure that the “Load version 1 block stylesheet for backward compatibility” is checked.

For those who curious about how this works, this option is automatically checked if you upgraded from version 1. There are a lot of changes between version 1 and version 2, and in order to ensure fast loading speeds of your site, all the old styles have been separated into another stylesheet. This stylesheet is only needed if you use version 1 blocks.

2. Reusable blocks that have Stackable blocks look broken

After updating, and you’re using reusable blocks, there’s a chance that you may notice your reusable blocks to look broken.

Solution
  • When this happens, you may need to edit your reusable blocks and update them (even without changes) in order to trigger the blocks inside it to migrate to the new Stackable blocks.

Unfortunately, this needs to be done because the block editor doesn’t yet handle block updating in reusable blocks well.

3. Space between a Separator Block and another block

After updating, you might see a space between a Stackable Separator block and an adjacent block.

When this happens, you have 2 possible solutions depending on the adjacent block you are using:

Solution 1
  • If the adjacent block you are using is another Stackable block, you can turn on the built-in separator for the adjacent block (yes, all Stackable blocks now have built-in separators), and remove the stand-alone Stackable separator block
Solution 2
  • You can also adjust the margin in the Stackable Separator block you are already using so the space will no longer appear in the front end

4. Some Text Colors Inside Containers might Reset when Editing Existing Pages

While all text colors are maintained in the published view, you might encounter some text colors reverting back to the theme colors. This will not automatically happen and might occur only after you edit your existing page.

Solution
  • In case this happens, it would be safest to manually change the text colors to your preferred colors

5. Block Error Prompt

While this is not expected to happen, in editing mode you might encounter the prompt “This block contains unexpected or invalid content”.

Solution 1
  • If this happens, the first step is to attempt recovery. You can do this by clicking on the three dots within the error prompt panel and clicking “attempt block recovery”.
Solution 2
  • While your block showed errors in the block editor, there’s a chance that your block would still look great in the frontend. So a possible solution would also be to leave the block as-is with an error.
Solution 3
  • When all else fails, you can recreate your block. The best thing about this solution is you get to explore the different new features of the block.

6. Other Errors after Updating to V2

If there are any other errors that you encounter after updating to V2 that cannot be solved by the troubleshooting tips above, please let us know. Our support team is always ready to help you out!

You can also report any bugs on the Stackable Git Hub Repository.

Want to engage more?

Join the Stackable Facebook Community.

Learn more about Stackable, engage with the Stackable team, and share interesting insights and with fellow Stackable users.

Be part of our community today.

How to Transfer Billing to your Client

If you have created a website for your client and you have purchased Stackable Premium on their behalf, you can transfer the ownership and billing of Stackable Premium to your client.

You can easily transfer billing to your client by doing these steps:

1. Login your Stackable account through this link: https://wpstackable.com/account/

2. Navigate to Renewals and Billings, then select your plan and click on “Cancel Auto-Renew“.

1.png.webp

3. Navigate to Websites and click on your client’s website in the list. Then click on “Transfer Billing to Client“.

2.png.webp

4. Afterwards, a popup will open which will notify your client of the transfer. Input your client’s name and email. An email with a direct purchase link will be sent to your client so they can associate their billing with Stackable Premium while keeping the license and management on your end. You will get a notification when this will happen.

Will My Staging Site Count as a Site in My License?

Nope, your staging site, local development site, or tests site won’t be counted as a site in your license.

If you are under a single site license, it should be fine to use your license key in another another site for staging/testing/development purposes as long as the domain matches these:

Here are the Top-level domains that are considered as dev or staging:

  • *.dev
  • *.dev.cc (DesktopServer)
  • *.test
  • *.local
  • *.staging
  • *.example
  • *.invalid
  • *.myftpupload.com (GoDaddy)
  • *.cloudwaysapps.com (Cloudways)
  • *.wpsandbox.pro (WPSandbox)
  • *.ngrok.io (tunneling)

And here are the Subdomains that are considered as dev or staging:

  • local.*
  • dev.*
  • test.*
  • stage.*
  • staging.*
  • stagingN.* (SiteGround; N is an unsigned int)
  • *.wpengine.com (WP Engine)
  • dev-*.pantheonsite.io (Pantheon)
  • test-*.pantheonsite.io (Pantheon)
  • staging-*.kinsta.com (Kinsta)
  • staging-*.kinsta.cloud (Kinsta)
  • *.mystagingwebsite.com (Pressable)

And for localhost:

  • localhost:* (any port)

Branding Guidelines

Main Logos

Icon with name

Icon only

Icons with border

For use against backgrounds including gradient and images when the main logo tends to get drowned out against the background.

Secondary Logo

Icon with name (White)

Icon only (White)

For use in black and white displays or printing

Colors and Typography

Typeface

Main Colors

Gradient Colors

Other Colors (Logo Icon)