Editing elements of your Elfsight FAQ accordion with the rich-text editor and CSS codes

Two ways to change the design of the questions in your Elfsight FAQ accordion

When we first released our FAQ accordion builder app, we’ve designed it to be very simple. Since that time we’ve seen lots of interesting use-cases our people have implemented with our app. Seeing how creatively you’ve all approached setting up your frequent questions section, we decided to make creativity easier for you, and in one of the updates we’ve implemented the rich text editor.

You can now both edit the questions you’ve set up before, and use the editor’s options to get the right look for your new questions.

If you need to edit an existing question in your FAQ accordion, you need to click on category name to go to the list of questions first:

Next, you need to click on the name of the question you need to edit in the list, and you’ll be redirected to a screen where you can do the edits. You’ll see the text editor in the left-hand panel:

Make all the changes you need, save and you’re done! Please, keep in mind that the editor only works with the text of the answer.

If you need to work with a new question that you’re just adding to your widget, the editor will be right there in the new question window:

We hope that you’ll find this editor to be a great addition to the app. Now you can use bold, italic or underlined font, create ordered and unordered lists, align the text, insert links, or even switch to HTML mode just by clicking on an icon in the editor!

When working with the editor, please, keep in mind that it only works with the text of your answers, but not with the widget’s title, category names or questions. We do realize, however, that these elements need to be edited, too, and we plan to expand the functionality of the editor to make it possible. In the meantime, here’s a couple of CSS codes that you can use until we do:

/** FAQ title font and size **/ 
.eapps-faq .eui-widget-title {
  font-family: Roboto !important;
  font-size: 24px !important;
/** FAQ category font and size **/ 
.eapps-faq .eapps-faq-content-category-title-text {
  font-family: Roboto !important;
  font-size: 24px !important;
/** FAQ question font and size **/  
.eapps-faq .eapps-faq-content-category-item-answer-text {
  font-family: Roboto !important;
  font-size: 18px !important;

I’ve used the Roboto font in the code as a sample, and to set your own font, you just need to change Roboto in the code with the name of your font.

Another thing is that at the moment the editor is available only with our cloud app. We apologize to the users of our standalone FAQ plugin, and we promise that the editor will be implemented in one of the nearest plugin updates, as well. In the meanwhile, the users of the standalone plugin are welcome to use the CSS codes above to edit their widget. The codes will work fine with the WordPress plugn, besides, the admin panel of the standalone plugin has a specific field where you can add a CSS code:

I hope you’ve found this article helpful, but if any of your questions are still unanswered, I’ll be happy to chat to you at our Support Center! Please, find the contacts below, and make sure to reach out to me at your convenience!