Themify Typewriter - WordPress Plugin
Themify Typewriter is a plugin designed for WordPress websites, offering a unique way to display text with captivating animation resembling typing on a typewriter. This feature enhances content dynamically, allowing users to customize animation speed, font styles, and other settings to match their website design. By integrating this plugin, users can improve visual appeal and engage visitors with eye-catching text animations. It is user-friendly and requires no coding knowledge to set up and use.

Plugin Features
With this plugin, website owners can effortlessly create attention-grabbing headlines, engaging storytelling elements, or interactive call-to-action sections. Its seamless integration with WordPress enables quick installation and activation for incorporating animated text effects into web pages. Themify Typewriter adds flair to creative portfolios, business websites, or personal blogs, setting content apart and leaving a lasting impression on site visitors. Its versatility and ease of use make it an excellent choice for enhancing online presence with animated text elements.
Furthermore, the customization options allow users to align animation effects with their brand identity and design preferences, providing full control over text presentation. From adjusting character appearance delays to selecting different animation styles, users can seamlessly integrate animated text with the overall site look and feel. This flexibility enhances visual storytelling and engages visitors dynamically, empowering users to create compelling textual content.
In addition to visual appeal, this plugin is optimized for performance, ensuring quick and smooth loading of animated text effects on all devices. Its lightweight design and efficient coding contribute to faster loading times, maintaining visitor engagement without delays. Whether accessed on desktops, tablets, or mobile devices, animated text created with this plugin retains its impact and functionality, delivering a consistent user experience across platforms.
In conclusion, this plugin is a valuable addition to any WordPress website seeking to enhance visual storytelling capabilities. By seamlessly incorporating animated text effects, users can elevate content aesthetics and create a memorable browsing experience. With a user-friendly interface, extensive customization options, and optimized performance, this plugin empowers website owners to unleash creativity and captivate audiences with captivating text animations. Elevate content presentation with this plugin and make your website truly stand out.
Guide to Setting Up and Using Themify Typewriter
Themify Typewriter is not meant to simply add a "nice text animation." It is best used to place a precise emphasis inside an existing WordPress layout: in the hero section, a services block, a benefits section, a promo area, or a short message above a button. This guide explains how to prepare the site, install the add-on, find the module in Themify Builder, configure the text strings, typing speed, highlighting, delays, and confirm that the effect does not get in the way of readability.
This guide is written for the point where the short product description has already been read and what you need next is a practical workflow. We will not repeat the product pitch. Instead, we will look at where the animation actually makes sense, why a loop needs more than one string, how to avoid layout jumps, what to check on mobile, how not to hurt performance or accessibility, and when a different tool would be the better choice.
An important detail about Themify Typewriter is that it is an add-on for Themify Builder, not a standalone universal block for the WordPress editor. That means the final result depends not only on the module itself, but also on how the Builder row is assembled, which HTML tag is selected, how many strings are added, how the delays and styles are configured, and whether the page conflicts with cache, minification, or custom CSS.
What the module does and where it is genuinely useful
Typewriter creates a typing-text effect: a static phrase can appear before the animated section, another phrase can come after it, and the middle section rotates through a list of text strings. According to the official product page, the module supports an unlimited number of texts, animation speed controls, font styling, and highlight styling. The documentation clarifies how it works: the Before Text field displays the text before the animated section, the Text field controls the strings that are typed and highlighted, and After Text is displayed after them.
In practice, this effect is useful when you want to show several variations of the same promise without overloading the hero section. For example, an agency might write "We build websites for" and rotate words like "cafes," "salons," "training businesses," and "stores." An education brand might show "A course for" and cycle through "beginners," "marketers," and "designers." A service company can present multiple focus areas without turning the headline into one long sentence.
The best use case for Themify Typewriter is a short phrase where one key idea changes. The plugin is much less effective when you need to animate long paragraphs, multi-line code, legal copy, a table, or an important instruction. The visitor should still understand the message while the animated part is being typed or erased.
Who this add-on is a good fit for
Themify Typewriter is worth considering for site owners using Themify, designers who already build pages with Themify Builder, and editors who need a manageable visual accent without wiring up a JavaScript library on their own. It is especially convenient when the entire layout is already built in Builder and you want to add the effect in the same interface: open the module, drag it into a row, fill in the fields, and save.
Another good use case is a landing page aimed at several audience segments. If you are presenting one product for different needs, rotating text helps avoid stacking four nearly identical headlines in a row. Even then, moderation matters: the effect should clarify the message, not become the only way to read important information.
When typed text is the wrong choice
This add-on may be unnecessary on pages where calm reading is the top priority: legal terms, knowledge base articles, long-form documentation, checkout flows, or medical and financial warnings. Animation attracts attention, and that is exactly why it can get in the way when the visitor came to find a specific answer quickly.
It is also not a good idea to use the effect in every other section. If a page already has a slider, counters, popups, and a typing headline all moving at once, attention gets scattered. For a good result, choose one main area where Typewriter genuinely helps explain the offer.
What to check before installation
Because Themify Typewriter works inside the Themify Builder ecosystem, preparation starts not with the add-on ZIP file but with checking the builder itself. Themify documentation clearly states that Builder Addons require Themify Builder and can be used either with a Themify theme or with the standalone Builder plugin. If Builder is not installed on the site, the module will not appear in the panel, and installing the add-on alone will not solve the problem.
Check three things: Themify Builder is installed and active, the page is actually being edited with Builder, and your account has permission to edit pages and manage plugins. If the site uses a Themify theme, you may not need a separate Builder plugin because the builder is built into the theme framework. If the site uses a third-party theme, use the standalone Themify Builder as your reference point.
Technical readiness
Before installing anything, it is a good idea to open a test or staging copy of the site. This is not just a formality. The Themify Builder changelog shows that newer versions have fixed conflicts with SEO plugins, lazy load, WooCommerce compatibility, WPML, forms, and different Builder modes. That is normal life for a visual builder, but on a live site any update and any new add-on should be tested before release.
- Make sure you have a recent backup or a test copy of the site.
- Confirm that the page can be edited in Themify Builder, not only in the standard block editor.
- Open the page where the effect will be used on both desktop and mobile so you understand the current layout behavior.
- If cache, CSS/JS combining, or deferred script loading are enabled, note the current settings so you can quickly roll back a questionable optimization.
- If the site is multilingual, decide in advance where different strings for different languages will be stored.
Practical check: start by creating a separate test page with one Builder row and one planned Typewriter block. If the effect works there but breaks on a complex homepage, the problem is almost certainly not the add-on installation but the layout environment on that specific page.
Content readiness
Before installation, draft a short set of strings. A good Typewriter block does not come from a random list of words. It needs a shared grammatical structure: the phrase before the animation, the changing part, and the phrase after the animation should read naturally in every combination. If one string requires different grammar, a different length, or a different meaning, it is better to rewrite the whole set.
A weak set: "We build websites for business, landing page, online store." A better set: "We build websites for cafes," "We build websites for salons," "We build websites for training businesses." In the first case, the changing words clash with the grammar. In the second, each line reads like a complete thought.
Installing the add-on and enabling it in Builder
Installing Themify Typewriter follows the standard WordPress plugin installation flow using a ZIP archive. Themify documentation describes the path through WP Admin > Plugins > Add New, the Upload Plugin button, choosing the ZIP file, clicking Install Now, and activating the plugin. If your browser automatically unpacked the archive, download the ZIP again as an archive, otherwise WordPress will reject a folder in place of a file.
After activation, do not look for a separate "Typewriter" menu item in the WordPress admin. According to the documentation, the module appears in the Themify Builder module panel under Addons and is available in both backend edit mode and frontend edit mode. This is an important distinction: the add-on is installed as a plugin, but used as a builder module.
What to do after activation
- Open the page or post where the effect should appear.
- Enable Themify Builder in backend or frontend mode.
- Open the module panel using the add-module button.
- Find the
Addonssection and theTypewritermodule. - Drag the module into the required row or column.
- Fill in the basic fields and save the Builder changes.
- Open the page outside edit mode and make sure the animation runs for a regular visitor.
If the module does not appear, do not blindly reinstall the add-on. First check whether Themify Builder is active, whether the user has the right permissions, whether you are looking in the Addons section, whether the admin panel cache is involved, and whether the browser shows JavaScript errors. Sometimes the problem is not the ZIP file at all, but the fact that the wrong page is being edited or Builder is not enabled for that post type.
Editing modes in Builder
Backend edit mode is more convenient when you need to assemble the page structure quickly and do not want to be distracted by visual effects. Frontend edit mode is better for seeing the real result because Builder provides a live preview on the public-facing side of the site. For Typewriter, I would start in backend mode so you can fill in the fields calmly, then check the final delays, line height, highlight color, and mobile appearance in the front-end editing view.
The Themify Builder documentation describes both modes: in backend mode, the user works inside the page or post editor; in frontend mode, Builder is enabled from the top bar and the layout is shown on the public side of the site. In practice, this pairing is useful: one mode for precision, the other for checking how the page actually feels.
Core Typewriter settings: text, tag, strings, and delays
The main setup does not start with speed, but with phrase structure. The module includes Module Title, Text Tag, Before Text, After Text, the main Text field, and the Add New Text button. The documentation specifically notes that cyclic animation requires more than one string: if you add only one text, the typing effect will play once.
That logic shapes the entire use case. Before Text and After Text should stay stable. The changing part inside Text should be roughly similar in length, or the container height should be planned in advance. The bigger the difference between strings, the higher the risk of layout shifts, especially if the block sits in the hero section next to buttons or an image.
The Text Tag field and heading semantics
Text Tag selects the HTML tag used for the text. In a hero section, it is tempting to choose a large headline tag, but it is important not to break the page structure. If the main H1 already exists in the theme or in the top section, do not create a second H1 just for the animation. In most cases, for Typewriter on a product page, service page, or landing page, h2, h3, or a regular text tag is enough, depending on where the block sits in the structure.
Practical rule: animated text should strengthen the meaning of the section, not break the heading hierarchy. If the block sits inside a "Services" section, it makes more sense to choose a tag that fits that section level. If Typewriter is used as a decorative clarification under the main headline, a regular text tag with a styled font size is usually the better choice.
Before Text, Text, and After Text
Split the phrase so only the most important part changes. For example:
-
Before Text: "We help launch". -
Text: "a landing page", "a catalog", "a service website". -
After Text: "without unnecessary complexity".
This kind of set works better than three completely different phrases because visitors understand the message structure faster. It also reduces the chance of jumping widths and makes it easier to keep the design stable. If the strings vary noticeably in length, check line wrapping on mobile and decide whether the longest options should be shortened.
Speed and delays
The documentation lists Highlight & Type Speed, Clear Delay, Type Delay, Highlight Delay, and Highlight Direction. These settings do not need to be pushed to the maximum. Typing that is too fast feels nervous, and typing that is too slow makes people wait for the meaning. For a typical landing page, start with a moderate speed, add a short pause before clearing, and check whether the visitor can read each string without effort.
If the effect is used in the hero section, the delays should act like a rhythm: typing, a short hold on the finished result, a clean highlight or clear action, then a move to the next string. If the block sits near a button, form, or menu, the animation should not keep pulling the eye away from the action.
Font styling and highlight styling
The official page mentions font styling and highlight styling controls. Use them not as a box of decorative tricks, but as a way to fit the effect into the overall design. The highlight color should contrast with the background without competing with the button. The font size should be large enough to read easily, but not so large that neighboring elements jump when the string changes.
If the theme uses global Themify Builder styles or CSS variables, keep the visual language consistent. Do not switch the animated part to a completely different font just because you can. It is usually better to emphasize it with color or a subtle highlight than to break the typography of the whole page.
How to build a working hero section with typed text
Let us look at a concrete scenario: a web studio wants to show that it works with several types of projects but does not want to overload the hero section with a list. The goal is to create a headline like "We build websites for ..." with a changing segment and a button below. This fits Themify Typewriter well because a short core idea changes while the rest of the block stays readable.
Goal and prep
We need a Themify Builder row with two areas: a text block on the left and a visual or button area on the right. Place Typewriter inside the text area. Before you start configuring it, prepare three or four strings with the same grammatical form: "expert blogs," "local service businesses," "online courses," and "small stores." Do not add ten options right away. The more strings you add, the longer the visitor waits before the intended message repeats.
Step-by-step build
- Create or open a test page and enable Themify Builder.
- Add a row with the required grid, for example a wide text column and a secondary column for a button, image, or short list of benefits.
- Drag
Typewriterfrom theAddonssection into the text column. - In
Before Text, enter the opening phrase: "We build websites for". - In
Text, add the first changing string, then useAdd New Textto add the remaining options. - In
After Text, add a short ending only if it is genuinely needed. If the phrase already feels complete, leave the field empty. - Choose a tag that matches the page structure, then set the size, color, line spacing, and highlight.
- Set a moderate speed and reasonable delays, save the module, and then save Builder.
A note on string length
If one string is twice as long as another, the hero section may change in height or width. This is especially noticeable when there is a button, illustration, or card next to it. In that case, you have three options: shorten the long string, move part of the meaning into the static text before or after the animation, or give the container a minimum height through a CSS class.
Try not to solve a content problem with styling alone. If the phrases are uneven in length and meaning, visitors will experience them as uneven too. Rewrite the set first, then add technical stabilization.
Quick takeaway from the scenario
A good Typewriter block is built around one simple logic: the static part sets the context, the changing part shows the options, the delays give enough reading time, and the styles support the overall design. If, after setup, you cannot read each combination out loud as a normal sentence, it is better to go back to the wording than to the colors.
Checking the result on the page
Testing is not just about answering "did the animation appear or not?" You need to confirm that Themify Typewriter works for a normal visitor, does not break heading structure, does not cause layout shifts, does not conflict with cache, and still makes sense on mobile. Check the result outside Builder edit mode, because the builder interface adds its own panels, scripts, and styles.
What should be visible on the public page
- The static part of the phrase appears immediately and does not disappear when the animated part changes.
- Each string from
Textis typed in the expected order or according to the expected logic. - If there is more than one string, the effect loops instead of stopping after the first display.
- The text highlight does not overlap neighboring elements or reduce contrast.
- Buttons, links, and navigation near the block remain clickable.
- The mobile version does not end up with an overly tall hero section because of line wrapping.
Checking structure and SEO
Animated text is often placed in a large headline, so check the page structure carefully. If the code ends up with multiple H1 tags while the theme already outputs the main heading, change the Text Tag. Search engines and users do not benefit from a second H1 created only for a visual effect.
Do not assume the animation will improve SEO by itself. It may increase engagement if it makes the hero section clearer, but the key meaning still needs to exist in the page's regular text content. If important information is available only inside a fast-changing string, some visitors will miss it.
Checking performance and cache
Themify Builder has its own caching system and generates layout styles. On sites that also use external optimization tools, there are cases where old CSS or JavaScript remains in cache after saving Builder. If everything works in edit mode but not for visitors, clear the Builder cache, the optimization plugin cache, the server cache, and the CDN cache if one is in use.
Do not permanently disable all optimizations. Test in a targeted way: temporarily turn off script combining or deferred loading, check Typewriter, then restore settings one by one. That helps you find the actual conflict instead of simply making the site slower.
Dynamic fields and reusing the block
The Typewriter documentation mentions support for Builder Pro Dynamic: when Builder Pro is active, a Dynamic toggle may appear on fields, and data can be pulled from post metadata, shortcodes, custom fields, and fields created with Post Type Builder or Advanced Custom Fields. This is not a required setup for every site, but it matters for catalogs, post templates, and pages where one layout is reused for different items.
Imagine a portfolio site where each project entry has a service type, niche, and main outcome. In a basic setup, the editor updates the strings manually in each Typewriter block. In a dynamic setup, some of that data can be pulled from fields if those fields are compatible with Dynamic. The documentation is honest about the limitation: some fields may not support it if the feature is unavailable or incompatible.
When dynamic content makes sense
Dynamic data is useful when you have a repeatable template and editors regularly create new entries. For example, in a case study template, you might show "We work with" and pull project niches from custom fields. That saves time and reduces the chance of forgetting to update the text in one of the blocks.
For a standard homepage, dynamic content is often unnecessary. It is usually better to hand-pick three or four strong strings, proofread them, check the grammar, and keep the set stable. Dynamic text can become unexpectedly long if an editor enters a value that was never intended for animation.
Testing a dynamic setup
If you use Dynamic, do not test only one page. Open several different entries: one with a short value, one with a long value, one with an empty field, and one with unusual characters. You need to know what the visitor will see if data is missing or too long for the effect. In some cases, it is better to display a regular static fallback text than an empty animation.
Do not add dynamic content just because it sounds advanced. For Typewriter, the priority is readable, controlled text. If dynamic data hurts the rhythm, keep the strings manual.
Phrase patterns: how to keep the effect from turning into noise
The most common weakness of Typewriter blocks is not technical, but editorial. The visitor sees motion but does not understand what the site is trying to say. That is why it helps to choose a phrase pattern before you start configuring the module. For Themify Typewriter, four models work especially well: audience, service, result, and status. Each model defines its own grammar and helps you avoid mixing incompatible strings.
The audience model
In this model, the static part answers "for whom," and the changing part lists audience segments. It works well for agencies, courses, services, local businesses, studios, and consultants. Example: "We build websites for" plus strings like "repair shops," "online schools," "medical centers," and "B2B teams." This kind of block immediately shows the breadth of use without forcing the visitor to read a long list.
The main risk is trying to list categories that do not belong together. If your strings include "small businesses," "beautiful landing pages," and "fast support," the set falls apart: one string describes an audience, another a service, and the third a result. Typewriter reads best when all options belong to the same category.
How to check the audience model
Write out the full phrase for each string and read it aloud. If every option answers the same question and sounds equally natural, the set works. If one string requires a different preposition or grammar, rewrite it. That is faster than trying to fix an awkward visual effect later with speed settings.
The service model
Here, the changing part describes the action or type of work: "We help" plus "launch a landing page," "build a catalog," "refresh a homepage," or "improve a lead form." This model works well in the hero section of a service page where you need to show the range of tasks you handle. It is stronger than the audience model when visitors already know who they are, but do not yet understand what work you actually do.
Do not make the strings too long. Typewriter should not become a scrolling technical brief. If a service needs more explanation, keep a short name in the animated part and move the details into regular text or cards below.
The result model
In this model, the animation shows what the visitor gets: "After setup, you get" plus "a clearer hero section," "a stable lead form," "a faster catalog," or "a cleaner service page." It works well in blocks below the opening screen, where the visitor already knows the offer and wants to understand the practical benefit.
The results should be verifiable. "More sales" sounds appealing, but it is not always honest and is not always supported by a single visual effect. "A clearer hero section" or "a shorter path to inquiry" is more modest, but also much closer to the real job Typewriter is doing.
The status model
Sometimes Typewriter is useful not for selling, but for explaining a process: "Project status:" plus "building the structure," "checking the mobile view," "configuring the form," or "publishing the page." This model works in portfolios, workflow presentations, or internal service pages. It shows sequence without overloading the block with a large diagram.
For status-based strings, delays matter even more. If the statuses fly by too quickly, they feel like decorative motion. It is better to use fewer strings and give each one a little more time on screen.
An editorial matrix for choosing strings
| Check | Good sign | What to fix |
|---|---|---|
| Single category | All strings describe an audience, service, result, or status. | Split different ideas into separate blocks or keep only one type of string. |
| Consistent grammar | Each string reads naturally with Before Text and After Text without grammatical changes. | Rewrite the static part or replace the string that does not fit. |
| Comparable length | The strings take up similar space and do not break mobile wrapping. | Shorten long options or move details into regular text. |
| Verifiable meaning | The phrase promises something the page actually explains or shows. | Remove overly broad promises and replace them with a concrete outcome. |
This matrix helps before you ever touch the settings. If a set of strings does not pass it on paper, it will not become better in Builder. Typewriter strengthens a clear idea well, but it does not hide weak copy.
Compatibility with the theme, mobile view, translations, and cache
Most problems with modules like this happen at the intersection of several systems: the theme sets large headings, Builder generates styles, cache combines scripts, translation tools change strings, and editors add text with different lengths. That is why configuring Themify Typewriter should include not just the module, but the surrounding environment.
Theme and typography
If the site runs on a Themify theme, Builder's visual language is usually more consistent out of the box. If you are using a third-party theme, check the inherited heading styles, line-height, margin, and font-weight. Sometimes Typewriter looks too large not because the module is configured badly, but because the theme applies an aggressive style to every H2 or H3.
In that case, do not edit the theme or plugin files. Assign a custom CSS class to the row, column, or module through the Builder interface and add a small adjustment in a safe place: the theme's custom CSS area, Builder's Custom CSS setting, or a child theme if the project already uses one.
Mobile view
Themify Builder includes responsive styling and preview modes for different devices. That matters even more for Typewriter because a short string on desktop can wrap to two lines on a phone. Check not only the width, but the height of the hero section. If the animation makes the hero too tall, shorten the strings or reduce the size only at the mobile breakpoint.
Translations and multilingual sites
If the site is translated with WPML, Polylang, or another tool, do not mix different languages in one string set. Each language needs its own grammar and length. The Themify Builder changelog shows that the developers have fixed various issues related to WPML and content detection inside nested Builder elements, so always check multilingual pages again after saving and updating.
Cache and script optimization
If the effect fails only for guests but works in admin mode, check cache first. Clear the Builder cache and external cache, then temporarily disable deferred script loading for the page. If Typewriter comes back to life after that, create an exception in the optimizer or reduce how aggressively scripts are combined. Do not leave the site without cache if the issue can be solved with a targeted fix.
Safe CSS stabilization for height
If strings with different lengths cause a small layout jump, you can assign a custom class to the Typewriter container, for example tw-hero-typewriter, and set a minimum height. This is not a core modification, does not require editing Themify files, and does not depend on internal add-on classes.
.tw-hero-typewriter {
min-height: 4.5rem;
}
.tw-hero-typewriter h2,
.tw-hero-typewriter h3,
.tw-hero-typewriter p {
line-height: 1.15;
margin-bottom: 0;
}
The check is simple: reload the page outside Builder, wait until all strings have rotated, and see whether the buttons, image, and next section stay in place. Rolling back is simple too: remove the class or the CSS snippet. If the jump is still significant, the real problem is the phrase length, and that is better solved through editing.
Saving, rolling back, and reusing a finished block
Once the Typewriter block is configured and tested, it is worth saving it in a way that keeps the next edit from starting at zero. Themify Builder supports saved layouts, import/export, revisions, and layout parts. That is especially useful for Typewriter because a good block includes not just text, but also the row, column, spacing, mobile styles, delays, and the context around the animation.
When duplicating the module is enough
If you need to repeat the effect on the same page, the easiest option is to duplicate the module or row and then change the strings. This works well on a landing page where several sections share a similar visual language but use different text. After duplicating, always check that the new section is not repeating the same string set and does not feel overly templated.
Do not build a page out of several Typewriter blocks in a row. Motion works as an accent only when it is used sparingly. If every section is animated, visitors stop reading the effect as a signal of importance.
When a Layout Part makes sense
Layout Parts in Themify Builder are useful for fragments that need to be reused in multiple places and updated centrally. If you have a small promo block with Typewriter that appears on several service pages, saving it as a layout part can save time. But this approach requires discipline: any change will affect every place where that layout part is used.
Before turning the block into a reusable part, make sure the text really fits all those pages. A universal Typewriter block often ends up too generic. In many cases, it is better to save not a finished block, but a starter version with the right spacing and styles, and then customize the strings on each page separately.
How to organize a safe rollback
Before major edits, save the current version of the page or use Builder revisions if they are part of your workflow. For smaller changes, it is enough to note the original string set, speed, delays, and CSS class. If it turns out after publishing that the animation hurts conversions or breaks the mobile view, you will be able to restore the static version quickly.
Safe rollback: keep a static version of the headline alongside the page. If Typewriter needs to be removed temporarily, replace the module with a regular text block that delivers the same meaning instead of leaving an empty gap.
How to hand the block off to an editor
If other people will edit the page, add a short internal note to the task or project documentation: where the module is located, which strings can be changed, which strings should not be made longer, which speed settings should stay untouched, and where to check the mobile view. This matters more than it seems. A month later, an editor may replace "online courses" with a six-word phrase, and the carefully tuned block will start jumping.
A good note does not need a technical lecture. It should list practical limits: no more than three or four strings, each kept to a short phrase, one meaning pattern per block, a check in a private window, and a check on a phone. That format reduces the risk of accidental breakage without getting in the way of normal editorial work.
Common issues and troubleshooting
Themify Typewriter does not have many settings of its own, but it runs inside a complex WordPress environment that includes Builder, the theme, cache, and user content. That is why troubleshooting is best done from simple to complex: first confirm that the module exists and saves properly, then check the public output, then mobile behavior, cache, conflicts, and logs.
The Typewriter module is not visible in the Builder panel
Symptom: the add-on is activated in the plugin list, but the Typewriter module does not appear under Addons in Themify Builder.
A likely cause is that Themify Builder is not active, the page is not being edited with Builder, the user is looking in the wrong panel section, or the add-on was installed incorrectly. Check whether the regular Builder opens, whether other add-ons are visible, and whether Themify Builder is active either as part of the theme or as the standalone plugin. If Builder is not working at all, start there rather than with Typewriter.
Fix: refresh the admin page, deactivate and reactivate the add-on, check user permissions, then create a clean test page. If the module appears on the test page, the issue is related to the specific layout or editing mode. If it does not appear anywhere, reinstall the ZIP through the standard WordPress interface and check whether any errors appear in the logs.
The animation plays once and stops
Symptom: the text is typed on page load, but it does not repeat in a loop. The documentation explains the key condition: the loop effect requires more than one text. A single text will be shown once.
Check how many items were added through Add New Text. If there is only one string, add a second or third one. If there are multiple strings but the loop still does not work, save the module, save the full Builder layout, clear cache, and check the public page outside admin mode.
The block jumps when the string changes
Symptom: the button, image, or next block shifts when Typewriter changes a word. The most common cause is strings of different lengths, line wrapping on mobile, line-height that is too tight, or no minimum height on the container.
Check every string one by one. If one of them is much longer than the others, shorten it or move part of the meaning into the static text. Then give the container a predictable line-height and min-height through a custom CSS class. If the jump happens only on a phone, adjust the mobile font size in responsive styling.
It works in Builder mode but not for site visitors
Symptom: the administrator sees the animation, but the effect does not start in a normal browser window. Likely causes include cache, minification, deferred JavaScript loading, or stale generated CSS.
Start by clearing the Themify Builder cache and the external cache. Then test the page in a private window. If that does not help, temporarily disable script combining and deferred loading for that page. Restore settings one by one so you can identify the exact conflict. Do not leave every optimization turned off if the problem comes down to one exception.
The text is hard to read or hurts accessibility
Symptom: the highlight is too bright, the cursor is distracting, the text disappears too quickly, or contrast against the background is weak. The cause is usually the combination of speed, color, and size.
Lower the speed only after checking the delays. In many cases, increasing the pause on the completed string is enough to let visitors read the message comfortably. Check contrast, avoid ultra-thin fonts on a light highlight, and do not place the animation over a busy image unless there is a clear background layer behind it.
The appearance changed after a Builder update
Symptom: the block looked stable before the update, but after updating the styles, line breaks, or behavior changed. The Themify Builder changelog shows that modules, styles, compatibility, and optimization are updated and fixed on a regular basis. That is exactly why visual pages should be checked after updates.
Fix: open a staging copy or backup, compare the module settings, clear cache, and check any custom CSS. If the problem is critical on the live site, temporarily disable the problematic block or replace it with static text until you find an exact fix. Do not edit the plugin files manually.
How to tell whether the effect is getting in the user's way
Typed text is easy to overvalue because during setup it feels lively and modern. But visitors do not evaluate the effect in isolation. They see the whole page, try to understand the offer, find the button, compare terms, or jump to the section they need. That is why you should judge not the beauty of the animation, but the clarity of the page after the animation is added.
Check the information load
Ask yourself a simple question: if the animation does not load, will the main point of the page still be clear? If the answer is "no," then too much meaning has been placed into a decorative layer. The static text around Typewriter should explain the offer, and the changing line should clarify, expand, or energize it.
Check the rhythm
Ask someone who did not set up the page to open it and say out loud what the site is offering. If they need to wait for all the strings to rotate before they understand the message, the animation is carrying too much weight. If they understand the offer immediately and the changing words only add nuance, the setup is working.
Check clickable actions
Animated text should not compete with the main button. If the eye keeps returning to the movement and the person misses Contact, Get Started, or another primary CTA, slow the effect down, reduce the highlight contrast, or move Typewriter lower than the first action.
The real measure of quality is not how many effects you use, but how quickly the visitor understands the page. If someone can tell within a few seconds what you offer and where to click next, Typewriter is doing its job.
FAQ for Themify Typewriter
Can I use Themify Typewriter without Themify Builder?
No. According to the documentation, Builder Addons require Themify Builder. The add-on is installed as a WordPress plugin, but the module itself appears inside the Themify Builder panel. If the site does not use Builder, choose a different tool for the block editor or another builder.
Why does the loop stop after the first typing pass?
Check how many strings are in the Text field. The documentation states that loop animation requires more than one text. A single string plays the effect only once.
Can I place Typewriter in the main page headline?
Technically, you can choose the HTML tag, but you should still watch the page structure. If the H1 is already output by the theme or template, use H2, H3, or a regular text tag instead. The animation should not create an unnecessary main heading.
What should I do if the block jumps when words change?
Start by shortening the strings and making their lengths more consistent. Then check mobile wrapping. If the shift is minor, assign a custom CSS class to the module or container and set a minimum height and line-height. Do not edit the plugin files.
Is this add-on suitable for a multilingual site?
Yes, but each language version should be checked separately. Do not copy the same string set across languages without editing, because length, grammar, and line breaks differ. If you use Builder Pro Dynamic or a translation plugin, test several pages and empty field values as well.
Will Themify Typewriter affect site speed?
By itself, a short text effect is usually not the main source of performance overhead, but the end result depends on the overall Themify Builder layout, cache, CSS/JS optimization, and other modules on the page. After setup, check the public page and cache behavior, especially if the effect fails to start for guests.
Can I insert HTML or a shortcode into Typewriter strings?
The Typewriter documentation clearly describes text fields and Dynamic support through Builder Pro, but you should not confidently assume support for arbitrary HTML in every string without testing the specific version and environment. For complex markup, it is better to use neighboring Builder modules and keep Typewriter limited to short text.
When is it better to skip the animation?
Skip the effect if it hides important information, makes the main button harder to notice, hurts readability on mobile, or forces the visitor to wait for the meaning. In those cases, a static headline and a short list of benefits will be more useful.
When Themify Typewriter is the right choice
Themify Typewriter is worth using when the site already runs on Themify Builder, you need one clean block with a rotating phrase, and the content can be expressed in short strings. It is not a universal tool for every kind of animation and not a replacement for strong copy, but it is a good way to highlight different segments, services, benefits, or use cases.
Before publishing, run through a short final checklist: install the add-on, find the module in Addons, add more than one string for the loop, choose the correct Text Tag, set the speed and delays, and check the public page, mobile view, cache, and absence of layout jumps. If everything is stable, the block is ready to move into the live page.
If you are ready to test the module on your own site, use the link on the product page: get the WordPress version. Test it on a copy or a separate page first, then move the finished block into the real layout.
The main takeaway is simple: the typing-text effect should help visitors understand the offer faster. If the page becomes clearer after setup, not noisier, Themify Typewriter is doing exactly what it should.


