Accordions or Toggles: editing in Elementor - ucsf-ckm/ucsf-library-ux-and-web-documentation GitHub Wiki

Pages with Elementor toggle widget

  1. https://www.library.ucsf.edu/course-reserves
  2. https://www.library.ucsf.edu/ask-an-expert/data-science/data-management/
  3. https://www.library.ucsf.edu/ask-an-expert/scholarly-communication/getting-published/
  4. https://www.library.ucsf.edu/ask-an-expert/scholarly-communication/open-access-publishing/
  5. https://www.library.ucsf.edu/zsfg/
  6. https://www.library.ucsf.edu/ask-an-expert/learning-tech-group/teaching-and-learning-continuity/
  7. https://www.library.ucsf.edu/ask-an-expert/classes-catalog/
  8. https://www.library.ucsf.edu/archives/covid-19-pandemic/covid-19-pandemic-chronicles/
  9. https://www.library.ucsf.edu/archives/ucsf/yearbooks/
  10. https://www.library.ucsf.edu/archives/events-exhibits/zakheim-murals/

Styling for toggles

  • Border #E6E9ED
  • Title #052049
  • Title background #E6E9ED
  • Icon #052049
  • Content background #ffffff

Basic text edits

Using the Teaching and Learning Continuity page as a case study, below are some tips for editing a page using the Elementor page builder plugin.

NOTE: News posts use the plain Gutenberg editor, but all other pages on www.library.ucsf.edu are built and edited with Elementor.

While logged into the site as an admin, go to the page to be edited and click Edit with Elementor in the black bar at the top.

To make small text changes, hover over the section and click. Then edit the text using the pane on the left.

Update at the bottom of pane to save changes.

Editing toggles or accordions

NOTE: In Elementor a toggle allows multiple entries to be open at one time, while an accordion will allow only one at a time. We are using toggles throughout the site with consistent styling applied to them. (Do not add a new default toggle.)

editing a toggle

Hover over the toggle and click to select. Then edit the using the pane on the left.

  • Each item has its own text editor.
  • Items can be deleted or added in the left pane.
  • Items can be dragged in the left pane to change order.

Update at the bottom of pane to save changes.