久久精品国产男包,国产一区二区在免费观看

shopify商店Debut 分區(qū)自定義幻燈片步驟

shopify新聞

2022-03-28

775

您可以將圖片的幻燈片添加到您的主頁。在幻燈片分區(qū)中，您可以設(shè)置幻燈片的高度、添加文本和按鈕，以及選擇是否自動播放幻燈片。

幻燈片

您可以將圖片的幻燈片添加到您的主頁。在幻燈片分區(qū)中，您可以設(shè)置幻燈片的高度、添加文本和按鈕，以及選擇是否自動播放幻燈片。

幻燈片分區(qū)包括以下設(shè)置：

圖片幻燈片 - 選擇要包含在幻燈片中的圖片。您可以、使用先前上傳的圖片或從 Burst 中選擇免費(fèi)的庫存圖片。您可以設(shè)置每張幻燈片的以下設(shè)置：

圖片位置 - 在幻燈片框架中選擇圖片的對齊方式。您可以通過下面的指南詳細(xì)了解圖片位置。
標(biāo)題 - 添加與圖片配對的主要文本。
子標(biāo)題 - 添加與圖片配對的輔助文本。此文本顯示在標(biāo)題文本下方。
按鈕標(biāo)簽 - 添加您希望在按鈕上顯示的文本。
按鈕鏈接 - 設(shè)置您希望按鈕鏈接到的 URL 或頁面。粘貼 URL 或從菜單中選擇一個頁面。如果您不想在分區(qū)中包含按鈕，請將此字段留空。

幻燈片高度 - 設(shè)置幻燈片的高度。詳細(xì)了解幻燈片高度將對幻燈片產(chǎn)生怎樣的影響。
文本大小 - 在幻燈片上設(shè)定標(biāo)題的大小。
文本對齊方式 - 選擇幻燈片上文本的位置。
顯示疊加 - 在圖片與放置在圖片上的任何文本之間添加一層顏色。疊加有助于提高顏色對比度和文本可讀性。您可以在顏色設(shè)置中設(shè)置疊加的顏色和不透明度。
自動循環(huán)播放幻燈片 - 將幻燈片設(shè)置為自動播放。
幻燈片更改時間間隔 - 選擇更改幻燈片的頻率。

要了解幻燈片圖片裁剪和推薦圖片的信息，請參閱幻燈片指南。

在主頁中添加幻燈片

PC：

在后臺中，轉(zhuǎn)到在線商店 > 模板。
點(diǎn)擊 的分區(qū) 旁邊的自定義。

點(diǎn)擊添加分區(qū)。
點(diǎn)擊幻燈片，然后點(diǎn)擊選擇。
若要添加圖片幻燈片，請執(zhí)行以下步驟：

在內(nèi)容區(qū)域中，點(diǎn)擊添加圖片幻燈片。
在圖片下，點(diǎn)擊選擇圖片。若要從計(jì)算機(jī)上傳圖片，請點(diǎn)擊上傳。若要使用 Burst 中的免費(fèi)圖庫圖片，請點(diǎn)擊免費(fèi)圖片。
若要選擇圖片在幻燈片中的對齊方式，請?jiān)?nbsp;Image position（圖片位置）下拉菜單中選擇一個位置。您可以在以下指導(dǎo)中的圖片位置中了解詳細(xì)信息。
若要向圖片幻燈片添加文本，請?jiān)?strong>標(biāo)題字段、副標(biāo)題字段或這兩個字段中輸入文本。
通過在按鈕標(biāo)簽字段中輸入文本，將按鈕添加到圖片中。在按鈕鏈接字段中，為此按鈕選擇要鏈接到的您的在線商店的部分：

使用設(shè)置來自定義幻燈片分區(qū)。
點(diǎn)擊保存。

蘋果系統(tǒng)：

在 Shopify 應(yīng)用中，輕觸商店。
在銷售渠道部分，輕觸在線商店。
輕觸 Manage themes（管理模板）。
在 的分區(qū) 旁邊，輕觸自定義。
輕觸編輯。

點(diǎn)擊添加分區(qū)。
點(diǎn)擊幻燈片，然后點(diǎn)擊選擇。
若要添加圖片幻燈片，請執(zhí)行以下步驟：

