{"id":1509,"date":"2023-11-08T15:42:50","date_gmt":"2023-11-08T20:42:50","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?page_id=1509"},"modified":"2024-09-18T20:31:26","modified_gmt":"2024-09-19T00:31:26","slug":"button","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/mastery\/module-2-design-block-mastery\/button\/","title":{"rendered":"Buttons"},"content":{"rendered":"\n
\n
\n\n
\n
\n
\n

\n Buttons\n <\/h1>\n \n \n \n\n\n

Module 2.1 \u2013 Mastery: Design Blocks: Buttons<\/p>\n\n\n\n

\n
Examples: Buttons<\/a><\/div>\n<\/div>\n\n\n\n <\/header>\n\n <\/div>\n\n <\/div>\n\n <\/div>\n<\/section>\n\n\n\n\n
\n

\n Table of Contents\n <\/h2>\n
\n
\n \n
\n
\n \n 1.\n <\/span>\n\n \n Step-by-Step\n <\/a>\n <\/div>\n\n <\/div>\n \n
\n
\n \n 2.\n <\/span>\n\n \n Video Tutorial\n <\/a>\n <\/div>\n\n <\/div>\n \n
\n
\n \n 3.\n <\/span>\n\n \n Try it Out\n <\/a>\n <\/div>\n\n <\/div>\n <\/div>\n\n <\/div>\n<\/div>\n\n\n\n

The “Buttons” block allows editors to add a link to their content using a button. This catches the attention of the website visitor, calling them to engage with the content. This is referred to as a call to action (CTA).<\/p>\n\n\n\n

You have seen examples of Button blocks all over our training site. These include the dark gray “Examples” buttons and the red “Next” buttons are seen throughout our training modules.<\/p>\n\n\n\n

Step-by-Step<\/h2>\n\n\n\n

1.<\/strong> Add the Buttons block using the block menu.<\/a><\/p>\n\n\n\n

\"Add<\/figure>\n\n\n\n

2.<\/strong> Configure your buttons by clicking inside the button area to:<\/p>\n\n\n\n

    \n
  1. Add text<\/li>\n\n\n\n
  2. Align the button<\/li>\n\n\n\n
  3. Add a hyperlink<\/li>\n<\/ol>\n\n\n\n
    \"Configure<\/figure>\n\n\n\n

    3.<\/strong> In the block options at the right, configure:<\/p>\n\n\n\n

    Styles:<\/em><\/strong> button colour – red (default) or light grey

    <\/p>\n\n\n\n

    \"Button<\/figure>\n\n\n\n

    Button width<\/em><\/strong>: 25% – 100%<\/p>\n\n\n\n

    \"Button<\/figure>\n\n\n\n

    Video Tutorial<\/h2>\n\n\n\n