Afghanistan

Angola

Albania

United Arab Emirates

Argentina

Armenia

French Southern and Antarctic Lands

Australia

Austria

Azerbaijan

Burundi

Belgium

Benin

Burkina Faso

Bangladesh

Bulgaria

The Bahamas

Bosnia and Herzegovina

Belarus

Belize

Bolivia

Brazil

Brunei

Bhutan

Botswana

Central African Republic

Canada

Switzerland

Chile

China

Ivory Coast

Cameroon

Democratic Republic of the Congo

Republic of the Congo

Colombia

Costa Rica

Cuba

Northern Cyprus

Cyprus

Czech Republic

Germany

Djibouti

Denmark

Dominican Republic

Algeria

Ecuador

Egypt

Eritrea

Spain

Estonia

Ethiopia

Finland

Fiji

Falkland Islands

France

Gabon

Georgia

Ghana

Guinea

Gambia

Guinea Bissau

Equatorial Guinea

Greece

Greenland

Guatemala

Guyana

Honduras

Croatia

Haiti

Hungary

Indonesia

India

Ireland

Iran

Iraq

Iceland

Israel

Italy

Jamaica

Jordan

Japan

Kazakhstan

Kenya

Kyrgyzstan

Cambodia

Kosovo

Kuwait

Laos

Lebanon

Liberia

Libya

Sri Lanka

Lesotho

Lithuania

Luxembourg

Latvia

Morocco

Moldova

Madagascar

United States

We built the website for the client on WordPress. 

Burns and Wilcox

Web Development

We designed and built the www.dat.com website. 

The Learning Experience is the largest operator of daycare centers in the US. We designed and built this site on WordPress. 

The Learning Experience

Bulls Watchlist provides industry leading insights on the best stock options and crypto trade picks that give your investments the edge they need.

Exemplifi built the subscription billing platform for them that include e-commerce, payments, and text alerts. 

Bulls Watchlist

Graphic Design

Creative Strategy

Many Educational institutions recognize that kids today learn faster with immersive and hands-on experiences. At Exemplifi we recently launched a site for FOSS, a K-8 STEM Program offering solutions focusing on providing high quality science programs and materials. The site was built on WordPress and launched on the WPEngine and done with one of our agency partners.

FOSS

We designed and launched the website for Fast Radius. A cloud based manufacturing services provider.

Fast Radius

The go-to resource for endometriosis, a chronic and painful disease. We built this on the Adobe Experience Manager platform. 


AbbVie

The nation’s leading provider of public transportation contracting and management services. This site was built on Sitefinity. 

First Transit

HART provides convenient, affordable public transportation options tailored to Hillsborough County in Florida.
We built this site on Kentico

HART

Korea, Republic Of

The global website for FILA was built on Drupal. 


FILA

This amazing site for VANS lets you build your own shoes. The site was built in Adobe Experience Manager. 

Vans

Experiential Marketing

We built this Educational site for educating patients on value-based healthcare.
The site was built with WordPress.

Blue Cross

Cellebrite's digital intelligence platform enables forensic investigators to capture insights in today’s complex, digital world. We designed and built this site on WordPress. 

Cellebrite

A miracle drug for spinal muscular atrophy that is also very expensive. The site educates patients on how to get reimbursed by insurance.

Novartis

We recently launched two sites for Akcea Therapeutics, one for patients and one for healthcare providers, for their recently FDA approved drug, Tegsedi. This was built on WordPress, deployed on the WPEngine platform and has deep integrations into the Salesforce Marketing Cloud. 

Ackea Therapeutics

Epiq supports 90% of the top global law firms and half of the Fortune 100 in making and implementing better data- and technology-driven legal and business decisions.

We built their website on Kentico. 

Epiq Global

Exemplifi is a leading enterprise website development firm headquartered in Palo Alto. Today’s most innovative government agencies and businesses trust us to build and manage their websites. We are experts in industry-leading digital experience platforms such as Adobe Experience Manager, Sitecore, Drupal, WordPress, and others. 

Extraordinarily adept with powerful content management products, our teams emphasize robust website engineering standards, DevOps, and WebOps practices that result in increased uptime, security, SEO quality, performance, and compliance with accessibility standards. In addition, we deliver efficient and knowledgeable 24/7 support to our client teams via email, chat, or phone.

Our clients are mid to large enterprises - 90% of whom clients retain us to manage their websites after we’ve finished their projects. And because we prioritize designing a website that’s easy to manage, new content can be seamlessly published and updated, keeping the site dynamic.

We built a website that combines the #frontend powers of #nextjs and #backend strengths of #strapi. Here is a deeper look...

https://t.co/L0uTbVuLFo

Exemplifi

#Webflow is the leading #nocode platform on which companies build their enterprise websites. We did an analysis of the top webflow translation tools - #Weglot and #Polyflow. We compare their strengths, weaknesses, price points, and ease of use.

https://t.co/m4SxGf3BIZ