在內(nèi)容區(qū)域中，點(diǎn)擊添加圖片幻燈片。
在圖片下，點(diǎn)擊選擇圖片。若要從計(jì)算機(jī)上傳圖片，請點(diǎn)擊上傳。若要使用 Burst 中的免費(fèi)圖庫圖片，請點(diǎn)擊免費(fèi)圖片。
若要選擇圖片在幻燈片中的對齊方式，請?jiān)?nbsp;Image position（圖片位置）下拉菜單中選擇一個位置。您可以在以下指導(dǎo)中的圖片位置中了解詳細(xì)信息。
若要向圖片幻燈片添加文本，請?jiān)?strong>標(biāo)題字段、副標(biāo)題字段或這兩個字段中輸入文本。
通過在按鈕字段中輸入文本，將按鈕添加到圖片中。在按鈕鏈接字段中，為此按鈕選擇要鏈接到的您的在線商店的部分：

使用設(shè)置來自定義幻燈片分區(qū)。
點(diǎn)擊保存。

安卓系統(tǒng)：

在 Shopify 應(yīng)用中，輕觸商店。
在銷售渠道部分，輕觸在線商店。
輕觸 Manage themes（管理模板）。
在 的分區(qū) 旁邊，輕觸自定義。
輕觸編輯。

點(diǎn)擊添加分區(qū)。
點(diǎn)擊幻燈片，然后點(diǎn)擊選擇。
若要添加圖片幻燈片，請執(zhí)行以下步驟：

在內(nèi)容區(qū)域中，點(diǎn)擊添加圖片幻燈片。
在圖片下，點(diǎn)擊選擇圖片。若要從計(jì)算機(jī)上傳圖片，請點(diǎn)擊上傳。若要使用 Burst 中的免費(fèi)圖庫圖片，請點(diǎn)擊免費(fèi)圖片。
若要選擇圖片在幻燈片中的對齊方式，請?jiān)?nbsp;Image position（圖片位置）下拉菜單中選擇一個位置。您可以在以下指導(dǎo)中的圖片位置中了解詳細(xì)信息。
若要向圖片幻燈片添加文本，請?jiān)?strong>標(biāo)題字段、副標(biāo)題字段或這兩個字段中輸入文本。
通過在按鈕標(biāo)簽字段中輸入文本，將按鈕添加到圖片中。在按鈕鏈接字段中，為此按鈕選擇要鏈接到的您的在線商店的部分：

使用設(shè)置來自定義幻燈片分區(qū)。
點(diǎn)擊保存。

幻燈片指導(dǎo)

您可以使用下面的設(shè)置和圖片建議來控制幻燈片在您在線商店中的外觀。幻燈片的顯示方式取決于以下因素：

您的圖片尺寸
您的圖片位置設(shè)置
幻燈片高度設(shè)置
圖片的寬高比

由于屏幕尺寸和形狀有差異，您的幻燈片在移動設(shè)備和桌面設(shè)備上可能會有所不同。

圖片尺寸建議

幻燈片圖片的建議尺寸取決于您的幻燈片高度設(shè)置。請遵循以下準(zhǔn)則：

若要查看或更改幻燈片高度設(shè)置，請參閱創(chuàng)建幻燈片說明中的步驟 5。

圖片裁剪

您可以采取步驟來控制圖片的裁剪方式或完全避免裁剪圖片。

控制圖片的裁剪方式

在以下情況下，您可看到部分屏幕尺寸上出現(xiàn)圖片裁剪：

圖片的寬高比不同。
幻燈片高度可設(shè)置為小、中或大。
您的幻燈片高度設(shè)置為適應(yīng)第一張圖片，并且您的圖片高于設(shè)備屏幕或窗口的高度。

您可以使用圖片位置設(shè)置來控制圖片的裁剪方式。

對于每張圖片，您可以選擇裁剪時要保留的圖片部分。在以下示例中，您可以看到如何針對某些屏幕尺寸裁剪同一圖片。左側(cè)的幻燈片將圖片位置設(shè)置為正中。右側(cè)的幻燈片將圖片位置設(shè)置為左上角。

