Skip to main content

How to Create Flipboard & Google News Button Blocks at the Top of Content

Two buttons above the first paragraph of every post, linking readers to your Flipboard magazine and your Google News page. You build them once as a Ruby Template, then drop that template into the Single Content - Top Area widget area.

Flipboard and Google News buttons, outlined in orange, sitting side by side above the first paragraph of a post on the Foxiz SmartStats demo

Nothing extra to install or create:

  • Icon Box is one of Elementor's own free widgets.
  • Single Content - Top Area is a widget area Foxiz registers for you, so it is already waiting on the widgets screen.

To get started, please follow the steps below:​

  1. Go to Ruby Templates > All Templates and click Add New Template beside the heading.

    The Ruby Templates screen, with the Add New Template button beside the heading

  2. Give the template a title, such as "News Buttons", and click Edit with Elementor.

  3. In the Elementor panel, search for Icon Box and drag it onto the page. Drag a second one next to it for the other button.

    The Elementor Elements panel with "Icon Box" typed into the search box, returning the single Icon Box widget

  4. To put the two buttons side by side, click the container that holds them, open its Layout tab and set Direction to Row - horizontal.

  5. Set up each Icon Box on its Content tab:

    • Icon: pick Upload SVG to use the Flipboard or Google News logo, or pick an icon from Icon Library. Elementor refuses SVG files with "This file is not allowed for security reasons." until Enable Unfiltered File Uploads, on the Advanced tab of Elementor > Settings, is set to Enable; it is Disable by default.
    • Title: the button text, such as "Flipboard" or "Google News".
    • Description: clear it if you want a plain button.
    • Link: the address of your Flipboard magazine or your Google News publication page.

    The Content tab of an Icon Box, with Icon, View, Title set to Google News, Description, Link and Title HTML Tag

  6. For a hover effect, open the Advanced tab, go to Background, select the Hover tab and pick a color. For a moving icon, use Hover Animation on the Style tab, under Icon.

    The Background section on the Icon Box Advanced tab with the Hover tab selected, showing Background Type and Color

  7. Publish the template, then go to Appearance > Widgets. You get the classic widgets screen because Foxiz turns Widget Block Editor off by default, in Theme Options > Sidebars. If someone has turned it on, the screen is the block editor instead and you add the widget as a block.

  8. Find the Foxiz - Ruby Template widget and add it to Single Content - Top Area.

  9. In the widget's Select a Template list, pick your template and click Save. The buttons now show at the top of the content on every post.

    The Single Content - Top Area widget zone holding a Foxiz - Ruby Template widget with Docs News Buttons picked in Select a Template

Want the buttons under the article instead? Use Single Content - Bottom Area, the twin at the other end of the content.

Related Articles