🎨 add page for creating a link

plone · Dec 16, 2024 · a681997 · a681997
1 parent 6c4044c
commit a681997
Show file tree

Hide file tree

Showing 15 changed files with 169 additions and 0 deletions.
diff --git a/docs/content-editing/_static/create-a-link-01.jpeg b/docs/content-editing/_static/create-a-link-01.jpeg
diff --git a/docs/content-editing/_static/create-a-link-02.jpeg b/docs/content-editing/_static/create-a-link-02.jpeg
diff --git a/docs/content-editing/_static/create-a-link-03.jpeg b/docs/content-editing/_static/create-a-link-03.jpeg
diff --git a/docs/content-editing/_static/create-a-link-04.jpeg b/docs/content-editing/_static/create-a-link-04.jpeg
diff --git a/docs/content-editing/_static/create-a-link-05.jpeg b/docs/content-editing/_static/create-a-link-05.jpeg
diff --git a/docs/content-editing/_static/create-a-link-06.jpeg b/docs/content-editing/_static/create-a-link-06.jpeg
diff --git a/docs/content-editing/_static/create-a-link-08.jpeg b/docs/content-editing/_static/create-a-link-08.jpeg
diff --git a/docs/content-editing/_static/create-a-link-09.jpeg b/docs/content-editing/_static/create-a-link-09.jpeg
diff --git a/docs/content-editing/_static/create-a-link-10.jpeg b/docs/content-editing/_static/create-a-link-10.jpeg
diff --git a/docs/content-editing/_static/create-a-link-11.jpeg b/docs/content-editing/_static/create-a-link-11.jpeg
diff --git a/docs/content-editing/_static/create-a-link-12.jpeg b/docs/content-editing/_static/create-a-link-12.jpeg
diff --git a/docs/content-editing/_static/create-a-link-13.jpeg b/docs/content-editing/_static/create-a-link-13.jpeg
diff --git a/docs/content-editing/_static/create-a-link-14.jpeg b/docs/content-editing/_static/create-a-link-14.jpeg
diff --git a/docs/content-editing/create-a-link.md b/docs/content-editing/create-a-link.md
@@ -0,0 +1,168 @@
+---
+myst:
+  html_meta:
+    "description": "Create a Link"
+    "property=og:description": "Create a Link"
+    "property=og:title": "Create a Link"
+    "keywords": "Plone, Create, Link, Text"
+---
+
+# Create a Link
+
+We create a link from text inside a block.
+
+First we show how to link to an external web address.
+
+Then we show how to link to another item in the site. 
+
+## Create a Link to an External Web Address
+
+1. To turn block text into a link, you must be editing the page.
+
+    In this example, we want to make the word "Plone" into a link to the web address `https://plone.org`
+
+   ````{card}
+   ```{image} _static/create-a-link-01.jpeg
+   :alt: Select the text that will be the link
+   :target: _static/create-a-link-01.jpeg
+   ```
+   +++
+   _Select the text that will be the link_
+   ````
+
+2. Highlight the word "Plone" then click the {guilabel}`Link` button in the formatting toolbar that appears.
+
+   ````{card}
+   ```{image} _static/create-a-link-02.jpeg
+   :alt: Click the Link button
+   :target: _static/create-a-link-02.jpeg
+   ```
+   +++
+   _Click the Link button_
+   ````
+
+3. Click in the web address field and type {kbd}`https://plone.org`
+
+   ````{card}
+   ```{image} _static/create-a-link-03.jpeg
+   :alt: Type or paste the web address in this field
+   :target: _static/create-a-link-03.jpeg
+   ```
+   +++
+   _Type or paste the web address in this field_
+   ````
+
+4. Click the right arrow button to apply the web address.
+
+   ````{card}
+   ```{image} _static/create-a-link-04.jpeg
+   :alt: Click the right arrow button
+   :target: _static/create-a-link-04.jpeg
+   ```
+   +++
+   _Click the right arrow button_
+   ````
+
+5. The word "Plone" now appears as a link: underlined, with a small icon showing that the link will open in a new browser window or tab.
+
+   ````{card}
+   ```{image} _static/create-a-link-05.jpeg
+   :alt: The selected text has become a link
+   :target: _static/create-a-link-05.jpeg
+   ```
+   +++
+   _The selected text has become a link_
+   ````
+
+## Edit or Remove a Link
+
+1. To edit or remove a link, you must first place the cursor within the link text or select the link text.
+
+    Then click the {guilabel}`Link` button in the formatting toolbar that appears.
+
+   ````{card}
+   ```{image} _static/create-a-link-06.jpeg
+   :alt: Click the Link button to change or remove an existing link
+   :target: _static/create-a-link-06.jpeg
+   ```
+   +++
+   _Click the Link button to change or remove an existing link_
+   ````
+
+2. To completely remove the existing web address, click the {guilabel}`X` button.
+
+   ````{card}
+   ```{image} _static/create-a-link-08.jpeg
+   :alt: Click the X to delete the web address
+   :target: _static/create-a-link-08.jpeg
+   ```
+   +++
+   _Click the X to delete the web address_
+   ````
+## Create a Link to an Item on the Site
+
+1. To link to an item on the site, instead of to an external web address, click the Navigate button.
+
+   ````{card}
+   ```{image} _static/create-a-link-09.jpeg
+   :alt: Click the Navigate button
+   :target: _static/create-a-link-09.jpeg
+   ```
+   +++
+   _Click the Navigate button_
+   ````
+
+2. In this example, we click the {guilabel}`greater than` button to navigate into the "Content Types" page.
+
+   ````{card}
+   ```{image} _static/create-a-link-10.jpeg
+   :alt: Click the greater than icon to navigate into the item
+   :target: _static/create-a-link-10.jpeg
+   ```
+   +++
+   _Click the greater than icon to navigate into the item_
+   ````
+
+3. Click the icon to the left of the item you that should be the link target.
+
+   ````{card}
+   ```{image} _static/create-a-link-11.jpeg
+   :alt: Click the icon to the left of the item
+   :target: _static/create-a-link-11.jpeg
+   ```
+   +++
+   _Click the icon to the left of the item_
+   ````
+
+4. Click the {guilabel}`right arrow` button to save the link target.
+
+   ````{card}
+   ```{image} _static/create-a-link-12.jpeg
+   :alt: Click the right arrow button
+   :target: _static/create-a-link-12.jpeg
+   ```
+   +++
+   _Click the right arrow button_
+   ````
+
+5. The path to the link target is shown in the web address field.
+
+   ````{card}
+   ```{image} _static/create-a-link-13.jpeg
+   :alt: The path to the link target
+   :target: _static/create-a-link-13.jpeg
+   ```
+   +++
+   _The path to the link target_
+   ````
+
+6. If you'd like the link target to send an email message, in the web address field type the prefix {kbd}`mailto:` followed by the destination email address, e.g., {kbd}`[email protected]`, then click the right arrow button.
+
+   ````{card}
+   ```{image} _static/create-a-link-14.jpeg
+   :alt: Click the right arrow button to save the link address
+   :target: _static/create-a-link-14.jpeg
+   ```
+   +++
+   _Click the right arrow button to save the link address_
+   ````
diff --git a/docs/content-editing/index.md b/docs/content-editing/index.md
@@ -55,6 +55,7 @@ logging-in-and-out
 content-creation-to-publication
 pages
 format-block-text
+create-a-link
 use-pages-to-organize-content
 add-a-file
 add-a-link