TYPO3

Contact box element

Use the Contact Box content element to clearly display the contact details of a person or organization.

Go to the design variants for Contact Box

Insert contact box

Open the page you want to edit in the TYPO3 backend. Click on Create new content at the desired location.

  1. Select the category Special elements in the left column.
  2. The content element Contact box will now appear in the right column, which you can select.
  1. General tab: Enter the desired content and text for the element.
    1. Header: Enter a short, meaningful header. It helps visitors grasp the content more quickly. In the Type field, you can also set the header hierarchy (e.g., H2, H3). Select Hidden to display the header only in the backend. This helps you locate the content element in the backend. Website visitors will not see a hidden header.
    2. Contacts: Click on + Set up new to set up a new contact box.
  1. Academic title: Enter the academic titles (e.g., Dr.) of the contact person.
  2. Name: Enter the name of the contact person or organization. (Note: If the name is very long, you can force a manual line break with “­”; e.g., “Attention Long­Name”). The hierarchy level of the name cannot be adjusted manually, but is based on the contact box header. The name is automatically displayed in the next lower header level (e.g. header = H2, title = H3).
  3. Text (optional): Add a short description or function.
  1. Image (optional): Select a portrait photo, building image, or similar from the file list. To do this, click on Add media file. Navigate to the desired file in the page tree, activate the checkbox, and click on Import selection.
  2. E-mail: Enter the e-mail address. TYPO3 automatically creates a clickable mailto link.
  3. Phone: Enter the phone number in phone link format.
  4. Mobile: Enter the mobile phone number in phone link format.

  5. Link: Specify an internal or external page.

    Save: Scroll up and click on Save.

  1. When you set a link, the Link text field must be filled in.
  2. Translations of contacts must be made in the list view and then activated.
  3. Alternatively, you can use the Personnel list plug-in to automatically import employee contact data from u:find.

Define appearance

  1. Appearance tab: Here you can specify how the content element is displayed.
  2. Layout: Under Layout, select the desired shape of the image in the contact box:
    1. Standard: The image is displayed as a rectangle.
    2. Round image: The image is displayed as a circle.
    3. Alternative background: Activate the slider to give the content element a light gray background.
  3. Show links in menus: If you set up a table of contents on the page, the header of the content element appears in it as a link.
  4. Add link to top of page: Inserts a “Back to top” link at the end of the element.

Set publication

  1. Access tab: Here you can control the visibility of the content element on the website.
  2. Visibility: Activate the slider to show or hide the content element on the website.
  3. Publication date: Specify when the content element should be published automatically. This is helpful if you want the publication to take place while you are away.
  4. Expiration date: Enter a date from which the content element will no longer be displayed.
  5. Access rights for user groups: Determine whether the content element is only visible to registered users.

Further user guides for special elements

Do you have any questions?

Do you have any questions or comments about the TYPO3 user guides?

To top