We are excited to announce that we designed and launched the website for the San Joaquin Regional Rail Commission (https://t.co/HsgQZI8Odv). They provide complete rail connectivity across the CA tri-valley. 

The website is built on WordPress.

#SJRRC #wordpress #websitedesign

We recently migrated a website from Solr 3 to Solr 8 in Drupal 9 on the Pantheon platform. Here's a complete guide to help you do the same. 

#SolR #Pantheon #Drupal #websitemigration

https://t.co/sVDjdOhev2

Nowadays, every website needs to be secure and protected and ensure user data is safe and un-hackable.Our team has worked extensively on these issues and here are 7 website security practices that help secure your data.

https://t.co/202fVqG1DF

#WebsiteDevelopment #DataSecurity

Twitter

Exemplifi on Twitter

We built a website that combines the #frontend powers of #nextjs and #backend strengths of #strapi. Here is a deeper look...

https://enterprise.exemplifi.io/3Xh3IH7

#Webflow is one of the leading global #nocode platforms on which companies build their enterprise websites. We recently did an analysis of the top webflow translation tools - #Weglot and #Polyflow. We compare their strengths, weaknesses, price points, automation, and ease of use. If you're using Webflow, you don't want to miss this!

https://enterprise.exemplifi.io/3XdSiTQ

Exemplifi is excited to announce that we designed and launched the website for a major rail transit provider in California, the San Joaquin Regional Rail Commission (sjrrc.com). They provide complete rail connectivity across the Californian tri-valley. 

The website is built on WordPress, with features including scheduling, event / alert updates, mobile responsiveness and more that helps to fulfill the transportational needs of the regional community.

#SJRRC #wordpress #websitedesign

We recently migrated a website from Solr 3 to Solr 8 in Drupal 9 on the Pantheon platform. Here's a complete guide to help you do the same. 

#SolR #Pantheon #Drupal #websitemigration



Nowadays, every website needs to be secure, protected and ensure user data is safe and un-hackable. Our team has worked extensively on these issues and here are 7 website security practices that help secure your data.

#websitedevelopment #websecurity #datasecurity

Facebook

Exemplifi on Facebook

We built a website that combines the frontend powers of Nextjs and backend strengths of strapi. Here is a deeper look...

Webflow is one of the leading global nocode platforms on which companies build their enterprise websites. We recently did an analysis of the top webflow translation tools - Weglot and Polyflow. We compare their strengths, weaknesses, price points, automation, and ease of use. If you're using Webflow, you don't want to miss this!

Exemplifi is excited to announce that we designed and launched the website for a major rail transit provider in California, the San Joaquin Regional Rail Commission (sjrrc.com). They provide complete rail connectivity across the Californian tri-valley. 

The website is built on WordPress, with features including scheduling, event / alert updates, mobile responsiveness and more that helps to fulfill the transportational needs of the regional community.

We all know what a CMS ( content management system ) is but what about Headless CMS? Here is a quick introduction to the future of website development and design using a headless CMS platform

We are excited to have been selected as The Web Excellence Award Winner within the transportation category! #webdevelopment

GoogleBusiness

Exemplifi on Google Business

<figure><img alt="" src="https://cdn-images-1.medium.com/max/735/0*MJ4oCW-9hsxcL_B_.png" /></figure>‍Website is the flag bearer of every brand in the digital world. A website is responsible for representing the brand’s values and ideals and is used to form a connection with the consumer base or visitors. In the modern digital world, you will come across a vibrant range of websites that ooze with creativity, visuals, fun integrations, and layouts. The digital revolution has ushered a new era of website development which wasn’t possible before.But unfortunately, a few websites need to catch up on modern trends, mostly official government websites. It’s fair to say that keeping a constant eye on their website is the least of all concerns for a government wing. Still, when your website is supposed to instill deep reliability among the population, it shouldn’t be overlooked.There are plenty of factors to opt for a government website redesign, with aesthetic appeal and technical performance being the most important. These factors affect the overall user experience and help them positively perceive the government.<h3>Problems With Government Websites</h3>But before we learn how to design a government website, we must learn WHY a government website needs a redesign. After completing a government website analysis, one would come across numerous issues that negatively affect the user experience. It could be either down to an unimpressive design or technical performance like page speed or website weight.Some of the most common concerns of a government website are such as:Straight off the bat, the most common problem with a government website is that it is too bland to look at. You might notice a need for a more cohesive structure and clean layout by how cluttered the onsite content is aligned. The website doesn’t contain that overall aesthetic appeal that would leave the user having a positive experience while scrolling the website. The lack of aesthetic appeal is down to not using the right colors representing the brand or a confusing layout that might overwhelm any visitor.The biggest complaint about a government website is that the content barely gets regular updates. It’s not surprising to find information uploaded nearly a decade ago still up on the website. This could cause confusion among the public, who are trying to find some vital information, and negatively paint the government office. It is necessary that the website content is updated regularly as it forms an essential trust factor among the users.Another case that arises from the lack of maintenance of government websites is that they start to show technical issues like slow speed, broken links, and miscellaneous errors. Search engines like Google constantly roll out new updates that prompt web developers to follow suit and accordingly make website changes. However, this is not the case with government websites as they rarely go through regular maintenance; thus, they start having technical errors in the long run. These technical issues can be eliminated by opting for SEO-related practices that optimize the website according to the search engine algorithm.One of the primary issues with government websites is that they are more government official-centric than people-centric. They are developed keeping in mind that they are to be used primarily by government officers. By not taking a more public-centric approach to layout and navigation, the website could be more apparent to the general public, where searching for even a tiny amount of information could be time-consuming. It is crucial for websites, especially government websites, to maintain a clean and minimalistic layout to provide easy navigation for the users.<h3>Tips To Redesign A Government Website</h3>While opting for a government website redesign, you might wonder where to start and what to prioritize. Just what exactly needs to be done to modernize a government website to create a positive user experience? Let us elucidate each critical tip to consider while revamping a government website.Colors are the ultimate representation of a brand identity. Government websites make the mistake of keeping their layout with dull and plain colors that don’t necessarily create an aesthetic appeal. For a specific government office or service website, one should represent the appropriate colors that ultimately define the office’s identity. The right colors on the right webpage always make a soothing impression on every visitor who comes across it. Not only that but colors are also the utmost representation of trust &amp; reliability that every government website should yearn for.The technical performance of a website is down to plenty of factors. The main focus of a website’s performance is down to its page load speed. People like fast websites; it positively affects the user experience and could be frustrating. For government websites, slow page speed could jeopardize the process if a user is trying to commute for some official documentation or other kinds of services. Page load speed is down to the website being too heavy on content or documentation that needs to be optimized accordingly. To improve the overall technical performance of a government website, it is recommended to opt for SEO (Search Engine Optimization) practices that help optimize a website to perform best according to the search engine algorithm.A website either contains content or images. One of the worst early mistakes made during a government website development is uploading images in their default file type and size. Images files take longer to load on the browser, and heavy files could affect the page load speed, thus affecting the overall performance. It is crucial that each image is resized to optimal dimensions before they are uploaded on the website. Larger image files should always be compressed to small sizes in formats like JPG or PNG. Compressing is essential as images must always be small enough to improve the technical performance but good enough to retain the quality.The best-looking websites are different from the ones that are overflowing with an unnecessary layout but are those that keep their structure simple and minimalistic. Government websites are usually cluttered with content and design, making navigation extremely confusing and time-consuming for users. Each government website must maintain a simple and clean layout that makes navigation easy and fast for the user. When a user is searching for a particular piece of information, the website must always provide them with easy and quick navigation to the desired location they are looking for.Broken links or 404 errors are hyperlinks that end up dead due to a relocation of address or an invalid URL. Another case of lack of maintenance is broken links are more common on government websites. That is because while updating a piece of information or service on the website, they overlook replacing the previous URL with the new one, thus resulting in a dead hyperlink. Broken links affect the website’s performance and, more importantly, must be clarified for the users. Nowadays, the internet is full of prominent software tools that help detect each broken link on a website and eliminate them permanently.During the earlier stages of a government website development, they are created to only be accessible on a single device or system, like a desktop browser. But the advancement of technology has made the internet accessible to many devices, mainly mobile phones. Mobile phones consist of <a href="https://explodingtopics.com/blog/mobile-internet-traffic">59% of overall internet traffic</a> among all devices. Optimizing a website is one of the most widely implemented modern digital trends that each brand makes confident of. Unfortunately, government websites overlook the importance of being mobile optimized; therefore, their performance is significantly degraded on mobile phones or other devices. One of the most people-centric steps for the government office is optimizing its website for an ideal mobile version, as it will likely receive most of its traffic on mobile devices.<figure><img alt="" src="https://cdn-images-1.medium.com/max/728/0*gYMho0P8Ytn7vJBH.png" /></figure><h3>Revamp Any Government Website To Modern Standards With Exemplifi!</h3>The days of boring government websites are long gone; the digital revolution has shown new innovative ways for brand website development, and government websites can be included!At Exemplifi, we offer our clients end-to-end <a href="https://www.exemplifi.io/platform/website-redesign-and-migration-service">website development and redesign services</a> where we help develop a visually-excellent website with optimal performance that represents the best of our client and help them improve their consumer relationship. We have long-term professional expertise in building websites for brands in different industry sectors.<a href="https://www.exemplifi.io/">Exemplifi</a> can help paint your government website in a limelight that was never possible before! Our experts will perfectly idealize your requirements and user base to help develop a website that can land the utmost reliability of trust among your users. We will create a website that is fast, accessible, SEO-friendly, mobile-optimized, and cost-effective and that is not only up to date with modern standards but YOUR standards as well.Contact our team today and learn how we can help you design the ideal website for you!Originally published at <a href="https://www.exemplifi.io/insights/why-do-government-websites-need-a-redesign-with-modern-standards">https://www.exemplifi.io</a>.<img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=179df3a0a0e5" width="1" height="1" alt="">

Stories by Exemplifi on Medium

Why Do Government Websites Need A Redesign With Modern Standards?

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*6JIGRmiNIbwzgZU9.png" /></figure>‍‍Drupal SearchAPI Facets is a powerful module for Drupal 8 that allows you to create a dynamic, faceted search with just a few clicks. In this tutorial, we will show you how to customize Drupal SearchAPI Facets without AJAX. It’s also going to guide readers through the process of customizing Drupal’s SearchAPI facets and will introduce some new techniques (hacks) for tweaking Facet items through Drupal/Facets API, Twig templating, and JavaScript.We will start by exploring the default Drupal SearchAPI Facets configuration and behavior, then go over how to customize the facets, and finally, we will explore some absorbing ways of customizing it through JavaScript.<h3>How to create SearchAPI Facets in 5 Minutes</h3>Drupal SearchAPI Facets are used to provide search results in the form of facets. Some of the most common reasons for using faceted search are:<ul><li>It can be used to segment results into different categories, such as price and availability.</li><li>It can be used to find specific items within a category or subcategory.</li><li>It can be used for filtering content by date, author, or other criteria.</li><li>It can also be used for sorting and ranking content based on popularity and relevance.</li></ul>Offering a rich array of options, a Faceted search can enhance the entire user search experience and is a great way to let users narrow down their search results. For the sake of simplicity, we’ve set up our instance to use the default search provider service in Search API. For production sites, Apache Solr is recommended. Beginning with:<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*stXURgyBMEIRK7lS.png" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*vuqBnNFfXUU4DBCM.png" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/857/0*KFwkQVmhy9YTu7u2.png" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*bOy-b2ydBFhevNj2.png" /></figure>Hop over to the View tab and manually build the index if it’s still pending. The SearchAPI is now ready to accept Faceted search which we will configure on the Facets configuration page. Before that, there is one more missing piece of the puzzle — A View that works on the SearchAPI Index. A View acts as a proxy between exposed Facets and fetching search results from the SearchAPI index.<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*sdih0f_p54m4cp8w.png" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*nEk6uSCJeyUW4609.png" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/745/0*p2PspTeKbUZmOeCl.png" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*VkzRa8cRivyOaDC-.png" /></figure><h3>Customizing the Drupal SearchAPI Facets with JavaScript</h3>Informally this is quite the opposite of what SearchAPI and FacetAPI offer out-of-the-box. A Google search on “AJAX with Facets”, or “Post request with Facet” is sure to surprise you. You’ll find dozens of active discussions among Drupal developers to implement AJAX in Facets.Incidentally, FacetAPI defaults to a URL processor that works over GET requests, which makes a lot of sense when building progressive search results ie. one facet is always dependent on the other. The limitations of “GET” requests (8 KB approx), and the complexity of AJAX POST requests coil up these feature requests ending up with numerous patches which are risky and not production-ready yet.These are a few of the feature implementations that were made possible:<ol><li>Prevent page reload on Facet selection (requires storage on the client-side = sessionStorage)</li><li>Maintain a stack of selected and removed facets.</li><li>Allow users to select multiple facets and submit them simultaneously (risky and unpredictable).</li><li>Clear out storage (sessionStorage) for each Facet, or all of them altogether.</li></ol>Making changes to default Drupal JavaScript behavior is next. This was done with a bit of JavaScript as the Facets module binds a JavaScript event on facet items on click and on change events (depending on which widget type you select).FYI Reynolds is the namespace under which we’re wrapping up all the functions, yeah, there could be another way of putting this using Drupal.behaviors which is the right way to do it. Anyhow, it works, and there’s more explaining of what each of the functions would do. So let’s dive into them:<ol><li>Reynolds.facetStorageSetOrCreate(); creates an empty storage or returns it</li><li>Reynolds.findFacetByKey(facetKey) would find a facet by its key or id</li><li>Reynolds.removeFacetByKey(facetKey); would remove a facet from storage</li><li>_.set(Reynolds.facetsData, facetKey, facetIdent); will merge storage entries JSON object using underscore.js</li></ol>For this to work, you’ll also need a Facet hook function in your .theme file:This additional step just adds some data attributes for our reference in JavaScript.These helper functions control the click behavior with additional checks like does a facet exists or does the sessionStorage exists, and consequently the removal of a facet item based on its key. Now comes the submission part — as we’ve maintained the selections in the sessionStorage JSON object it’s relatively easy to form a submit query:Finally, this little snippet gathers all the selected facets, converts them into proper valid facet query parameters, and redirects to the current path with query parameters. To simplify just call the Reynolds.hookFacetSubmit(); function on the page ready or window load event and you’re all set.<h3>What about Facet summaries?</h3>Most of the time, you’ll need to show your selected facets as summaries and/or allow users to remove them for convenience. This will also require some JavaScript, which is easier with the functionality that is already implemented. All you need is to handle the click event on summaries as below:And call the function Reynolds.hookFacetSummaryRemoval(); on page load or window load event. It’s not the most robust or comprehensive solution, yet gets you closer to customizing facets without using AJAX. On an endnote, you’re not restricted to this approach, it might strike as a starting point for a full AJAX implementation. A live implementation can be found here:<a href="https://www.reynoldsbrands.com/recipes">https://www.reynoldsbrands.com/recipes</a>If you’d like to get the code for the scripts involved please feel free to contact us at exemplifi.io and follow us on LinkedIn and Facebook.Originally published at <a href="https://www.exemplifi.io/insights/a-step-by-step-tutorial-to-customize-drupal-searchapi-facets-without-ajax">https://www.exemplifi.io</a>.<img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=c6a5282255f0" width="1" height="1" alt="">

A Step-by-Step Tutorial to Customize Drupal SearchAPI Facets without AJAX

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*jERndmxd34tQQyQ7.png" /></figure>‍In an <a href="https://www.exemplifi.io/insights/launching-a-multilingual-site-on-webflow">earlier</a> post, we elaborated on the various approaches that we evaluated to launch an internationalized site on Webflow. We described how we settled on the final approach of using Weglot. In this post, we will delve into the details of how to configure Weglot and elaborate on some tricky aspects of launching the website with it.<h3>Getting started with Weglot</h3>‍After you purchase the Weglot pricing package that is best for your needs (it is generally based on the number of words you need to get translated), you will be guided through the setup process. Generally speaking, you have two options: Javascript and Subdomains. For Javascript, it is a quick and easy integration — simply copy-paste a short Javascript code in your website and it takes 5 minutes to install and doesn’t require any coding knowledge. For subdomains, your translated pages will be on subdomains (like fr.mysite.com). It can take 15 minutes to install and requires you to add DNS record entries. This integration is better for SEO as you have a dedicated URL for each language.In our project, we selected an advanced approach that was a hybrid of “Javascript” and “Subdomains”. In particular, the customer wanted a subfolder approach rather than subdomains. They didn’t want domains like fr.moloco.com or zh.moloco.com. Rather they wanted folders like moloco.com/fr or moloco.com/zh. To achieve this, we had to leverage a new capability of Weglot. An important note: The subfolder approach works only for the real domain, and not the free domain provided by Webflow for the development environment. So, to test the folders, you have to configure Weglot to point to the Webflow environment.These steps are outlined below. First, create a project:<figure><img alt="" src="https://cdn-images-1.medium.com/max/512/0*4sY-l317LJ5wpWTx.png" /></figure>Click on Use Javascript Integration<figure><img alt="" src="https://cdn-images-1.medium.com/max/512/0*mFz04j1np_rhNF5N.png" /></figure>Than add your languages<figure><img alt="" src="https://cdn-images-1.medium.com/max/512/0*Cm7gVStN_49nW-1j.png" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/512/0*0GAu13IAI9NhbbEU.png" /></figure>After you are done, copy the JS code and paste into your website header.<figure><img alt="" src="https://cdn-images-1.medium.com/max/512/0*RP06gNim8y2D4xMW.png" /></figure>Immediately, you can start seeing the Weglot language switcher on the bottom left (which is the default design).<figure><img alt="" src="https://cdn-images-1.medium.com/max/197/0*rt5tmmZ37nR_0Wfi.png" /></figure><h3>Implementing Translations in Weglot</h3>‍Click on the “Translations” tab and you’ll see all the languages that you selected during setup. Here you will also see the number of translated words for each language.‍<figure><img alt="" src="https://cdn-images-1.medium.com/max/512/0*rPzLj7RJpNUCsE0j.png" /></figure>‍In the URLs Tab, you can find a complete list of pages for your website. Should you notice that any particular pages are missing, you can manually add them.<ul><li>Go to the bottom of the page and click on the Missing URL link.</li><li>It will scan your website again and provide you a list of page URLs which haven’t been added.</li><li>You can also select URLs and add to the translation.</li></ul><figure><img alt="" src="https://cdn-images-1.medium.com/max/512/0*wCpgEotpduJuVOxY.png" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/512/0*dEHQnIwamndXQOKN.png" /></figure>‍To manually add a URL to the translations:<ul><li>In the browser, go to your website and open the URL that is not translated</li><li>Change languages from the weglot language switcher at the page bottom</li><li>Go back to the URL tab in Weglot and search for this URL</li><li>It will now show up</li></ul><figure><img alt="" src="https://cdn-images-1.medium.com/max/512/0*-pD_iSumtK9LbNYt.png" /></figure>‍A few other features in Weglot:<ul><li>Glossary: If you want to exclude some branded words from translations, you can use the Glossary option. We can set up based on language as well.</li><li>Dynamic Elements: Sometimes weglot can’t detect a few blocks or dynamic elements for translation so this can help us to translate using css selectors.</li></ul><h3>Custom Designing your Language Switcher</h3>‍The customer wanted to customize the language switcher to make it look like below:<figure><img alt="" src="https://cdn-images-1.medium.com/max/512/0*I8NDRSvjO8FIDCac.png" /></figure>To achieve this, we had to first configure the JS as shown below:<figure><img alt="" src="https://cdn-images-1.medium.com/max/512/0*kb_iFyLxSDo3Ef1R.png" /></figure>As you can see, there are several options available:<ul><li>Customize the display language name, flag..etc</li><li>Create custom css to implement based on our unique design</li><li>We can also update language switcher appearance such as language name changes, flag changes…etc</li></ul>Additional design options are shown below:<figure><img alt="" src="https://cdn-images-1.medium.com/max/512/0*X-KtPCRUpL4IBQIn.png" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/505/0*5Oc0PN9NOYtpgClH.png" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/512/0*sxA56qQBLrFCUzQu.png" /></figure>Below is the custom CSS that we designed for the language switcher design:<figure><img alt="" src="https://cdn-images-1.medium.com/max/641/0*-Jg3OydGcCHT6p-z.png" /></figure>‍When the site is ready to launch, you can start these activities. The first set of activities is on the Weglot side:Change the main domain URL to point to the real website URL and make sure to select “subdirectories” as an option.<figure><img alt="" src="https://cdn-images-1.medium.com/max/512/0*RMe2C_HX6ZM7J2sk.png" /></figure>At this point, you will get two suggested CNAME records. In the next section, we will show you how to setup these up in your domain registrar. When that is done, you will get a green checkbox indicating that the setup is working fine.<figure><img alt="" src="https://cdn-images-1.medium.com/max/512/0*282HQePEpfdwU2AI.png" /></figure>When you are done, the final step looks like this:<figure><img alt="" src="https://cdn-images-1.medium.com/max/512/0*9u7wLm6CTQO-kGBY.png" /></figure>From the domain registrar side, you have to add the two CNAME records that you got from Weglot as shown below:<figure><img alt="" src="https://cdn-images-1.medium.com/max/512/0*FEmpUL0RZ7avlBS6.png" /></figure>Note: W e have to replace webflow www CNAME record in Domain registrar with weglot www CNAME so weglot will take care of www redirect.<h3>Important Hreflang Checks and Webflow Canonical URL Settings</h3>‍When launching a multilingual site, we have to be very careful on the SEO front because Google can easily consider the content to be duplicates and downgrade your site’s SEO ranking.There are two things to do to avoid this: Setup Canonical URLs correctly in Webflow and also do Hreflang checks on Weglot.To setup the Canonical URLs, go to the SEO settings tab in Webflow and establish the Global Canonical URL:<figure><img alt="" src="https://cdn-images-1.medium.com/max/512/0*reR8GKQpsJQDktgD.png" /></figure>To make sure the Hreflang settings are working properly, use the <a href="https://www.hreflangs.com/">https://www.hreflangs.com</a>/ tool as shown below.<figure><img alt="" src="https://cdn-images-1.medium.com/max/512/0*ucHWk1mUyG8TnKhf.png" /></figure><h3>Summary</h3>‍Building multilingual sites is the need of the hour if you want to showcase your business to a diverse audience base. In this article, we’ve highlighted how you can simplify the task of setting up a multilingual website using the Weglot addon for Webflow. With Weglot, we were able to provide our client the multilingual solution they needed and at the same time enhance customer experience for users of their website.In case you missed it, here is the 1st part of our series on <a href="https://www.exemplifi.io/insights/launching-a-multilingual-site-on-webflow">Launching a Multilingual site on Webflow</a>If you liked this insight and want more updates, we’d love for you to join us on Linkedin at <a href="https://www.facebook.com/ExemplifiSites/">Exemplifi</a>, Facebook at <a href="https://www.facebook.com/ExemplifiSites/">ExemplifiSites</a> or Twitter at <a href="https://twitter.com/exemplifisites">ExemplifiSites</a>.Originally published at <a href="https://www.exemplifi.io/insights/launching-a-multilingual-site-on-webflow-with-weglot">https://www.exemplifi.io</a>.<img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=b86b8a8dbe6a" width="1" height="1" alt="">

Launching a Multilingual Site on Webflow with Weglot

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*AssxB0EbCY0FUm2L.jpg" /></figure>‍One of the biggest problem that plagues Webflow developers is not being able to have multiple team members work in real time on their Webflow builds. Here is our solution to help solve it.<h3>The Challenge with Simultaneous Development in Webflow</h3>As a developer of enterprise websites, we work with mid to large enterprises to build their websites rapidly. We started work with a client that had purchased the Enterprise License Plan of Webflow. The objective was to rebuild their redesigned website within 6–8 weeks. This necessitated a large development effort that comprised the following team:<ul><li>2 Front-End Architects</li><li>2 Back-End Developers</li><li>1 QA</li><li>1 DevOps and SEO-Focused Engineer</li><li>1 Project Manager</li></ul>‍With such a large team, it was imperative that the development team be able to work and build things simultaneously within the Webflow development environment. However, this is not feasible in Webflow currently due to their product constraints.‍When the first developer logs into the environment as a designer, they are able to work without constraints.<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*zcem2IrGqMw5968o.png" /></figure>‍However, when the next developer logs into the environment, they are severely constrained and will not be able to do any parallel development. They are limited to only editing content.<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*GtdS6ARiHzf1ovBh.png" /></figure>‍This causes a huge bottleneck whereby only one developer is productive at any point in time. This would mean that the project timeline would be stretched out by at least three-fold. Clearly this was unacceptable to the client and would have a massive impact on the project margins as well.‍<h3>Our Process-Based Solution</h3>To circumvent the Webflow product constraints, we came up with a process-based solution.‍<h3>Setting up the multiple environments</h3>The first step was to create a unique environment for each developer on the team, while designating a particular instance as the main stage environment. See image below<figure><img alt="" src="https://cdn-images-1.medium.com/max/740/0*fvEDG-ZnpqD1U4TI.png" /></figure>‍As you can see, there are several instances named after the developers (Sai, Venkat, Sridhar etc). The “EN instance was designated to be the primary staging environment. Fortunately, the client had purchased the Enterprise Webflow License, so there were no additional costs to procuring these multiple development environments.‍<h3>The Development and QA Workflow</h3>‍During the day, each developer would work on their “local instance” as described earlier. There would be one developer however, that would work on the main staging environment — depending upon the criticality of the tasks for the day. (More on this later) Simultaneously, a content editor would also be able to work on the main staging environment, because Webflow permits this.<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*_0tCwqYhJ8f4bW3L.png" /></figure>At the end of the work day, we would execute the following steps:<ul><li>We take a backup of the main environment</li><li>Each developer manually merges their work for the day into the main environment. This would be done sequentially, so as to avoid code conflicts.</li><li>The exact details of the merges (styles, assets, pages, symbols, collection entries etc) are dealt with in the next section.</li><li>After the merges are completed, we would publish to the domains</li><li>The QA team would then be able to start testing them.</li></ul>‍At the beginning of the next day, we would execute the following steps (see image below):<ul><li>Take backups of each local instance</li><li>Duplicate the main environment into the local instance (thereby overriding the entirety of the local instance) This step ensures that each local instance gets the entirety of the work done the previous day.</li></ul><figure><img alt="" src="https://cdn-images-1.medium.com/max/977/0*28HcwrCBrkG21M1w.png" /></figure><a href="https://enterprise.exemplifi.io/3KCwsUp">https://enterprise.exemplifi.io/3KCwsUp</a>‍This workflow succeeded in achieving the following objectives:<ul><li>Every developer was fully productive during the work day</li><li>There was a marginal overhead (1 hour per developer per day) involving in merging code</li><li>The QA team was productive because they worked with daily code pushes</li><li>The DevOps team was able to execute this workflow with &lt; 30 minutes of effort daily</li><li>All bottlenecks were removed</li></ul>‍<h3>Detailed Workflow for Managing Specific Webflow Components</h3><h3>Styles: Creating New and Editing them</h3>The Style panel, located in the Designer, is where you can control and style every element in your project. Whether you want to change an element’s layout, background color, or typography — you can do it all in the Style panel.‍<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*bEJw2lpXP6C0PNre.png" /></figure>‍<ul><li>For example in local instance, the above screenshot Bg-Blue-Dark class is being applied for background color and PY-6o is for padding-top and bottom</li><li>To merge this section in to the main Development instance we have to right click on the particular element or section and click on copy like in the below screenshot</li></ul><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*1BojcRhnItkeNP8u.png" /></figure>‍<h3>Symbols: Creating New and Editing them</h3>Symbols allow you to turn elements and their child elements into a reusable layout — update and edit Symbols in a single place to avoid revising each recurring layout individually.<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*pTNb1VjNO08Aa3J8.png" /></figure>‍<ul><li>For example, there is a number counter section a user might want to use in different places with a different text</li><li>When a user right clicks on the particular element/section you will get an option to create a symbol as shown in below screenshot</li></ul><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*ePml5mFrjRBbSp4v.png" /></figure>‍<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*gaL_ZqCt0AwzXDtz.png" /></figure>‍To make a symbol with overridable fields, the user has to right click on gear/settings icon on right side of the designer panel and click on link to text field like shown in below screenshot<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*NoAX2OwGKMqnOMDm.png" /></figure><ul><li>To merge Symbol in to the main Development instance we have to right click on the particular element or section and click on copy</li><li>Note: Symbols can’t be migrated to main/dev instance, though if we copy it as symbol it won’t be copied as symbol, it will unlink and migrated as normal element/symbol</li><li>While merging the Symbols though it will be unlinked into the main/dev instance, we have to watch out on duplicate classes. In this case, we have to delete the duplicate class and assign the right class to it.</li></ul>‍<h3>Pages: Creating New and Editing them</h3>The Pages panel shows you the structure of your website: the pages and folders that house these pages. Here, you can perform a variety of operations such as creating and organizing pages and folders and changing page settings.<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*MKpOktBCxoYRjLo7.png" /></figure><ul><li>Developer creates a new page in the Pages panel by clicking the Create new page icon and organizes the structure by placing sections/symbols/elements.</li><li>Developer has an option to create folders and put pages under it, for example products and solutions folders as shown in the below screenshot</li></ul><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*BBG_Jewws5OzqeQK.png" /></figure>‍<h3>Collection Entries</h3>‍Collection items are database records in a Collection, like a single blog post, an author, or a product.<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*sK1vBEVOaVkazWmR.jpg" /></figure><ul><li>While migrating the collection list from the local instance to the main, the dynamic data tends to unbind. This can be a very time consuming process to redo again and again. Hence the developer creates the collection entries directly in the main instance which helps save valuable team effort.</li><li>When a <a href="https://www.exemplifi.io/insights/a-webflow-widget-to-display-filter-and-style-data-from-multiple-collections">collection list is created in Webflow,</a> for example Blogs ( screenshot below ) , it locks the source list. If we want to add more items to the list, we would need to first unbind the list and create a new one for re-usability.</li></ul><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*QL6vXQmM2XcRc2gk.jpg" /></figure>‍<h3>Assets: Creating New and Editing them</h3>Upload and manage all your website’s assets in the Webflow Designer.<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*_AShztvAC_SEKKxj.jpg" /></figure>‍<ul><li>When the developer copies any symbol/element from the local to the main instance, all of the assets are automatically copied over aswell. Which saves a lot of time.</li><li>We can then easily create folders and organsie the asset library.</li></ul><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*trxWoxVlytaPaiBh.png" /></figure>‍<h3>Summary</h3>For teams to simultaneously work on Webflow can be tricky. In this article we have shared our strategy and solution for large teams to collaboratively develop a Webflow website incorporating styles, collections, symbol, pages and assets. What would earlier be a sequential process of development can now be a converted in a parallel development model on Webflow allowing for real time collaboration.Originally published at <a href="https://www.exemplifi.io/insights/simultaneous-development-in-a-single-webflow-website">https://www.exemplifi.io</a>.<img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=fb7940e29a4f" width="1" height="1" alt="">

Simultaneous Development in a Single Webflow Website

<figure><img alt="" src="https://cdn-images-1.medium.com/max/512/0*73mL_-C8DKyz7GGT.jpg" /></figure><h3>Introduction</h3>Webflow is one of the most popular website builders that helps companies create a stunning digital presence with ease and minimal technical efforts. They are spearheading the no-code movement and as a Webflow partner, we work closely with Webflow to help enhance and grow the experience for users that use the platform. One of our clients wanted a webflow widget to help solve the problem of filtering and displaying displaying data from multiple collections. Here’s how we did it.‍<h3>The Client Problem</h3>‍The client needed a section that looked like below:<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*Osgsceb-a84zpfw4.png" /></figure>‍This section had the following functionality:<ul><li>It pulls data from four different collections: Blogs, R&amp;D, Case Studies and Events</li><li>We then filter by a flag called “Featured” on each of these collections</li><li>Finally, we sort the data — latest first — and display the Featured content across all these four collections.</li></ul>‍To support this, we modeled all the collections in Webflow:<figure><img alt="" src="https://cdn-images-1.medium.com/max/439/0*nQRzJuYdP7Ifofvl.png" /></figure>At this stage, we ran into several limitations within the Webflow platform that prevented us from building the section as described above. In the next section, we elaborate on these limitations.‍<h3>Webflow Limitations</h3>The core challenge with Webflow is that a “Collections List” widget can connect to only a single collection.‍<figure><img alt="" src="https://cdn-images-1.medium.com/max/598/0*UsRkIMsWCVWVQd0_.png" /></figure>‍<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*mThzlC0ZDkkaqsG4.png" /></figure>What this means is that at the outset, it is not possible to create a Collection List that gathers data from all the four collections: Blogs, R&amp;D, Case Studies and Events.‍For a single collection, we can apply filter such as “Featured Flag is On”<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*114DNo__ddcVGHAv.png" /></figure>However, we are still limited because we cannot get data from all collections and then filter them in a single go.‍<h3>Our Solution Overview</h3>To achieve our client objectives and circumvent the Webflow limitations, we designed a solution that did the following:<ol><li>Made API calls to and got the data from all the four collections</li><li>Leveraged a VueJS based front-end solution to filter and sort this data</li><li>Applied the desired styling within Vue</li><li>Wrapped all of this functionality and incorporated into a Webflow Symbol that could be reused by the client.</li></ol>‍The high-level architecture is shown below:<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*CoUK7SiX212Oa-cG.png" /></figure>‍<h3>Solution Details : Getting data from the Webflow Collections API</h3><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*VsWacq1ah7JSKrtV.png" /></figure>‍<h3>Vue App</h3>‍The first step is to initialize a basic <a href="https://www.exemplifi.io/insights/how-we-built-a-careers-website-on-wordpress-with-vue-js-and-greenhouse">VueJS</a> app. Then we instantiate the needed methods to fetch data as well as format it.‍<pre>var app = new Vue({ el: &#39;#app&#39;, data: { message: &#39;Multi Collection&#39;, items: [] }, methods: { }, created: function() { } })</pre>‍<h3>Connect with Webflow API</h3>‍We do not recommend calling the Webflow CMS APIs directly from Vue, as it is a frontend framework and this can result in security issues if we call the APIs directly. To circumvent this, we used <a href="https://autocode.com/">Autocode</a> — although you can do this in many different ways — which is an automated API management tool. (screenshot below)<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*aVXEDPt0-ZNWa1DN.png" /></figure>‍In Autocode we connected to the Webflow account and created a web service project that had several REST API endpoints for the four collections that we needed: Blogs, R&amp;D, Case studies and Events.‍<a href="https://dev--moloco.moloco.autocode.gg/collections/case-studies/items">https://dev--moloco.moloco.autocode.gg/collections/case-studies/items</a> <a href="https://dev--moloco.moloco.autocode.gg/collections/blogs/items">https://dev--moloco.moloco.autocode.gg/collections/blogs/items</a> <a href="https://dev--moloco.moloco.autocode.gg/collections/rnd-blogs/items">https://dev--moloco.moloco.autocode.gg/collections/rnd-blogs/items</a><a href="https://dev--moloco.moloco.autocode.gg/collections/rnd-blogs/items">https://dev--moloco.moloco.autocode.gg/collections/events/items</a>‍When this executes, the resulting JSON response from Autocode will look like this‍<pre>{ &quot;items&quot;: [ { &quot;_archived&quot;: false, &quot;date-and-time&quot;: &quot;2021-08-27T00:00:00.000Z&quot;, &quot;_draft&quot;: false, &quot;minutes&quot;: 5, &quot;name&quot;: &quot;How Moloco Tackles Geo-Bleed for Clean Traffic&quot;, &quot;blog-content&quot;: &quot;Blog Content&quot;, &quot;slug&quot;: &quot;challenges-in-building-a-scalable-demand-side-platform-dsp-service&quot;, &quot;author-2&quot;: &quot;62381b6b2e6e68341ff4e85b&quot;, &quot;updated-on&quot;: &quot;2022-04-08T16:31:05.570Z&quot;, &quot;updated-by&quot;: &quot;Person_5d5be36140c6be829583f93b&quot;, &quot;created-on&quot;: &quot;2022-03-31T19:03:43.814Z&quot;, &quot;created-by&quot;: &quot;Person_5d5be36140c6be829583f93b&quot;, &quot;published-on&quot;: &quot;2022-04-08T16:31:32.425Z&quot;, &quot;published-by&quot;: &quot;Person_5d5be36140c6be829583f93b&quot;, &quot;tags&quot;: &quot;6243de4de832b14b2974cde2&quot;, &quot;featured&quot;: true, &quot;_cid&quot;: &quot;62381aa25031d414e4f8f46f&quot;, &quot;_id&quot;: &quot;6245fb0fc69ee9460661d7fa&quot; } ], &quot;count&quot;: 2, &quot;limit&quot;: 100, &quot;offset&quot;: 0, &quot;total&quot;: 2 }</pre>‍On the Vue side, we now consume this content using an Axios call. One optimization that we did here was to consume all these APIs concurrently using the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a> library — this resulted in substantial performance improvements than consuming sequentially. Instead of making multiple HTTP requests individually, the axios.all( ) method lets us make multiple HTTP requests simultaneously.‍<pre>created: function() { let endpoints = [ &#39;https://exemplifi.dev.webflow/collections/case-studies/items/&#39;, &#39;https://exemplifi.dev.webflow/collections/blogs/items/&#39;, &#39;https://exemplifi.dev.webflow/collections/rnd-blogs/items/&#39;, ]; Promise.all(endpoints.map((endpoint) =&gt; axios.get(endpoint))).then( axios.spread((case_studies, blogs, rnd_blogs) =&gt; { this.getCaseStudies(case_studies.data); this.getBlogs(blogs.data); this.getRNDBlogs(rnd_blogs.data); }) ); }</pre>‍‍At this stage, we have accessed all the data from the four Webflow collections.‍<h3>Solution Details: Filtering Logic in Vue</h3><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*7yATym7OL8WwvnNA.png" /></figure>‍<h3>VueJS Filtering</h3>‍The next step is to filter data from all the four collections by the flag “Featured = True”. The method below iterates over the collection items, checks for Featured items and returns the filtered data.‍<pre>filteredItems: function(data) { data.items = data.items.filter((item) =&gt; { return (item.featured == true) }) return data; }</pre>‍‍<h3>VueJS Sorting</h3>‍The filtered items are then merged in a single global array and sorted by date. The following function will achieve this:‍<pre>sortItems: function(data) { data = data.sort((a, b) =&gt; b.date - a.date) return data; }</pre>‍At this point, we have filtered + sorted the data just as we need it. The final Vue object looks like below:‍<pre>[ { &quot;name&quot;: &quot;Organic Poaching&quot;, &quot;image&quot;: &quot;organicPoaching_bannerImage_0622.jpg&quot;, &quot;author&quot;: &quot;62381b6b2e6e68341ff4e85b&quot;, &quot;id&quot;: &quot;6246ee583d33fa25df189b40&quot;, &quot;cid&quot;: &quot;62381c01b6d9c8189c889bcf&quot;, &quot;slug&quot;: &quot;/case-studies/organic-poaching&quot;, &quot;date&quot;:&quot;2022-03-03T14:00:00.000Z&quot; }, { &quot;name&quot;: &quot;Challenges in Building a Scalable Demand Side Platform (DSP) Service&quot;, &quot;image&quot;: &quot;Challenges%2520in%2520building%2520a%2520DSP.png&quot;, &quot;author&quot;: &quot;62381b6b2e6e68341ff4e85b&quot;, &quot;id&quot;: &quot;6245fb0fc69ee9460661d7fa&quot;, &quot;cid&quot;: &quot;62381aa25031d414e4f8f46f&quot;, &quot;slug&quot;: &quot;/r-d-blog/challenges-in-building-a-scalable-demand-side-platform-dsp-service&quot;, &quot;date&quot;:&quot;2022-03-05T14:00:00.000Z&quot; } ]</pre><h3>Solution Details: Widget Styling in Vue</h3><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*t_zvvPVMOsXn2fJE.png" /></figure>Now that we have the data, the next step is to style it to look like below:<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*F487ECMnYQ8sQikW.png" /></figure>To achieve this, the first step is to build a static widget in Webflow, using the styles that have already been built for the rest of the website project.‍<figure><img alt="" src="https://cdn-images-1.medium.com/max/230/0*AJoQfayVoLqvYKuh.png" /></figure>‍Now inspect the resulting HTML structure and classes in the browser.‍<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*rUYTMcKwVMO9fiQM.png" /></figure>‍Use this exact HTML structure + styles and integrate them in the Vue component template as shown below.‍<figure><img alt="" src="https://cdn-images-1.medium.com/max/817/0*8v3V-N-jB8ufrpNr.png" /></figure>‍The collection item array is then iterated over the div structure to render the grid of dynamic content.‍<h3>Solution Details: Wrapping everything into a Webflow Symbol</h3><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*H6Xtw-LKQuGdDjRx.png" /></figure>‍The final step is to integrate all of this work and package it as a Webflow Symbol. This will allow the client to reuse this on any page that they choose to create in the future.‍Integrate VueJs in Webflow‍To Integrate VueJs and its features into wWbflow we need to add the following scripts in the header section of the site.&lt;script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;&gt;&lt;/script&gt; &lt;script src=”https://cdnjs.cloudflare.com/ajax/libs/axios/0.26.1/axios.js&quot;&gt;&lt;/script&gt;‍<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*Y4GWia7VUiKSMpvL.png" /></figure>‍Create an Embed HTML‍The next step is to leverage the “Embed Code” widget in Webflow. Create a basic page in webflow and insert the following embed code.<figure><img alt="" src="https://cdn-images-1.medium.com/max/1005/0*lbOI_N03hn9O9LiO.png" /></figure>‍As you can see, the external Vue app is packaged and accessed through an external url‍<a href="https://cdn.jsdelivr.net/gh/Exemplifi/Webflow-widgets@e6be5c1eb895d34cd5abfc6f463332112f80b5c7/multi-collections.js">https://cdn.jsdelivr.net/gh/Exemplifi/Webflow-widgets@e6be5c1eb895d34cd5abfc6f463332112f80b5c7/multi-collections.js</a>‍Save and publish the page. The page will now display the section as shown below<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*5AynMj-bMW6rOPcF.png" /></figure>Creating A SymbolThe last step here is to convert this embed code widget into a symbol and save it in the library for future reuse.‍<figure><img alt="" src="https://cdn-images-1.medium.com/max/926/0*qeS4GfqcOL84tNPL.png" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/362/0*J71sKKM31rXk5nPg.png" /></figure>‍At this point you are ready! Just drag the symbol onto any page and see the section working!‍<h3>Conclusion</h3>‍As a proud <a href="https://experts.webflow.com/profile/exemplifi">Webflow expert partner</a> ,we hope this insight was of help to you. At Exemplifi, we believe in sharing our work with the broader Webflow developer community. You can access all of this code at <a href="https://github.com/Exemplifi/Webflow-widgets.git">https://github.com/Exemplifi/Webflow-widgets.git</a>.‍If you liked this insight and want more updates, we’d love for you to join us on Linkedin at <a href="https://www.linkedin.com/company/exemplifi">Exemplifi</a> , Facebook at <a href="https://www.facebook.com/ExemplifiSites/">ExemplifiSites</a> or Twitter at <a href="https://twitter.com/exemplifisites">ExemplifiSites</a>.‍‍Originally published at <a href="https://www.exemplifi.io/insights/a-webflow-widget-to-display-filter-and-style-data-from-multiple-collections">https://www.exemplifi.io</a>.<img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=ac1f0710c6e0" width="1" height="1" alt="">

A Webflow Widget to Display, Filter and Style Data from Multiple Collections

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*lL4oaSCx3YGn6FLM.png" /></figure>In this post, we have elaborated on the various approaches that we evaluated to launch an internationalized site on Webflow. We have also described how we settled on the final approach (Weglot), and in a subsequent post, we have covered the implementation details for Weglot.<h3>Client Need</h3>Moloco is a Pre-IPO tech firm based in Silicon Valley. It is also an international company and operates in Korea, Japan, and China. In preparation for their IPO, Moloco wanted to completely redesign and rebuild a multilingual website that will cater to the needs of their global stakeholders.Exemplifi was selected as Moloco’s website development partner, who helped them achieve this on the Webflow CMS platform. The resulting website is <a href="http://www.moloco.com">www.moloco.com</a>. Exemplifi also ensured that the new site was internationalized for other languages — Korean, Japanese, and Chinese to be specific. You can visit these sites at <a href="http://www.moloco.com/ko">www.moloco.com/ko</a>, <a href="http://www.moloco.com/ja">www.moloco.com/ja</a>, and <a href="http://www.moloco.com/zh">www.moloco.com/zh</a> respectively.‍<h3>The Multilingual Requirements</h3>Our client articulated the following requirements during our kick-off discussions:<ul><li>All static and dynamic page content had to be translated into regional languages.</li><li>The recommended CMS platform was required to enable website admins to change images and other media assets uniquely for each site, and also allow them to control which pages or blog posts would be published for each site. For eg., Korea wanted only a few specific blogs from the main site based on the products that they sold in the country.</li><li>The domain URLs had to be /ko /ja and /zh, instead of subdomains like ko.moloco.com, ja.moloco and zh.moloco.com to avoid SEO inefficiencies.</li></ul><h3>Webflow Specific Approaches Considered by Exemplifi</h3>Given these requirements, we identified three distinct approaches for the Webflow CMS:<ul><li>Create language-specific Webflow folders</li><li>Dedicate unique Webflow instances to each language</li><li>Use a third-party product</li></ul><h3>1st Approach: Create Language Specific Webflow Folders</h3>In this approach, we proposed to create Webflow folders for each language, and then duplicate the pages as shown in the image below:<figure><img alt="" src="https://cdn-images-1.medium.com/max/512/0*d8uLUsm7gK0OsfyT.png" /></figure>After copying the pages, we would manually translate the content for each of the pages. Based on the user’s language selection, we would then serve the content from those specific folders.Our rationale behind this approach was:<ul><li>Being very intuitive, this approach would allow content administrators for each language to simply navigate to the relevant folder and make their edits.</li><li>All language-specific folders could be managed within a single Webflow instance and would not necessitate any additional costs to our customer.</li><li>Any symbol created to power the pages would work across all the folders.</li></ul>However, when we attempted to implement this solution, we ran into a few challenges. We realized that all CMS collections (for blogs, news, articles, etc.) would need to be duplicated, and we would need to change the queries in language-specific templates to point to the Webflow collections unique to that language.<figure><img alt="" src="https://cdn-images-1.medium.com/max/639/0*4q3gC5L9EvJo2-M5.png" /></figure>Another concern with this approach was that we would quadruple the number of static pages on the Webflow instance. When we put it in numbers, we found out that the default English language site, alone, had around 60 static pages, which would become around 250 static pages after adding in the three languages, required by Moloco.This brought us to face one of Webflow’s fundamental limitations, where an instance is limited to only 100 static pages. Consequently, we realized that this would become a major bottleneck, and eventually prevented us from implementing this solution.‍<h3>2nd Approach: Dedicate unique Webflow instances to each language</h3>Foreseeing the risks in the first approach, we attempted to get around the static page limit (of 100 pages per instance) by considering a unique Webflow instance for each language.<figure><img alt="" src="https://cdn-images-1.medium.com/max/512/0*RxKX5ShUF3s5BGyj.png" /></figure>We had no doubt that this approach would scale beyond the three languages, and support as many countries as our client intended to expand to, in the future.‍However, upon further assessment, we identified a few risks with this approach as well:<ul><li>Webflow’s enterprise pricing is based on the number of instances we stage, and this would grow at least two to three times if we followed our approach. Our work culture would not allow us to put that extra cost burden on our client without a reasonable explanation.</li><li>Another limitation was the content workflow. For example, if Moloco added a blog on the English language instance, they would have to manually copy this, or manually create it again within all the three other instances. There is no way to automatically replicate the collection content across instances. Unlike our first approach, where this is possible. This would add a huge overhead to the client’s content/marketing team.</li><li>The final limitation that we ran into was that symbols could not be copied from one instance to another. So, when we tried to duplicate an instance, a lot of content such as collections, pages, and templates got copied over — however, symbols couldn’t be copied. This was a problem because we would have to unlink all of them, and relink them in the new instance, which defeats the purpose of symbols.</li></ul>Hence we decided to discard this approach too.‍<h3>3rd Approach: Using a Third-party Product (Weglot)</h3>‍As the next steps, we quickly began to explore the marketplace for third-party products which would be a good fit for all our requirements. In this post, we will not delve into the details of all the products that we assessed. Suffice to say that we settled on Weglot which is well-integrated with Webflow.The advantages of our third approach and these products, as compared to the earlier approaches are as follows:<ul><li>No manual translation is required. Weglot automatically translates site copies and allows content editors to fine-tune the language afterward.</li><li>We didn’t have to create different folders or multiple instances. This makes the content workflow very simple. For example, after an English language blog is published, it is automatically translated by the third-party tool, and available for all the other three languages. If a content editor for a particular language decides to not use it on their site, they can simply mark it in Weglot and it won’t show up there.</li></ul>Needless to say, this comes at a cost to the client, but they felt that our proposed solution was perfect and was worth the price!In our next post, we will dive deep into the implementation details about how to configure and use Weglot. We will also elaborate on some tricky aspects of launching the site with Weglot.If you liked this insight and want more updates, we’d love for you to join us on Linkedin at <a href="https://www.facebook.com/ExemplifiSites/">Exemplifi</a>, Facebook at <a href="https://www.facebook.com/ExemplifiSites/">ExemplifiSites</a> or Twitter at <a href="https://twitter.com/exemplifisites">ExemplifiSites</a>.Originally published at <a href="https://www.exemplifi.io/insights/launching-a-multilingual-site-on-webflow">https://www.exemplifi.io</a>.<img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=84d09e092086" width="1" height="1" alt="">

Launching a Multilingual Site on Webflow

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*NYDZjpO-rEd82vhz.jpg" /></figure><h3>Introduction</h3>Symbols are one of the most useful features of the <a href="https://www.exemplifi.io/insights/simultaneous-development-in-a-single-webflow-website">Webflow builder</a>. Symbols allow you to turn any element and its child element into a reusable component. This could include buttons, navigation bars, hero sections, card elements, footers, etc. Creating reusable elements like Symbols can greatly speed up the development of your project.<h3>Creation</h3>We can create symbols of two different types<h3>Identical content symbols:</h3>Identical symbols are used in scenarios where the layout and content of the symbol remains constant on each use of it. For example in navbars, footers, Sign up forms etc. To turn any component into a reusable symbol, all you need to do is right-click that element in your canvas and select the “Create Symbol” option in the dropdown and give it a name.<figure><img alt="" src="https://cdn-images-1.medium.com/max/1000/0*HJ-sQjxS484iAZ37.png" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1000/0*2BoN0AT1vmsjWa68.png" /></figure>‍<h3>‍Unique content symbols:</h3>‍These are symbols that retain their layout, but their content can be edited — text, images, links, video and rich text. This allows each instance of that symbol to be unique while retaining its original structure. This is done through the use of override fields.‍Upon selecting the “Create Symbol” dropdown option and giving your symbol a name, Webflow allows you to create override fields for that symbol. To do this, you simply click the plus icon under the Symbol Master section in the left-side panel.<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*pJ_sl_rm0TG8WTxe.png" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*Rn7bu2XMeVXA3IIJ.png" /></figure>You will then be able to select which field you want to be able to override (such as text), give a name to the field, and set its default value.‍<figure><img alt="" src="https://cdn-images-1.medium.com/max/490/0*JjLQJbgY_GOIZUAa.png" /></figure>Next time you add one of these symbols to your project, you will be able to give this field its own unique value.<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*1vXwfwQ2SHcttl0a.png" /></figure><h3>Reuse</h3>The next time you want to use this symbol, go into your symbols library in the right-side panel by clicking the plus icon and selecting the Symbols tab and dragging the symbol into your canvas.<h3>Editing</h3>To edit a Symbol, double tap on the symbol and press enter. Now, users can make changes to the fundamental Symbol. Edits to the main Symbol affect each instance, unless specifically overridden in a Symbol instance.‍<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*fe9KKJyAwOSFZ1TY.png" /></figure><h3>Unlinking</h3>To unlink a Symbol and make changes to it independently:<ul><li>Right-click the Symbol label</li><li>Choose unlink from Symbol Or , if the element is hard to select, right-click the element in the Navigator</li></ul><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*RtSLDnHRjJNSSeX0.png" /></figure><h3>Conclusion</h3>While symbols are a very useful <a href="https://www.exemplifi.io/insights/a-webflow-widget-to-display-filter-and-style-data-from-multiple-collections">feature of Webflow</a> they do come with their Pros and Cons<h3>Pros:</h3><ul><li>We can make reusable components with ease</li><li>We can override the content to create unique components while retaining uniformity in layout</li><li>We can change the styles and apply it to all the places in a website automatically</li><li>We can create nested symbols inside a symbol like buttons etc.</li></ul><h3>Cons:</h3><ul><li>We still cannot create overridable fields for styles like background color, color etc.</li><li>We cannot move symbols from one site to another in one click. If you need to move it, we would need to first unlink the elements and then copy each to another site and relink them to create the symbol</li></ul>If you liked this insight and want more updates, Sign up for our monthly <a href="http://exemplifi.io">Exemplifi Newsletter</a>.‍Originally published at <a href="https://www.exemplifi.io/insights/how-symbols-work-in-webflow">https://www.exemplifi.io</a>.<img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=f211a8dd48a1" width="1" height="1" alt="">

How Symbols work in Webflow

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*8NIbr5c311_R7TQA.png" /></figure>‍In this post, we migrate one of our client websites — built on WordPress — from WPEngine hosting to the WPVIP WebOps platform. We outline the various steps involved in this relatively complex process that spans both Development and <a href="https://www.exemplifi.io/insights/effective-devops-for-enterprise-websites">DevOps</a> activities.‍If you are interested in the pros and cons of these platforms, you can check out any of our following posts:‍<h3>The Website Infrastructure</h3>Our client is a B2B firm in the agricultural sector. The website we built for them helps them interact with their dealers and sales professionals.‍<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*9XoajE76hyE9cTuH.png" /></figure>‍<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*ImHhxzXYTrdUXuOY.png" /></figure>‍The website had a lot of relatively sophisticated capabilities:<ul><li>Woocommerce and product catalog management</li><li>Integration of the Product Catalog with a backend Product Information Management (PIM) system</li><li>Single Sign-On Capabilities with their internal authentication systems</li><li>Quiz functionality to enable sales professionals to narrow down their product selection</li></ul>‍From a technical perspective, the WordPress site had the following components:<ul><li><a href="https://www.exemplifi.io/insights/whats-new-in-wordpress-5-9">WordPress 5.9</a></li><li>Woocommerce</li><li>ZingTree Plugin (for Quizzes)</li><li>MiniOrange Plugin for Single Sign On</li><li>Elementor and Gutenberg Builders</li><li>Custom Theme</li></ul>‍The hosting of this site was on WPEngine. From a DevOps perspective, there were three environments for dev, staging, and production.‍<figure><img alt="" src="https://cdn-images-1.medium.com/max/1018/0*DrXUau14jUg89g7T.png" /></figure>‍More details about the configuration of this infrastructure will be provided in a later section below.‍<h3>Step 1 of The Migration Process: WordPress</h3>The first step in the migration process is to cutover the WordPress site from <a href="https://www.exemplifi.io/wpvip-connector">WPEngine to WPVIP</a>.‍We leveraged the default WordPress export capability to export the site as an XML file.<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*uh6U9gkv3RYPRXQ6.png" /></figure>‍The next step is to import the site into WPVIP using the import utility of WordPress.‍<figure><img alt="" src="https://cdn-images-1.medium.com/max/993/0*2--yeKiDsAvq9EqQ.png" /></figure>‍Upload xml file and click on Upload file and Import button<figure><img alt="" src="https://cdn-images-1.medium.com/max/908/0*qKD8JvRkRXj0UAfg.png" /></figure>‍Now, the site is up and running on WPVIP!‍The final step is to migrate the Plugin and Theme Setups. This is a little tricky as WPVIP does not allow installation of plugins through WordPress. You have to do this through Git. The steps involved here are:‍Clone the WPVIP site git repo into your local‍<figure><img alt="" src="https://cdn-images-1.medium.com/max/644/0*6PIlXOmGyngWqZlw.png" /></figure>‍Copy all the plugins &amp; theme from the existing site and add it to the relevant directories in the git repo.‍<figure><img alt="" src="https://cdn-images-1.medium.com/max/613/0*_6bduGgyAuaZiRYs.png" /></figure>‍Commit and push to the git repository. Now the plugins and themes should be visible on the WPVIP site. Go ahead and activate them and your good to go!‍<h3>Step 2 of the Migration Process: Replicate WPEngine Settings on WPVIP</h3>‍Now that we have successfully migrated the WordPress site to WPVIP, the next step is to replicate the WPEngine settings on WPVIP. These fall into the following categories:<ul><li>SSL Certificates</li><li>CDN</li><li>Redirect Rules</li><li>Git Permissions and Users</li><li>Backups</li><li>Access and Error Logs</li><li>Web Rules</li><li>Domains</li><li>sFTP Users</li></ul>‍<h3>Redirect Rules</h3><figure><img alt="" src="https://cdn-images-1.medium.com/max/810/0*4cVbM5XeIqFgYQf1.png" /></figure>‍There are many places where you can implement redirect rules, including WPEngine (as shown above). To migrate these over to WPVIP, you should be aware that VIP doesn’t utilize Apache in its stack, so things like an .htaccess file containing redirects can’t be utilized. Otherwise, incorporating the rules into something like the <a href="https://wordpress.org/plugins/safe-redirect-manager/">Safe redirect manager plugin</a> would be the way to go.‍<h3>CDN</h3>‍<figure><img alt="" src="https://cdn-images-1.medium.com/max/783/0*szQ8WgL_6tBdBMiI.png" /></figure>‍Based on your WPEngine plan, you have access to features such as their Content Delivery Network that is powered by Cloudflare. To achieve a similar functionality on WPVIP, no additional configuration is required to utilize their CDN. It comes out of the box!‍<h3>Backups</h3>‍WPEngine offers daily backups.‍<figure><img alt="" src="https://cdn-images-1.medium.com/max/619/0*3StdY56j6QiuGWVo.png" /></figure>‍There is no way to migrate these to WPVIP, which has its own automated backup process. The general advice here is to keep the account active with WPEngine until their backups rotate out or there’s been enough of a backup history created on WP VIP to no longer require the “old backups”.‍<h3>sFTP Users</h3>‍<figure><img alt="" src="https://cdn-images-1.medium.com/max/982/0*rwgd5zQYM_opReDX.png" /></figure>‍SFTP settings or users in WPEngine cannot be migrated to WPVIP as all the code deployed to the site must be committed and pushed to a provided GitHub repository.‍<h3>Web Rules</h3>‍<figure><img alt="" src="https://cdn-images-1.medium.com/max/698/0*8qUsW1CH6SaSyA64.png" /></figure>‍You can configure your web rules in WPEngine and dictate whether you want to block certain IPs or implement geofencing.‍These rules can be reimplemented in WPVIP in the “IP Allow List” as shown below.‍<figure><img alt="" src="https://cdn-images-1.medium.com/max/569/0*LnyOC_7hileTh4m6.png" /></figure>‍<h3>Git Permissions and Users</h3>‍Pointing your Git to WPVIP is very straightforward. For more advanced details around the ideal git workflow, you can read this post on <a href="https://docs.wpvip.com/technical-references/development-workflow/github-pr-reviews/">Github to WPVIP workflow</a><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*McA9f1n7XoICQmsv.png" /></figure>‍<h3>SSL Certificates</h3>‍WPEngine offers capabilities to use the SSL Certificates they offer or implement 3rd-Party certificates.‍<figure><img alt="" src="https://cdn-images-1.medium.com/max/857/0*ZipxQCEnT05zW6d0.png" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/563/0*3U5Ay-6SyGp3KoMw.png" /></figure>‍You can transfer your 3rd-party certificates from WPEngine, over to WPVIP quite easily.‍<h3>Domains</h3>WPEngine lets you point the WordPress site to your domains as well as establish any redirects that you need.<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*axLo77i7cjoVi5Nq.png" /></figure>‍These will need to be replicated in the WPVIP “Domains” section as well:<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*dXub-IMYHou6Ewv1.png" /></figure>‍<h3>Going live with the new infrastructure</h3>After you have executed Step 1 and Step 2 above, your site is ready to cut over from WPEngine to WPVIP. To launch your site on the new infrastructure, do the following:<ul><li>Cancel the SSL certificate in WPEngine</li><li>Update the old WP URLs to the default WPEngine ones</li><li>Change DNS details in the DNS provider (Eg. <a href="https://www.exemplifi.io/insights/how-to-transfer-your-domain-from-godaddy-to-namecheap">GoDaddy, Namecheap</a>, or Route 53) to point to WPVIP</li><li>Remove the domain from WPEngine</li><li>Add the domain in WPVIP and add SSL certificate to the domain</li></ul>‍And you are all set now with your new site!‍<h3>The Exemplifi WPVIP Connector</h3>Have you outgrown your WPEngine infrastructure and are now looking to up-level your game by moving to WPVIP? Are you concerned about the effort involved in making this shift? With our 1-week migration guarantee, you can rest easy. We are a WPVIP Enterprise Partner and our team of WordPress experts will make this process quick, easy and painless. To learn more about our solution, you can visit <a href="https://www.exemplifi.io/wpvip-connector">https://www.exemplifi.io/wpvip-connector</a>‍<h3>Summary</h3>We love WordPress and we love building websites that help companies grow. Growing companies need a reliable Platinum tier website infrastructure that can handle the heavy demands of a rapidly scaling business. WPVIP is the premier WebOps platform across the whole gamut of performance, security, uptime and customer service by far.‍With that in mind, we wrote this article to help curious readers understand the steps involved in migrating from WPEngine to WPVIP. While the process can be complex and tricky, we decided to go one step ahead and created a <a href="https://www.exemplifi.io/wpvip-connector">WPVIP connector tool</a> to make the process fast and hassle-free.‍Originally published at <a href="https://www.exemplifi.io/insights/migrating-a-website-from-wpengine-to-wpvip">https://www.exemplifi.io</a>.<img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=22217c7cb0e7" width="1" height="1" alt="">

Migrating a Website from WPEngine to WPVIP

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*OiSJAaZxuREzMR-7.jpeg" /></figure>‍WordPress 5.9 represents the most significant release of Gutenberg features since the initial Gutenberg launch in WordPress 5.0. In addition, WordPress 5.9 includes a lot of enhancements and bug fixes.‍In this post, we unpack what’s new and noteworthy in WordPress 5.9, so you can get the most out of the latest version of WordPress.‍<figure><img alt="" src="https://cdn-images-1.medium.com/max/736/0*Cme6TmF3ASSvW-2c.png" /></figure><h3>Introducing the Site Editor (Beta)</h3>‍<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*s3NObP3-Dzugg1s3.png" /></figure>‍<h3>Full Site Editing</h3>‍WordPress 5.9 will continue to build upon the site editing features first introduced in WordPress 5.8 earlier this year. In addition, this release adds a lot more features to the site editing experience.The editor has three options.<ol><li>Site Editor: The Full Site Editing mode understands the site’s structure and provides ways to modify Menu items located on the left. Even more, settings are available from the top toolbar.</li><li>Template Editor: If you would like to edit one of the Global templates like Single Post, 404, Page, Archive, simply click on the WordPress logo in the upper left-hand corner.</li><li>Template Parts Editor: Template parts editor for editing and creating global elements/template parts.</li></ol><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*VQP9nf-vxVBkOeu0.png" /></figure>‍<h3>Twenty Twenty-Two Default Theme</h3>‍Twenty Twenty-Two will be built for complete site editing (FSE) first with a goal of all theme styles being editable through Global Styles. WordPress 5.9 will likely be required to use Twenty Twenty-Two, a block theme.Twenty Twenty-Two will use a variety of color palettes, page templates, headers, and footers for endless customization. You’ll be able to change fonts, image designs, and more on a site-wide level. It’s usually pretty easy to tell when a website uses a default theme, it sounds like Twenty Twenty-Two might change that.‍<figure><img alt="" src="https://cdn-images-1.medium.com/max/756/0*1VUSqOjHQ41g3wO1.png" /></figure>‍<h3>Global Styles</h3>New tools are coming that allow you to change design elements like typography, spacing, and colors across your entire site at once. More information and additional previews of the new interfaces are below.<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*fRpMgP6aQKFN0XII.jpeg" /></figure>‍<h3>Block Editor Improvements + New Blocks</h3><h3>More Powerful List View</h3>List view is one of the most useful features of the block editor, especially if you are using more complex layouts (like with Kadence blocks.) List view had several limitations, but WordPress 5.9 dramatically improves usability.<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*Fn119BBQbodoR6RT.jpeg" /></figure>‍<h3>More Settings and Controls for Blocks</h3>Finally! WordPress 5.9 bakes in new typography tools, flexible layout controls, and finer control over details like spacing, borders, and more for blocks. Previously, block settings were just so limited, especially if you wanted to fine-tune details.For example, the default paragraph block now includes color options for text color with a hex preview, background color, expanded options for typography such as line height, letter case, letter-spacing, etc.‍<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*5r7LQ_-psPqOVV4i.png" /></figure>‍<h3>New Blocks</h3>‍In 5.9. You have some really useful new theme blocks that you can use to manage the content and look of the site. Navigation, Template Part, Header, Footer, Post Author, Next Post, Previous Post, Post Comments, Term Description, and Archive Title can all be easily modified. So, it’s getting much easier to get the final result you want.‍<figure><img alt="" src="https://cdn-images-1.medium.com/max/352/0*vMvC7hHIObpnlmy2.png" /></figure><h3>Performance Improvements</h3>WordPress 5.9 includes several improvements for performance. You can check out all the performance improvements in WordPress 5.9 here, including some impressive speed comparisons.<h3>Block Inserter Performance Improvements</h3>The block inserter got a good performance boost! You’ll likely see a difference when searching and inserting blocks with speed and ease.<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*_AtQtzfREN56G0Ik.png" /></figure><h3>Improvements to Lazy-Loading Images</h3>Lazy-loading images were introduced in WordPress 5.5 and later expanded to also cover iframes in WordPress 5.7. In the upcoming WordPress 5.9 release, the implementation for both received some improvements to increase performance.<h3>Improvements for Developers</h3>WordPress 5.9 has many developer-focused updates. Here are a few noteworthy features and enhancements in this update, along with notes for devs in the WordPress 5.9 field guide.<h3>Resources for Building Block-Based Themes</h3>WordPress 5.9 introduces block-based themes that use blocks to define the templates that structure your entire site. The new templates and template parts are defined in HTML and use the custom styling offered in theme.json.The theme-experiments repository has an Empty Theme that is an excellent boilerplate to start your first block theme from. There is also a command-line script to help generate a block theme to get you started:Block Theme Overview explains the basics of block themes and the structure and format of the themes.Create a block theme is a full tutorial walking through creating a block theme.Global settings &amp; styles documents how to use the theme.json to add styles to your themes.<h3>Updates for Settings, Styles, and theme.json</h3>WordPress 5.9 has changed theme.json v1 introduced in WordPress 5.8 to a v2. The existing v1 theme.json files will still work as expected, and they’ll be transformed at runtime to the v2 format by WordPress.<h3>New Hooks and Functions to Work with Posts, Post Types, and Taxonomies</h3>In WordPress 5.9, new hooks and functions are added to help developers work with Posts, Post Types, and Taxonomies.<h3>Summary</h3><a href="https://www.exemplifi.io/insights/whats-new-in-wordpress-5-8-with-screenshots">WordPress 5.8</a> came with many feature updates, but WordPress 5.9 has taken the CMS to the next level. WordPress 5.9 builds upon the latest release making a consumer-friendly CMS into a more developer-friendly CMS. Bringing together performance improvements, blocks and full site editing features are the major game changers of this latest version.‍Originally published at <a href="https://www.exemplifi.io/insights/whats-new-in-wordpress-5-9">https://www.exemplifi.io</a>.<img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=76827dd57ae5" width="1" height="1" alt="">

What’s New in WordPress 5.9

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*dS8JHGXXsmxW8hE9.png" /></figure>‍In this post we explore the various steps involved in migrating a site from Craft CMS to WordPress. The design of the site remains exactly the same while the underlying CMS is migrated.<h3>Overall Site Settings</h3>First we migrated the site settings. General contains details such as sitename and logo. Routes is a listing of all redirects. Users also contains passwords and associated roles.Craft Settings<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*J0YOw0ftWsn-8xCl.PNG" /></figure>‍WordPress Settings<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*LDb_vDht8h1osrSv.PNG" /></figure><h3>Content</h3>The first step is to replicate all the custom fields and groupings that have been created in Craft. We used the WordPress Custom Post Type (CPT UI) plugin to create custom fields and groupings. Then we replicated all the fields manually.‍Craft Fields<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*FsYMd5gc4tI1OHiK.PNG" /></figure>‍WordPress Fields<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*7QE6zFvh88ldP68n.png" /></figure>‍The next step is to replicate the actual content. Unfortunately, this is a relatively time-intensive task. We looked at programmatic ways to extract and import data. However, they were more trouble than they were worth.‍Craft Content<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*GUrdWAgDq83mBOw4.png" /></figure>‍WordPress Content<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*RlLJiBIkzilKIIb5.png" /></figure>‍Migrating the assets was relatively easy. All we had to do was to copy the folders and import them into WordPress. Of course, the folder structure had to be replicated manually.‍Craft Assets<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*2nDnylRn5DXNA57o.JPG" /></figure>‍WordPress Assets<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*cM0WSLZ5s18TYQuy.JPG" /></figure>‍Then we migrated all the taxonomy of categories and tags.‍Craft Taxonomy<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*Q5Eb3-KKauNfEiMa.JPG" /></figure>‍WordPress Taxonomy<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*TbiB7eLGsSxfvjGO.JPG" /></figure>‍Finally we replicated all the navigation menus.‍Craft Menus<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*Tj_KmZAHiNt_4Ai-.JPG" /></figure>‍WordPress Menus<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*eAFN4YUQy1pGynjU.JPG" /></figure>‍<h3>Templates</h3>After the content was migrated, the final step was to rebuild all the templates that power the various pages of the site. Although both Craft and WordPress are PHP powered sites, there was no easy way to reuse the templates. Craft uses a Twig templating engine while WordPress doesn’t. This is a fundamental difference and we had no choice but to rebuild all the templates.‍Craft Template<figure><img alt="" src="https://cdn-images-1.medium.com/max/477/0*rh2DkUbZEMyGA7nB.JPG" /></figure>‍WordPress Template<figure><img alt="" src="https://cdn-images-1.medium.com/max/477/0*1Yy3OxjbEUxo7Fze.JPG" /></figure>‍Other ActivitiesThis post covers only the development-oriented aspects of such a migration. There are a ton of other activities that are involved:If you’d like to know more we’d love for you to join us on Linkedin at <a href="https://www.facebook.com/ExemplifiSites/">Exemplifi</a>, Facebook at <a href="https://www.facebook.com/ExemplifiSites/">ExemplifiSites</a> or Twitter at <a href="https://twitter.com/exemplifisites">ExemplifiSites</a>.‍Originally published at <a href="https://enterprise.exemplifi.io/36suV3S">https://www.exemplifi.io</a>.<img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=1585335fa47d" width="1" height="1" alt="">

Migrating from Craft CMS to WordPress

Blog

Exemplifi Blog

We redesigned the Reynolds website, with the latest Drupal stack and created a website with massive UI, UX, and performance improvements.

We built a WordPress website for FOSS, leaders in revolutionary science curriculums for schools. As an enterprise website development company, we built this website with the focus of providing maximum detail to parents and teachers to get the most out of their children's and students' science curriculums.

We built a WordPress website for the insurance firm Burns and Wilcox, leaders in delivering comprehensive insurance services. As an enterprise website development company, we built this website with multiple service pages that looked great and led to major conversions.

We built a Drupal website for the Reynolds Brand of Kitchen products. As an enterprise website development company, we built this website in record time.

We built a WordPress website for Fidelity Payments, a leading provider of frictional digital payment services that streamline daily operations, lower costs, and fight fraud.  As an enterprise website development company, we built this website to be highly secure, and easy to use and navigate.

YouTube

Exemplifi on YouTube

It’s official! Thanks to our people, we’re proud to have earned the Great Place to Work® Certification™. Our company culture is our top priority! #GPTWcertified #exemplifi #websitedevelopment 

https://lnkd.in/gJZuCNHU

If you're planning to take your website and business to the next level. You need an enterprise-level #wordpress website solution like #WPVIP. Our latest insight post gives you a step-by-step guide to migrating from #wpengine to WPVIP seamlessly. 

https://lnkd.in/gQdUbmk4

#WordPress is one of the most popular #CMS out there, and with the latest version - WordPress 5.9, it's taken a significant leap that helps #developers complete #WebsiteDevelopment projects in record time. 

Here is our analysis of WordPress 5.9

Users prefer websites that provide them a personalized experience which tends to keep them sticking around longer. It's no surprise then that websites that provide geo-specific solutions to user queries perform much better than websites that provide non-geo-specific results.

Is your website location-friendly?

Here is a handy guide to calibrating your data and provide geo-specific content to your visitors; keeping them around longer and coming back for more.

https://lnkd.in/gN33Ant

#geotargeting #cmswebsite #wordpress #personalization

Exemplifi

Exemplifi

Exemplifi on LinkedIn