若要查看或更改您的圖片位置設(shè)置，請參閱創(chuàng)建幻燈片說明中的步驟 10。

避免圖片裁剪

若要避免裁剪幻燈片圖片，請嘗試以下步驟：

將幻燈片高度設(shè)置為適應(yīng)第一張圖片。
使用寬度為高度兩倍的圖片。這些圖片的寬高比為 2:1。建議的尺寸為 1200 px × 600 px。
確保所有幻燈片的寬高比都相同。相對于幻燈片的尺寸（以像素為單位），幻燈片的比例要更加重要。

在以下示例中，桌面和移動設(shè)備上顯示了一張比例為 2:1 的幻燈片圖片：

幻燈片高度

幻燈片分區(qū)的寬度始終為瀏覽器窗口的 100%?；脽羝母叨扰c寬度是相對的。由于屏幕大小存在差異，因此，幻燈片的寬度和高度因不同的設(shè)備而異?；脽羝母叨纫矔艿交脽羝叨仍O(shè)置的影響。

您可以使用幻燈片高度設(shè)置 Adapt to first image（適應(yīng)第一張圖片），基于第一張圖片的高度設(shè)置幻燈片的高度。當(dāng)所有圖片尺寸相同或?qū)捀弑认嗤瑫r，此設(shè)置效果最佳。如果您的圖片尺寸不同或比例不同，則可以更改幻燈片的順序，查看它們在不同高度的顯示效果。

在以下示例中，后弦放置了一個最短的幻燈片：

在下一個示例中，首先放置了一個較高的幻燈片：

如果您改為使用小、中或大高度設(shè)置，則請參閱幻燈片的圖片尺寸建議。

圖片比

如果想要避免幻燈片中出現(xiàn)圖片裁剪，我們建議您的圖片采用 2:1 的寬高比

如果您不擔(dān)心圖片會在桌面顯示器上被裁剪，并且想要使圖片在移動設(shè)備上的顯示效果良好，請使用方形的圖片或高度大于寬度的圖片。以下示例幻燈片顯示了一張方形圖片，寬高比為 1:1。

下一個示例幻燈片顯示了寬高比為 2:3 的肖像圖片。

