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 oEmbed standard or manually set embed codes.

In this article:

  1. What is a Media & Apps Section section?
  2. Adding a Media & Apps Section section 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 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 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 Manage 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 Manage embed section (1) button to open the Testimonial List editing panel.
  • Choose the Style (2) tab.
  • Change the Style for the section elements and Save (3) your changes.

Style Options

You will have multiple style options for the section: 

Items 

  1. Specify the Space between rows of the list items.
  2. Align the content horizontally or vertically in the List items. You can set them to be left, right, center, or top, center, bottom, aligned.
  3. Choose Embed Crop.  You can set it as 16:9, 3:2 horizontal, 1:1 square, or 2:1 horizontal.

Size & Space 

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

Text Style

  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.

Cards 

  1. See how to manage cards.

Shadow 

  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.
  1. See how to manage the styling of buttons & links.
  2. Save the changes.

 


Can't find what you're looking for?

Get in touch with a Pixpa Expert.