EN
Searching...

Embed Media & Apps Section

Use the Media & Apps Section section to add external content to your site like Pinterest board, Youtube, Tumblr, Spotify, Vimeo, and more.

Before you begin
Embed blocks pull content from services that use the Embed standard or manually set embed codes.

In this article:

  1. What is a Media & Apps Section?
  2. Adding Media & Apps Section to the page
  3. Add and edit list items
  4. Sequencing list items
  5. Deleting list items
  6. Changing section layout
  7. Style options

1. The Media & Apps Section

  • You can easily include a Media & Apps Section on your website where you can showcase Pinterest board, Youtube, Tumblr, Issuu, Spotify, SlideShare, Wlista, Vimeo, Soundcloud, Dribble, Facebook, Bandcamp, Flickr, Instagram posts, Giphy, Twitch, and any custom embedded code.

2. Add Media & Apps Section

  • To add a section, you need to add a page to your website first.
  • On your page, click on the blue + icon to add a New Section to your page.
  • You will now see the section categories on the left side.
  • Scroll down and choose the Media & Apps Section section (1) option where you can choose from the different options.

Choose any section layout (2) and click on it to add it to your page.

3. Add and Edit List Items

Add List Item

Once you have added the section:

  • Click on the Manage Embed section (1) button to open the List Item Panel.

  • Click on the Add Item (2) button to add a new list item.

Edit List Item

  • It will open the List item editing options.
  • Add an URL (1) or add an embed code (2) for the List Item.
  • In case, you select add link option then you can add your link here(3), title(4), Subtitle (5), Description 6), and add type of Link (7) to the list item. You can add a Button/Image link/Social Icon/Text Link. Learn more.
  • In case, you select add embed code option then you can add your embedded code here(3), title(4), Subtitle (5), Description 6), and add a type of Link (7) to the list item.

4. Sequence List Items

  • You can easily drag and drop the list items to change the sequence.

5. Delete a List Item

Once you have added a list item, you can edit the same and also delete it.

  • Click on the Delete icon next to the embed list item.
  • Click on the Delete button in the confirmation popup.
  • Save your changes.

6. Section Layout

  • Click on the Edit Embed Section (1) button to open the List editing panel.

  • Choose the Layout (2) tab.
  • Select the Layout for your section and save your changes (3).

7. Style your Section

  • Click on the Edit Embed Section (1) button to open the editing panel.

  • Choose the Style (2) tab.
  • Change the Style for the section elements and Save (3) your changes.

You will have multiple style options for the section: 

  1. Items Options
  2. Text Size Options
  3. Spacing Options
  4. Section Headline
  5. Embed Crop
  6. Cards Options 
  7. Shadow Options
  8. Buttons & Links

Items Options

  1. Choose to Show Items in rows and columns or carousel 
    • If you have chosen the rows and columns option, the list items will be arranged in rows and columns. In this case, you need to specify the number of rows and columns.
    • If you have chosen the carousel option, the list items will be presented as a slideshow.
  2. Set the Number of Columns for the Embed list. You can choose from 1 to 10 columns.
  3. Specify the Space Between Columns of the list items.
  4. Specify the Space Between Rows of the list items.
  5. Choose the Content Order i.e., if the embedded part of the list items to be displayed first or the associated text.
  6. Align the Content Horizontally in the Image List. You can set them to be left, right or center aligned.

Text Size Options

  1. Click on the Change Text Style button to visit the Design section and manage your font sizes and styles.
  2. Set the Title font style for the list items.
  3. Set the Subtitle font style for the list items.
  4. Set the default Description font style for the list items.

Spacing Options

  1. Specify the Embed Width for list items (in %).
  2. Specify the Content Width for the list items (in %).
  3. Specify the Space Below Section Headline (in px).
  4. Specify the Space Below the Embedded portion (in %).
  5. Specify the Space below the titles of the list items (in %).
  6. Specify the Space Below Subtitle of the list items (in %).

Section Headline

  1. Horizontally Align the section headline text. You can set it to Left, Center, and Right.
  2. Enable/Disable the Divider between the section headline and the section content.
  3. Set the thickness of divider (in px).
  4. Specify the Divider Color from color picker.
  5. Choose a preferred Divider Style.

Embed Crop

  • Choose Embed Crop. You can set it as 1:1 Square, 2:1 Horizontal, 3:2 Horizontal, 4:3, 3:4, 16:9, 2.4:1 and Orignal Embed crop.

Cards Options

Shadow Options

  1. Display – Choose to show the shadow behind the list items always or on hover only.
  2. Style – Choose from existing presets or create a custom shadow.
    In case you have chosen the Custom option, then visit this Box Shadow Generator to create a custom shadow. Finally, copy and paste the box shadow CSS.
  3. In case you have chosen the presets option, then Choose Shadow Styles from the dropdown.

Buttons & Links

  1. See how to manage the styling of buttons & links.
  2. Save the changes.

Tagged:

Can't find what you're looking for?

Get in touch with a Pixpa Expert.

Contact Us