Slideshow
You can add a slideshow of images to your home page. In the slideshow section, you can set the height of the slides, add text and buttons, and choose whether your slideshow plays automatically.
The Slideshow section includes the following settings:
Image slide - Choose an image to include in the slideshow. You can upload an image, use a previously-uploaded image, or select a free stock image from Burst. You can set the following settings for each slide:
Image position - Choose the alignment of the image in the slideshow frame. You can learn more about image position in the guidelines below.
Heading - Add the primary text to pair with the image.
Subheading - Add the secondary text to pair with the image. This text appears below the heading text.
Button label - Add the text that you want to appear on the button.
Button link - Set the URL or page that you want the button to link to. Paste in the URL or select a page from the menu. If you do not want to include a button in the section, then leave this field empty.
Slide height - Set the height of the slideshow. Learn more about how slide height affects your slideshow.
Text size - Set the size of your headings on the slideshow.
Text alignment - Choose the position of the text on your slides.
Show overlay - Add a layer of color between an image and any text that is placed over the image. Overlays can help with color contrast and readability. You can set the color and opacity of the overlay in the color settings.
Auto-rotate slides - Set the slideshow to play automatically.
Change slides every - Choose how often to change slides.
To learn about slideshow image cropping and recommended image sizes, refer to the slideshow guidelines.
Add a slideshow to your home page
PC：
From your Shopify admin, go to Online Store > Themes.
Next to Debut, click Customize.
Click Add section.
Click Slideshow, and then click Select.
To add an image slide, do the following steps:
In the Content area, click Add image slide.
Under Image, click Select image. To upload an image from your computer, click Upload. To use a free stock image from Burst, click Free images.
To choose how you want to align the image in the slideshow, select a position from the Image position drop-down menu. You can learn more about image position in the guidelines below.
To add text to the image slide, enter text in the Heading field, the Subheading field, or both.
Add a button to your image slide by entering text in the Button label field. Select a part of your online store for the button to link to in the Button link field.
Use the settings to customize your slideshow section.
Click Save.
iPhone：
From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Next to Debut, tap Customize.
Tap Edit.
Click Add section.
Click Slideshow, and then click Select.
To add an image slide, do the following steps:
In the Content area, click Add image slide.
Under Image, click Select image. To upload an image from your computer, click Upload. To use a free stock image from Burst, click Free images.
To choose how you want to align the image in the slideshow, select a position from the Image position drop-down menu. You can learn more about image position in the guidelines below.
To add text to the image slide, enter text in the Heading field, the Subheading field, or both.
Add a button to your image slide by entering text in the Button label field. Select a part of your online store for the button to link to in the Button link field.
Use the settings to customize your slideshow section.
Click Save.
Android：
From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Next to Debut, tap Customize.
Tap Edit.
Click Add section.
Click Slideshow, and then click Select.
To add an image slide, do the following steps:
In the Content area, click Add image slide.
Under Image, click Select image. To upload an image from your computer, click Upload. To use a free stock image from Burst, click Free images.
To choose how you want to align the image in the slideshow, select a position from the Image position drop-down menu. You can learn more about image position in the guidelines below.
To add text to the image slide, enter text in the Heading field, the Subheading field, or both.
Add a button to your image slide by entering text in the Button label field. Select a part of your online store for the button to link to in the Button link field.
Use the settings to customize your slideshow section.
Click Save.
Slideshow guidelines
You can use the settings and image recommendations below to control the way that your slideshow looks on your online store. The way that your slides appear is determined by the following factors:
The dimensions of your images
Your image position settings
Your slide height settings
The width-to-height ratio of your images
Because of differences in screen size and shape, your slides might look different on mobile and desktop devices.
Image size recommendations
The recommended dimensions for slideshow images depend on your slide height settings. Use the following guidelines:
To view or change your slide height settings, see step 5 of the instructions to create a slideshow.
Image cropping
You can take steps to control how your images are cropped or to avoid image cropping altogether.
CONTROL HOW YOUR IMAGES ARE CROPPED
You can expect image cropping on some screen sizes in the following situations:
Your images don't have the same width-to-height ratio.
Your slide height is set to Small, Medium, or Large.
Your slide height is set to Adapt to first image and your images are taller than the device screen or browser window.
You can control how your images are cropped by using the Image position setting.
For each image, you can choose which part you want to keep in view when cropping occurs. In the following example, you can see how the same image might be cropped for some screen sizes. The slide on the left has the image position set to Middle center. The slide on the right has the image position set to Top left
To view or change your image position settings, refer to step 10 of the instructions to create a slideshow.
AVOID IMAGE CROPPING
To avoid image cropping in your slideshow, try the following steps:
Set your slide height to Adapt to first image.
Use images that are twice as wide as they are tall. Such images have a width-to-height ratio of 2:1. The recommended dimensions are 1200 px by 600 px.
Make sure that all of your slides have the same width-to-height ratio. The ratio of your slides is more important than their dimensions in pixels.
In the following example, a slideshow image with a 2:1 ratio is shown on a desktop and a mobile device:
Slide height
The width of the slideshow section is always 100% of the browser window. The height of your slides is relative to the width. Because of differences in screen size, the width and height of your slides varies for different devices. The height of your slides is also influenced by your slide height settings.
You can use the Adapt to first image slide height setting to base the height of your slideshow on the height of your first image. This setting works best when all your images are the same size, or have the same width-to-height ratio. If your images are different sizes or have different ratios, then you can change the order of your slides to see how they look at different heights.
In the following example, the shortest slide is positioned first:
In the next example, a taller slide is positioned first:
If you use the Small, Medium, or Large height settings instead, then refer to the image size recommendations for your slides.
Image ratios
If you want to avoid image cropping in your slideshow, then the recommended width-to-height ratio for your images is 2:1.
If you aren't concerned about cropping on desktop displays and want to make an impact on mobile devices, then use images that are square, or images that are taller than they are wide. The following example slide shows a square image, which has a 1:1 width-to-height ratio.
The next example slide shows a portrait image with a 2:3 width-to-height ratio.